のぐそんブログ

暗いおじさんがシコシコ書くブログです。

TocuchDesgnerのGLSLでディスプレイスメントをやってみる

TouchDesigner

はじめに

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

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

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

ディスプレイスメントとは

オブジェクトの表面に凹凸をつけるような感じの意味になるのでしょうか。

基本構成

基本の構成はこれです。

GLSLはPhong MATを利用します。
Output Shaderボタンを押すと、Phong MATのGLSLがそのまま表示されます。

shpere SOPにconvert SOPをつなげます。
SOPにconvert SOPの設定は以下です。

また、shpere SOPのRowsとColumnsは250にします。

頂点シェーダーを触ってみる

noise CHOPをGLSLでテクスチャとして利用する

noise CHOPのrgb情報を利用して、shpere SOPの頂点の位置を制御します。
phong MATからOutputしたGLSL内でnoise CHOPの値をテクスチャとして利用するには、phongGLSLのSamplers1にnoise CHOPを設定します。

Samplers1に登録した情報は、phong1GLSLVertexから参照できるようになります。

頂点の位置情報を設定する

shpere SOPの頂点情報はPという値で入っています。

GLSL内で、このPを3D空間用に座標変換して配置しています。

この部分を書き換えていきます。

Samplers1に設定したテクスチャの情報を取得します。

◎ phong1GLSLVertex

テクスチャを読み込む方法は、以下の方法になります。

texture(テクスチャ画像、UV座標)

UV座標については、まずは深く考えずuv[0].stを利用すると覚えるとよさそうです。

void main()
{
    vec3 disp = texture(dispTex, uv[0].st).rgb;
    vec3 pos = P + disp;
    
    vec4 worldSpacePos =TDDeform(pos);
    gl_Position = TDWorldToProj(worldSpacePos);

ここまでやると、頂点がランダムに移動されているのを確認できるようになります。

変数dispに入る値は0.0 ~ 1.0になります。
その為、頂点座標は正の方向に向かって移動します。

dispに法線情報であるNをかけると、法線方向に向かって移動するようになります。

vec3 disp = texture(dispTex,uv[0].st).rgb  * N;
vec3 pos = P + disp;
vec4 worldSpacePos =TDDeform(pos);

頂点の広がり方はnoiseのプロパティを変更して調整します。

noiseのTranslateプロパティをabsTime.secondsなどで変更すると、アニメーションするようになります。
下の例ではTranslateのtzを変更してます。

サンプルファイル

まとめ

ノイズを利用して、頂点座標を移動することができました。
次は、フラグメントシェーダーを利用してみたいと思います。