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 whisp.
Clicktorelease
Welcome to my little corner on the Internets
Latest posts
Floating Shiny Knot
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.
WebGL+WebGPU Meetup
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.
Genuary 2022
Entries for Genuary 2022, 31 days of procedural generation with threejs and WebGL.
Codevember 2021
Entries for Codevember 2021, 31 days of experiments with WebGL, three.js, simulations and post-processing.
Web Unleashed 2021 Opening Titles
Created for the annual FITC Web Unleashed conference.
Inktober 2021 Strange Attractor Sketches
All the non photorealistic renders of strange attractors for Inktober 2021.
Generative art: Lines on flow fields
Particles drawing lines on fields of electrical charges.
The future of the web in an XR world
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.
F*MMXX
A new year demo to send off this horrible year.
Generative baubles
An experiment to generate baubles procedurally.
SDF physics
An experiment with GPU particles bouncing off volumes defined with SDFs.
Inktober 2020 Sketch experiments
All the sketches for Inktober 2020 simulating ink.
Obsolidian
Demo for Solskogen 2020.
FaceMeshFaceGeometry
Three.js helper for FaceMesh.
Loops 2018-2019
All the loops made with looper.
Digital Inktober 2019
Loops for Inktober 2019.
Capture the Flag viewer
Interactive CTF game explorer, with games of indoor and outdoor procedurally generated environaments where agents train and learn to interact and cooperate.
Infinite Gift
The gift that keeps on giving.
Codevember 2018
Loops for Codevember 2018.
Digital Inktober 2018
Loops for Inktober 2018.
Codevember 2017
Entries for Codevember 2017, 15 days of experiments with WebGL, three.js, simulations and post-processing.
The Future of the Web in a VR World
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.
WebVR Experiments: Speak To Go
Explore the world with your voice. Experiment part of the WebVR Experiments launch.
WebGL, WebVR and Information Visualisations
Revealing how WebVR enables web browsers to display immersive environments, providing new effective ways to represent and interact with data.
Dark Haze
Christmas Experiments collaboration with Marpi, Bent Stamnes and cbuyukberber: lots of ambiance with pixel texture, smooth music and furry polygons
Codevember 2016
Entries for Codevember 2016, 30 days of experiments with WebGL, three.js, Web Audio and procedural generation.
The Polygon Shredder
Exploration of curl noise and half cubes pseudo instancing, using WebGL, three.js and some GLSL trickery.
THREE.MeshLine
Mesh replacement for THREE.Line
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.
Día de Muertos 2015
Design and customise your own calaca for Día de Muertos
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.
The Road to WebVR
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…
Calculating FPS past requestAnimationFrame limit with requestIdleCallback
Using requestIdleCallback to calculate FPS more precisely than with requestAnimationFrame.
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!)
Getting things done with three.js and WebGL
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…
What are shaders and what can they do for me?
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…
Google I/O 2015 Toy
Experiment with physics and analytical local ambient occlusion. Made with WebGL, Web Audio API, three.js, oimo.js and Wagner
Experiments with today's web technologies
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…
Speech Jammer
A speech jammer to warp your reality, built with Web Audio API and WebRTC getUserMedia.
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
The Web in the age of WebGL
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…
cru·ci·form study in architecture visualisation
Some details on how the project came to be, a bit of technical info and lessons learned on the process.
cru·ci·form
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
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
Online interactive experience for Halloween, in which the user can carve a stencil into a procedurally generated pumpkin and share it
Getting started with WebGL and three.js
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 element and on OpenGL ES 2.0, which means that it is possible to run WebGL on many different devices, such as desktop computers, mobile phones and TVs.Today, WebGL is fairly widely supported on most platforms and…
Decals for three.js
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
A collection of mobile games for Chrome, celebrating the World Cup; using the latest web technologies to provide a multiplayer experience across multiple devices
Getting started with three.js and WebGL
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.