← All resources

On Shaping Light

Auto-discovered

Blog Intermediate

Maxime Heckel

Visit resource ↗

Description

On Shaping Light is a June 2025 tutorial article by Maxime Heckel on combining post-processing with volumetric raymarching to build real-time light shafts for React Three Fiber and WebGL scenes.

It rebuilds world rays from screen UVs and depth via NDC and inverse projection and view matrices, then raymarches cone spotlights with camera far, light position and direction, and cone angle uniforms. Topics continue through shadow-map occlusion, depth-buffer soft stops, multi-directional and multi-light setups, and demos inspired by space and architectural scenes, with GLSL snippets for getWorldPosition and an Effect subclass that requests the depth attribute.

It is for intermediate web graphics developers comfortable with Three.js or React Three Fiber who already know basic raymarching and want screen-space volumetrics.

Access is a free long-form blog post with diagrams, live demos, and shader listings; perspective cameras only are covered as noted on the page.

It is useful as a practical bridge between stylized post stacks and volumetric beams that respect scene geometry.