見出し画像

Shadertoyを移植する際の注意点

ShadertoyにはWebGLで書かれたいろんな格好良いシェーダーが上がってます。TouchDesignerで採用されているGLSLとShadertoyのWebGLはほぼ同じ言語なのですが、意外とすんなり動かないので移植する際の注意点をまとめました。サンプルコードはこちら

Bufferの扱い

shadertoyにはImageとBufferと大きく2つのシェーダ記述可能な箇所があります。ImageはGLSL TOPそのものですが、Bufferは異なります。例えばBuffer AとImageのGLSLがある場合、TouchDesigner上のノードで組み直すとこんな感じになります。

画像1

Buffer Aの中身はGLSL TOPとFeedback TOP、そしてBuffer Aの初期値を決めるConstant TOPで構成されます。

Imageは単純にGLSL TOPです。

iMouseの扱い

Shadertoyはビルトイン関数はいくつかあり、みんなそれを利用して作品を作っています。基本的にはこれらはそのまま使える関数がTouchDesigner上にもあるかと思います。

よくShadertoyで使われているが、TouchDesignerでやると地味に厄介なのがiMouseです。ShadertoyのiMouseは4つの値を保持しています。

『マウスの左ボタンが押されている間のマウス座標XY』と『マウス左ボタンが押された瞬間のマウス座標XY』です。この後半のが厄介で、マウスがボタンが押されるのをやめた瞬間にXY座標が0になる挙動をします。

組んでみたのですが意外とノーコードでやるとパッチが色々必要でした。もしもっと短くできる方法をご存知でしたら是非教えてください。

画像2

その他のBuild-In関数の変換

qiitaの高尾さんの記事、『GLSL-TOPをShaderToyのフォーマットに最適化する』などをみていただければ割と機械的に置換できるかと思います。

GLSLコード移植時の注意点

稀にShadertoyのコードで特定のピクセルに特定の情報を書き込んでいる場合がありますが、そのコードを移植する際には注意が必要です。

例えばShadertoyにて、

fragColor = texture(iChannel0, vec2(0,0));

と書いている場合、(U, V) = (0, 0)のピクセル、つまり左下端のピクセルの色を取得します。

しかしTouchDesignerのGLSL TOPにおいて、UVは正規化した値として扱うため、

fragColor = TDOutputSwizzle(texture(sTD2DInputs[0], vec2(0,0)));

これだと左下端のピクセルのさらに縁を読んでしまうため、正しい色が読み込まれません。なので半ピクセルぶんのオフセットを設定する必要があります。

vec2 offset = uTD2DInfos[0].res.xy /2.0;
fragColor = TDOutputSwizzle(texture(sTD2DInputs[0], vec2(0.0) + offset));

uTD2DInfosは入力されたTOPの情報を引っ張ってこれるので便利です。

他にもTouchDesignerはオリジナルの関数がいくつかあるので、こういうのを使うともっと効率的に書ける可能性があります。時間があれば公式のWrite a GLSL TOPなどのページをチェックしてみてください。



この記事が気に入ったらサポートをしてみませんか?