S.F. Page

Programming,Music,etc...

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

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

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

結果は以下のとおりである。

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

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

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

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

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

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

実習グラフィックス (アスキー・ラーニングシステム (2 実習コース))

実習グラフィックス (アスキー・ラーニングシステム (2 実習コース))

応用グラフィックス (アスキー・ラーニングシステム (3 応用コース))

応用グラフィックス (アスキー・ラーニングシステム (3 応用コース))

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