loop-animation

ドメインワープ・シェーダーDomain Warp

ノイズで座標をゆがめ、そのゆがんだ座標でまたノイズを引くことで、煙や流体のような有機的な模様を作ります。

WebGL2 のシェーダーで、画素ごとに計算して描いています。初期設定で再生しています。

ノイズでノイズを歪ませ、煙や炎、流体のような有機的な模様をつくる(WebGL2)

このシーンで作る

パラメータ、色、エフェクトを変えて、GIF・APNG・WebP・MP4・WebM で書き出せます。

どう計算しているか

  1. まず、細かさの違うノイズを3つ重ねたもの(fbm と呼ばれる、大きなうねりに細かい凹凸を足した値)を基本の関数にします。ノイズ自体は、向きの違う複数の sin 波を足し合わせたものです。
  2. 座標 p で2つの fbm を引いてベクトル q を作り、p + 「歪みの強さ」·q で再び2つの fbm を引いて r を作り、最後に p + 「歪みの強さ」·r で fbm を引いて値 f を得ます。座標のゆがみが二重にかかるので、渦や筋が入り組んだ形になります。
  3. f に「コントラスト」を掛けて 0〜1 に収め、q の長さと合わせてパレットのグラデーションから色を選びます。
  4. 不透明度は f を「濃さ」で決まる指数で曲げた値で、濃い部分ほど色がはっきり出ます。「シード」は各ノイズの組み合わせを変えます。
f = fbm(p + w·r),  r = fbm(p + w·q),  q = fbm(p)

ループがつながる理由

土台の sin 波は、すべて時間の項が整数 × 2πt です。t=1 でどの波も整数周期進んで元に戻るので、それを何段重ねてゆがめても、最終フレームは最初のフレームと同じになります。

調整できるパラメータ

形

模様の大きさ0.5 〜 6(初期値 1.6)
歪みの強さ0 〜 6(初期値 3)
濃さ0.2 〜 2(初期値 1.1)
コントラスト0.5 〜 4(初期値 1.6)

動き

シード0 〜 99(初期値 7)

同じ分類のシーン(線・波)