Painting Worlds with Raymarching: A GLSL Shader Journey

2025-06-19
Painting Worlds with Raymarching: A GLSL Shader Journey

This article details creating 3D scenes using Raymarching and GLSL shaders. Starting with fundamental concepts like ray marching and signed distance functions (SDFs), it guides you through building simple shapes and combining them using SDF operators (like min and smoothmin) to create complex scenes. Advanced topics covered include lighting models, soft shadows, creating infinitely repeating scenes, and generating realistic terrains using noise derivatives. The author culminates with a stunning example of an infinite Martian landscape, sharing their creative process and insights.

Read more
Development

Volumetric Lighting in React Three Fiber: Raymarching with Post-Processing

2025-06-14
Volumetric Lighting in React Three Fiber: Raymarching with Post-Processing

This article delves into creating realistic volumetric lighting effects in React Three Fiber by combining post-processing and volumetric raymarching. The author meticulously explains coordinate system transformations, reconstructing 3D rays from screen space, and utilizing depth buffers for performance optimization. Advanced techniques like light shaping using SDFs, shadow mapping, and light scattering are covered, culminating in a dynamic volumetric lighting effect with shadows and fog. Multiple demos showcase the technique in archways and space scenes, while also exploring multi-light sources and omnidirectional shadowing.

Read more

Crafting Stunning Post-Processing Effects with Shaders

2025-02-09
Crafting Stunning Post-Processing Effects with Shaders

This article details the author's 2024 journey learning shader techniques and applying them to post-processing. Inspired by artists like @samdape and @hahajohnx, they created intricate pixel patterns, trompe l'oeil effects, and interactive post-processing. The article dives deep into the techniques behind pixelation, creating patterns using SDFs and threshold matrices, and achieving effects like LED panels, woven fabric, Lego bricks, and frosted glass. Code snippets and demos are provided.

Read more

Building a Retro 3D Website Effect with Shaders: Dithering, Quantization, and Pixelation

2025-02-03
Building a Retro 3D Website Effect with Shaders: Dithering, Quantization, and Pixelation

The author spent months building their personal website, incorporating 3D work to showcase shader and WebGL skills. The article delves into the crucial role of post-processing in enhancing 3D scene visuals, focusing on creating retro effects. It covers various dithering techniques (white noise, ordered, and blue noise), explaining their implementation using shaders. Color quantization techniques are also detailed, allowing for custom palettes. The article culminates in a stunning retro 3D website effect combining pixelation and CRT monitor emulation.

Read more
Development Shaders Post-processing