00

about

SCENE INFO

This scene is built on top of a CPU boid simulation. The fish are controlled by 4 simple rules, separation, alignment, cohesion, and centering. Each rule has a weight associated with it which defines its importance, the fish will update their state based on the rules by the amount defined by the weight each tick.
Since this was one of my first ever experiments with Three.js I used it to learn about the webgl renderer, camera, and the three.js api.
On a desktop fish will try not to swim into your cursor.

WEBGL Boids

X
FRAMEWORK
THREE JS
X
TYPE
CPU SIMULATION

CARLING

SCENE INFO

For this experiment I started with a single plane and used layered gerstner waves to offset its verticies in a vertex shader.

The wave color is comprised of a few layers:
Firstly a depth fade base color is calculated from the distance of each point on the wave from the original plane.
Faked subsurface is added on top using the same concepts of lambert lighting but backwards.
The foam on top of the wave is two noise textures intersecting, they are mixed into the color based on the wave height
Finally I use a modified specular equation to create the sun highlights on the left side of the ocean

Procedural Waves

X
FULL FIDELITY
https://waterscene
X
LANGUAGE
GLSL
X
TYPE
GPU STUDY

02

SCENE INFO

I started this experiment to learn how to do GPU instancing in webgl.
I revisited this project to overhaul the planet shader, and position the camera to be more cinematic.
The planet now has a faked atmosphere I created by spawning a slightly larger sphere parented to the main planet and using hijacked Lambert lighting, fresnel, and a noise texture to create clouds and the lingering/bleeding light effect at sunrise and sunset.

The planet itself has a slight vertex offset on it created through a 3d noise equation, this make the surface more interesting and fixes bad seams I would get from UV mapping a noise texture onto the sphere.

Asteroids seemed like a good starting point. On initialisation the CPU creates an instanced mesh with the number of asteroids wanted. It then modifies each instances instanceMatrix to scale and position the asteroids in the ring formation. The system can easily handle far more asteroids but because of the scenes scale 1000 currently in this scene looked good.

Planet experiment

X
LANGUAGE
THREE JS
X
TYPE
GPU STUDY

03

SCENE INFO

This 3d model was created in blender and then textured in substance painter. It has two layers, a base map and a paint map, using a custom shader I am able to change the paint map to any values I like (3 channels rgb) allowing me to modulate the war paint, grit, and warning paints based on the current website theme color.
I used a mostly procedural workflow for the base map. I also used curvature and AO maps for the first pass of the grit layer of the paint mask.
I then used alpha stamps for the paint before blurring it and subtracting another grit mask to give the paint a worn look.
Rocks were created using a displacement modifyer and noise inside Blender and then hand painted.

Originally I had the water surface transparent with refraction and reflection though I decided that having just an alpha cutout of the reflection (warped by a normal map) would look far more interesting for this showpiece scene. To achieve the reflection I utilised a planar method where I duplicate the geometry and mirror it over the water surface, I render this in a different scene and then project this texture onto the water plane and offset its sampling coordinates slightly using a water normal map.

Tank scene

X
LANGUAGE
THREE JS
X
TYPE
3D MODELLING

04