Clicktorelease

Halloween 2022

Mon, 31 Oct 2022 00:00:00 +0000

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 whisp.

Floating Shiny Knot

Wed, 02 Mar 2022 00:00:00 +0000

A remake of an old experiment to produce image-based global illumination for models using Google Street View panoramas. This is the test for fetching equirectangular panoramas from the google servers.

Genuary 2022

Sat, 01 Jan 2022 00:00:00 +0000

Entries for Genuary 2022, 31 days of procedural generation with threejs and WebGL.

Codevember 2021

Mon, 01 Nov 2021 00:00:00 +0000

Entries for Codevember 2021, 31 days of experiments with WebGL, three.js, simulations and post-processing.

Web Unleashed 2021 Opening Titles

Fri, 22 Oct 2021 00:00:00 +0100

Created for the annual FITC Web Unleashed conference.

Inktober 2021 Strange Attractor Sketches

Fri, 01 Oct 2021 00:00:00 +0100

All the non photorealistic renders of strange attractors for Inktober 2021.

Generative art: Lines on flow fields

Sun, 14 Mar 2021 00:00:00 +0000

Particles drawing lines on fields of electrical charges.

F*MMXX

Thu, 31 Dec 2020 00:00:00 +0000

A new year demo to send off this horrible year.

Generative baubles

Fri, 25 Dec 2020 00:00:00 +0000

An experiment to generate baubles procedurally.

SDF physics

Sun, 01 Nov 2020 00:00:00 +0000

An experiment with GPU particles bouncing off volumes defined with SDFs.

Inktober 2020 Sketch experiments

Thu, 01 Oct 2020 00:00:00 +0100

All the sketches for Inktober 2020 simulating ink.

Obsolidian

Mon, 01 Jun 2020 00:00:00 +0100

Demo for Solskogen 2020.

FaceMeshFaceGeometry

Fri, 01 May 2020 00:00:00 +0100

Three.js helper for FaceMesh.

Loops 2018-2019

Sun, 01 Dec 2019 00:00:00 +0000

All the loops made with looper.

Digital Inktober 2019

Tue, 01 Oct 2019 00:00:00 +0100

Loops for Inktober 2019.

Capture the Flag viewer

Wed, 01 May 2019 00:00:00 +0100

Interactive CTF game explorer, with games of indoor and outdoor procedurally generated environaments where agents train and learn to interact and cooperate.

Infinite Gift

Sat, 01 Dec 2018 00:00:00 +0000

The gift that keeps on giving.

Codevember 2018

Thu, 01 Nov 2018 00:00:00 +0000

Loops for Codevember 2018.

Digital Inktober 2018

Mon, 01 Oct 2018 00:00:00 +0100

Loops for Inktober 2018.

Codevember 2017

Wed, 01 Nov 2017 00:00:00 +0000

Entries for Codevember 2017, 15 days of experiments with WebGL, three.js, simulations and post-processing.

WebVR Experiments: Speak To Go

Sat, 01 Apr 2017 00:00:00 +0100

Explore the world with your voice. Experiment part of the WebVR Experiments launch.

Dark Haze

Thu, 01 Dec 2016 00:00:00 +0000

Christmas Experiments collaboration with Marpi, Bent Stamnes and cbuyukberber: lots of ambiance with pixel texture, smooth music and furry polygons

Codevember 2016

Tue, 01 Nov 2016 00:00:00 +0000

Entries for Codevember 2016, 30 days of experiments with WebGL, three.js, Web Audio and procedural generation.

The Polygon Shredder

Mon, 01 Feb 2016 00:00:00 +0000

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

THREE.MeshLine

Wed, 02 Dec 2015 00:00:00 +0000

Mesh replacement for THREE.Line

X-Mas Virus

Tue, 01 Dec 2015 00:00:00 +0000

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

Sun, 01 Nov 2015 00:00:00 +0000

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

Google I/O 2015 Toy

Mon, 25 May 2015 00:00:00 +0100

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

Speech Jammer

Fri, 17 Apr 2015 00:00:00 +0100

A speech jammer to warp your reality, built with Web Audio API and WebRTC getUserMedia.

cru·ci·form

Thu, 01 Jan 2015 00:00:00 +0000

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

Mon, 01 Dec 2014 00:00:00 +0000

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

Fri, 31 Oct 2014 00:00:00 +0000

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

Mon, 30 Jun 2014 00:00:00 +0100

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

Fri, 20 Jun 2014 00:00:00 +0100

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

Tue, 20 May 2014 00:00:00 +0100

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

SnowBox

Mon, 23 Dec 2013 00:00:00 +0000

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

Tue, 10 Dec 2013 00:00:00 +0000

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

Spherical Environment Mapping (MatCap/LitSphere) and Normal Mapping

Mon, 14 Oct 2013 00:00:00 +0100

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

Wed, 25 Sep 2013 00:00:00 +0100

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

Fri, 20 Sep 2013 00:00:00 +0100

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

