tara.log

シェーダー備忘録

【Shader Forge】玉虫色シェーダー①

f:id:aitarai:20210402183129g:plain

f:id:aitarai:20210402183140g:plain
ずっと作りたいと思っていた玉虫色表現(構造色)に手を付け始めました。CEDEC2018「モンスターハンターワールド」のシェーダー公演を見て「あ、こういうのも作れるんだ」と思ったことがきっかけです。

光の干渉についてのあれこれ文献を漁ったり、光学の本を買ったり、シェーダーのために調べたことが結構勉強になりました。

原理

構造色の一例として参考にしたシャボン玉が虹色に見える原理は…、
シャボン玉の薄膜に光が反射した際、色の波長にズレが生じて(光の干渉)、膜の厚みによってはさらにズレが広がるので虹色のグラデーションに見える。というものです。反射する時に波長がズレる…というのが構造色の見え方に共通します。

(結局シェーダーは安い計算でそれっぽく見えればいいけど、原理に則って作ることができれば理論上、物理的に正しくリアルなものを作ることが可能です。難しいけど。)

今回の目標

  • 見る角度によって色が変わる
  • 面の角度によって色が変わる
  • 玉虫っぽくギラギラさせる

玉虫テクスチャをベタで貼ってもそれっぽくはなっていますが、実はUVのYを使っているので、UV座標の上にあるUVシェルほど値が強くなって赤みが付きやすくなってます…

ちなみにモデルは適当にモデリングしたカブトムシ君です。

f:id:aitarai:20210402183146j:plain


f:id:aitarai:20210402183151j:plain
構造はシンプルですが、白黒とカラーのテクスチャを用意して、白黒のグラデーションの値に応じて色がつくようにしているのがポイント。これは Shader Graph でいう「Sample Gradient」ノードと同じ機能です。

もう一つは、Shader Forge にデフォルトで実装されていた「Parallax」という視差表現、これがないと視点の角度によって色を変えるのは成り立ちません。


f:id:aitarai:20210402183259g:plain
ちなみにこれは途中の状態。
ビューの角度によって色は変わるけど、面の向きでは変わりません。

流石にUVの配置で見た目が変わるのは不便なので、次はUV座標に寄らない自然な見た目を目指そうと思います。


参考

www.techno-synergy.co.jp

kiih.jimdofree.com

www.famitsu.com