20240928_normalizefm_0b5vr
#Live_Coding #シェーダー
https://gyazo.com/0edbf5476426d2a6a137038a11c698fb
20240928_normalizefm_0b5vr by 0b5vr
BonzomaticによるLive Codingパフォーマンス
https://www.shadertoy.com/view/M32cRc
https://livecode.demozoo.org/event/2024_09_28_shader_jam_normalizefm.html#mc
当日のパフォーマンスについて
WebGL 総本山 + normalize.fm あわせて１３周年感謝祭　夜の部の余興のShader Jamsで行ったLive Coding
当日はBonzomatic Network Launcherを使ったオペレーションを行う必要があったため、事前にBonzo Tool Scriptsを用いて記録したパフォーマンスを再生した
共演者はgam0022・Kamoshika・Renard
Breakdown
主な構成要素は以下の通り:
RGB Delay
基本的な2D Shapeによるモーショングラフィックス
Cyclic Noiseを用いたRaymarching: Volumetric
屈折表現を用いたトーラスのレイマーチング
Timeline
https://gyazo.com/5fa4f73109f9b3e55714b7518c8bec7a
Gradient
まずは最速でTunnel脱却を目指す
しょうもなくない絵をということで、とりあえずその後RGB Delayで乱用する calcgrad を定義
MoGraph
もっとしょうもなくない絵を出したい
RGB Delayがテーマですよということで、RGB Delayが映える2Dのモーショングラフィックスをとりあえず出す
3D Noise
ここからが本番、しっかり派手目な絵を目指す
とりあえず、Cyclic Noise・レイマーチングでVolumetric Noiseの描画を目指す
その後、RGB Delay・Easingで味付けしていく
Refracted Torus
これまでの資産をもとに、派手なのをもう一芸
普通のレイマーチングでまずは一旦反射するトーラスを描く
その後、トーラスの数を増やしつつ、ミスが無いよう慎重に屈折させる
Glitch
割と屈折トーラスができた時点でネタは切れている
展開の獲得を目指す
グリッチでトランジションを確保しつつ、もう1カメを増やしてみる
More MoGraph
ここで完全にネタ切れ
蛇足を付与しないように配慮しつつ、2Dモーショングラフィックスを増やす
特に警戒する箇所
calcgrad: RGBがいい感じに混ざりつつかつ積分したら vec3(1, 1, 1) となるようにする
完成したら1芸になるので可視化すれば大丈夫
ease: 多項式イージング
間違えるとeaseInになってしまったり、1から0になったり、事故りやすい
余裕があれば可視化しながら挑む
See: 多項式でいい感じのeasingを作ろう
Cyclic: 単純にむずい、非直感的なロジック
僕は書き慣れているから良いものの、慣れてなければ繰り返し練習する
下手にアニメーションさせると容易に浮動小数点精度の限界にたどり着く。平行移動を回転でごまかす
See: Cyclic Noise
屈折: レイマーチングにおいて事故りやすい
事前に練習し、どう間違えたらどのようなアーティファクトが出るか覚えておく
最悪、反射へのフォールバックも検討すべき