Tue, 09 Jul 2013 00:00:00 +0100

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

Cross-hatching GLSL shader

Thu, 27 Jun 2013 00:00:00 +0100

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

Shake a flake | Reactive snow

Mon, 24 Dec 2012 00:00:00 +0000

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

It's a Halloween Message!

Wed, 31 Oct 2012 00:00:00 +0000

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

Rocking Dendrites

Mon, 17 Sep 2012 00:00:00 +0100

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

Mon, 03 Sep 2012 00:00:00 +0100

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

Mars Panoramas in WebGL redux

Mon, 20 Aug 2012 00:00:00 +0100

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

Fri, 20 Jul 2012 00:00:00 +0100

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

Thu, 12 Jul 2012 00:00:00 +0100

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

Cube - a Google Maps game

Fri, 20 Apr 2012 00:00:00 +0100

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

Mon, 02 Apr 2012 00:00:00 +0100

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

Sun, 01 Apr 2012 00:00:00 +0100

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

Fri, 23 Mar 2012 00:00:00 +0000

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

It's a message! Holidays 2011

Tue, 20 Dec 2011 00:00:00 +0000

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

Blocky Earth

Fri, 21 Oct 2011 00:00:00 +0100

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

Urban Arteries

Wed, 28 Sep 2011 00:00:00 +0100

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

Conway's Game of Life in 3D

Mon, 12 Sep 2011 00:00:00 +0100

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

Wed, 07 Sep 2011 00:00:00 +0100

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

Thu, 25 Aug 2011 00:00:00 +0100

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

WebGL Light Box

Fri, 17 Jun 2011 00:00:00 +0100

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

Fri, 20 May 2011 00:00:00 +0100

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

The Wilderness Downtown

Sun, 01 Aug 2010 00:00:00 +0100

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

Optimising SVG load with Service Worker

Sun, 01 Nov 2015 00:00:00 +0000

How to use Service Worker to optimise the loading of SVG assets in a page without altering coding methods.

Calculating FPS past requestAnimationFrame limit with requestIdleCallback

Mon, 07 Sep 2015 00:00:00 +0100

Using requestIdleCallback to calculate FPS more precisely than with requestAnimationFrame.

Can the new Google logo be 305 bytes?

Sat, 01 Aug 2015 00:00:00 +0100

Techniques and tricks learned while trying to recreate the new Google logo with SVG in 305 bytes (or less!)

Live WebGL Shader Editor

Wed, 01 Apr 2015 00:00:00 +0100

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

cru·ci·form study in architecture visualisation

Sun, 01 Feb 2015 00:00:00 +0000

Some details on how the project came to be, a bit of technical info and lessons learned on the process.

Creating Android Lens Blur Depth Viewer

Thu, 01 May 2014 00:00:00 +0100

Reading, decoding and rendering depth data from the new Android Lens Blur camera application. Turn depth data back into 3D models

Using hooks to make development of shaders a bit easier

Fri, 28 Mar 2014 00:00:00 +0000

This article aims to show how to use function augmentation via hooks to add behaviour that makes developing GLSL shaders a bit easier

Loading sound files faster using Array Buffers and Web Audio API

Wed, 18 Sep 2013 00:00:00 +0100

How to reduce the number of requests when your page has a lot of sound assets.

Creating a Spherical Environment Mapping shader

Sun, 01 Sep 2013 00:00:00 +0100

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.

Web Audio Input and Windows

Tue, 15 Jan 2013 00:00:00 +0000

Gettings Chrome's new Web Audio Input feature to work on Windows.

Vertex displacement with a noise function using GLSL and three.js

Sat, 01 Dec 2012 00:00:00 +0000

Vertex displacement with a noise function using GLSL and three.js

Split-flap display with CSS and JavaScript

Tue, 20 Nov 2012 00:00:00 +0000

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

The new site is live

Thu, 01 Nov 2012 00:00:00 +0000

After several versions that never saw the light of the tubes, the newest and shiniest version of clicktorelease.com is live!

Experiments with Perlin noise

Fri, 01 Jun 2012 00:00:00 +0100

Experimenting with Perlin noise in the vertex and fragment shaders, using WebGL with three.js.

How to make clouds with CSS 3D

Sun, 01 Apr 2012 00:00:00 +0100

A tutorial on how to use CSS 3D Transforms to create sprite-based 3D-like clouds.

WebGL+WebGPU Meetup

Fri, 25 Feb 2022 00:00:00 +0000

Please join us for the next WebGL™ + WebGPU Meetup! We have an exciting lineup including the latest news from the Working Groups, and demonstrations from Google and Mozilla.

The future of the web in an XR world

Sun, 10 Jan 2021 00:00:00 +0000

This session will offer a look back at the history of the web and VR and a look into the future of how we interact with the web. Jaume will cover technology, browsers, APIs, and programming for an XR-enabled web.

The Future of the Web in a VR World

Mon, 01 May 2017 00:00:00 +0100

