Realtime Caustics in TouchDesigner with Easy GLSL

Caustics form from light refracted through a transparent medium (like the pretty patterns that form on the bottom of a swimming pool). This tutorial will outline the physics involved and show you how to create this effect in TouchDesigner using only a handful of lines of GLSL code.
Project files and more: / water__shed
Resources:
Ray / Plane intersection: www.scratchapi...
Caustics in Houdini: • A Bit Of VEX : Easy Ca...

[@paxk.8624]

Wow, it feels like a magician pulling a white rabbit out of a top hat. I didn't quite understand the mathematical part or the GLSL commands, so I'm all the happier that everything worked out in the end. Very good tutorial. Thank you very much!

[@berataltunay5437]

this has educated me much more than any class I took on college.

[@water__shed]

this is the best compliment i could get :) thank you!!

[@51Mariiian]

so understandble explaination for both physic theory and glsl code ! even for beginners :)

[@water__shed]

thank you!! i am happy you find it useful :)

[@n-re-distribution]

thank you so much for such thorough explanations! great tutorial

[@water__shed]

You're very welcome!

[@frekvensnord]

you´re a gem m8

[@unveil7762]

i mean we can use this to dispalce a grid and give that fancy normal, and have an image under it dispalced by the UV * caustic xy. SUPER COOL TUTORIAL !!! PS zoom the vCode text if not is hard to read

[@water__shed]

will do, thanks for the tip - cool idea w the displacement, you could also experiment with distorting the light direction, multiple light sources, or using a map

[@unveil7762]

I try to recreate a flat diffuse light map . Works kind of nice if you put it in the right spot a simple circle take kind of shadows an look like a spheree.

[@kidistwosenyeleh2971]

beautiful

[@brenolenhard]

I had troble with the results. After some time testing I discover that I needed to reduce the size of the Box to 0.1, then it worked same as your results! (I don't know why)

[@nathalyechavez9915]

thanks, great tutorial. I'm having problems setting up the base_ at the beggining with the noise and the null. I dont get the component edition at first. Can anyone help me please?

[@tequilasunset4651]

My code looks the same as at 21 min point, but the depth isn't showing as the G value. The shader output looks the same. (I wanted to export depth as a uniform too) The instanced geometry looks way off when I build that setup.

[@water__shed]

you can grab the project files and check your work against them

[@knast7093]

Great tutorial - much much appreciate the share!
I have an issue though. I'm not a coder at all and once I've typed in the GLSL you mention I get this error:
'Pixel Shader Compile Results:
0(11) : error C1503: undefined variable "surfaceNormal"'
I wonder if my version of TD is too old - or maybe I missed something?

[@water__shed]

That error normally means that the variable you are trying to use is not declared (or declared improperly/ with a typo). Before you use surfaceNormal at all, you need to declare it so the shader "knows" that its a variable, allocates memory space for it, etc. You declare a variable in GLSL like this: "vec3 surfaceNormal;" or "vec3 surfaceNormal = texture(sTD2DInputs[0], vUV.st).rgb;"
this is likely the issue - to fix, make sure you have properly declared the variable before passing it into the refract() function
to make things more clear, here is a snippet breaking apart the declaration of the variable from its usage:
vec3 surfaceNormal; //declaring an empty vec3 variable named surfaceNormal
surfaceNormal = texture(sTD2DInputs[0], vUV.st).rgb; // this line does not need to redeclare surfaceNormal, since it was already declard the line above (trying to put vec3 at the start of this line will throw a different error)
hope this helps!

[@tatumtot6544]

Idk if I’m doing something wrong or my computer is just messing up, but as soon as I get to 22:10 and start instancing, it only shows 3 lines instead of the randomness it’s supposed to have at first and then once I added the math TOPs it just made like 9 small gridded boxes and that was it. Is it a bug or did I do something wrong?

[@water__shed]

hey there - a bit difficult to say without seeing the error, but it sounds like you may have positioning or scaling issues. try replacing the glsl caustics top with a Noise TOP (32 bit) and see if that gives you the desired results. if so, then the issue is in your glsl. if not, then the issue is probably related to the scaling of the boxes (see part two for some other ways to render, maybe one of those will work better for you)

[@cayetanojozami4067]

im having the same issue, i want to know how to solve it, if you have any advice or tip just lmk please

[@santiagoespinoza5265]

hey I had the same trouble, I resolved by making the first noise to be 32 bit float rgba

[@somilmhta]

Great tutorial and it looks great. I'm just wondering if there is a reason you render using the box geo. I feel like the instancing be a lot lighter if you render it as points and then apply a line mat that only renders it as points.

[@water__shed]

This is a great point, appreciate the comment

[@tom.konxompax]

This sounds good, how does it work exactly?

[@water__shed]

@@tom.konxompax check out part 2, i go through how to implement! th-cam.com/video/LzNoz5e23c8/w-d-xo.html

[@tom.konxompax]

@@water__shed legendary!

[@enneagramma7304]

pls can u pass down write the codes u used? thx a lot for the tutorial

[@water__shed]

Hey! the code is available on patreon: www.patreon.com/water__shed

[@JustJash_]

Why not use a point transform top after the GLSL top

[@water__shed]

certainly can - i thought the math /reorder tops conveyed the logic more clearly