I really feel frustrated af with shaders. I am following along with three js journey and I got into the shaders part but I don’t really know if I am too stupid to understand it or is the problem with simons explanation or WHAT exactly. The main point is that I don’t really get it when we use Math and calculations like in this part ( float strength = min(abs(vUv.x - 0.5), abs(vUv.y - 0.5));
) I don’t really know what the hell we’re doing or why we’re using min and absolute value or this part (vec2 lightUv = vec2(
vUv.x,
vUv.y
);
float strength = 0.015 / distance(lightUv, vec2(0.5))
and as well when we animate something the math part always feels the same way. (I am good at Math academically btw). so is there a solution to this? I am still in 1st year in highschool I haven’t got into that advanced Math yet.
Luckily for you, there ain’t much advanced math in programming - advanced math (assuming that means the differentials & integrals calculus & complex formulas with fancy ∑’s etc.) is quite useless in practice until it’s simplified or approximated to the point that makes them useful - and that simplification usually happens on pen and paper in some Disney / Dreamworks studio, not in code.
It depends on the point of the code itself. Understanding others’ code is generally not an easy task, so no need to stress about it. To debug shaders and understand what a specific shader does, you can just plug parts of the equation directly to the output color, and see what kind of patterns you start to see (codepen, feel free to play around with the values around line 27):
Step 1 (just the vUv.x first, shifted by 0.5):
float strength = vUv.x - 0.5;
Step 2 (absolute value of vUv.x, which results in a mirrored value of vUv.x relative to the center):
float strength = abs(vUv.x - 0.5);
Step 3 (Same for vUv.y, mirrored pattern relative to the center):
Step 4 (Now apply min, which compares patterns from Step 2 & Step 3 and picks whichever pixel value is darker, resulting in that cross-like pattern, mirrored relative to the center on both X and Y axes):
float strength = min(abs(vUv.x - 0.5), abs(vUv.y - 0.5));
For debugging things like float strength = 0.015 / distance(lightUv, vec2(0.5)) - it’s also good to play around by shifting the 0.015 up and down - multiplying it by 10, dividing it by 10, to see how the shader reacts to the change in constant values.
The way of thinking in shader programming is quite different from the approach in programming languages like Javascript etc., the math is used very specifically. It is best to start with very simple exercises.
Take a look at the Little Shader Book .
(from the Collection of examples from discourse.threejs.org)
There is also a link to the easy-to-study https://thebookofshaders.com/