Z-Buffer 3D Triangle Renderer
prompt: 3次元空間での3つの3角形をZバッファー法で隠れ面消去するコードをhtmlとJavaScriptでかけ。なお、見る方向も同じくマウスで変更
Zバッファーアルゴリズム:
各ピクセルに対して、最も視点に近い(Z値が小さい)オブジェクトだけが表示されます。
3つの三角形:
赤い三角形(前面)
緑の三角形(中間)
青い三角形(背面)
マウス操作:
マウスドラッグで3D空間内の視点を変更できます
横方向のドラッグはY軸回りの回転に対応
縦方向のドラッグはX軸回りの回転に対応
実装技術:
重心座標を使用した三角形のラスタライズ
3D座標から2D画面座標への投影計算
ピクセルごとのZ値比較による隠れ面消去
HTMLファイルとして開くと、マウスドラッグで3つの三角形を様々な角度から見ることができます。三角形は重なり合いますが、Zバッファーアルゴリズムによって適切に手前の三角形だけが表示されます。