Technology, browsers, APIs and programming for a Virtual Reality-enabled web.A look into the future of how we interact with the web. Technology, browsers, APIs and programming for a VR-enabled web.

WebGL, WebVR and Information Visualisations

Sun, 04 Dec 2016 00:00:00 +0000

Revealing how WebVR enables web browsers to display immersive environments, providing new effective ways to represent and interact with data.

The Road to WebVR

Mon, 05 Oct 2015 00:00:00 +0100

VR is the new El Dorado, the new Gold Rush of technology, and a very palpable and real opportunity to create new amazing immersive experiences. From WebGL and CSS 3D Transforms technologies, to Google Cardboard and new HMDs like the Oculus Rift or the Samsung Gear VR.Learn how to navigate around all the options, and how to get started on this amazing an promising technology that enables browsers to display VR content.We’ll go through the history of VR and WebVR, with examples and lessons learned, and the challenges that we’re facing to make it happen, like rendering techniques, graphical design approaches and user interaction design.

Getting things done with three.js and WebGL

Mon, 15 Jun 2015 00:00:00 +0100

Get started coding real-time graphics in the browser with WebGL and three.js. Starting from the basic structure of a three.js web app, going through to the main elements of the API with several useful examples, will help you to get a foothold on the exciting world of 3D graphics, now on desktop and mobile.It's not required to have previous knowledge of 3D graphics, linear algebra or linear transforms.

What are shaders and what can they do for me?

Mon, 08 Jun 2015 00:00:00 +0100

Shaders! Amazing little things: a few lines in a C-like language and we can get smooth colours pulsating on the screen or a first-person shooter. In WebGL that we have running on our browsers there are vertex and fragment shaders, we are going to take a closer look at the latter.Fragment shaders are programs which perform a very specific task: to compute a colour. And each program is calculating a pixel, blissfully unaware of any other pixels or programs, so it can run all by himself in its own computer. Picture this: when we have thousands or millions of independent computers running in parallel we can compose an image thousands or millions of times faster.But is that all we can do with shaders, drawing pictures? Not really! An image, in the end, is just a piece of memory that we choose to read as a picture. But a chunk of memory can be so much more, it can hold any data! And with fragment shaders we can perform many tasks on that data and speed them up incredibly.Searching big sets of data, doing complex calculations, even synthesising music!All in your browser

Experiments with today's web technologies

Mon, 18 May 2015 00:00:00 +0100

We live in a time and society where music and data are prevalent. We like to experience music in many ways, and one of them is making visible the invisible, intangible nature of music, through digital synesthesia. We use all kinds of representations to understand music and discover new relations with other media. We explore relations of sets of information using computers. We're going to explore what tools and technologies does the web provide to work with music and visual metaphors, and how can we use that knowledge to create interactive music videos.We'll go step by step through the different ways of creating interactive visual experiences. From the basic techniques used to put pixels on screen to more complex ways of synchronising animations to sound and rhythm, participants will learn how to manage drawing in a 2D context, drawing in a 3D context, connect sound to their images and animations, and create interactive visuals. We'll go through the basics of 2D and 3D APIs, and sound synthesis and analysis.We will be using JavaScript, the language of the web, more and more widespread everyday. JavaScript is a functional programming language that allows highly interactive and iterative process, and largely reduces the friction when getting started with creative coding. We'll also be using associated web technologies, like Canvas, WebGL and Web Audio, to name a few.Participants will learn how to start a project, integrate libraries, use available tools and complete their own vision of a real-time interactive music video.

The Web in the age of WebGL

Tue, 24 Mar 2015 00:00:00 +0000

In just three years after its conception, WebGL has emerged as the de facto technology for creating web experiences and it is now supported by all the major browser vendors.During this presentation, Jaume and Ricardo will talk about the possibilities the technology brings to the table while sharing the process of developing some of their projects, giving a comprehensive overview of their current workflow and toolsets.

Getting started with WebGL and three.js

Mon, 29 Sep 2014 00:00:00 +0100

WebGL is a JavaScript API that lets developers implement hardware-accelerated 3D graphics in the browser, both at interactive and non-interactive framerates. WebGL is based onthe HTML

Getting started with three.js and WebGL

Tue, 10 Jun 2014 00:00:00 +0100

An introduction to real-time graphics in the browser using WebGL with three.js. An overview of the structure of a three.js web app, the main elements of the API and some useful examples to get started on the exciting world of 3D graphics, now on desktop and mobile. It's not required to have previous knowledge of 3D graphics, linear algebra or linear transforms.

Using the web as a creative platform

Thu, 05 Jun 2014 00:00:00 +0100

Everybody dance now with Web Audio API

Mon, 02 Jun 2014 00:00:00 +0100

Introduction to playing and modifying sounds in the browser with JavaScript. Overview of the Web Audio API and its possibilities (and limitations).

Generative and reactive geometry with JavaScript and WebGL

Sat, 14 Dec 2013 00:00:00 +0000