立体を平面に焼く — 射影のはじめ

CanvasRenderingContext2D は平面しか塗れない。それでも立体は描ける。3D は見せ方で、絵そのものは 2D の点と線と面でしかない。3D の座標を平面の座標へ移す計算を一度通せば、あとはいつもの moveTo / fill で済む。WebGL がハードウェアで自動化しているのは、この移す計算とその後の塗りで、原理は手で書ける。

ここで扱うのは、立体を画面へ焼くいちばん手前の土台だけ。奥行きで縮める割り算、向きを変える回転、遠近をつける透視投影、回る点群まで。点を線で結んで面を塗る先は立体を回すへ、画面の側から光線を飛ばす逆向きはレイキャストとレイマーチングへ続く。