GLSL Learning

GLSL shader example

Visualizing SDF Normals in RGB

Centered differences estimate the gradient along three axes. Normalize and map it into RGB as a normal diagnostic.

Live example

Edit the code and the preview updates as you type.

What to observe

Visualizing SDF Normals in RGB.

Mechanism

Centered differences estimate the gradient along three axes. Normalize and map it into RGB as a normal diagnostic.

The controlling code

return length(p)-.75;

Experiment

Change c=normal*.5+.5 to c=vec3(normal.z*.5+.5). The RGB orientation view becomes grayscale, isolating how strongly the sphere surface faces the positive z direction.

Debugging and cost

normalAt samples scene on both sides of x, y and z using e=vec2(.002,0.). Increase .002 to .05 to compare a wider finite-difference interval; on this smooth sphere the change may be subtle, and the six-query cost stays the same.

Understand the technique

Built-in functions used

abs()floor()fract()min()max()clamp()mix()sin()cos()sqrt()length()dot()normalize()

Learn it step by step