ワイヤーフレームから始める3D

頂点と辺の集合

立方体は8個の頂点 P₀…P₇ と12本の辺で表せます。辺は「どの頂点とどの頂点を結ぶか」というインデックスの組です。

P₆ = (1, 1, 1)
edge = (2, 6)  // P₂ と P₆ を結ぶ

面の色も照明もありません。これがワイヤーフレーム表現です。

回転行列

例としてY軸の周りを角度 θ だけ回すと、座標は次のように変わります。

X = x cosθ + z sinθ
Y = y
Z = −x sinθ + z cosθ

サンプルではY軸回転のあとX軸回転を行い、最後に奥行き方向へ d = 5 を足します。

透視投影

カメラは原点から +Z方向 を見ます。カメラ座標で Z > 0 の点をスクリーンへ写します。

u = W/2 + f · X/Z
v = H/2 − f · Y/Z
f = (H/2)/tan(FOV/2)

W,H はCanvasの幅と高さ、f は画素単位の焦点距離。Zが大きいほど画面上では小さくなります。

平行投影では f/Z の代わりに一定の倍率を使います。上の投影方式を切り替えて違いを比較しましょう。