#TouchDesigner本の表紙の絵の作り方
2017年９月にTouchDesignerの入門書を出版しました。
この本のなかの一部のヴィジュアルは私がTouchDesignerを使って作ったものを使用しています。
表紙の画像と以下の画像がそうです。
ここでは、表紙に使用した波のようなイメージの作り方を解説します。
最後のこのプログラムを添付します。
##波のGeometryをつくる
こちら実際に作ったイメージです。
本の表紙では、上にオペレーターが乗っていますが、これらをどけると以下のようなイメージになっています。
プログラムの全景
（背景に映っている右と下の、絵は没になったエフェクトのものです。）
プログラム自体はとても簡単です。
noise TOPをGLSLを使って3Dの波のようにしているだけです。
ただ、今回表紙絵ということで、普段はTouchで映像を作ることはあれど、静止画を作ることはあまりないので
止まった状態でカッコよく見えるイメージという部分にこだわりました。
まずは、noise TOPから、波のようなGeometoryを生成する部分です。
ここは非常にシンプルです。
グレースケールのnoise TOPの光度をZ座標に置き換えて、各ピクセルごとに３次元空間にポイントとして表現しています。
noise TOPのパラメータを操作することで、波の形をいろいろかえることができます。
いろいろいじってみて結果一番カッコいい感じのパラメータ設定を目指します。
Pixel Shader
uniform sampler2D tex;
in Vertex{
vec3 camSpacePos;
float size;
vec4 color;
vec2 texcoord;
}vVtx;
out vec4 fragColor;
void main(){
vec4 outcol = vec4(1.0);
vec4 c = texture(tex, gl_PointCoord);
fragColor = outcol*c;
}
Vertex Shader
uniform sampler2D depthTex;
out Vertex{
vec3 camSpacePos;
float size;
vec4 color;
vec2 texcoord;
}vVtx;
void main(){
vec2 texcoord = uv[0].st;
vec3 d = texture(depthTex, texcoord).rgb;
vec4 worldSpacePos = TDDeform(P);
vec3 norm = TDDeformNorm(N);
worldSpacePos.xyz += norm*d;
vec4 camSpacePos = uTDMat.cam * worldSpacePos;
gl_Position = TDCamToProj(camSpacePos ) ;
gl_PointSize = 5*d.r*0.5;
}
これらをGLSL Matに適応し、GeometryのMaterialに設定します。
波のGeometryができました。
三次元の波を作るのはこれだけで、完了です。
##TOPでエフェクトをつける
さきほどの波をレンダリングします。
この段階ではかなり薄いシンプルな波になっています。
（カメラの位置は、いろいろと試しながらカッコよく見える位置を見つけました。）
これにTOPでエフェクトをかけて仕上げていきます。
Ramp TOPを使い赤色を上が濃く、下側は薄くとなるようにコンポジットしました。
さらに、Levelで色味を調整し、最後にまたRamp TOPを使い上部を黒にフェードしていくようにエフェクトをかけています。
以上で、表紙絵の作り方は以上です。
とてもシンプルです。
没になったエフェクトについて、１つ
ここでは、render TOPの画像をhsvrgb TOPにつなげています。
hsvrgb TOPは画像の色の表現方式を変換するTOPですが、いろいろつなげてみると、強烈な色味が出ることが多く、
これをエフェクトとしてよく使っています。 画像をGlitchさせてるような雰囲気になるのがよいです。
###余談
没になった表紙絵の候補たち
表紙の画像には、あえていろいろなオペレータを映り込ませています。
いろいろ議論した結果、カッコイイ作品画像を表紙にしたりするより、TouchDesignerの優れたUIそのものを表紙にしようという方針にしました。
#サンプルプログラム
以下からダウンドロードすることができます。
https://www.dropbox.com/s/opqnc598l6bnns8/TopPageWave.toe?dl=0
注意点として、実際に使ったものプログラムをそのままの設定で公開しています。
FullHDを超える解像度でレンダリングしているため、non-commercial版では正しく表現されない可能性でがあります。
（プログラムプログラム自体は機能するはず....）
#2017を振り返って
今年は、まずTouchDesigner MACバージョンがリリースされました。
これは、ユーザーが増える大きなきっかけになると思い、日本語の入門書の企画をしました。
無事、９月に本が出版され、さらに日本のユーザーが増えていることをすごく実感します。
来年以降もっと多くの人がTouchDesignerを始められて、コミュニティがどんどん大きくなっていくことが楽しみです！
#求人！
私の勤めている株式会社T&S R&Dチームでは、常に人を募集してます。
TouchやUnityを使ったお仕事です。
http://thinkandsense.com/web/works