REFRACTIONS . WEBGL . THREEJS . REAL-TIME . SHADER
GO TO LAB
This project uses multi layered screen space refractions to try to recreate the thickness of the glass in a perfume bottle.
3D . GLSL . AI . SIRI . THREEJS
GO TO LAB
Inspired by AI elements such as Siri or the one presented in psi-fi movies, we created an intelligent blob that reacts to user inputs. This was done using noise and texture reading in the custom shaders.
WEBGL . THREEJS . REAL-TIME . SHADER . TRIPLANAR-MAPPING . TEXTURES
GO TO LAB
Made in WebGL, using triplanar mapping with several textures depending on the light direction or where the shadow is being projected.

Fully dynamic, nothing was baked. Using noise will help to break the repetition of the textures.

The background image is a real sheet of paper that was scanned.
WEBGL . RAYTRACING . REAL-TIME . SHADER . REFLECTIONS . GPU
Diamond rendered on WebGL using a raytraced approximation on the GPU to reproduce internal reflection bounces.

The raytracing was performed on a unit cube with the assistance of a normal and position cubemap to approximate the shape of the diamond, this was mixed with localized reflection techniques to improve the accuracy of each bounce.

Both cubemaps were rendered from the inside of the diamond. A median filter was used as a post processing effect to try to cover most of the aliasing artifacts.

By using a maximum of 5 bounces the effect is quite good and doesn't have a high impact on performance, since per pixel only 10 cubemap samples are needed at most.

While still having a lot of artifacts it is a major improvement over other existing and simpler techniques that only rely on a refraction cubemap.
VIDEOS AS TEXTURES . WEBSOCKET . WEBGL . THREEJS . REAL-TIME
GO TO LAB
Combining different techniques we manage to have pseudo-global illumination on a real time 3d web application. These animations also support real-time communication with a server, which broadcast states to be received by every client connected worldwide. This project uses videos as lightmaps to give the illusion of dynamic lighting. A low resolution video turned out to look good enough, and we needed 4 permutations to recreate the different lighting setups of the environments (lights on/off, courtain on/off), so this means 4 videos per lightmap.
GPU . WEBGL . ANIMATION . MOTION GRAPHICS . ORGANIC . REALTIME . SHADER . C4D
GO TO LAB
This animation was rendered in WebGL.
Inspired by the things you can do with the alembic format, I wanted to see how far I could get by using gltf and draco compression.

The animations are just a geometry flipbook exported as an obj sequence from cinema4D, and then merging them into a single gltf file with a command line tool I made, and then compressing the sh*t out of it with draco.

The results were quite good, the first "cells" animation originally have a file size of 300mb, and compressed into 8mb.

The splash animation went from 435mb to 11mb.

Obviously the catch is having to decompress all of that into memory, which does take a few seconds (although could be done in a worker to not cause a stutter).

Overall I think this could be used in a production environment to produce short and organic animations that couldn't be possible with just plain real time simulations.

Ona different note, the cells have a simple matcap shader, and the splash a minimalistic shader with a refraction cubemap and a bit of fresnel to highlight the contour.
3D . GLSL . GOLD . GLOBE . THREEJS
GO TO LAB
Inspired by the concept of how gold was a medium to connect economies during the much of the latest centuries, we created a golden globe surrounded by particles and connectivity lines. The project features a 3d world with heigh-maps, geometries manipulated on real time and a post-processing blur pass.
BAKING . DIFFUSE LIGHTING . INDIRECT LIGHTING . MAYA . NO EXTRA EFFECTS
GO TO LAB
This rose was an experiment to test how far we could get by baking diffuse direct and indirect lighting directly into the model, without any extra effects.

The drawbacks are obviously that the lighting can't be changed, and it is impossible to bake specular reflections.
3D . GLSL . LIGHTS . SHADER . SUB SURFACE SCATTERING . VFX
Here for the hand we've implemented the sub surface scattering technique described in the nvidia GPU gems book 1 (ch.16 - depth mapping section).

The colors were modulated with a color ramp texture depending on the thickness of the mesh and the direction of incoming light.

For the light scattering we've implemented the volumetric ray scattering technique as a post processing effect as described in the GPU gems book 3(ch. 13).

The hand animation was made by @santiagocolombomigliorero
GO TO SITE