Every WebGL demo, in one place.

Each of these is a small, self-contained study of one rendering technique, running live in the browser. They are also collected on the demo hub at demos.niccolofanton.dev.

Browse the same collection on the WebGL demo hub, or read the write-ups in the articles section.

  • Depth of Field

    The ultramock.io blurs rebuilt in three.js WebGPU and TSL, with a thin-lens circle-of-confusion model over a procedural blueprint floor.

    WebGPUTSLpost-processing

  • Infinite Jelly Glass

    An infinite spherical carousel of glass cards refracted through a GPU-simulated XPBD cloth, written from scratch in WebGPU and TSL.

    WebGPUTSLXPBD cloth

  • Icosahedron

    A wireframe icosahedron with a cube on every vertex, rendered through a hand-written temporal anti-aliasing and Kawase bloom pipeline.

    three.jsTAAbloom

  • Glass Filters

    Screen-space glass filters as a WebGPU post pass: reeded, hammered, ripple, prism and a fly’s-eye microlens array, all in three.js TSL.

    WebGPUTSLrefraction

  • Ink Reveal

    A reverse engineering of the davidwhyte.com ink reveal: a watercolour-blotch image reveal in WebGL with a depth-aware advancing front.

    WebGLGLSLimage reveal

  • Shared Experience

    A three-player WebGL space with peer-to-peer proximity voice chat over WebRTC — no game server, the browsers talk directly to each other.

    three.jsWebRTCmultiplayer

  • Porsche Configurator

    A scroll-driven 3D Porsche showcase and colour configurator built with Angular, three.js and Theatre.js for the camera choreography.

    Angularthree.jsTheatre.js

  • DUNA

    A WebXR engine for shared 3D worlds in the browser: avatars, real-time multiplayer, voice chat, portals and web3/ENS login.

    WebXRmultiplayerthree.js

  • Smooth Orbit Controls

    A drop-in OrbitControls component for React Three Fiber and drei that adds smooth, damped inertial zoom instead of stepped wheel jumps.

    React Three Fiberdreilibrary

  • Draggable Rigid Body

    A customizable React Three Fiber component for physics-based drag-and-drop, built on react-three-rapier and @use-gesture/react.

    React Three Fiberrapierphysics

  • Singularity

    An optimized React Three Fiber and Next.js scene written for a Codrops tutorial on keeping three.js scenes both performant and good-looking.

    React Three Fiberrapieroptimization

  • Datamosh

    Real-time glitch corruption applied to a live 3D scene: interactive WebGL datamoshing with React Three Fiber and GLSL shaders.

    WebGLGLSLglitch

  • ASCII Noise Porsche

    A Porsche re-rendered through a dithered ASCII pass, with twelve presets and a fluid mouse-trail noise displacement.

    three.jsASCIIdithering

  • Flow Field Particles

    GPGPU particles morphing between shapes on a 4D simplex flow field, run through bloom, depth of field and a trail accumulation pass.

    GPGPUthree.jsparticles

  • Black Sea

    A 1000×1000 plane displaced by a single image bound simultaneously as displacement, colour and alpha map.

    three.jsdisplacementgeometry

  • Infinite Carousel

    An infinite three.js tunnel of image and video cards with wheel and drag scrolling, hover focus and SVG clipping.

    three.jsscrollSVG clipping

  • Driftpane

    A non-invasive layer on Tweakpane v4: localStorage persistence, a draggable and resizable panel, a presets menu and light/dark/auto theming.

    Tweakpanetoolinglibrary

  • Morphing ASCII

    Real-time ASCII and halftone post-processing for three.js and pmndrs/postprocessing: glyph atlas, Sobel edges, per-cell memory, SDF shape morph.

    post-processingASCIISDF

  • Bone Monogram

    An N monogram built out of 3D bones, auto-rotating on white with transmission-material chromatic aberration.

    React Three Fibertransmissiontypography

  • Three Starter

    A single-file three.js starter: WebGPU renderer, TSL node material, HDRI lighting and a Tweakpane control panel, ready to fork.

    WebGPUTSLstarter

  • Datamosh Decoder

    Datamoshing implemented as a real inter-frame decoder loop: motion vectors and residuals deliberately fed the wrong reference frame.

    WebGLcodecglitch

  • Image Trail

    A real-time WebGL image trail and visual-persistence post-processing effect built with React Three Fiber and three.js.

    post-processingReact Three Fibertrails

  • Dithering Shader

    A real-time ordered (Bayer) dithering post-processing effect for 3D scenes, built with React Three Fiber and three.js.

    post-processingditheringBayer

  • Splat Reveals

    Twenty reveal, dissolve and transition effects applied to a gaussian splat figure, built on Spark and three.js.

    gaussian splattingSparktransitions

  • Model Grid

    A grid of repeated glTF models receding into depth, driven by Leva camera controls that bypass React re-renders entirely.

    React Three FiberLevainstancing

  • Void Pendulum

    A single three.js point drawing a Lissajous trail: autoClear is switched off so every frame accumulates onto the last.

    three.jsaccumulationLissajous

  • Ember

    The numeral 6 built from 200,000 particles sampled off a glTF surface and coloured from a texture lookup.

    particlesglTF samplingthree.js

  • Gold Panels

    An endless tunnel of black and gold panels lit by god rays, lens flare, depth of field and bloom.

    post-processinggod raysbloom

  • Glyph

    The numeral 3 rendered through an ASCII post-processing pass with a palindromic glyph ramp and N8AO ambient occlusion.

    ASCIIN8AOpost-processing

  • Moss Diorama

    A moss diorama captured as a gaussian splat and composited with a glTF mesh in a single React Three Fiber scene under an HDRI.

    gaussian splattingHDRIReact Three Fiber

  • Particle Column

    A column of 100 additive particles falling through bloom, film noise, chromatic aberration and scanlines.

    particlespost-processingbloom

  • Duna Landing

    An interactive 3D WebGL landing page in Angular and three.js: roll a ball across a desert dune and through a glowing portal.

    Angularthree.jsgame