PolyCSS: WebGLなしで3DポリゴンメッシュをDOMに持ち込む
For years, the standard for 3D graphics on the web has been WebGL. While powerful, WebGL operates in its own canvas, creating a "black box" where the browser's DOM is unaware of the individual shapes, textures, and vertices being rendered. To interact with a specific part of a 3D model in WebGL, developers typically have to implement complex raycasting to determine which object the user clicked.
PolyCSS changes this paradigm by treating the 3D scene not as a canvas drawing, but as a collection of real HTML elements. By leveraging CSS matrix3d() transforms, PolyCSS renders polygon meshes directly into the DOM, effectively turning 3D geometry into a set of manipulatable HTML leaves. This approach opens up unique possibilities for accessibility, styling, and interaction that are traditionally difficult in GPU-accelerated canvases.
PolyCSSの仕組み: DOMをレンダラとして
PolyCSSの根幹は、DOM向けの3Dエンジンです。キャンバスは使用せず、代わりに可視な各ポリゴンを葉要素として出力します。パフォーマンスを維持するために、エンジンはポリゴンの特性に基づいて最も効率的なCSSプリミティブをインテリジェントに選択します：
<b>elements: 実体のある矩形やbackground: currentColorを使用した安定した四角形に使用されます。<u>elements:corner-shapeまたはborder-widthフォールバックを介した安定した三角形とベベルコーナーの実体に使用されます。<i>elements: ブラウザがサポートしている場合にborder-shape: polygon(...)を利用した実体のポリゴンに使用されます。<s>elements: テクスチャ付きポリゴンやサポートされていない形状のフォールバックで、background-imageを使用してパックされたテクスチャアトラスのスライスをマッピングします。
matrix3d(...) を使用してこれらのプリミティブを3D空間に配置することで、PolyCSSは要素を標準の文書フロー内に保ちつつ3D効果を実現します。これにより、開発者はスタイリングに標準のCSSを、そして何よりもインタラクションに標準のJavaScriptイベントリスナーを使用できるようになります。
主な機能と能力
PolyCSSは、フルWebGLパイプラインのオーバーヘッドなしに3Dビジュアルを求める開発者向けに、すぐに導入できるソリューションとして設計されています。
幅広いフォーマットサポート
PolyCSSは複数の業界標準フォーマットを解析・レンダリングでき、3Dモデリングソフトウェアからのアセットインポートが容易です：
- OBJ + MTL: マテリアル、テクスチャ（
map_Kd）およびUV座標をサポートします。 - glTF / GLB: 埋め込み画像と
TEXCOORD_0をサポートします。 - MagicaVoxel (.vox): ボクセルデータ用の最適化された高速パスを含みます。
- Primitives: ボックス、平面、リング、球体、トーラス、シリンダー、円錐、そして正多面体の組み込みサポートがあります。
フレームワーク統合
使いやすさを確保するために、PolyCSSはさまざまな環境向けに専用パッケージを提供しています：
- Vanilla JS: カスタム要素と命令的な
createPolySceneAPI を提供します。 - React: 宣言的な3Dワークフローのために
<PolyCamera>、<PolyScene>、<PolyMesh>などのコンポーネントを提供します。 - Vue 3: 同様のコンポーネントベースのアーキテクチャとコンポーザブルを提供します。
スナップショットエクスポート
ライブラリの最も強力な機能の一つは exportPolySceneSnapshot です。この関数はレンダリングされたシーンをクローンし、すべてのCSSと画像アセットをBase64データURIとしてインライン化し、スクリプトを除去します。その結果、PolyCSSランタイムを必要とせずに3Dシーンをレンダリングする単体のHTMLドキュメントが生成され、静的な3Dプレビューの共有に最適です。
トレードオフ: DOM vs. WebGL
PolyCSSのようなツールを導入する際に避けて通れない質問があります: なぜWebGLを使わないのか？
パフォーマンスと品質の観点からは、WebGLが常に優位です。WebGLは何百万ものポリゴンとピクセル単位の深度テストを想定して設計されています。対照的にPolyCSSは、ブラウザが処理できるDOM要素の数やテクスチャアトラスの描画コストに制限されます。しかし、PolyCSSの価値は 開発者体験とインタラクション にあります。
Hacker News のコミュニティメンバーが指摘しているように、主な利点はポリゴン単位の DOM イベントを処理できることです：
"The per-polygon DOM events are what make this more than a trick. Getting click handlers on individual faces in WebGL means raycasting. Here it's just onClick."
これにより、3Dモデルは視覚的なアセットから機能的なUIコンポーネントへと変換されます。3D座標系で交差点を計算する代わりに、ボタンや div と同様に <Poly> 要素に onClick ハンドラを簡単に付与できます。
結論
PolyCSSは、CSS変換と3Dレンダリングの興味深い交差点を示しています。高精細なゲームや複雑なシミュレーションにおいてThree.jsの代替になるわけではありませんが、インタラクティブな3D要素、カスタムスタイリング、そしてモダンなウェブスタックへの容易な統合を必要とする開発者にとって、軽量でDOMネイティブな代替手段を提供します。ボクセルエディタや地形ジェネレータを構築する場合でも、PolyCSSはDOMが限界まで押し上げられたときに3Dジオメトリを十分に扱えることを証明します。