[Touchdesigner初心者向け]たった5分で出来る、スーパーイージー反射！

#反射は大事！
映像に関わるうえで、とても便利できれいな要素が存在します
それが
**反射**
です。言わずと知れたって感じですな
自然界でも、海や金属、人間の瞳だって**反射**しているよね
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704869/88e927cb-6520-f7f0-fb0b-067f3811609b.png)
> Image: oneinchpunch/Shutterstock.com

ってことで、その反射をちょー簡単に実装しようというわけでR

作っていくのは、**こちら!**
![ezgif.com-gif-maker (1).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704869/8bde8bf3-8f96-fda5-5a16-7e4bcf0aeb3b.gif)


#Super easy reflection
5分で出来るSuper easy reflection の**Touchdesigner チュートリアル動画**用意したのでこちらをぜひ！！
[![Inkedsuper_easy_reflection_thunmbnail_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704869/5c90dcf6-d939-9c7b-b93a-961640391400.jpeg)](https://youtu.be/IzevFmcaNOo)



なんでもそうだけど、**0から作っていくと自分の力になる**ので、
たった5分なので、実際に手を動かしてやってほしい！
というささやかな願い
(みんなにTouchdesigner好きになってほしいし、使ってほしいから、、、、)

とTouchdesignerへの愛を語ったところで、実際に解説に入っていくぅ

#CubeMap
今回の1番大事なところは〜
**Cube Map**
です！
どんなもんかって言うと、6面あるテクスチャです！
Touchdesigner で、色々作成方法ありますが、
今回は、
`Movie file in` からみんな大好き`Cloudy ocean` を選択した後、
`Projection Top`を出します！
Inputをequirectangularに
OutputをCubeMapに
[![cubemap.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704869/805902c4-de1b-83f7-b4bd-18eab8e75fe2.jpeg)](https://youtu.be/IzevFmcaNOo)


ほら、簡単これが**CubeMap**です

[動画](https://youtu.be/IzevFmcaNOo)のほうがわかりやすいかも

#environment map
今作った`CubeMap`をどうするかというと、これを**マテリアルのテクスチャ**にするんだ
`Phong mat` を出していただいて、パラメーターに**environment Map** があるんですなー
ここに`cube map`をぶちこめーーー
[![enviromentmap.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704869/bc82ea6b-3a40-fada-95b3-fe2ba839b26c.jpeg)](https://youtu.be/IzevFmcaNOo)

もし、明るすぎる！！ってなったら
`Diffuse color` の値を0にするといいかも！！

#normalizeを解除せよ
ここまでやってきて鋭い方はこう思ってますね

**なんか、歪んでね！？**

そうなんです。これを解決する方法を教えます
Phongの1番目のパラメーターの1番下にoutput shaderというボタンがあります。
[![outputshader.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704869/c1b8a0e9-0fe7-6386-9f73-0cf54cce34a2.jpeg)](https://youtu.be/IzevFmcaNOo)

これをクリックすると、このマテリアルの**GLSL コード**が見れます

はーいー、GLSLむりー、やめまーす、

なんて思わないで！！
やる事は１つだけだから、

**output shader**した後に出てきた、**vertex shader**の方のコードに、
viewVecというベクトルの変数あります！
[![viewvwc.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704869/5cd8c967-7b6a-43fc-f60b-e5a80c0ca0ea.jpeg)](https://youtu.be/IzevFmcaNOo)

これは、カメラからマテリアルがアタッチされてるジオメトリーの向きです
これの**normalize**をとってください！

```glsl:元ソース
vec3 viewVec = normalize(uTDMats[cameraIndex].camInverse[3].xyz - worldSpacePos.xyz);
```

↓↓

```glsl:変更後
vec3 viewVec = uTDMats[cameraIndex].camInverse[3].xyz - worldSpacePos.xyz;
```

これだけ！！

**あ、新しく生成したマテリアルをアタッチしなおすの忘れないでね～**
ちょっとわかりにくいわって方は、ぜひ[動画](https://youtu.be/IzevFmcaNOo)見てください〜

#実はほぼパクリ
これあんまり言いたくないんですけど、これ実は**ある人の記事**のパクリと言っても過言ではないんですよね。
その人は、**webgl school**などを開催していらっしゃってる[doxas](https://twitter.com/h_doxas) さんです
そして、その記事がこちら！

https://wgld.org/d/webgl/w044.html


ぜひ見ていただいて欲しいんです

まじで、アホみたいにビジュアルまでパクってるので、
あはははははは

(笑顔でごまかそ)

#とにかく使っとけばイイカンジ
ビジュアル作り込む時間ないんだよなー
って時は、これやれば**イイカンジ！**
お手軽ですー

わたしのさくれい
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">あなたにとって、会社ってどういう場所なんだろう <a href="https://t.co/LXpvuRuKm7">pic.twitter.com/LXpvuRuKm7</a></p>&mdash; miwa_maroon (@miwata34) <a href="https://twitter.com/miwata34/status/1411155283640864769?ref_src=twsrc%5Etfw">July 3, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

悪くないだろう

パクったていい、なぜならそれはちゃんと理解しているということだから
それでは、