tara.log

シェーダー備忘録

【Shader Forge】8方向ブラー

f:id:aitarai:20210430174627g:plain
https://www.youtube.com/watch?v=XKbSu5PC8VA&ab_channel=jean-gobertdecoster
チュートリアルを見て8方向ブラーを作成しました。
近視の私がメガネをしていない時の見え方です。月が8つに分裂して見えます。

スクリーンをオフセットさせてaddして、addした数で割ってカスタムライティングに入れる、
周囲の色との中間色を取るボカシとは違う方法です。


f:id:aitarai:20210430174612j:plain
オフセットする際に、そのままオフセットをすると、
カメラとオブジェクトの距離が離れてもスクリーンに対して同じピクセル分ずれるので、
近づけばボケ範囲が狭くなり、離れればボケの範囲が広くなるという現象が起きます。

解決策として log を使って割り算してたのですが、
中でどんな値になっているのかは分からないけどすごい…。


www.youtube.com

【Shader Forge】任意方向に流れるフローマップ

f:id:aitarai:20210428191512g:plain
UVを流し続けるフローマップシェーダーを作成しました。
ノーマルマップにも対応しており、流れる速度やもろもろを調整可能。時間経過で、オフセットしたフローマップを交互にブレンドしています。
と言ってもほとんど Shader Forgeのwiki を参考にしました。

f:id:aitarai:20210428191520j:plain
参考先では、フローマップの色を反転して作成していたんですが、何か意図があるのかしら?

任意のベクトル方向に流れるフローマップ

f:id:aitarai:20210428191603g:plain:w300
CEDECのモンハン講演で紹介されていた方法。
モデルの向きや角度が変わっても、フローマップが同じ方向に流れ続けるシェーダーです。

接空間の、Tangent と Binormal ベクトルで、それぞれ任意方向のベクトルと内積を取り、
それぞれの値をR、Gとし、そのままフローマップとして扱うという、頭のいい人が考えたであろう方法。接空間(タンジェント空間)を始めて勉強しました。

▼ ノード全体。追加したのは左上部分だけです。
f:id:aitarai:20210428191555j:plain

時間でブレンドするノード詳細

f:id:aitarai:20210428192034j:plain
グラフも可視化すると難しくない。はず。

jp.ign.com

【Shader Forge】滴り表現

f:id:aitarai:20210426183737g:plain
だらだらだらだらだらだらだらだら。


XYZのテクスチャ投影は既に何度かやっているけど、
復習してみるとそれなりに収穫がありました。
ワールドノーマルをマスクとして使う時に、領域が重ならないように0.5引いてマスクにするのが目から鱗だった。こういう発想があるのが楽しい!
ノーマルマップも、結構強引にブレンドしました。

また、amplify シェーダーのチュートリアルを見て作成したので、
さすが有料ソフトといった機能も多く、羨ましかったです。


▼ 空間周り
f:id:aitarai:20210426183829p:plain

▼ 全体
f:id:aitarai:20210426183844p:plain


www.youtube.com
(雨がポツポツするY投影の表現が上手くできなかったのが少し心残り…。)

【Shader Forge】コースティクス表現

f:id:aitarai:20210419192050g:plain:w300
コースティクスシェーダーを作成しました。

かもそば様の記事を参考に、ディレクショナルライトの角度で
Substance Designer で作成したコースティクステクスチャを背景に投影しています。
それをノイズテクスチャで歪ませてます。
最初はライトとノーマルの内積でUVを引き延ばしたりしましたが、残念な結果に…


f:id:aitarai:20210419192054g:plain
水面シェーダーも追加で作成しました。
コースティクスが誤魔化されていい感じですが、問題もあります…。
歪み表現に使っている Reflaction は、スクリーン座標で描画を行っているので、
水に浸かっていない部分の球も歪んでしまっているんです…。

応急処置として オブジェクトと水面の Depth でマスクしていますが、
海みたいに広くないとあまり効果がありませんでした。
これ以上はシェーダー書くしかなさそうですねぇ…_(:3」∠)_

ノード全体

f:id:aitarai:20210419192118p:plain:w400
▲カブトムシのコースティクス

f:id:aitarai:20210419192125p:plain:w400
▲背景のコースティクス

f:id:aitarai:20210419192132p:plain:w400
▲水面

【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

【Shader Forge】火の玉

f:id:aitarai:20210324170552g:plain

テクスチャをUVと掛けて、ディストーションだけで良い感じの炎が作れないかと研究したもの。

UV にテクスチャを合成(mulやadd)することで生じる問題の方が多く、スムーズにできない中での偶然の産物です。
というのも、歪みを強めるために UV Coord にノイズを適当に合成すると、UVを拡大縮小した時のように斜め移動でテクスチャからはみ出てしまったり、45度に傾いたりしてしまう…。

※ 悪い例▼
f:id:aitarai:20210324161459g:plain

このように左右に遊んでしまうのを防ぐために、今回はUVの合成先で無駄な要素を排除してしまいました。最後にマスクで形をくり抜いてしまうのと、手法としてはあまり変わらないです。


f:id:aitarai:20210324170744g:plain
f:id:aitarai:20210324170221p:plain

今回使用した2枚のテクスチャ

f:id:aitarai:20210324155854p:plainf:id:aitarai:20210324155909p:plain
ブレワイの炎エフェクトのテクスチャを真似て作成。

トゥーン

f:id:aitarai:20210326185327g:plain

【Shader Forge】粘度のある液体

f:id:aitarai:20210323102101g:plain 
記事の最後にのせているyoutubeを見て作成しました。
RGBのマルチマップの無駄の無い使い方で、非常に好感度が高いです。
もっちゃもっちゃ。


f:id:aitarai:20210323102323g:plain
Unity のParticle System でエフェクトとして出していますが、これのすごい所は、ビルボードだけどカメラの角度によって玉の見え方が変わります。
頑張れば構造色とか、色んな視差表現にも使えそうなのでメモ。


f:id:aitarai:20210323102522p:plain
これを制御する部分のノードがここですが、実は90%ぐらい理解できません。
ArcTan2 という逆三角関数内積とクロス積を導入して… だからどうなんだ…?みたいな… 数学の知識があっても思いつくのは難しいでしょうけど。


www.youtube.com

arctan2(アークタンジェント2)ってなんぞ? - No More Retake
3DCG屋さん向けTips&Referenceサイト
http://nomoreretake.net/2013/10/21/arctan2/