HTML5 canvas - 手抜きワイヤーフレーム表示

公開:2011-01-24 08:58
更新:2020-02-15 04:36
カテゴリ:web,html5,javascript,js

立方体をワイヤーフレームで表示してみた。3D計算はglMatrix.jsを使っているのにも関わらず、超手抜きである。
glMatrix.jsはWebGLとセットとで利用というイメージがあるが、そんなこともなくたんなる行列演算ライブラリとして単独で利用出来る。
33,44の行列に特化しているので計算が高速らしい。

20110123.png

サンプルページへ

次はきちんと計算しようと思っている。

canvasのソフトウェア3Dはもうすでにこんな領域に...

下のサイトはすごい。Javascriptとcanvasだけでリアルタイム環境マッピングをやっている

http://www.zynaps.com/jslab.xml?id=envmap

20110123-01.png

私の環境では40Fps位で動いている