webglで年賀状っぽいものを作ってみた

2011年ってことで、年賀状っぽいwebページを。
このページです。
webglが動くブラウザじゃないと見えません（開発版chromeとか、webkitとか）、データ量が多いのでパワーのあるマシンじゃないと動かないかも。動かなかったらごめんなさい。

雪だるまのつもりなんだけど、色合いがどうも泥だるまのようだ。
手袋はガクガクだし・・・（モデリングをほとんどやった事がないのですよね、実は）。

参考ページ、ツール
・Learning WebGL javascriptの書き方から教えてくれる丁寧なページで、一通り勉強できました。
・Hack The WebGL ためになるコードがあります。かなり参考にさせていただきました。
・特にモデルの作成にBlenderのプラグインを使わせていただきました。
・glmatrix 行列計算用のjavascriptを使わせていただきました。速いらしい。

その他
・背景画像
　canvasタグを2つ使用してスタイルシートを使用して重ねて表示させてます。
　一つのcanvasでwebgl、もう一つのcanvasに画像を書き出してます。
　chromeで試すと、webglを初期化するところで、gl.clearColor(0.0, 0.0, 0.0, 0.0)と設定すると、背景が透過されるらしい。
　ほかに良い方法ありそうな気がするけど。


1/30追記：

Light Ambient Colorのパラメータ値に応じて、背景画像の色も変更できるようにしてみた。
最初、canvasの2Dnコンテキストから一画素ずつ色を変えていこうとしたけど、処理時間がかかるようなので、背景画像の色変更もwebGLのシェーディングを使用した。確かにスピードは速くなったけど、欠点は、テクスチャを使用しているので、画像のサイズが限られしまう、という事。

背景画像をwebGLで変更する部分だけを切り出したものが、
http://www3.ocn.ne.jp/~nnffuyyo/imagerendering/imagetest.html
このページ中のuse Lightingをチェックすると、同じくAmbient Colorのパラメータ値に応じて、画像の色が変わります。画像の縦横サイズが2の指数乗でないと、画像は表示されません。ドラッグアンドドロップインターフェイスがあるので、適当な画像を使用して確認できるかと。