Hi! My name is Jaume Sanchez!
I like to do things with the browser
(NOT those kind of things, you pervert!)
Entries of personal blog, tutorials and feedback about experiments.
A study in architecture visualisation with models by @sejnulla. Nice music, glossy reflections, slow travellings, custom shading and postprocessing, using three.js and Wagner.
Browser-based 3D game, controlled by a paired mobile device.
WebGL, GLSL, post-processing, procedural generation and lots of optimisation.
Exploration of curl noise and half cubes pseudo instancing, using WebGL, three.js and some GLSL trickery.
Entry for the 2015 Christmas Experiments site. A throwback demo of neon flickering lights, made with WebGL, three.js, GLSL and Web Audio
How to use Service Worker to optimise the loading of SVG assets in a page without altering coding methods
Design and customise your own calaca for Día de Muertos
Techniques and tricks learned while trying to recreate the new Google logo with SVG in 305 bytes (or less!)
The Road to WebVR
Experiment with physics and analytical local ambient occlusion. Made with WebGL, Web Audio API, three.js, oimo.js and Wagner.
Getting things done with three.js and WebGL
What are shaders and what can they do for me?
Experimenting with today's web technologies
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
Some details on how the project came to be, a bit of technical info and lessons learned on the process.
A study in architecture visualisation with models by @sejnulla. Nice music, glossy reflections, slow travellings, custom shading and postprocessing, using three.js and Wagner.
Real-time WebGL demo with @cabbibo for Christmas Experiments 2014.
Crystal growth simulation, sound processing, custom shading and postprocessing.
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
Decals implementation for three.js, useful for temporary decorations like bullet impacts, blood splatters, burn or skidmarks; or for weathering effects on objects
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 new cloud experience, using WebGL, canvas and CSS3D renderers, with several interactions for desktop and tablet, and soothing reactive music.
Reading, decoding and rendering depth data from the new Android Lens Blur camera application.
Turn depth data back into 3D models..
Getting started with three.js and WebGL
Using the web as a creative platform
Everybody dance now with Web Audio API
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.
This article aims to show how to use function augmentation via hooks to add behaviour that makes developing GLSL shaders a bit easier.
SnipSnap is an online tool to create cool snapshots of code snippets with 3D perspective, created using prims.js, three.js and bootstrap.
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.
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!
Isosurface with Marching Cubes, bump mapping with normal mapping and triplanar mapping, shading with a MatCap shader.
Generative and reactive geometry with JavaScript and WebGL
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.
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.
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.
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.
Real-time post-processing shader to create the style of old architectural drawings.
Blinn-Phong shading and rim lighting. Based on Microsoft Research "Real-Time Hatching" paper.
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.
Gettings Chrome's new Web Audio Input feature to work on Windows.
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.
Vertex displacement with a noise function using GLSL and three.js
An homage to low technology presence in the web of the 21st century: a split-flap display, created with HTML, CSS3 and JavaScript.
After several versions that never saw the light of the tubes, the newest and shiniest version of clicktorelease.com is live!
An experiment on procedural generation of meshes and custom shading. In this case, a Halloween pumpkin for a special message.
A Halloween experience by B-Reel: a WebGL zombie game, with kick-ass 3D models, creepy rendering and unsettling sounds.
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.
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 is a JavaScript library to help capturing animations created with HTML5 canvas at a fixed framerate.
A panorama viewer using data from Ashima Group Panorama Viewer that doubles as a Fullscreen API and Pointer Lock API experiment.
An interactive music video featuring Bobby Womack, targeted at mobile devices: smartphones and tablets. Lots of SVG elements and CSS animations, with JavaScript interactions.
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.
A series of experiments based on the shape and aesthetics of the new Nexus Q. Custom shading, light dispersion calculation and JavaScript physics.
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.
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.
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.
A tutorial on how to use CSS 3D Transforms to create sprite-based 3D-like clouds. This tutorial will try to guide you through the steps to create a 3D-like, billboard-based clouds.
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.
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.
An experiment on creating 3D-like clouds with CSS3 3D Transforms and a bit of Javascript.
Holiday greetings message using WebGL, Google Street View and Geolocation API. Enjoy the soothing experience, personalize your message and share it with everyone!
Entry for the Mozilla Dev Derby, using HTML5 canvas and Audio API to create a continuous scribble experience
An abstract representation of sections of the world through aligned cubes, using WebGL, Geolocation API and Google Maps imagery and Elevation API.
Entry for the Mozilla Dev Derby, using HTML5 canvas, Geolocation API and Google Maps Elevation API.
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.
Entry for the Mozilla Dev Derby, using the History API, HTML5 canvas and XmlHttpRequest to track your browsing of wikipedia.
Animated GIF in 3D uses WebGL with three.js and Drag and Drop API to get a new perspective into animated gifs.
A project adding terrain and cloud layers from Google Maps to the Google DAT's WebGL Globe code
Entry for the Mozilla Dev Derby, using HTML5 video and audio to create a simple tool for VJing
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.
A Google Street View player using WebGL with three.js to provide a much smooth experience.
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.
