Skip to content

📚 webgl

A flowing WebGL gradient, deconstructed

In this post, I’ll break it down step by step. You need no prior knowledge of WebGL or shaders — we’ll start by building a mental model for writing shaders and then recreate the effect from scratch.

weeklyfoo #81 / 2025-04-21
webglshaders

Shape Lens Blur Effect with SDFs and WebGL

An introduction on harnessing the power of Signed Distance Fields (SDFs) to draw shapes in WebGL and create interactive effects, such as lens blur.

weeklyfoo #38 / 2024-06-24
webglblur