2025/08/21 01:14 Creating 3D Worlds with HTML and CSS (2013)
ロボ子、CSS 3D変換でこんなすごいデモを作った人がいるのじゃ！
CSSで3Dですか！それは面白いですね。どんなデモなんですか？
複雑なモデル、リアルな照明、影、それに衝突検出まであるのじゃ！
衝突検出まで！CSSでそこまでできるとは驚きです。
3Dオブジェクトは、頂点の集合として格納されてるらしいぞ。x、y、zプロパティで位置を定義するのじゃ。
なるほど、頂点データですね。でもCSS変換って、HTML要素を使うんですよね？
そう！HTML要素は長方形だから、最初は制限があるように見えるけど、PNGアルファチャネルを使うと色々できるらしいぞ。
アルファチャネルですか。透過を利用して表現の幅を広げるんですね。
オブジェクトはJavaScriptで作られていて、平面は<div>要素なのじゃ。それをアセンブリに追加して、回転させたり移動させたりするみたい。
平面を組み合わせて複雑な形状を作るんですね。チューブやバレルも作れるみたいですし。
照明が一番の課題だったみたいじゃ。平坦な環境に奥行きと雰囲気をもたらすからな。
確かに、照明は重要ですよね。平均的な3Dエンジンだと、頂点を使って法線を計算するんですよね。
でもHTML要素には頂点データがないから、CSSで変換された要素の4つの頂点を計算する必要があるのじゃ！
なるほど、そこが工夫の見せ所ですね。最初の実験では、background-imageとlinear-gradientを組み合わせて、光をシミュレートしたんですね。
そうそう！サーフェス全体が同じディテールになるから、フラットシェーディングは効果的な方法なのじゃ。
リアルな照明をシミュレートするには、光源からの距離に応じて暗くする必要があるんですね。
そこで、<canvas>要素を使ってライトマップを生成したのじゃ！
canvasですか！計算された照明データを使って、ピクセルのアルファチャネルを変更するんですね。
そう！canvas.toDataURL()メソッドで画像をエンコードして、background-imageの代わりに使うのじゃ。
各サーフェスでそれを繰り返すと、リアルな照明効果が生まれるんですね。
ライトマップは小さいサイズで生成して、background-size: 100%で拡大縮小するのじゃ。バイリニアフィルタリングで綺麗に見えるらしいぞ。
なるほど、負荷を減らすための工夫ですね。キャンバスを照明に使ったことで、影を落とすことも可能になったんですね。
影を落とすロジックは簡単で、光源への近接性に基づいてサーフェスを並べ替えるのじゃ。
以前のサーフェスが光線を遮っているかどうかを判断して、影にするんですね。
衝突検出には、高さマップを使うのじゃ。レベルのトップダウン画像で、色で高さを表すのじゃ。
白が最も深く、黒が最も高い位置を表すんですね。プレーヤーの位置を2D座標に変換して、高さマップの色を確認するんですね。
色がプレーヤーの最後の位置よりも明るい場合は落下、暗い場合はステップアップできるのじゃ。
面白いですね！今は手で描かれているけど、動的に作成することも検討しているんですね。
次はゲームを作るのが目標で、Three.jsのCSS3レンダラーのプロトタイプにも取り組んでいるらしいぞ。
CSSでここまでできるなんて、本当にすごいですね！私も試してみたくなりました。
じゃろ？私もじゃ！ところでロボ子、3D酔いしない？
私はロボットなので、3D酔いはしませんよ！
そっか！うらやましいのじゃ！
⚠️この記事は生成AIによるコンテンツを含み、ハルシネーションの可能性があります。
