【TouchDesigner】で『ShaderToys』を使う方法【画像たっぷり】 (動画5-1)

ホーム
CG関連
【TouchDesigner】で『ShaderToys』を使う方法【画像たっぷり】 (動画5-1)

CG関連

2019.07.11

【TouchDesigner】で『ShaderToys』を使う方法【画像たっぷり】 (動画5-1)

連日の『TouchDesigner』で『GLSL』を使ってみる動画のメモになります。

前回の記事

もんプロ～問題発見と解決のためのプログラミング〜

【TouchDesigner】で『GLSL』を使う方法を動画で学んでみるその4 描画(step関数など)

https://coinbaby8.com/td-glsl-movie-learning4.html

引き続き【TouchDesinger】で『GLSL』を使う動画を見つつ内容メモしていきます。前回の記事動画はこちら。BookofShadersおすすめだよーっていうことで、BookofShadersの内容に沿ってやってるのかなと感じました。BookOfShadersGLSL TOP で描画してみる if文と円ホワイトボード説明・・画面見えずif文の説明？中心からの距離が、設定値より大きかったら黒、小さかったら白にしてみる。out vec4 fragColor;void main(){ float value = .0; vec4 color = vec4(0.0); if(value > .2){ color = vec4(1); } fra...

今回は『ShaderToys』からのコードを持ってくる方法が紹介されていました。

動画はこちら。

アオキ

けっこうなエラーが発生します。一つ一つ対応していますので、ひるまずいきましょう

TouchDesignerでShaderToysを使う方法 ShaderToysの説明

『base COMP』作成して shadertoy と命名し中へ。

まずはShaderToysの案内。

ShaderToys・・本格的なフラグメントシェーダでつくった映像盛りだくさんなサイト(とにかく重い

ShaderToys

ライセンスをチェック。ライセンスは守りましょう。

Creative Commonにもいろいろあるよ。

的な内容で。

今回コード引用するのはこのページ。

ShaderToys marble

marbleで検索するとでてきます。

コードをplaying_marble.glslというファイル名で保存しつつ、

『text DAT』生成。playing_marble.glslを選択
Loat on Start でPulseボタンを押す
コードが表示される。

コードはこちら。

// License Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.
// Created by S. Guillitte 2015


float zoom=1.;


vec2 cmul( vec2 a, vec2 b )  { return vec2( a.x*b.x - a.y*b.y, a.x*b.y + a.y*b.x ); }
vec2 csqr( vec2 a )  { return vec2( a.x*a.x - a.y*a.y, 2.*a.x*a.y  ); }




mat2 rot(float a) {
    return mat2(cos(a),sin(a),-sin(a),cos(a));    
}


vec2 iSphere( in vec3 ro, in vec3 rd, in vec4 sph )//from iq
{
    vec3 oc = ro - sph.xyz;
    float b = dot( oc, rd );
    float c = dot( oc, oc ) - sph.w*sph.w;
    float h = b*b - c;
    if( h<0.0 ) return vec2(-1.0);
    h = sqrt(h);
    return vec2(-b-h, -b+h );
}


float map(in vec3 p) {
    
    float res = 0.;
    
    vec3 c = p;
    for (int i = 0; i < 10; ++i) {
        p =.7*abs(p)/dot(p,p) -.7;
        p.yz= csqr(p.yz);
        p=p.zxy;
        res += exp(-19. * abs(dot(p,c)));
        
    }
    return res/2.;
}






vec3 raymarch( in vec3 ro, vec3 rd, vec2 tminmax )
{
    float t = tminmax.x;
    float dt = .02;
    //float dt = .2 - .195*cos(iTime*.05);//animated
    vec3 col= vec3(0.);
    float c = 0.;
    for( int i=0; i<64; i++ )
    {
        t+=dt*exp(-2.*c);
        if(t>tminmax.y)break;
        vec3 pos = ro+t*rd;
        
        c = map(ro+t*rd);               
        
        col = .99*col+ .08*vec3(c*c, c, c*c*c);//green    
        //col = .99*col+ .08*vec3(c*c*c, c*c, c);//blue
    }    
    return col;
}




void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    float time = iTime;
    vec2 q = fragCoord.xy / iResolution.xy;
    vec2 p = -1.0 + 2.0 * q;
    p.x *= iResolution.x/iResolution.y;
    vec2 m = vec2(0.);
    if( iMouse.z>0.0 )m = iMouse.xy/iResolution.xy*3.14;
    m-=.5;


    // camera


    vec3 ro = zoom*vec3(4.);
    ro.yz*=rot(m.y);
    ro.xz*=rot(m.x+ 0.1*time);
    vec3 ta = vec3( 0.0 , 0.0, 0.0 );
    vec3 ww = normalize( ta - ro );
    vec3 uu = normalize( cross(ww,vec3(0.0,1.0,0.0) ) );
    vec3 vv = normalize( cross(uu,ww));
    vec3 rd = normalize( p.x*uu + p.y*vv + 4.0*ww );


    
    vec2 tmm = iSphere( ro, rd, vec4(0.,0.,0.,2.) );


    // raymarch
    vec3 col = raymarch(ro,rd,tmm);
    if (tmm.x<0.)col = texture(iChannel0, rd).rgb;
    else {
        vec3 nor=(ro+tmm.x*rd)/2.;
        nor = reflect(rd, nor);        
        float fre = pow(.5+ clamp(dot(nor,rd),0.0,1.0), 3. )*1.3;
        col += texture(iChannel0, nor).rgb * fre;
    
    }
    
    // shade
    
    col =  .5 *(log(1.+col));
    col = clamp(col,0.,1.);
    fragColor = vec4( col, 1.0 );


}

『GLSL TOP』追加。

『GLSL TOP』→pixel shader に、作成した『Text DAT』をドラッグドロップ。

コードをコピーしただけだとglsl_infoにエラー発生。

アオキ

ここからが結構大変でございます。

TouchDesignerでShadertoyを使う方法変数を定義

shadertoyのページの中のShader Inputsを押すと、
最初から定義されている変数が見れます。

glsl_infoで発生しているエラーを見つつ、変数を定義していきます。

uniform float iTime;
uniform vec2 iResolution;
uniform vec3 iMouse;

iChannel0だけエラーが消えません。

コードを見るとtextureとして使われているので、

    if (tmm.x<0.)col = texture(iChannel0, rd).rgb;

『Movie File In CHOP』で代用します。

マクロを追加します。

マクロ・・#defineで定義する定数

#define iChannel0 sTD2DInputs[0]

『sTD2DInputs』は『TouchDesigner』組み込み変数で、インプット用に使います。

が、まだエラーがでてる・・・

コードを見ると、rdはvec3で定義されている。
iChannel0はvec2か。

    vec3 rd = normalize( p.x*uu + p.y*vv + 4.0*ww );


    
    vec2 tmm = iSphere( ro, rd, vec4(0.,0.,0.,2.) );


    // raymarch
    vec3 col = raymarch(ro,rd,tmm);
    if (tmm.x<0.)col = texture(iChannel0, rd).rgb;

Shadertoyで見ると、『Cubemaps』というものが使われているよう。

アオキ

コードによっていろいろ対応方法が変わるようです。今回はCube対応。

TouchDesignerでShadertoyを使う方法 sTDCubeInputs

ヘルプから　『TouchDesigner』のマニュアルでの中の『Write a GLSL TOP』をみてみます。

Write_a_GLSL_TOP

cubeで検索すると、どうやらcubeの場合は、

『sTD2DInputs』ではなく、『sTDCubeInputs』を使うよう。

アオキ

ここは知らんかった・・

どうやってcubeをつくるかというと、

『Movie File IN CHOP』で、『PalaceOfFineArts-360Designs.io.jpg』画像ファイルを選択します。

アオキ

360度カメラで撮影された画像が必要かも？

『Projection TOP』を追加します。

『Movie File In』 -> 『Projection』とつないで、

『Projection』のInput/Outputを下記に変更します。

Input・・Equirectangular
Output・・Cube Map

アオキ

Equirectangularってなんだろ？

と思い調べてみると、

地図投影法の一種であり、『正距円筒図法(せいきょえんとうずほう)』のこと。

アオキ

あぁ、あれね、地図とか描くやつね。(しったか

360度で撮影された画像を、Cubeの形にして、貼り付けようってことかなと。

infoを見ると確かに『cube map texture』になっとります。

cube mapになった『projection』を『GLSL TOP』に繋げると、別のエラー発生。

あらためて、

『sTD2DInputs』を　『sTDCubeInputs』に変更します。

#define iChannel0 sTDCubeInputs[0]

また別のエラー発生・・・

TouchDesignerでShadertoyを使う方法 mainImage関数の書き換え

『ShaderToys』は『mainImage』関数になっているので、これを書き換えます。

『mainImage』関数を『main』に置き換えます。

//void mainImage( out vec4 fragColor, in vec2 fragCoord )
void main()

『fragColor』, 『fragCoord』も再度定義します。

out vec4 fragColor;


void main()
{
    vec4 fragCoord = gl_FragCoord;

『GLSL TOP』で『Load Uniform Names』のLoadボタンを押すと、定義していたuniformが反映されます。

アオキ

これはTouchDesignerのバージョン083くらいから追加された機能のようです。

ここでセーブすると、動画とは違うエラー発生しました。(バージョンによってちょっとエラーが違いそう)

『vUV』が読み込まれていないということで、コードを変更します。。

//void mainImage( out vec4 fragColor, in vec2 fragCoord )


out vec4 fragColor;


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

ようやく、キューブが表示されました。