Most recent release · March 2016

HTC Vive - Get Vive Ready

https://viveready.htcvr.com/

Browser-based 3D game, controlled by a paired mobile device.
WebGL, GLSL, post-processing, procedural generation and lots of optimisation.

The Polygon Shredder · February 2016

Exploration of curl noise and half cubes pseudo instancing, using WebGL, three.js and some GLSL trickery.

Xmas Virus · December 2015

Entry for the 2015 Christmas Experiments site. A throwback demo of neon flickering lights, made with WebGL, three.js, GLSL and Web Audio

Día de Muertos 2015 · November 2015

http://www.itsamessage.com/diademuertos2015/

Design and customise your own calaca for Día de Muertos

Google I/O 2015 Toy · May 2015

Experiment with physics and analytical local ambient occlusion. Made with WebGL, Web Audio API, three.js, oimo.js and Wagner.

cru·ci·form · January 2015

A study in architecture visualisation with models by @sejnulla. Nice music, glossy reflections, slow travellings, custom shading and postprocessing, using three.js and Wagner.

B E Y O N D · December 2014

http://christmasexperiments.com/experiments/24/

Real-time WebGL demo with @cabbibo for Christmas Experiments 2014.
Crystal growth simulation, sound processing, custom shading and postprocessing.

It's a message in a Jack-o-lantern · October 2014

http://www.itsamessage.com/halloween2014/

Online interactive experience for Halloween, in which the user can carve a stencil into a procedurally generated pumpkin and share it.

Decals for three.js · June 2014

Decals implementation for three.js, useful for temporary decorations like bullet impacts, blood splatters, burn or skidmarks; or for weathering effects on objects

Kick with Chrome · June 2014

https://kickwithchrome.withgoogle.com/

A collection of mobile games for Chrome, celebrating the World Cup; using the latest web technologies to provide a multiplayer experience across multiple devices.

Smartwater: look up · May 2014

http://www.drinksmartwater.com

Smartwater new cloud experience, using WebGL, canvas and CSS3D renderers, with several interactions for desktop and tablet, and soothing reactive music.

SnipSnap · March 2014

SnipSnap is an online tool to create cool snapshots of code snippets with 3D perspective, created using prims.js, three.js and bootstrap.

rStats · January 2014

http://spite.github.io/rstats

rStats aims to provide a way of measuring and visualizing performance of your code, mainly in apps based on an update loop, like games or interactive experiences.

SnowBox · December 2013

http://www.snwbx.com

A 3D tool to create snow thingies, using metaballs and 3D models, in collaboration with @claudioguglieri and @Sejnulla. Lots of 2D, 3D and code goodness!

Bumpy Metaballs · December 2013

Isosurface with Marching Cubes, bump mapping with normal mapping and triplanar mapping, shading with a MatCap shader.

Spherical & Normal GLSL Shader · October 2013

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.

Gravity · September 2013

http://gravitymovie.warnerbros.com/

A WebGL experience for the Warner Brothers' movie Gravity directed by Alfonso Cuarón, it's an interactive spacewalk orbiting Earth in a debris field.

SUB FOCUS TORUS · September 2013

http://www.subfocus.com/torus

An online WebGL experience that allows users to search google maps and street view and discover previews of SubFocus' new album Torus. Using three.js, SoundCloud API, imgur API, google maps API and many more.

NPR Sketch GLSL shader · July 2013

Real-time post-processing shader to create the style of old architectural drawings.

Cross-hatching GLSL shader · June 2013

Blinn-Phong shading and rim lighting. Based on Microsoft Research "Real-Time Hatching" paper.

Optical flow | WebRTC · May 2013

An experiment using WebRTC's getUserMedia feature to access the user's webcam and perform some effects using optical flow. Coded using oflow.js and three.js.

Shake a flake | Reactive snow · December 2012

A Holidays experimente with reactive snow using WebGL, Web Audio API, WebRTC and localStorage. Blow into the microphone to make the falling snow shake and twirl.

Split-flap display with CSS & JS · November 2012

An homage to low technology presence in the web of the 21st century: a split-flap display, created with HTML, CSS3 and JavaScript.

It's a Halloween Message! · October 2012

http://www.itsamessage.com/halloween2012

An experiment on procedural generation of meshes and custom shading. In this case, a Halloween pumpkin for a special message.

THEY WILL EAT YOU · October 2012

http://www.theywilleatyou.com

