[touchdesigner]誰でもできる！玉虫色カラーを自作する方法(GLSL)

<b>グーテンモルゲン</b>
今回は<b>玉虫色カラーをGLSL</b>で作っていくよーっていうお話です

#1.映像のほうがわかりやすい！
個人的な見解ですが、文字より<b>映像</b>のほうがわかりやすいと思うんすよねー
ってことで、[<b>youtube</b>](https://www.youtube.com/watch?v=hk6AJHL3a44)はこちらからぜひーー
[![Inkedmagical_color_thumbnail_part1_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704869/01b89f3e-e750-c119-2adc-c8dab52b68dc.jpeg)](https://www.youtube.com/watch?v=hk6AJHL3a44)


<b>玉虫色</b>ってなんやねんという方
こんなんです
![gold_bag_point.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704869/a4cc161c-42a3-50f2-4985-2311bcc4b708.jpeg)

<b>虹色</b>に反射して幻想的ですな(虫嫌いの人はシャボン玉もこれなので嫌わないで～～)

#2.解説
[動画](https://www.youtube.com/watch?v=hk6AJHL3a44)のほうで1から作ってるのでこちらではポイント解説ってことで
SOPで虫の体をつくっていくぅ
基本的には`sphereSOP`と`boxSOP`で作っています。
##ポイント1.textureSOP
SOPに<b>uv情報</b>がないとマテリアルが反応しないので
`textureSOP`でuvを追加して後々マテリアル貼ったときにいい感じに色がのるようにしてまする。

##ポイント2.convertSOPのconnectivity
meshだと`CarveSOP`でsphereをいい感じに切り取れるんだが、matrial貼ったときになんか<b>黒いところ</b>が出てきてうまくいってないことが起こるんすよね。
[![Inkedtexture_miss.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704869/0e941187-dc3f-6f71-a0af-d0d84c92285b.jpeg)](https://www.youtube.com/watch?v=hk6AJHL3a44)

これを解決してくれるのが`convertSOP`の<b>connnectivity</b>で、meshからpolygonに変えてその面のつなげ方を四角基本から三角基本にするために<b>triangles</b>にします、スペルこれであってかな？（笑）
##ポイント3.phongのoutputshader
これ使ったことない人もいるかもしれませんな。
[![Inkedoutput_shader.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704869/29a13b1e-f2d1-65d6-d5fe-8bc8433d3bdf.jpeg)](https://www.youtube.com/watch?v=hk6AJHL3a44)

touchdesignerのジオメトリーの色や影を計算してつけているのは<b>glsl</b>という言語を使っています。

いきなり<b>ばちくそ</b>むずいこと言ってるますね。

<b>僕も最初は何を言っているのかさっぱりでした。</b>

まじでわけわからん。

だからこそ、これを理解して書けるようになったら<b>めちゃカッコイイじゃないですか！</b>
世界単位で考えてもかける人なんて1万人に1人とかですよ、たぶん。<b>圧倒的希少価値</b>✋(粗品風)

ってことで、丁寧に説明してくれているリンクやチュートリアル動画で説明しているので是非見てください。
[![Inkedmagical_color_learn_glsl0.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704869/543b8ba7-c1c7-c176-a5d3-c3f7eee31c80.jpeg)](https://www.youtube.com/watch?v=hk6AJHL3a44)

<b>お前が説明しないんかい！</b>

って言われそうなので軽く、、、
`output`すると3つ`DAT`が出てきます。
[![Inkedthree_shader.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704869/18e2c17a-d582-39d3-f043-1282585539a5.jpeg)](https://www.youtube.com/watch?v=hk6AJHL3a44)

1つ目が`vertexShader`
これはジオメトリーが持ってるポイントの位置をそれぞれ動かしたりとかに使います！<b>移動系！</b>
2つ目が`pixelShader`、fragmentShaderとも呼ぶ
こっちはさっきのポイントに対してどう色を付けていくかに使います！<b>色系！</b>
3つ目は`Info`
<b>エラーの内容を教えてくれる</b>、自動車学校の教官的役割。間違えるや否やすぐに指摘されます！

##ポイント4.pixelShaderを書いてゆく
`texteditor`の設定をすれば、好きな<b>えぢたーアプリケーション</b>でコードを書くことができます。
atomとかvisual studioとかvimとか
[圧倒的おすすめは<b>visual studio code！！</b>(ってtouchdesignerの神の比嘉さんが言ってました)](http://satoruhiga.com/TDWS2018/day14/)
そして、いろいろ説明する前に<b>とりあえずコードを打ってみてください</b>
[youtubeで説明しています(uniform変数等)](https://www.youtube.com/watch?v=EfMPWqasP9I)

```glsl:dat_phong1GLSLpixel
vec4 pal(vec4 col)
{
	vec4 pal = ( .5 + .5* cos( 6.283*( col + uColor) ) );
	return pal;
}

vec3 greyScale(vec3 color, float lerpVal) {
    
    float greyCol = 0.3 * color.r + 0.59 * color.g + 0.11 * color.b;
    vec3 grey = vec3(greyCol, greyCol, greyCol);
    vec3 newColor = mix(color, grey, lerpVal);
    return newColor;
}

vec3 IridLighting(vec3 pos, vec3 norm, vec3 camPos, vec3 viewVec, vec3 lightPos, vec3 lightDir, vec3 lightCol, float fresStrg, float iridStrg)
{
	float ldc = dot(lightDir, -norm);
	vec3 rflct = reflect(normalize(pos - lightPos), norm);
	float spec = dot(rflct, viewVec);

	float fres = 1.0 - dot(norm, viewVec);
	fres *= fresStrg;
	vec4 irid = pal(fres * uDiffuseColor);
	vec3 color = ((0.4 + 0.3 * ldc + pow(spec, 2.0) * 0.3) * lightCol) * 0.1;
	color += greyScale(irid.rgb, 0.2)  * iridStrg;
	return color;
}
```


自作した`IridLighting`という関数はライトの位置やジオメトリーの位置によってライトの<b>ベクトル</b>を計算してます。
そのベクトルとジオメトリーのノーマルの<b>内積</b>の値によって色を付けると<b>影</b>が作れるんですね（笑）
rgbを引用した<b>pal()関数</b>に入れてそれぞれの値をずらします。すると<b>玉虫色</b>みたいな虹色が作れるってわけ（笑）

わかってます。

<b>こいつは何を言ってんだよ、</b>と

僕も何言ってるかわかりません（笑）

でも、要は<b>慣れ</b>なんです。<b>慣れ！</b>
どの人に聞いてもぜったいみんなそういうと思います！
<b>慣れ</b>だと。
普通のCやpythonなどのプログラミング言語とそもそもの考え方が違うところもあるので、
<b>楽しく</b>学びましょう([僕もまだまだ発展途上なので](https://www.youtube.com/watch?v=EfMPWqasP9I))
##ポイント5.TDLightingという呪縛
今まで、phongを使っていた皆さん！あなたは知らないうちに<b>touchdesignerが用意してくれた最強お手軽関数</b>`TDLighting`という僕がさっきまでやっていた工程をすべてすっ飛ばしてくれるものを使っていたんです。
[![dat_phong1GLSLPixel1__td_20232_41.glsl - Visual Studio Code 2021_04_10 19_06_46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704869/15e53b89-74b3-23c2-7cd0-0ba15ba9845b.png)](https://www.youtube.com/watch?v=EfMPWqasP9I)
私自身もつい最近まで知りませんでした。この事実に、、、
ありがとうとともにこれはライティングそのものをいじることができないという<b>デメリット</b>もあります。
それを我々は

<b>TDLightingの呪縛</b>と呼んでいます。

まあぶっちゃけTDLightingに勝つ力を手に入れるには、精神と時の部屋5年とガマ隠れの里5年の<b>修行</b>が必要になります
おれは1からshaderを書いて自分だけのリッチな表現をするんだ！
という、変態的思考を持つ方は、GLSLMATというプレーンなMATがあるのでおすすめします、
<b>僕は無理（笑）</b>

#3.これを作るに至った経緯
まぜこんなところに注目して作ったかというと、
[CGworldでモンハンのシェーダーを解説している回](https://www.famitsu.com/news/201808/23162839.html)があり、そこで玉虫色シェーダーをお話してたんすよねー
僕は2ndG世代なので、モンハンすごいやってたので親近感が沸いてこれできねかなと思って始めたのです。

多分touchdesignerでこのチュートリアル出してるの<b>初</b>じゃないかな。<b>マイナーすぎる（笑）</b>

#4.私の作例
[![Miwata tomoya(@miwa_maroon) • Instagram写真と動画 - Google Chrome 2021_04_10 19_14_03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704869/cdaf21cb-a8bd-5947-ddd5-cc8fe8ddb839.png)](https://www.instagram.com/p/CLeDBSzB5W6/)

これの床部分に<b>玉虫色のシェーダー</b> が使われています。
ちなみに[GLSLスクール](https://webgl.souhonzan.org/entry/?v=1808)の時の作品でもある。
今後も<b>touchdesignerを盛り上げていけたらな</b>と思っています。
see you next time!!