[For Touchdesigner beginners] Super easy reflection that takes only 5 minutes!
Reflection is important!
here is a very useful and beautiful element when it comes to video.
That is
reflection
is reflection. I guess we all know what it is.
Even in nature, the ocean, metal, and human eyes reflect, don’t they?
Image: oneinchpunch/Shutterstock.com
So, let’s implement the reflection in a very simple way.
Here’s what we’re going to make!
Super easy reflection
I’ve prepared a 5-minute tutorial video on Super easy reflection Touchdesigner, so please watch it!
It’s like anything else, you have to start from scratch to make it work for you.
It’s only five minutes, so I want you to actually do it with your hands!
That’s my small wish.
(、、、、 because I want everyone to like and use Touchdesigner)
And now that I’ve expressed my love for Touchdesigner, let’s get to the actual explanation.
CubeMap
What is the most important part of this project?
Cube Map!
To give you an idea of what it looks like, it’s a texture with six sides!
In Touchdesigner, there are many ways to create a texture, but this time, I’m going to use the movie file in TOP and select Cloudy ocean, which we all love.
Bring up the Projection Top!
Set Input to equirectangular
Set Output to CubeMap
See, this is CubeMap in a nutshell!
The video might be easier to understand.
environment map
What we need to do with the CubeMap we just created is to turn it into a material texture.
If you bring up the Phong mat, there is an environment map in the parameters.
Put the cube map in here!
If it’s too bright! then
you might want to set the Diffuse color value to 0!
Deactivate normalize.
After all this, you may be thinking
Isn’t it a bit distorted?
That’s right. Here’s how to fix it.
At the bottom of the first parameter of Phong, there is a button called output shader.
Click on this to see the GLSL code for this material
No, I don’t want to use GLSL, I’m quitting.
Don’t think so!
There’s only one thing to do.
In the vertex shader code that comes up after the output shader, there is a vector variable called viewVec.
This is the orientation of the geometry that the material is attached to from the camera.
Take the normalize of this!
vec3 viewVec = normalize(uTDMats[cameraIndex].camInverse[3].xyz — worldSpacePos.xyz);
↓↓
vec3 viewVec = uTDMats[cameraIndex].camInverse[3].xyz — worldSpacePos.xyz;
That’s it!
Oh, and don’t forget to reattach the newly generated material!
If this is a bit confusing, please check out the video.
Actually, it’s almost a copy.
I don’t want to say this too much, but this is actually a copy of someone’s article.
That person is doxas, who runs a webgl school.
And here’s the article!
I’d like you to take a look.
Seriously, he even took the visuals like an idiot.
Hahahahahaha!
(I’ll cover it up with a smile)
Just use it and you’ll be fine.
I don’t have time to create visuals.
If you don’t have the time to create visuals, just do this and you’ll be good to go!
It’s easy!
That’s not bad.
It’s okay to copy, because that means you know what you’re doing.
See you soon
