Procedural Generation - WebGL / WebGPU Community — Showcase, Tutorials, Examples & More | WebGL / WebGPU Community

img2threejs Turns One Photo Into Procedural Three.js Code

Hoài Nhớ's img2threejs rebuilds an object from one reference image as procedural, animation-ready Three.js code, with v1.3 improving geometry reconstruction and material generation.

Jul 30, 2026

Jaime Torrealba Builds a Moonlit Field Portfolio in Three.js

A personal Three.js portfolio staged as a moonlit field, with TSL, GPU grass simulation, volumetric smoke, procedural trees, fireflies, and camera-driven movement.

Jul 23, 2026

Where Worlds Take Shape Makes a Portfolio Playable

Jérôme Reynet turns a portfolio into a playable WebGL world, with procedural grass, mini-games, gamepad controls, and project discovery that behaves more like exploration than navigation.

Jun 26, 2026

A 9k Forest: Node-Based 3D Assets in WebGPU

Sedon wires a node graph into a real-time WebGPU renderer to grow a whole forest from about 9k of data. Rayleigh skies, rippling water, runtime LOD terrain, and a saved scene that fits in a URL. The twist: nearly every shader and pipeline was vibe coded, no engine involved.

Jun 9, 2026

Patina Preview: Real-Time Procedural Weathering in Three.js and TSL

A small procedural PBR playground by codetaur where metal ages in real time. Oxidation pools in the cavities, highlights dull from mirror to milk, and the whole surface rewrites itself through a Three.js TSL node graph running on WebGPU.

Apr 19, 2026

Find Your Way to Oz: The 2013 Chrome Experiment

UNIT9 built a full Kansas carnival in WebGL for Disney, then destroyed it with a tornado shader borrowed from neuroscience. No physics engine. No framework. Just clever faking, spatial audio, and a three-month deadline. The source is open.

Apr 2, 2026

OFFFICE: A Furniture Studio Portfolio Built on Restraint and WebGL

A two-color WebGL portfolio for an Italian-Swiss design studio. 3D furniture models rotate in stark black and white, with seamless page transitions that pull you into dedicated model viewers. Built by Federico Valla using Three.js and Blender.

Mar 29, 2026

False Earth: A GPU-Driven Procedural Planet Built with WebGPU, TSL, and Three.js

An astronaut walks an alien planet that responds to every step. Over 1M grass blades, procedural terrain, and VAT-animated roses, all running in the browser via WebGPU compute shaders, TSL, and React Three Fiber.

Mar 28, 2026

Martin Laxenaire's Portfolio Is a WebGPU Game Built on His Own Engine

Martin Laxenaire turned his portfolio into a playable WebGPU experience powered by gpu-curtains, his own 3D engine. Procedural particles, boids, and invoice-sized spheres unlock as you interact. Full source code and a Codrops breakdown included.

Mar 22, 2026

Spacetime in Your Browser: A General Relativity Sandbox Built with BabylonJS

Drop planets onto a deformable spacetime grid and watch gravity warp the mesh in real time. Built with BabylonJS and Ammo.js physics, Hitesh Sahu's simulation turns the rubber-sheet analogy into something you can actually play with. Collision sounds included.

Mar 8, 2026

BOIDS: A Parametric Playground for Emergent Flocking Behavior

BOIDS simulates flocking through three local rules: separation, alignment, cohesion. No central control. Every parameter is exposed. Click to attract, right-click to scatter. Built in p5.js with texture support and video export.

Mar 6, 2026

Bear 71: An Immersive Documentary Where a Grizzly Bear Becomes a Data Point

A grizzly bear's tracked territory rendered as surveillance grid. The NFB and Jam3 built a WebGL environment where Banff National Park looks like a living dashboard and coexistence feels like a systems problem.

Mar 5, 2026

San Rita: A Studio Site Disguised as a Topographic Map

San Rita ditches the agency portfolio grid for something stranger: a navigable topographic landscape where projects sit like waypoints on a trail system. Some paths are open, some are closed for restoration. It's weird, deliberate, and worth inspecting.

Feb 26, 2026

Igloo Inc: Crystal Growth Algorithms, Shader-Driven UI, and Volume Data

Abeto built the Igloo Inc site entirely in WebGL, from procedurally grown ice crystals to shader-driven UI text. The particle footer alone, powered by custom VDB-to-browser volume data, is worth the scroll.

Feb 19, 2026

In The Clouds: Tallest Buildings as 40-Meter Blocks

The world's tallest buildings rendered as stacked 40-meter blocks in Three.js. One block equals four floors. Pure client-side WebGL with procedural geometry. No map tiles, just height data and math.

Feb 12, 2026

PLAIN: Generate Low-Poly 3D Terrain Graphics in Your Browser

PLAIN creates low-poly 3D plane graphics using vertex geometry and simplex noise. Displace a grid into terrain. Animate the surface. Control camera, color, shape. Export stills or loops. Built in p5.js.

Feb 6, 2026