JavaScript+Canvasでもうちょっと3Dっぽく

前回の JavaScript+Canvasによるリアルタイム3Dアニメーション を拡張して、
面を色塗りしてみるようにした習作。⇒デモを見る


Canvas の fillStyle を利用しています。
ただし、まだまだ制限たくさん。
法線ベクトルの計算をしていないので、陰面処理もやってません。
とりあえず、透き通ったように見えるようにした。
また、光源の処理もしていないので、とりあえず、
フォグがかかったように奥が薄くなるようにした。
適当な割りには、一応、ワイアフレームよりも立体的に見えるようになった。

今回から、excanvas.js(IE)だと正しく動かなくなった。
ベジェ曲線を描きながら塗りつぶすことはできるが、
直線だと塗りつぶしてくれない?詳しい原因は検証していない。

これを、ライブラリとして完成させるには、
ワイヤフレームモードと、ポリゴン塗りつぶしモードを
選べるようにして、名前も変えなきゃいけないな。
とりあえず、今週末のデモには事足りるので、このままで行く。
 
 


[追記]この3Dエンジンを利用したデモの記事を Wiiリモコン×7台対応の『リアルデバイスWebサービス』 に書きました。

この記事へのコメント

この記事へのトラックバック