LoginSignup
3

More than 1 year has passed since last update.

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

Posted at

反射は大事!

映像に関わるうえで、とても便利できれいな要素が存在します
それが
反射
です。言わずと知れたって感じですな
自然界でも、海や金属、人間の瞳だって反射しているよね
image.png

Image: oneinchpunch/Shutterstock.com

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

作っていくのは、こちら!
ezgif.com-gif-maker (1).gif

Super easy reflection

5分で出来るSuper easy reflection のTouchdesigner チュートリアル動画用意したのでこちらをぜひ!!
Inkedsuper_easy_reflection_thunmbnail_LI.jpg

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

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

CubeMap

今回の1番大事なところは〜
Cube Map
です!
どんなもんかって言うと、6面あるテクスチャです!
Touchdesigner で、色々作成方法ありますが、
今回は、
Movie file in からみんな大好きCloudy ocean を選択した後、
Projection Topを出します!
Inputをequirectangularに
OutputをCubeMapに
cubemap.jpg

ほら、簡単これがCubeMapです

動画のほうがわかりやすいかも

environment map

今作ったCubeMapをどうするかというと、これをマテリアルのテクスチャにするんだ
Phong mat を出していただいて、パラメーターにenvironment Map があるんですなー
ここにcube mapをぶちこめーーー
enviromentmap.jpg

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

normalizeを解除せよ

ここまでやってきて鋭い方はこう思ってますね

なんか、歪んでね!?

そうなんです。これを解決する方法を教えます
Phongの1番目のパラメーターの1番下にoutput shaderというボタンがあります。
outputshader.jpg

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

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

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

output shaderした後に出てきた、vertex shaderの方のコードに、
viewVecというベクトルの変数あります!
viewvwc.jpg

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

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

↓↓

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

これだけ!!

あ、新しく生成したマテリアルをアタッチしなおすの忘れないでね~
ちょっとわかりにくいわって方は、ぜひ動画見てください〜

実はほぼパクリ

これあんまり言いたくないんですけど、これ実はある人の記事のパクリと言っても過言ではないんですよね。
その人は、webgl schoolなどを開催していらっしゃってるdoxas さんです
そして、その記事がこちら!

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

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

(笑顔でごまかそ)

とにかく使っとけばイイカンジ

ビジュアル作り込む時間ないんだよなー
って時は、これやればイイカンジ!
お手軽ですー

わたしのさくれい

悪くないだろう

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

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
3