Getting to grips with ThreeJS Shading Language (TSL) – 10

Getting to grips with ThreeJS Shading Language (TSL) – Part 10

In this lesson we’ll put the knowledge gleaned from the previous 4 lessons together to create the flock of birds with flapping wings. I’ve also added a skybox.

We’ve been through all the functions in this script already.

We use a custom geometry class to create the vertex data adding attributes for instanceID and vertexID and copying position, normal and uv multiple times depending on the BOIDS constant value.
We create StorageBuffers on the GPU for position and direction of a Boid and the animation time.
We bake the animation of the Boid, storing each pose into a GPU resident StorageBuffer.
We use Compute Shaders to update the velocity, position and animation time of each Boid. ComputeVelocity uses the flocking algorithm first suggested by Craig Reynolds.
We use a custom vertex shader to position each vertex in each Boid in the flock.

One small update to point out is in ComputeTime. Here we use the current speed of the Boid when calculating the current animation time for a Boid. Essentially, it is the distance moved in a frame update allowing for deltaTime.

computeTime = Fn( () => {
    const instanceTime = timeStorage.element( instanceIndex );
    const boid_pos = positionStorage.element(instanceIndex).toVar();
    const boid_dir = directionStorage.element(instanceIndex).toVar();
    const noise_offset = noiseStorage.element(instanceIndex).toVar();
    const noise = mx_noise_float( boid_pos.mul( time.div(100.0).add(noise_offset))).add(1).div(2.0).toVar();
  const velocity = boidSpeed.mul(float(1.0).add(noise)).toVar();
  const speed = length( velocity );
    instanceTime.addAssign( deltaTime.mul(speed).mul(boidSpeed).mul(0.25) );
    If( instanceTime.greaterThan( duration ), () => {
      instanceTime.subAssign( duration );
    })
  })().compute(BOIDS);

Next up is the first in a series of articles about creating raymarched clouds using TSL.

If you find these articles useful, perhaps you can buy me a coffee by clicking the button below. It might encourage me to write more.

Support me on Ko-fi!

Getting to grips with ThreeJS Shading Language (TSL) – Part 10

Level Up Your Developer Skills

From Zero To Hero With My Udemy Courses

Follow me on

Useful Links