TouchDesigner本の表紙の絵の作り方

#TouchDesigner本の表紙の絵の作り方
![TDBOOK_cover2.jpg](https://qiita-image-store.s3.amazonaws.com/0/100228/16492ca9-b642-2c29-7e48-878f5444ce23.jpeg)

2017年９月にTouchDesignerの入門書を出版しました。
この本のなかの一部のヴィジュアルは私がTouchDesignerを使って作ったものを使用しています。

表紙の画像と以下の画像がそうです。
![キャプチャ.JPG](https://qiita-image-store.s3.amazonaws.com/0/100228/477d7721-1160-21a8-51b4-03db640d8b1a.jpeg)
![5.JPG](https://qiita-image-store.s3.amazonaws.com/0/100228/440aca52-1080-71a5-8963-2504aff44de6.jpeg)

ここでは、表紙に使用した波のようなイメージの作り方を解説します。
最後のこのプログラムを添付します。

##波のGeometryをつくる

こちら実際に作ったイメージです。
本の表紙では、上にオペレーターが乗っていますが、これらをどけると以下のようなイメージになっています。
![comp1.jpg](https://qiita-image-store.s3.amazonaws.com/0/100228/fb756dfe-8d22-eb0b-d48e-eca71343970e.jpeg)

プログラムの全景
（背景に映っている右と下の、絵は没になったエフェクトのものです。）
![image.png](https://qiita-image-store.s3.amazonaws.com/0/100228/46b38caa-5998-c738-0d0c-6063522e1561.png)

プログラム自体はとても簡単です。
noise TOPをGLSLを使って3Dの波のようにしているだけです。
ただ、今回表紙絵ということで、普段はTouchで映像を作ることはあれど、静止画を作ることはあまりないので
止まった状態でカッコよく見えるイメージという部分にこだわりました。

まずは、noise TOPから、波のようなGeometoryを生成する部分です。
ここは非常にシンプルです。

グレースケールのnoise TOPの光度をZ座標に置き換えて、各ピクセルごとに３次元空間にポイントとして表現しています。
noise TOPのパラメータを操作することで、波の形をいろいろかえることができます。
いろいろいじってみて結果一番カッコいい感じのパラメータ設定を目指します。

Pixel Shader

```glsl
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

```glsl
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でエフェクトをつける
さきほどの波をレンダリングします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/100228/3867dd91-580d-b580-1d17-2a663d410335.png)
この段階ではかなり薄いシンプルな波になっています。
（カメラの位置は、いろいろと試しながらカッコよく見える位置を見つけました。）
これにTOPでエフェクトをかけて仕上げていきます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/100228/245035d5-2700-53d5-5439-734ca4709204.png)
Ramp TOPを使い赤色を上が濃く、下側は薄くとなるようにコンポジットしました。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/100228/87839896-dfd9-b9cd-09d2-79eb79f49cfb.png)
さらに、Levelで色味を調整し、最後にまたRamp TOPを使い上部を黒にフェードしていくようにエフェクトをかけています。

以上で、表紙絵の作り方は以上です。
とてもシンプルです。


![image.png](https://qiita-image-store.s3.amazonaws.com/0/100228/f38d4b9c-eb62-5b16-ea63-acace07088de.png)
没になったエフェクトについて、１つ
ここでは、render TOPの画像をhsvrgb TOPにつなげています。
hsvrgb TOPは画像の色の表現方式を変換するTOPですが、いろいろつなげてみると、強烈な色味が出ることが多く、
これをエフェクトとしてよく使っています。　画像をGlitchさせてるような雰囲気になるのがよいです。


###余談

![image.png](https://qiita-image-store.s3.amazonaws.com/0/100228/de06b5ac-d8d3-0ff6-ab89-002f92948d20.png)
没になった表紙絵の候補たち
表紙の画像には、あえていろいろなオペレータを映り込ませています。
いろいろ議論した結果、カッコイイ作品画像を表紙にしたりするより、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