1
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Posted at

#Bump mapping
Bump mappingってなんぞやという方が多いかもしれないので、今回作るものを早速お見せします!
ezgif.com-gif-maker (1).gif

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

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

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

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

bump mappingアリ
image.png
bump mappingナシ
image.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 を使うんです!
**いやけっこうそのまま!**というツッコミは置いといて、具体的な操作方法を下記動画で説明しています!

#動画のtips
基本的な内容は動画内で説明しているのでは、ここでは重要またな知っておきたいちょっとしたtipsに絞ってご紹介します!

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

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

まあ三つ目に関してはNormal Mapのパラメーターの設定がデフォルトの場合ですが、
bump_mapping_normal_default.jpg

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

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

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

##テクスチャの境界部分
bump mappingなどテクスチャを貼る場合、テクスチャの端同士の境界線が浮き出て不自然になることがよくあります。
texture_edge.png

ここで使うのがtile TOP。使いたいテクスチャのTOPの前に挟んじゃってください。
普段、Tile TOPはinput TOPを名前通りタイル状に並べるお仕事ですが、今回は使いませんので、RepeatXとRepeatYはそれぞれ1に
そして使うのがOverlap U/V
これの値を上げることでいい感じに境目をブレンドできます
texture_edge_overlap.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

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

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

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

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

##RederしたいGeometryの選抜
geo3だけをrenderに映したいってなったら、Render TOPのReder -> Geometory -> geo3とやればいいのですが、
bump_mapping_geo3.jpg

geo3以外を映したいってなったら
^geo3
ってやればいいみたい
bump_mapping_^geo3.jpg

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

##私の作例
以前出したCube Map reflection との重ね技
なんか錆の表現とかもいけそう

もう一個
これのほぼ派生

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

1
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?