search
LoginSignup
14

More than 3 years have passed since last update.

posted at

updated at

[TouchDesigner] GLSL-TOPをShaderToyのフォーマットに最適化する

td_final.png

GLSLを使用するにあたって、ShaderToyに掲載されているコードを参考にコーディングを行うことが多いと思います。
ShaderToyとは、WebGLをベースにしたシェーダー共有サイトで、ものすごくハイレベルなプログラムが多く存在します。

これらをそのままコピペしてTouchDesignerに持ち込むことができれば、TouchDesignerが手元になくとも、Web上で作成したものをそのまま利用できますので、開発の場所を選ばなくなります。

今回は、ShaderToy上で実装した以下のGLSLプログラムをTouchDesigner上で出力してみたいと思います。
Orbits by Kodai - ShaderToy
2017-02-10_201542.png

ShaderToyのデフォルト変数

iGlobalTime : 現在の時間
fragCoord : 現在処理中のピクセル位置
iResolution : 出力画像のピクセル解像度
fragColor : 出力する色

これらを利用して、以下のような結果を出力することができます。
2017-02-10_202440.png

この変数をTouchDesigner用にフォーマットしてあげれば、このコードをそのままコピペしてTouchDesigner上で実行することができます。

TouchDesigner用にフォーマット

2017-02-10_201701.png

GLSLには、シェーダープログラム外部から値を受け取るためのUniform変数というものがあり、GLSL-TOPのパラメーターから定義することができます。
また、シェーダーエラーを確認するためにInfo-DATを結んでおきます。

iGlobalTimeとiResolution

TouchDesignerには、iGlobalTimeとiResolutionに対応するデフォルト変数が無い(見つけ出せてないだけかもしれませんが)為、Uniform変数で代用してあげます。
2017-02-10_203828.png

この設定したUniform変数の値は、GLSLプログラム側でこのように宣言すると受け取ることができます。
2017-02-10_204117.png

fragCoord

TouchDesigner上では、現在処理している位置をUV(0から1)座標で返します。ShaderToyのfragCoordは、現在処理しているピクセル座標を返しますので、これに合わせていきます。
現在の処理UV座標に解像度をかけてあげれば、処理中のピクセル位置に変換することができます。
2017-02-10_204753.png

fragColor

ShaderToy上では、fragColorの出力宣言をmain関数の引数内に記述しますが、
2017-02-10_205249.png

TouchDesigner上では以下のようにmain関数の外に宣言します。
2017-02-10_205200.png

最終的なプログラム

glsl1_pixel
uniform float iGlobalTime;
uniform vec2 iResolution;

vec2 fragCoord = vec2(vUV.s*iResolution.x, vUV.t*iResolution.y);

float PI = 3.1415926535;

out vec4 fragColor;
void main()
{

    vec2 p = (fragCoord.xy * 2.0 - iResolution.xy) / min(iResolution.x, iResolution.y);

    vec3 destColor = vec3(0.0);

    for(float i = 0.0; i < 6.0; i++){
        vec2 q = p + vec2(cos(iGlobalTime + i * PI / 3.0), sin(iGlobalTime + i * PI / 3.0)) * 0.7 * cos(iGlobalTime);
        destColor += 0.05 / length(q);
    }

    fragColor = vec4(destColor, 1.0);
}

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
14