A basic animation featuring a scene with a camera and a cube. Basically, the "Hello world!" of WebGL.
A demo showcasing how different types of light sources work with different types of materials.
A simple scene exported from Unity3d and imported into WebGL using a custom JSON format I created. The demo also features detecting mouse pointer collision with 3d objects.
A 6-sided cubemap used to create a skybox and a reflective shader.
Similar to the cubemap demo, but it uses a 2d texture instead of a cubemap to create the reflection effect. A simple image, if it is not an equirectangular panorama, can't generate a good looking skybox so there's no background.
The shader is somewhat siilar to the reflection effect above, but it features a translucent (glass) effect using refraction, reflection, fresnel & chromatic dispersion functions.This demo was featured on Chrome Expriments.
Moving though a field composed of 1 million particles.
A stream of particles moving along a path gives a comet-like visual effect.
Learning how to use shader uniforms to tile & offset a texture on an object.
An entire room, with textured walls, furniture and lightmaps created in Cinema4D and imported from Unity3D into WebGL. Move the mouse cursor to look around, WASD to move, click to turn a flashlight on. This demo was featured on Chrome Expriments.
A filter is a shader that runs on top of a rendered scene to apply an additional effect. It is also referred to as a "second pass". In this case the filter adds a pixelation effect that can be customized in realtime.
Using a color band texture to give a 3d object cartoon-ish look. Click to cycle between a few different color versions.
This is an old school demo scene effect. It uses a color band and a shader alogorithm to generate a "liquid" looking visual effect. Click to cycle between a few different color versions.
Another version of a "second pass" filter effect. This time the filter is composed of falling particles creating an effect of a silhouette in heavy rain.
Geometry modifier example. This is a WebGL adaptation of an old Flash experiment I did back in 2008. This demo was featured on Chrome Expriments.
Using a classic 3d head scan I experiment with some shader effect. Click to cycle between several versions.
Another type of filter effect featuring slowly fading trace of the moving object.
Blurring is achieve using a filter as well, but this one need 2 passes - one for blurring along the X axis and another one to blur along Y.
How many cubes can be rendered before the framerate drops to 0? Find out in this demo!
A model of planet earth rendered with a bump map shader to create relief effect. The clouds that are probably too far from the surface, but make for a cool 3d effect. Also uses browser geolocation to put you on the globe (please allow the browser to read your location for that).
Experimenting with procedural terrain. This is inspired by a terrain engine that was available in Unity.
A TV-glitch filter applied to a webcam feed. One of my first experiments with webcam in WebGL right after the WebRTC API was introduced in Chrome. Today, all major browser should support it.
Basically same thing as the webcam effect above, but with a different filter. This time it is a Matrix style "green letter rain" effect.
Applying the glitch effect to move between photos in an image gallery.
Using a perlin noise generator and bump mapping to create a water effect. Definitely not the best realtime water you will see, but it was my first attempt.
The final and most ambitious experiment with J3D, it uses a lot of the things I learned workijng on all the demos above. It is a mini game where you need to control a space ship to avoid asteroids - grey shapes - and capture gems - orange and green shapes.