The five best design links, every weekday

Category: Webgl

All Categories

blog.maximeheckel.com

Shining a light on Caustics with Shaders and React Three Fiber

A step-by-step guide on how to build a caustic light effect for your React Three Fiber project.

andrewkchan.dev

Simulating Fluids, Fire, and Smoke in Real-Time

Notes on the math, algorithms, and methods involved in simulating fluids like fire and smoke in real-time.

lysterfieldlake.com

Lysterfield Lake — An AI Experiment

An interactive AI-generated 3D music video taken from a single feed of video shot on an iPhone.

developer.chrome.com

From WebGL to WebGPU

Learn some tips for WebGL developers who are migrating to WebGPU.

blog.maximeheckel.com

Painting with Math: A Gentle Study of Raymarching

A compilation of my Raymarching and Signed Distance Field learnings and work.

stylecampaign.com

Moon Clock, a WebGL experiment

Experiment to recreate Moon Clock iOS app in WebGL.

maximmcnair.com

WebGL Image Processing

An exploration of image processing with GPU shaders in the browser.

oimo.io

Water

A WebGL experiment, best viewed on mobile.

varun.ca

Iridescent crystal with raymarching and signed distance fields

Ray marching is the technique behind all those super fancy demos on shadertoy.

varun.ca

How we built the Storybook Day 3D animation

Breakdown of how we built a 3D animation using React Three Fiber. Focusing more on finer details that take a scene from "done" to "ready to ship."

babylonjs.com

Babylon.js: Powerful, Beautiful, Simple, Open - Web-Based 3D

Babylon.js is one of the world’s leading WebGL-based graphics engines.

charlottedann.com

Creating carved surfaces using three.js

How I achieved the 2D-to-3D textured surface effect in Ceramics, my first generative art NFT project.

mofu-dev.com

The Gooey Effects With Shader

This is a method to create an effect that looks like objects are melting into each other using SVG filter.

blog.maximeheckel.com

Refraction, dispersion, and other shader light effects

A guide on how to reproduce a chromatic dispersion effect for your React Three Fiber and shader projects.

carla-trail.vercel.app

Carla Trail

An intriguing Three.js experiment by Ichitaro Masuda.

fjolt.com

Making a Morphing 3D Sphere in Javascript with Three.js

3D effects on the web are becoming more common, and can add something extra to a webpage.

offscreencanvas.com

Grid Tile Patterns

Exploring infinite patterns made from grids.

shaderpark.com

Shader Park

A JavaScript library for creating interactive procedural 2D and 3D shaders.

surma.dev

WebGPU: All of the cores, none of the canvas

WebGPU is an upcoming Web API that gives you low-level, general-purpose access GPUs.

offscreencanvas.com

Shaders and Gradients

How to learn shaders, why gradients are so important, and exploring the hidden gradients in all kind of effects.