Shape Lens Blur Effect with SDFs and WebGL

An introduction on harnessing the power of Signed Distance Fields (SDFs) to draw shapes with interactive lens blur effect.

Article on Codrops

Demo

Installation

• Install with npm install
• Run demo with npm run dev
• Build with npm run build

Credits

• Three.js - WebGL Library
• Inigo Quilez's Articles - 2D distance functions
• The Book of Shaders - Shaders learning resources
• Lygia - Shader Library

Misc

Follow Guillaume Lanier: X, GitHub

Follow Codrops: X, Facebook, GitHub, Instagram

License

MIT

Made with 💙 by Codrops