Z-Buffer 3D Triangle Renderer

ドラッグして視点を変更


prompt: 3次元空間での3つの3角形をZバッファー法で隠れ面消去するコードをhtmlとJavaScriptでかけ。なお、見る方向も同じくマウスで変更

Zバッファーアルゴリズム:

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