A Halloween experience by B-Reel: a WebGL zombie game, with kick-ass 3D models, creepy rendering and unsettling sounds.

CNN / Google Campaign Explorer · October 2012

http://www.cnn.com/tracker

An online tool by B-Reel for a CNN|Google collaboration to give a visual and interactive representation of the Money Race for the 2012 Presidential Election.

Rocking Dendrites · September 2012

An experiment on custom shading to create a DOF effect, mesh generation and sound visualisation. Play around with the generation settings and drop songs into the experience.

CCapture.js · September 2012

https://github.com/spite/ccapture.js

CCapture.js is a JavaScript library to help capturing animations created with HTML5 canvas at a fixed framerate.

Mars Panoramas in WebGL redux · August 2012

A panorama viewer using data from Ashima Group Panorama Viewer that doubles as a Fullscreen API and Pointer Lock API experiment.

The Bravest Man In The Universe · July 2012

http://www.chromeexperiments.com/detail/the-bravest-man-in-the-universe

An interactive music video featuring Bobby Womack, targeted at mobile devices: smartphones and tablets. Lots of SVG elements and CSS animations, with JavaScript interactions.

Adorable Flying Sagan · July 2012

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.

Light Orb · July 2012

A series of experiments based on the shape and aesthetics of the new Nexus Q. Custom shading, light dispersion calculation and JavaScript physics.

Experiments with Perlin Noise · July 2012

Following the steps of Ken Perlin, some experiments on custom shaders. Vertex shaders for mesh displacement, fragment shaders for custom lighting and a test-drive of my post-processing system.

The Reverse Barbershop · June 2012

A web app to draw hair on pictures, for mobile, tablet and workstations. Uses WebRTC to grab images, HTML and CSS to create a nice UI, and HTML5 canvas to create the interactive drawing elements.

Cube · April 2012

http://www.playmapscube.com

A game for Google Maps by B-Reel. The classic labyrinth game inspired on the service aesthetics. WebGL, CSS animations, HTML5 audio and Web Audio API and lots of JavaScript for game logic, physics, etc.

Floating Shiny Knot · April 2012

Second step in a series of experiments toward image-based global illumination for models using Google Street View panoramas. This is the test for fetching equirectangular panoramas from the google servers.

Latitude Reflection Mapping · April 2012

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.

CSS3D Clouds · March 2012

An experiment on creating 3D-like clouds with CSS3 3D Transforms and a bit of Javascript.

It's a message! Holidays 2011 · December 2011

http://www.itsamessage.com/holiday2011

Holiday greetings message using WebGL, Google Street View and Geolocation API. Enjoy the soothing experience, personalize your message and share it with everyone!

The Spiral · December 2011

https://developer.mozilla.org/en-US/demos/detail/the-spiral

Entry for the Mozilla Dev Derby, using HTML5 canvas and Audio API to create a continuous scribble experience

Blocky Earth · October 2011

An abstract representation of sections of the world through aligned cubes, using WebGL, Geolocation API and Google Maps imagery and Elevation API.

Urban Arteries · October 2011

Entry for the Mozilla Dev Derby, using HTML5 canvas, Geolocation API and Google Maps Elevation API.

Conway's Game of Life in 3D · September 2011

An eye-candy version on Conway's Game of Life in 3D. An experiments using WebGL with three.js to get familiar with the library.

Animated GIF in 3D · September 2011

Animated GIF in 3D uses WebGL with three.js and Drag and Drop API to get a new perspective into animated gifs.

WebGL Weather Globe · August 2011

A project adding terrain and cloud layers from Google Maps to the Google DAT's WebGL Globe code

Don't lose your waykipedia · September 2011

Entry for the Mozilla Dev Derby, using the History API, HTML5 canvas and XmlHttpRequest to track your browsing of wikipedia.

HTML5 VJing Tool · July 2011

https://developer.mozilla.org/demos/detail/html5-vjing-tool

Entry for the Mozilla Dev Derby, using HTML5 video and audio to create a simple tool for VJing

WebGL Light Box · June 2011

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.

WebGL Google Street Viewer · May 2011

A Google Street View player using WebGL with three.js to provide a much smooth experience.

The Wilderness Downtown · August 2010

http://www.thewildernessdowntown.com

Interactive music video by Google and B-Reel to show the power of HTML5 and Chrome, with music by Arcade Fire and directed by Chris Milk. It features a lot of HTML5 canvas action.