canvasでWebGLを使わずに立方体を描く

WebGL2.0を勉強するうちに、3Dグラフィックスに関しての基本知識がなさすぎることを痛感した私は、理解すべくいろいろな書物やWebを読み、陰面処理をされた立方体をcanvasで描いてみることにした。

粗い解像度の立方体がくるくる回るだけのものだが。
以下の処理をJS+canvasだけで行っている。

• 2Dクリッピング付きの三角形ポリゴン描画
• 面法線を使った簡易ライティング
• バックフェース・カリング

参考にしたのは以下のサイトである。

• 三角形の描画
• ゲームつくろー
• 3Dを基礎から勉強する

まだテクスチャーマッピングなどは実装できていない。
というかここまでの知識もまだ6割程度の理解でしかないけどね。。

成果物は以下。

ソースコード：
https://github.com/sfpgmr/www/tree/master/contents/dev/3d/engine/0001

あと30年ほど前に買った、アスキーラーニングシステムの書籍「実習グラフィックス」「応用グラフィックス」もとても役に立った。 買ったときはちんぷんかんぷんだったけれど、今読むと割と理解できた。

上記の本を買った当時は8ビットPCを使用していた。上記の本はPC98を対象としていたけれど、BASICはほぼ互換性があったので移植してみたりしたけど、理屈は理解できなかったんだよなぁ。。今はインターネットでなんでも調べられるからかもしれないね。。内積・外積の公式忘れた！となってもすぐ調べられるからね。