Technical Implementation of Ray Marching Soft Shadows in 2D Graphics Using Distance Fields
By
memalign
Pure flour-power. Hearty enough to carry you through lunch.
Summary
This article explains the technical implementation of ray marching soft shadows in 2D graphics, focusing on distance fields and WebGL techniques. The author, a software engineer at Figma, shares insights from a personal graphics project that gained attention on social media. The content covers the fundamentals of distance fields, how they're used to create soft shadows, and the specific WebGL implementation details for achieving the visual effects shown in the demo.
Key quotes
· 5 pulledA couple of weeks ago I tweeted a video of a toy graphics project (below). It's not done, but a lot of people liked it which was surprising and fun!
Under the hood it uses something called a distance field. A distance field is an image like the one below that tells you how far each pixel is from your shape.
Light grey pixels are close to the shape and dark grey pixels are far from it.
Disclaimer: the demos on this page use WebGL features that aren't available on some mobile devices.
A few people asked how it works, so that's what this post is about.
You might also wanna read
Rendering Realistic Skies and Planetary Atmospheres in Real-Time with Shaders
This article explores the technical and visual process of rendering realistic skies, sunsets, and planetary atmospheres in real-time using b
blog.maximeheckel.com·19d ago
Exploring surfel-based global illumination with WebGPU on the open web
A technical blog post exploring the use of WebGPU to compute real-time global illumination using surfels (surface patches). The author inves
juretriglav.si·22d ago
Implementing Colored Penumbra Shadow Effects in Unreal Engine 5
This article describes a technique for implementing "Colored Penumbra" or "Colored Shadow Terminator" effects in Unreal Engine 5. The author
chosker.github.io·24d ago
Experimental WebGPU Physics Engine Using AVBD Solver for Rigid-Body and Soft-Body Simulations
This article presents an experimental WebGPU physics engine called webphysics that implements an AVBD-style (Augmented Vertex Block Descent)
github.com·1mo ago
TrueType Font Contains 3D Raycasting Engine in Hinting Virtual Machine
A developer created a DOOM-style 3D raycasting engine that runs inside a TrueType font's hinting virtual machine. The project exploits the T
github.com·1mo ago
Slug Algorithm: 10 Years of GPU-Based Font Rendering Technology
Eric Lengyel reflects on the 10-year anniversary of the Slug Algorithm, a GPU-based font rendering technique he developed in 2016. The artic