# Ray Marching ## Use Cases - Rendering implicit surfaces (geometry defined by mathematical functions) without triangle meshes - Creating fractals, organic forms, liquid metal, and other shapes difficult to express with traditional modeling - Implementing volumetric effects: fire, smoke, clouds, glow - Rapid prototyping of procedural scenes: building complex scenes by combining SDF primitives with boolean operations - Advanced distance-field-based lighting: soft shadows, ambient occlusion, subsurface scattering ## Core Principles Cast a ray from the camera along each pixel direction, advancing step by step using a **Signed Distance Function (SDF)** (Sphere Tracing). Each step advances by the SDF value at the current point, guaranteeing no surface penetration. - Ray equation: `P(t) = ro + t * rd` - Stepping logic: `t += SDF(P(t))` - Hit test: `SDF(P) < epsilon` - Normal estimation: `N = normalize(gradient of SDF(P))` (direction of the SDF gradient) - Volumetric rendering: advance at fixed step size, accumulating density and color per step (front-to-back compositing) ## Implementation Steps ### Step 1: UV Normalization and Ray Direction ```glsl // Concise version vec2 uv = (2.0 * fragCoord - iResolution.xy) / iResolution.y; vec3 ro = vec3(0.0, 0.0, -3.0); vec3 rd = normalize(vec3(uv, 1.0)); // z=1.0 ~ 90 deg FOV // Precise FOV control vec2 xy = fragCoord - iResolution.xy / 2.0; float z = iResolution.y / tan(radians(FOV) / 2.0); vec3 rd = normalize(vec3(xy, -z)); ``` ### Step 2: Camera Matrix (Look-At) ```glsl mat3 setCamera(vec3 ro, vec3 ta, float cr) { vec3 cw = normalize(ta - ro); vec3 cp = vec3(sin(cr), cos(cr), 0.0); vec3 cu = normalize(cross(cw, cp)); vec3 cv = cross(cu, cw); return mat3(cu, cv, cw); } mat3 ca = setCamera(ro, ta, 0.0); vec3 rd = ca * normalize(vec3(uv, FOCAL_LENGTH)); // 1.0~3.0, larger = narrower FOV ``` ### Step 3: Scene SDF ```glsl // SDF primitives float sdSphere(vec3 p, float r) { return length(p) - r; } float sdBox(vec3 p, vec3 b) { vec3 d = abs(p) - b; return min(max(d.x, max(d.y, d.z)), 0.0) + length(max(d, 0.0)); } float sdTorus(vec3 p, vec2 t) { return length(vec2(length(p.xz) - t.x, p.y)) - t.y; } // Boolean operations float opUnion(float a, float b) { return min(a, b); } float opSubtraction(float a, float b) { return max(a, -b); } float opIntersection(float a, float b) { return max(a, b); } // Smooth blending, adjustable k: 0.1~0.5 float smin(float a, float b, float k) { float h = max(k - abs(a - b), 0.0); return min(a, b) - h * h * 0.25 / k; } // Scene composition float map(vec3 p) { float d = sdSphere(p - vec3(0.0, 0.5, 0.0), 0.5); d = opUnion(d, p.y); // ground d = smin(d, sdBox(p - vec3(1.0, 0.3, 0.0), vec3(0.3)), 0.2); // smooth blend with box return d; } ``` ### Step 4: Ray Marching Loop ```glsl #define MAX_STEPS 128 #define MAX_DIST 100.0 #define SURF_DIST 0.001 float rayMarch(vec3 ro, vec3 rd) { float t = 0.0; for (int i = 0; i < MAX_STEPS; i++) { vec3 p = ro + t * rd; float d = map(p); if (d < SURF_DIST) return t; t += d; if (t > MAX_DIST) break; } return -1.0; } ``` ### Step 5: Normal Estimation ```glsl // Central differences (6 SDF evaluations) vec3 calcNormal(vec3 p) { vec2 e = vec2(0.001, 0.0); return normalize(vec3( map(p + e.xyy) - map(p - e.xyy), map(p + e.yxy) - map(p - e.yxy), map(p + e.yyx) - map(p - e.yyx) )); } // Tetrahedral trick (4 SDF evaluations, recommended) vec3 calcNormal(vec3 pos) { vec3 n = vec3(0.0); for (int i = 0; i < 4; i++) { vec3 e = 0.5773 * (2.0 * vec3((((i+3)>>1)&1), ((i>>1)&1), (i&1)) - 1.0); n += e * map(pos + 0.001 * e); } return normalize(n); } ``` ### Step 6: Lighting and Shading ```glsl vec3 shade(vec3 p, vec3 rd) { vec3 nor = calcNormal(p); vec3 lightDir = normalize(vec3(0.6, 0.35, 0.5)); vec3 halfDir = normalize(lightDir - rd); float diff = clamp(dot(nor, lightDir), 0.0, 1.0); float spec = pow(clamp(dot(nor, halfDir), 0.0, 1.0), SHININESS); // 8~64 float sky = sqrt(clamp(0.5 + 0.5 * nor.y, 0.0, 1.0)); vec3 col = vec3(0.2, 0.2, 0.25); vec3 lin = vec3(0.0); lin += diff * vec3(1.3, 1.0, 0.7) * 2.2; lin += sky * vec3(0.4, 0.6, 1.15) * 0.6; lin += vec3(0.25) * 0.55; col *= lin; col += spec * vec3(1.3, 1.0, 0.7) * 5.0; return col; } ``` ### Step 7: Post-Processing ```glsl col = pow(col, vec3(0.4545)); // Gamma correction (1/2.2) col = col / (1.0 + col); // Reinhard tone mapping (optional, before gamma) // Vignette (optional) vec2 q = fragCoord / iResolution.xy; col *= 0.5 + 0.5 * pow(16.0 * q.x * q.y * (1.0 - q.x) * (1.0 - q.y), 0.25); ``` ## Full Code Template Can be pasted directly into ShaderToy. Includes SDF scene, Phong lighting, soft shadows, and ambient occlusion: ```glsl // ============================================================ // Ray Marching Full Template — ShaderToy // ============================================================ #define MAX_STEPS 128 #define MAX_DIST 100.0 #define SURF_DIST 0.001 #define SHADOW_STEPS 24 #define AO_STEPS 5 #define FOCAL_LENGTH 2.5 #define SHININESS 16.0 // --- SDF Primitives --- float sdSphere(vec3 p, float r) { return length(p) - r; } float sdBox(vec3 p, vec3 b) { vec3 d = abs(p) - b; return min(max(d.x, max(d.y, d.z)), 0.0) + length(max(d, 0.0)); } float sdTorus(vec3 p, vec2 t) { return length(vec2(length(p.xz) - t.x, p.y)) - t.y; } // --- Boolean Operations --- float opUnion(float a, float b) { return min(a, b); } float opSubtraction(float a, float b) { return max(a, -b); } float opIntersection(float a, float b) { return max(a, b); } float smin(float a, float b, float k) { float h = max(k - abs(a - b), 0.0); return min(a, b) - h * h * 0.25 / k; } mat2 rot2D(float a) { float c = cos(a), s = sin(a); return mat2(c, -s, s, c); } // --- Scene Definition --- float map(vec3 p) { float ground = p.y; vec3 q = p - vec3(0.0, 0.8, 0.0); q.xz *= rot2D(iTime * 0.5); float body = smin(sdSphere(q, 0.5), sdTorus(q, vec2(0.8, 0.15)), 0.3); return opUnion(ground, body); } // --- Normal (Tetrahedral Trick) --- vec3 calcNormal(vec3 pos) { vec3 n = vec3(0.0); for (int i = min(iFrame,0); i < 4; i++) { vec3 e = 0.5773 * (2.0 * vec3((((i+3)>>1)&1), ((i>>1)&1), (i&1)) - 1.0); n += e * map(pos + 0.001 * e); } return normalize(n); } // --- Soft Shadows --- float calcSoftShadow(vec3 ro, vec3 rd, float tmin, float tmax) { float res = 1.0, t = tmin; for (int i = 0; i < SHADOW_STEPS; i++) { float h = map(ro + rd * t); float s = clamp(8.0 * h / t, 0.0, 1.0); res = min(res, s); t += clamp(h, 0.01, 0.2); if (res < 0.004 || t > tmax) break; } res = clamp(res, 0.0, 1.0); return res * res * (3.0 - 2.0 * res); } // --- Ambient Occlusion --- float calcAO(vec3 pos, vec3 nor) { float occ = 0.0, sca = 1.0; for (int i = 0; i < AO_STEPS; i++) { float h = 0.01 + 0.12 * float(i) / float(AO_STEPS - 1); float d = map(pos + h * nor); occ += (h - d) * sca; sca *= 0.95; } return clamp(1.0 - 3.0 * occ, 0.0, 1.0); } // --- Ray March --- float rayMarch(vec3 ro, vec3 rd) { float t = 0.0; for (int i = 0; i < MAX_STEPS; i++) { vec3 p = ro + t * rd; float d = map(p); if (abs(d) < SURF_DIST * (1.0 + t * 0.1)) return t; t += d; if (t > MAX_DIST) break; } return -1.0; } // --- Camera --- mat3 setCamera(vec3 ro, vec3 ta, float cr) { vec3 cw = normalize(ta - ro); vec3 cp = vec3(sin(cr), cos(cr), 0.0); vec3 cu = normalize(cross(cw, cp)); vec3 cv = cross(cu, cw); return mat3(cu, cv, cw); } // --- Rendering --- vec3 render(vec3 ro, vec3 rd) { vec3 col = vec3(0.7, 0.7, 0.9) - max(rd.y, 0.0) * 0.3; // sky float t = rayMarch(ro, rd); if (t > 0.0) { vec3 pos = ro + t * rd; vec3 nor = calcNormal(pos); // Material vec3 mate = vec3(0.18); if (pos.y < 0.001) { float f = mod(floor(pos.x) + floor(pos.z), 2.0); mate = vec3(0.1 + 0.05 * f); } else { mate = 0.2 + 0.2 * sin(vec3(0.0, 1.0, 2.0)); } // Lighting vec3 lightDir = normalize(vec3(-0.5, 0.4, -0.6)); float occ = calcAO(pos, nor); float dif = clamp(dot(nor, lightDir), 0.0, 1.0); dif *= calcSoftShadow(pos + nor * 0.01, lightDir, 0.02, 2.5); vec3 hal = normalize(lightDir - rd); float spe = pow(clamp(dot(nor, hal), 0.0, 1.0), SHININESS) * dif; float sky = sqrt(clamp(0.5 + 0.5 * nor.y, 0.0, 1.0)); vec3 lin = vec3(0.0); lin += dif * vec3(1.3, 1.0, 0.7) * 2.2; lin += sky * vec3(0.4, 0.6, 1.15) * 0.6 * occ; lin += vec3(0.25) * 0.55 * occ; col = mate * lin; col += spe * vec3(1.3, 1.0, 0.7) * 5.0; col = mix(col, vec3(0.7, 0.7, 0.9), 1.0 - exp(-0.0001 * t * t * t)); // distance fog } return clamp(col, 0.0, 1.0); } void mainImage(out vec4 fragColor, in vec2 fragCoord) { float time = 32.0 + iTime * 1.5; vec2 mo = iMouse.xy / iResolution.xy; vec3 ta = vec3(0.0, 0.5, 0.0); vec3 ro = ta + vec3(4.0*cos(0.1*time+7.0*mo.x), 1.5, 4.0*sin(0.1*time+7.0*mo.x)); mat3 ca = setCamera(ro, ta, 0.0); vec2 uv = (2.0 * fragCoord - iResolution.xy) / iResolution.y; vec3 rd = ca * normalize(vec3(uv, FOCAL_LENGTH)); vec3 col = render(ro, rd); col = pow(col, vec3(0.4545)); vec2 q = fragCoord / iResolution.xy; col *= 0.5 + 0.5 * pow(16.0 * q.x * q.y * (1.0 - q.x) * (1.0 - q.y), 0.25); fragColor = vec4(col, 1.0); } ``` ## Common Variants ### 1. Volumetric Ray Marching Advance at fixed step size, accumulating density/color per step. Used for fire, smoke, and clouds. ```glsl #define VOL_STEPS 150 #define VOL_STEP_SIZE 0.05 float fbmDensity(vec3 p) { float den = 0.2 - p.y; vec3 q = p - vec3(0.0, 1.0, 0.0) * iTime; float f = 0.5000 * noise(q); q = q * 2.02 - vec3(0.0, 1.0, 0.0) * iTime; f += 0.2500 * noise(q); q = q * 2.03 - vec3(0.0, 1.0, 0.0) * iTime; f += 0.1250 * noise(q); q = q * 2.01 - vec3(0.0, 1.0, 0.0) * iTime; f += 0.0625 * noise(q); return den + 4.0 * f; } vec3 volumetricMarch(vec3 ro, vec3 rd) { vec4 sum = vec4(0.0); float t = 0.05; for (int i = 0; i < VOL_STEPS; i++) { vec3 pos = ro + t * rd; float den = fbmDensity(pos); if (den > 0.0) { den = min(den, 1.0); vec3 col = mix(vec3(1.0,0.5,0.05), vec3(0.48,0.53,0.5), clamp(pos.y*0.5,0.0,1.0)); col *= den; col.a = den * 0.6; col.rgb *= col.a; sum += col * (1.0 - sum.a); if (sum.a > 0.99) break; } t += VOL_STEP_SIZE; } return clamp(sum.rgb, 0.0, 1.0); } ``` ### 2. CSG Scene Construction ```glsl float sceneSDF(vec3 p) { p = rotateY(iTime * 0.5) * p; float sphere = sdSphere(p, 1.2); float cube = sdBox(p, vec3(0.9)); float cyl = sdCylinder(p, vec2(0.4, 2.0)); float cylX = sdCylinder(p.yzx, vec2(0.4, 2.0)); float cylZ = sdCylinder(p.xzy, vec2(0.4, 2.0)); return opSubtraction(opIntersection(sphere, cube), opUnion(cyl, opUnion(cylX, cylZ))); } ``` ### 3. Physically-Based Volumetric Scattering ```glsl void getParticipatingMedia(out float sigmaS, out float sigmaE, vec3 pos) { float heightFog = 0.3 * clamp((7.0 - pos.y), 0.0, 1.0); sigmaS = 0.02 + heightFog; sigmaE = max(0.000001, sigmaS); } vec3 S = lightColor * sigmaS * phaseFunction() * volShadow; vec3 Sint = (S - S * exp(-sigmaE * stepLen)) / sigmaE; scatteredLight += transmittance * Sint; transmittance *= exp(-sigmaE * stepLen); ``` ### 4. Glow Accumulation ```glsl vec2 rayMarchWithGlow(vec3 ro, vec3 rd) { float t = 0.0, dMin = MAX_DIST; for (int i = 0; i < MAX_STEPS; i++) { vec3 p = ro + t * rd; float d = map(p); if (d < dMin) dMin = d; if (d < SURF_DIST) break; t += d; if (t > MAX_DIST) break; } return vec2(t, dMin); } float glow = 0.02 / max(dMin, 0.001); col += glow * vec3(1.0, 0.8, 0.9); ``` ### 5. Refraction and Bidirectional Marching ```glsl float castRay(vec3 ro, vec3 rd) { float sign = (map(ro) < 0.0) ? -1.0 : 1.0; float t = 0.0; for (int i = 0; i < 120; i++) { float h = sign * map(ro + rd * t); if (abs(h) < 0.0001 || t > 12.0) break; t += h; } return t; } vec3 refDir = refract(rd, nor, IOR); // IOR: index of refraction, e.g. 0.9 float t2 = 2.0; for (int i = 0; i < 50; i++) { float h = map(hitPos + refDir * t2); t2 -= h; if (abs(h) > 3.0) break; } vec3 nor2 = calcNormal(hitPos + refDir * t2); ``` ## Performance & Composition **Performance tips:** - Use tetrahedral trick for normals (4 SDF evaluations instead of 6) - `min(iFrame,0)` as loop start value to prevent compiler unrolling - AABB bounding box pre-test to skip empty regions - Adaptive hit threshold: `SURF_DIST * (1.0 + t * 0.1)` - Step clamping: `t += clamp(h, 0.01, 0.2)` - Early exit for volumetric rendering when `sum.a > 0.99` - Use cheap bounding SDF first, then compute precise SDF **Composition directions:** - + FBM noise: terrain/rock texture, cloud/smoke volumetric density fields - + Domain transforms (twist/bend/repeat): infinite repeating corridors, surreal geometry - + PBR materials (Cook-Torrance BRDF + Fresnel + environment mapping) - + Multi-pass post-processing: depth of field, motion blur, tone mapping - + Procedural animation: time-driven SDF parameters + smoothstep easing ## Further Reading Full step-by-step tutorials, mathematical derivations, and advanced usage in [reference](../reference/ray-marching.md)