[Touchdesigner入門]モデリングなしでぼこぼこな表面にするbump mapping

#Bump mapping
**Bump mapping**ってなんぞやという方が多いかもしれないので、今回作るものを早速お見せします！
![ezgif.com-gif-maker (1).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704869/d2bacb41-4a6a-04a2-db94-347f69976fc8.gif)

**まずは左側の球体に注目！！**
球体に名前の刻印と表面がぐにゃぐにゃしてますね。

どーせ、blenderとかHoudiniでモデリングしてアニメーションしてるんだろ！？
と思った皆さん！
違うのです。
**ただのsphere。ただのボールなのです！**
だから多くのポリゴンを動かすこともないので、**動作が軽い**ですね

いわゆるこれは、**Normal Map**という特殊なテクスチャを使って凹凸を可能にしています

先ほど申したように、軽さが取り柄なので、リアルタイム性を重視するゲームにも使われてます
Call of duty の建物とか観察するとわかります（笑）

bump mappingアリ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704869/a4aaa040-84da-10f0-d90f-644dd5d57399.png)
bump mappingナシ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704869/4064959d-09c6-10ec-9056-654151792d54.png)
>引用:https://www.4gamer.net/specials/3de/051222_call_of_duty_2_optimization/call_of_duty_2_optimization.shtml

右のドーナツは凸凹モデルにさらにbump mappingしたらどうなるの？っていうadvance版です
もちろんこっちもやるよー

#お手軽
今までの説明で、かなり便利な表現方法なのはわかっていただいたと思います。
さあ、それをどうやってやるのか！
ちょーぜつお手軽！
結論から申し上げると、
`Normal Map TOP` を使うんです！
**いやけっこうそのまま！**というツッコミは置いといて、具体的な操作方法を[下記](https://www.youtube.com/watch?v=6YrVSE3TJhY)で[動画](https://www.youtube.com/watch?v=6YrVSE3TJhY)で説明しています！
<iframe width="560" height="515" src="https://www.youtube.com/embed/6YrVSE3TJhY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>


#動画のtips
基本的な内容は[動画](https://www.youtube.com/watch?v=6YrVSE3TJhY)内で説明しているのでは、ここでは重要またな知っておきたいちょっとしたtipsに絞ってご紹介します！

##凹凸の強さ
`Normal Map TOP`を使うにあたって、凹凸の強さを変えたいってときありますよね
そんな時、以下も方法が有効です！

- `Normal Map TOP`の**Sample Step**の値を上げる
- Matrialの**Bump Scale**の値を上げる
- 元となるテクスチャの**輝度またはコントラスト**を上げる

まあ三つ目に関しては`Normal Map`のパラメーターの設定がデフォルトの場合ですが、
![bump_mapping_normal_default.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704869/4e21472e-df23-8982-f0fa-fcd2b7cd21f4.jpeg)


基本的に**白が凸**で、**黒が凹**になりやす！

なんで凹凸はおうとつって読むのに、逆にした凸凹はとつおうじゃなくて
でこぼこって読むんですか？教えてください

ちなみにmiwa_maroonは漢字、大の苦手です

##テクスチャの境界部分
bump mappingなどテクスチャを貼る場合、テクスチャの**端同士の境界線**が浮き出て不自然になることがよくあります。
![texture_edge.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704869/776e8e45-bade-0fe0-2cac-5bc003cf9eb9.png)

ここで使うのが`tile TOP`。使いたいテクスチャのTOPの前に挟んじゃってください。
普段、`Tile TOP`はinput TOPを名前通りタイル状に並べるお仕事ですが、今回は使いませんので、**RepeatXとRepeatYはそれぞれ1に**
そして使うのが**Overlap U/V**！
これの値を上げることでいい感じに境目を**ブレンド**できます
![texture_edge_overlap.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704869/87be1f25-c934-3961-fdda-d007f5467e24.png)

これは結構使えますよ

##Render selectにおけるWorld Space Normal
`Render TOP`ではいくつかのレンダリング結果を保存することができます。
たとえば、World Space Position
これはpolygonの座標が**xにいれば赤、yにいれば緑、zにいれば青**といった感じです
その保存された結果を取り出すのが`Render select TOP`！
(Render TOPとMATにて設定が必要)

MATで**World Space Normal**をBufferに設定して、`Render Select TOP`で取り出してみましょう
するとこんなんです
![bump_mapping_WorldSpaceNormal.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704869/88791690-fce6-8b28-4d4b-7b7829117de0.jpeg)

これもさっきと同じでpointまたはpolygonが**xを向いていたら赤、y向いていたら緑、z向いていたら青**という感じ
雪が降り積もる判定とかもこのNormalの情報使ってやったりしますね、知らんけど

高校の時、ベクトルの授業で、
「このベクトルに直交しているベクトルを法線といいます」
といわれ、そんなんどこで使うねんとおもった記憶がありますが

でてきた、ここで、
Normal = 法線　なので

そこまで教えてよ、先生、、、、

##RederしたいGeometryの選抜
geo3だけをrenderに映したいってなったら、`Render TOP`のReder -> Geometory -> geo3とやればいいのですが、
![bump_mapping_geo3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704869/d3e0ab73-3211-d4d9-eda6-354a78548d77.jpeg)

geo3以外を映したいってなったら
**^geo3**
ってやればいいみたい
![bump_mapping_^geo3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704869/a6eedca5-b68f-29b7-7806-ebb979cb55d3.jpeg)

地味にdocumentにも書いてある（笑）
https://docs.derivative.ca/Render_TOP

##私の作例
以前出した[Cube Map reflection](https://qiita.com/miwa_maroon/items/b2e0aef4a74fb65cf198) との重ね技
なんか錆の表現とかもいけそう

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">ぞわぞわする<br>メディアアートっぽい？？<a href="https://twitter.com/hashtag/touchdesigner?src=hash&amp;ref_src=twsrc%5Etfw">#touchdesigner</a> <a href="https://twitter.com/hashtag/reflection?src=hash&amp;ref_src=twsrc%5Etfw">#reflection</a> <a href="https://twitter.com/hashtag/bumpmapping?src=hash&amp;ref_src=twsrc%5Etfw">#bumpmapping</a> <a href="https://t.co/bchDqbodhC">pic.twitter.com/bchDqbodhC</a></p>&mdash; miwa_maroon (@miwata34) <a href="https://twitter.com/miwata34/status/1426765796265496576?ref_src=twsrc%5Etfw">August 15, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

もう一個
これのほぼ派生

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Water jewelry<br>Would you like one?<a href="https://twitter.com/hashtag/touchdesigner?src=hash&amp;ref_src=twsrc%5Etfw">#touchdesigner</a> <a href="https://twitter.com/hashtag/pbr?src=hash&amp;ref_src=twsrc%5Etfw">#pbr</a> <a href="https://twitter.com/hashtag/normalmap?src=hash&amp;ref_src=twsrc%5Etfw">#normalmap</a> <a href="https://t.co/HYzGAt5ldT">pic.twitter.com/HYzGAt5ldT</a></p>&mdash; miwa_maroon (@miwata34) <a href="https://twitter.com/miwata34/status/1426766878257553409?ref_src=twsrc%5Etfw">August 15, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

#これから
今後もTouchdesignerの使用者と社会での事例を増やすために、**たくさんチュートリアル出していきます！**
みなさんと一緒に盛り上げられたらと思います！
自分もまだまだですが、なにかやってほしいことあったらコメントください！