Speak
Create
Bumpy Metaballs 2026
A rebuild of the 2013 original on WebGL2: the isosurface is polygonised on the GPU, normal-mapped without UVs and lit by an environment map, from wet flesh to glass refracting an inner core.
Create
Three.js Conf
A physics toy for THREE.JS CONF 2026: lushly shaded procedurally generated text based on SDFs, thrown around by Ammo.js physics and sound effects produced with Web Audio API.
Create
Flat Earth
A world map on an oblique cylindrical projection: centre it anywhere on Earth and that is the point the map gets right. Shaded relief and soft shadows over satellite imagery.
Create
Guspira
A small reactive GUI toolkit for creative-coding sketches: every slider, tab and preset binds to a signal, so the control and the value never drift apart. No dependencies.
Create
CCapture.js 2
A ground-up rewrite of CCapture.js: capture canvas animations at a fixed framerate, however long each frame takes to draw, and encode them to MP4 or WebM with WebCodecs. GPU motion blur and frame-accurate audio.
Create
Inktober 2025
Thirty-one ink sketches of strange attractors and flow fields, drawn as shaded, self-shadowed MeshLine strokes.
Create
Codevember 2022
A month of shaders and post-processing for Codevember 2022, built with WebGL and three.js.
Create
Halloween 2022
Double Halloween feature to give some ambience to this spooky season: Pumpkin Sphere, a mass of pumpkins hovering around you; and Spooky Cloud, a particle-driven cloud of pumpkins and skulls chasing a wisp.
Create
Floating Shiny Knot
A remake of the 2012 experiment in image-based lighting from Google Street View panoramas, now fetched with PanomNom.js, with better shading and normal mapping that perturbs the surface and its reflections and refractions.
SpeakWebGL+WebGPU Meetup, Online
WebGL+WebGPU Meetup
Creative coding in the land of WebGL2: how to get started with creative coding in the browser.
Create
Genuary 2022
Thirty-one days of procedural generation for Genuary 2022, with three.js and WebGL.
Create
Codevember 2021
One experiment a day for Codevember 2021: simulations, post-processing and more with WebGL and three.js.
Create
Web Unleashed 2021 Opening Titles
Opening titles for FITC Web Unleashed 2021: strange attractors grown into tube geometries, rendered in near real-time WebGL and captured to video.
Create
Inktober 2021 Strange Attractor Sketches
Thirty strange attractors for Inktober 2021, drawn with the NPR hatching techniques from the 2020 sketches.
Create
Lines on a Sphere
A refresh of Lines on a Sphere from Codevember 2016: thousands of particles tracing lines over a flow field wrapped on a sphere.
Create
Dual Boids
A flock of spheres following classic boids rules, shaded with analytic sphere ambient occlusion based on IQ's article.
Create
Generative art: Lines on flow fields
MeshLine strokes tracing the field lines between electrical charges. Interactive, but made for the still images it produces.
Create
F*MMXX
An angsty new year demo to send off 2020, the year of Covid: a maneki-neko trying to beckon better fortune, lots of light effects and a lot of messages. 3D art by acidbeat, music by gloom.
Create
Generative baubles
An editor for procedural Christmas baubles: tweak the shape, materials and stripes from a panel and make your own.
SpeakGitHub Universe, Online
The future of the web in an XR world
A look back at the web and VR, and ahead at the technology, browsers and APIs of an XR-enabled web.
Create
SDF physics
An experiment with GPU particles bouncing off volumes defined with SDFs.
Create
Inktober 2020 Sketch experiments
Thirty-five sketches for Inktober 2020, all NPR post-processing: hatching, cross-hatching, lines and other ink techniques. No prompts, just experimentation.
Create
Shield VFX
A translucent energy shield: a glassy bubble patterned with Worley noise, with a glowing rim where it intersects the scene, read from the depth buffer.
Create
Voxel Volume Rendering
Raymarching a 3D Perlin noise isosurface on the GPU, with an option to accumulate values along the ray for non-solid, cloudy volumes. It became the basis for the official three.js volume renderer.
Create
Obsolidian
Demo for Solskogen 2020 in collaboration with mrdoob, ranked 3rd: a shape evolves through the platonic solids, from tetrahedron to sphere, down a tunnel of lights. Music by gloom.
Create
FaceMeshFaceGeometry
A three.js geometry that follows the face tracked by FaceMesh, with UVs to texture it from the video feed and anchor points to attach 3D objects to the face.
Create
Loops 2018-2019
Around 350 loops made in 2018 and 2019 with looper, a framework for generating loops with three.js.
Create
Digital Inktober 2019
A loop a day for Inktober 2019, made with looper and MeshLine: more complex than the year before, some of them built on strange attractors.
Create
Capture the Flag viewer
A stylised 3D viewer for DeepMind's Capture the Flag research: matches in procedurally generated indoor and outdoor environments, where agents train and learn to interact and cooperate.
Create
Infinite Gift
Gift boxes that lift their lids to reveal another box, which opens to reveal another, in an infinite loop. Boxes and wrapping paper are procedurally generated. Christmas Experiments 2018.
Create
Codevember 2018
A month of loops for Codevember 2018, one a day on that day's theme, made with looper.
Create
Digital Inktober 2018
Thirty-one loops for Inktober 2018, one a day, made with looper and drawn with MeshLine.
Create
Explore With Me
A demo for Christmas Experiments 2017: follow the footsteps of an invisible being across the snow, steer a light that stirs the particles, and watch the spheres glow to the rhythm of the music by gloom.
Create
Codevember 2017
Fifteen experiments for Codevember 2017, a shorter run exploring simulations and post-processing with WebGL and three.js.
Create
WebVR Experiments: Speak To Go
A Google Creative Lab experiment that takes you anywhere in the world: say where you want to go and Google Maps, the Speech-to-Text API and WebVR put you there. Part of the WebVR Experiments launch.
SpeakRender Conf, Oxford, UK
The Future of the Web in a VR World
Where the web is going in VR: the technology, browsers, APIs and programming behind it.
Create
Dark Haze
A Christmas Experiments collaboration: a 3D scene by cbuyukberber you can interact with a little, code with Marpi and music by gloom. Lots of ambiance with pixel texture and furry polygons.
SpeakThe Graphical Web, Exeter
WebGL, WebVR and Information Visualisations
How WebVR brings immersive environments to the browser, and new ways to represent and interact with data.
Create
Codevember 2016
Thirty days of experiments for Codevember 2016, with WebGL, three.js, Web Audio and procedural generation.
Create
The Polygon Shredder
Exploration of curl noise and half-cube pseudo-instancing, using WebGL, three.js and some GLSL trickery.
Create
THREE.MeshLine
A replacement for THREE.Line with real width, where native WebGL lines are stuck at 1px: expanded in the shader, with dashes and textured lines.
Create
X-Mas Virus
Entry for the 2015 Christmas Experiments site. A throwback demo of neon flickering lights, made with WebGL, three.js, GLSL and Web Audio. 3D art and music by acidbeat.
Create
Día de Muertos 2015
Design your own calaca for Día de Muertos: a 3D skull you decorate with decals. 3D art and design by acidbeat.
Write
Optimising SVG load with Service Worker
How to use Service Worker to optimise the loading of SVG assets in a page without altering coding methods.
Write
Calculating FPS past requestAnimationFrame limit with requestIdleCallback
Using requestIdleCallback to calculate FPS more precisely than with requestAnimationFrame.
SpeakFullStackFest (FutureJS), Barcelona
The Road to WebVR
Getting started with WebVR: its history, the options from Cardboard to the Oculus Rift, and the challenges in rendering, design and interaction.
Write
Can the new Google logo be 305 bytes?
Techniques and tricks learned while trying to recreate the new Google logo with SVG in 305 bytes (or less!).
Create
Google I/O 2015 Toy
The Google I/O 2015 logo in a room: click to throw it around. Real-time physics and analytical local ambient occlusion, made with WebGL, Web Audio API, three.js, oimo.js and Wagner.
SpeakJSConf Budapest, Budapest
Getting things done with three.js and WebGL
Real-time graphics in the browser with three.js and WebGL, from the structure of an app to the main parts of the API.
SpeakScotlandJS, Edinburgh
What are shaders and what can they do for me?
Fragment shaders beyond pictures: using the GPU to search data, run complex calculations and even synthesise music.
SpeakResonate, Belgrade
Experiments with today's web technologies
A workshop on making interactive music videos with Canvas, WebGL and Web Audio: drawing in 2D and 3D, and syncing visuals to sound.
Create
Speech Jammer
A speech jammer to warp your reality: it plays your voice back with an adjustable delay that makes it hard to keep talking. Built with Web Audio API and WebRTC getUserMedia.
Write
Live WebGL Shader Editor
This article goes a bit over the method to augment JavaScript APIs and how to use it to create a plug-n-play, live GLSL shader editor.
Create
Monolith
Demo for NVScene 2015 in collaboration with cabbibo, ranked 5th: a black monolith stands alone in an empty desert, and the closer the camera drifts, the stranger things get. Music by awwz.
SpeakAwwwards Conference, Barcelona
The Web in the age of WebGL
With Ricardo Cabello (mrdoob): what WebGL brings to the table, with the process, workflow and tools behind some of our projects.
Write
cru·ci·form study in architecture visualisation
How the project was built from scratch, with technical details like parallax-corrected cubemaps, and lessons learned along the way.
Create
cru·ci·form
A study in architecture visualisation with models by sejnulla. Nice music, glossy reflections, slow tracking shots, custom shading and postprocessing, using three.js and Wagner.
Create
B E Y O N D
Real-time WebGL demo with cabbibo for Christmas Experiments 2014. Crystal growth simulation, sound processing, custom shading and postprocessing.
Create
It's a message in a Jack-o-lantern
Online interactive experience for Halloween, in which the user can carve a stencil into a procedurally generated pumpkin and share it.
SpeakThe Graphical Web, Winchester
Getting started with WebGL and three.js
An almost-live coding workshop building a WebGL project from scratch with three.js, up to custom shaders and post-processing.
Create
Decals for three.js
Decals implementation for three.js, useful for temporary decorations like bullet impacts, blood splatters, burns or skid marks; or for weathering effects on objects.
SpeakScotlandJS, Edinburgh
Getting started with three.js and WebGL
An introduction to real-time graphics in the browser with three.js and WebGL, no 3D maths required.
SpeakResonate, Belgrade
Using the web as a creative platform
The web, the browser and its emerging libraries as a platform for creative coding, with a look at some of my work.
SpeakFutureJS, Barcelona
Everybody dance now with Web Audio API
Playing and modifying sounds in the browser with the Web Audio API, its possibilities and its limitations.
Write
Creating Android Lens Blur Depth Viewer
Reading, decoding and rendering depth data from the new Android Lens Blur camera application. Turn depth data back into 3D models.
Write
Using hooks to make development of shaders a bit easier
Using function augmentation via hooks to show GLSL compile errors on the page instead of the console, with a bit of DevTools trickery.
Create
SnowBox
A 3D tool to create snow thingies, though really they are snowmen: metaballs for the snow, plus carrots, buttons, bowties, hats and twigs. In collaboration with claudioguglieri and Sejnulla. Lots of 2D, 3D and code goodness!
Create
Bumpy metaballs
Isosurface with Marching Cubes, bump mapping with normal mapping and triplanar mapping, shading with a MatCap shader.
SpeakMIRA Lab, Barcelona
Generative and reactive geometry with JavaScript and WebGL
A step-by-step workshop on generating geometry with JavaScript and WebGL and making it react to sound.
Create
Spherical Environment Mapping (MatCap/LitSphere) and Normal Mapping
Spherical Mapping (MatCap/LitSphere) with Normal Mapping, using WebGL and GLSL. This is an editor to toy around with different materials, normals and render effects. With subdivision modifier, noise and rim lighting.
Write
Loading sound files faster using Array Buffers and Web Audio API
How to reduce the number of requests when your page has a lot of sound assets: pack them into one file and slice it into ArrayBuffers for the Web Audio API.
Write
Creating a Spherical Environment Mapping shader
Creating nice lighting with a simple spherical mapping shader. A step-by-step tutorial on how to create a matcap or litsphere material with GLSL and three.js.
Create
NPR Sketch GLSL shader
Real-time post-processing shader to create the style of old architectural drawings.
Create
Cross-hatching GLSL shader
Blinn-Phong shading and rim lighting. Based on the Microsoft Research "Real-Time Hatching" paper.
Write
Web Audio Input and Windows
Getting Chrome's new Web Audio Input feature to work on Windows.
Create
Shake a flake | Reactive snow
A holiday experiment with reactive snow using WebGL, Web Audio API, WebRTC and localStorage. Blow into the microphone to make the falling snow shake and twirl.
Write
Vertex displacement with a noise function using GLSL and three.js
A tutorial on the basics of vertex shaders: displacing a mesh's vertices with a noise function, using GLSL and three.js.
Write
Split-flap display with CSS and JavaScript
An homage to low technology presence in the web of the 21st century: a split-flap display, created with HTML, CSS3 and JavaScript.
Write
The new site is live
After several versions that never saw the light of the tubes, the newest and shiniest version of clicktorelease.com is live!
Create
It's a Halloween Message!
Carve any message into a procedurally generated Halloween pumpkin. An experiment in procedural generation of meshes and custom shading.
Create
Rocking Dendrites
Dendrites rocking to the music, drawn with billboard particles to fake a soft, out-of-focus depth of field. Play with the generation settings or drop in your own songs. Music by Hunz.
Create
CCapture.js
CCapture.js is a JavaScript library to help capture animations created with HTML5 canvas at a fixed framerate.
Create
Mars Panoramas in WebGL redux
A panorama viewer using data from Ashima Group Panorama Viewer that doubles as a Fullscreen API and Pointer Lock API experiment.
Create
Adorable Flying Sagan
Put a coin in and Carl Sagan flies away. A quick and funny experiment with linked CSS3 transforms and animations and HTML5 audio, using the amazing art by SirMitchell and music by Shugo Tokumaru.
Write
Experiments with Perlin noise
Experimenting with Perlin noise in the vertex and fragment shaders, using WebGL with three.js.
Create
Latitude Reflection Mapping
First step in a series of experiments toward image-based global illumination for models using Google Street View panoramas. This is the test for an environment mapping shader that uses equirectangular panoramas.
Write
How to make clouds with CSS 3D
A tutorial on how to use CSS 3D Transforms to create sprite-based 3D-like clouds.
Create
CSS3D Clouds
An experiment on creating 3D-like clouds with CSS3 3D Transforms and a bit of JavaScript.
Create
Conway's Game of Life in 3D
An eye-candy version of Conway's Game of Life in 3D. An experiment using WebGL with three.js to get familiar with the library.
Create
Animated GIF in 3D
Stack the frames of an animated GIF in 3D, see the animation from every side, and twist the stack along its axis. Uses WebGL with three.js and the Drag and Drop API.
Create
WebGL Light Box
A pure WebGL light box to show images in a web page. A rework of the previous lightbox that was built using three.js to use only the exact amount of code necessary.
Create