three.jsで遊んでみる(15)

 プログラム,
 公開日:2013年3月15日 / 更新日:2013年12月26日

MMDでサポートされてるけど
まだ対応してなかったスフィアマップをやってみました。

スフィアマップというのは、
テクスチャの貼り方の技法の一つで、
環境マッピングとか呼ばれてます。
擬似的な周囲環境の映り込みを再現する手法で、
金属のような光沢とかを表現できたりします。

環境マッピングの実装方式には、
球状マップ(sphere map)やキューブマップ(cube map)があります。
three.jsのサンプルである
こちらこちらでその結果をみることができます。

three.jsのサンプルで見れたりするくらいなので、
割りとアッサリ導入できると思ってたんですが、
webGLレンダラーではスフィアマップはまだ実装されてませんでした・・・。
canvasレンダラーでは実装されているのですが、
webGLレンダラーではキューブマップのみとなってました。

ということで、
自前で実装することにしました。
どうやればいいかググってみたら、
これ(その1)これ(その2)とかみつかりました。
実現手法は一つでは無いようですね。
どっちがいいんだろ。
2つともやってみることにしました。

なお、
MMDのスフィアマップではマッピング時の演算として
乗算および加算をサポートしています。
今回は乗算のみの対応となっていますが、
fragment shader の最後の乗算を加算にするだけのことですね。たぶん。

GLSLなコードは以下の様な感じになりそうです。

その1)

その2)

つづいて、three.jsを改造します。

three.jsで使われているGLSLなコードをダンプしてみると
こんな感じになっています。
レンダラーやマテリアルのプロパティに応じて、
例えば

#define USE_SKINNING

とかが、
GLSLのソースコードに付加される仕組みになっています。
ただ、現状の実装では
three.jsが認識しているプロパティでないとうまく行きません。
そこで、マテリアルに

material.vertexShaderPrefix
material.fragmentShaderPrefix

というプロパティを追加して対応することにしました、
改造したtheee.jsのコードは以下のようになります。
独自の #define とかをコードの先頭に追加できるようにしてしまうわけです。

さて、
実際にやってみた感じでは、
その1)でも、その2)でもそれなりにイイ感じになったのですが、
MMDのスフィアマップ用に使用しているテクスチャとの相性が良さそうなのは
その1)っぽい気がしましたので、そちらを採用してみました。
ということで、
メタルっぽくなったミクさんはこちらです。

諸般の事情でちょっとローディングに時間がかかりますが、しばらく待ってみてください。なお、ChromeなどのWebGL対応のブラウザで見てください。PCパワーもそれなりに必要となるかもしれません。あまりにも時間がかかり過ぎるようならば、リロードして再度試してみてください。

mytest18

タグ: ,

コメント投稿