琴線に触れる

2012/03/20 : もっといい方法をみつけました。
renderer = new THREE.CanvasRenderer( );
THREE.SubtractiveBlending = 2;
CanvasRenderer を使う時は、THREE.SubtractiveBlending を 2 にしておけば
Three.js を変更しなくても全てのブラウザでうまく動作します。
この設定にすると、lighter を使う事になって、colorDiffuse が全て 0 で都合よく
表示されます。本来、darker が動けば、colorDiffuse が全て 0 で 真っ黒になり、
WebGLRenderer と同じ状態になり、light が正しく反映されるようなのですが、darker
が使えるのが WebKit だけのようです。


Three.js は、WebGL でも描画できますが、Windows8 の Metro でビルドしたいので
この処理が必要になり、ソースコード内を調査しました。修正前で正しく動いていた
のは、Google Chrome と Safari だけでしたが、修正後は Firefox、IE9、Opera で
正しく描画されます。
※ レスポンス的に非力な PCでも 使えるのは Google Chrome、Firefox、IE9(ぎりぎり) です
※ Opera と Safari はいろいろな意味でおすすめできない状態です


簡単な変更で正しく描画されるようになります

エディタで開いて一ヶ所修正します。

バグの修正前



バグの修正後



バグの修正位置



バグの修正内容



開発元の mrdoob / three.js : Issue で投稿もして来ました。

https://github.com/mrdoob/three.js/issues/1443

詳しく確認していませんが、darker や lighter は light を使った時に意味があるような気がします。
Google Chrome だけで動作するのでしょうが、他のブラウザでは根本的にテクスチャが貼られません。
開発中なので、いちばんいい環境で仕様が決定しているのだと思います。

あるいは、WebGL を使って欲しいという事かもですね。でも、IEは 10 になって
も( プレビュー ) WebGL 動かないし、試して無いけれど WebGL は VS11(Metro) で
ビルドしてもダメだろうし。

ちなみに、Canvas のレンダリング処理は VS11 で動いたのは確認済みです。


関連する記事

Three.js と言います。JavaScript だけでこんな事ができる時代になりました( IE8 はダメです )
Three.js で使う為に、メタセコイアのデータを変換して WEB で表示する

他のミニモンスターでカメラ位置テスト


CanvasRenderer

かぼちゃミニモンスターでWebGLテスト

WebGLRenderer



素材は 光陰像型さん のものを利用しています