Exp
lora
tion

The goal of this website is to show all the different experiments I made using WebGL, the technology that enables 3D in browsers.

All the experiences on this website are build with Three.js which is the biggest Javascript 3D library for the web. It allows us to create 3D applications using the Javascript language that Three.js automatically transform in GLSL, the programmation language to render 3D applications.

For some advanced/custom experience, I had to edit/create the GLSL parts myself because these effects cannot be generated by Three.js.

This website is created using a basic HTML template, the only difference is one fullscreen canvas element containing all the experiences (2D or 3D). These experiences tracks the scroll then load when they are visible in viewport.

The HTML template is created and improved by myself over the years but was highly inspired by many other developers dev-diaries or websites.

By adding "?debug" in the url, you can load a debug view of the page that allows you to change the parameters of the experiences. You can for example change the colors, scale, positions and other variable to (in some cases) completely change the experiences.

Check out the debug view

Case studyInteractive map

Three.js
GLSL
Photoshop

3d-ish map with interactive points of interests

The goal of this experiement is to recreate a game map like The Witcher, Assassin's Creed or Legend of Zelda

Case studyChimay

Three.js
Blender
Photoshop

Learning to create 3D assets in Blender

Trying to create 3D assets for Chimay (glasses, bottles, etc.) in Blender then imported in Three.js with the right colors, textures and effects (mostly glass reflexion/refraction)

Case studyArchive

Collection of random experiments

Trying to recreate cool effects I see on websites or just testing new stuffs in 2D/3D

WebGL CSS

ExperienceBlob

Three.js
GLSL

Basic mesh randomized using noise texture

This experience is quite easy to achieve with one basic icosahedron mesh and different noise texture. We use a noise texture to displace the XYZ vertices of the mesh, by adding more details to the mesh we can create different shapes/patterns.

ExperienceHead

Three.js
GLSL
Blender

Head and eyes following the mouse movements

I downloaded a basic head model, separated the eyes from the head in differents objects, optimized the poly count then loaded everything in Three.js. The follow movement is simply tracking the mouse position then slightly rotating the objects to create the illusion.

In the future I'd like to create a version with speech and mouth movement, but that's another level of difficulty...

Lorem ipsum dolorsit amet, consectetur adipiscing elit

Proin diam lectus