rn.log

備忘録など

【シェーダーグラフメモ その6】Sci-Fiな感じにズレてアニメーションするリング

f:id:r-ngtm:20181124130707g:plain

STEP1 : アニメーションなしのシェーダーグラフ

分かりやすさのため、まずはアニメーションさせないシェーダーグラフから。
f:id:r-ngtm:20181124131106p:plain:w256

ノード全体

f:id:r-ngtm:20181124130810p:plain

ノード左側

角度とノイズで模様を作り、距離と足し合わせています。 f:id:r-ngtm:20181124132619p:plain:h200

ノード右側

f:id:r-ngtm:20181124135053p:plain:h200

ラインを作っている部分

大きい塗りつぶしから小さい塗りつぶしを引き算することで、くり抜いています。 f:id:r-ngtm:20181124145856p:plain

結果

このノードを組むと以下のような絵が出力されます。
f:id:r-ngtm:20181124131106p:plain:w256

STEP2: 時間を加える

STEP1のシェーダーグラフに時間を組み込んで動きを与えます。
f:id:r-ngtm:20181124130707g:plain:w256

ノードはこちら。
f:id:r-ngtm:20181124140102g:plain

Step1との比較

Step1のノードとStep2のノードを比較するとこのような感じになります。
f:id:r-ngtm:20181124150947p:plain

Step2で変わった部分は赤い線で囲ったところです。
f:id:r-ngtm:20181124151301p:plain

時間を足して動きを与える

模様を作る部分で、sin(時間)を足しているところがSTEP1とは異なります。
時間を組み込むことにより、動きを与えることができます。
f:id:r-ngtm:20181124143543p:plain:h200
f:id:r-ngtm:20181124143704g:plain:h200

距離を乗算してグラデーションを生む

距離を乗算し、塗りつぶしの内側の色が薄く、外側が濃くなるようにしています。
f:id:r-ngtm:20181124144906p:plain

解説 : ノード全体

f:id:r-ngtm:20181124142814p:plain

完成

f:id:r-ngtm:20181124130707g:plain