TouchDesignerのGLSLでディゾルブをやってみる

はじめに

こちらはTouchDesigner Study Weekend Vo.010に参加した際に学んだことをまとめています。

運営の方含め、とても良い勉強会でおすすめです。
あくまで自分の復習の為に、まとめ直しています。

実際はもっと、有益な情報を沢山学ぶことができます。
勉強会の内容を撮影した動画も購入できるみたいなのです！
購入はこちらから

ディゾルブをやってみる

はじめの構成は以下です。

詳しくは前回の記事を参考にしてください。

f:id:nogson2:20200114074440p:plain

頂点シェーダーの情報をフラグメントシェーダにわたす

ディゾルブを行う為に、フラグメントシェーダーのalphaを変更する必要があります。

ディゾルブと呼ぶかわからないのですが、一番簡単にやるのであれば、uniform変数としてabsTime.secondsなどの値を利用するのが簡単です。

f:id:nogson2:20200114074459p:plain:w300

absTime.secondsを利用すると、オブジェクト全体がフェードイン、フェードアウトします。

◎phong1GLSLPixel

uniform float uTime;

・・・中略

void main()
{

・・・中略

// Alpha Calculation
float alpha = sin(uTime);

noise TOPを利用する

次はテクスチャとして利用したnoise TOPの情報を利用してみます。
webGL2.0からは、varying変数は利用できなくなり、in,outを利用します。

以下のような感じで渡します。

◎phong1GLSLVertex

out Vertex
{
    vec4 color;
    vec3 worldSpacePos;
    vec3 worldSpaceNorm;
    flat int cameraIndex;
    vec2 texCoord;
} oVert;

void main()
{
    
    oVert.texCoord = uv[0].st;

◎phong1GLSLPixel

in Vertex
{
    vec4 color;
    vec3 worldSpacePos;
    vec3 worldSpaceNorm;
    flat int cameraIndex;
    vec2 texCoord;
} iVert;

オブジェクトとして渡さなくても、out vec2 texCoordのような形でも大丈夫です。

テクスチャのデータを取り出す

GLSL MATに定義したnoise TOPの情報を取り出して、アルファ値として使います。

f:id:nogson2:20200114074528p:plain:w300

◎phong1GLSLPixel

テクスチャのRの値を閾値として利用します。
step関数を利用して、値が0.5以上の場合は表示(alpha 1.0)、それ以外は非表示(alpha 0.0)にします。

uniform sampler2D dispTex;

in Vertex
{
    vec4 color;
    vec3 worldSpacePos;
    vec3 worldSpaceNorm;
    flat int cameraIndex;
    vec2 texCoord;
} iVert;

・・・中略

void main()
{

・・・中略

// Alpha Calculation
　 float edge = texture(dispTex, iVert.texCoord).r;
   float alpha =  step(0.5, edge);

ここまでやると、以下のような表示になります。

f:id:nogson2:20200114074553p:plain:w300