JavaScript＋Canvasでもうちょっと3Dっぽく Kawa.netブログ（川崎有亮）/ウェブリブログ

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

<< 作成日時： 2008/04/10 00:53 >>

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

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

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

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

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