Life Form Simulation

Overview: Life Form Simulation

This project is a procedural 3D animation of an underwater "life form" swimming through a deep-sea environment. It uses the Three.js library to render a bioluminescent creature that pulses and glides over a shifting seabed. The simulation creates a sense of constant forward motion by moving the environment and floating particles past the central creature, rather than moving the creature itself through a static world.

The project works by heavily modifying standard geometric shapes using custom GLSL shaders. Instead of using pre-made 3D models, the code takes basic shapes—like a sphere for the creature and a plane for the seabed—and uses mathematical formulas (like Simplex noise and sine waves) to distort their vertices in real-time. This allows for fluid, organic movement that looks like muscle contractions or flowing water.

The "life form" (referred to as Thing in the code) is constructed from a sphere that has been flattened and stretched. The following snippet shows how the vertex shader transforms a simple sphere into a winged, petal-like shape:

pos.y *= 0.05; // flatten the sphere into a disc
float a = atan(pos.z, pos.x);
float s = cos(a * 4.);
float r = s * 0.125 + 0.875;
pos.xz *= r; // create 4 "petals" or lobes

This logic reshapes the geometry mathematically before it is even drawn to the screen.

To make the environment feel alive, the SeaBed class uses a noise function to create rolling hills on the ocean floor. The code updates a time uniform every frame, which the shader uses to "scroll" the noise, making the floor appear to move beneath the creature:

float n = snoise(vec2(xShift, position.z) * 0.1);
vN = n;
transformed.y = n * 1.; // set the height of the seabed based on noise

This snippet calculates the height of each point on the floor using a procedural noise algorithm.

Finally, the project maintains a global animation loop that coordinates the movement of all elements. It tracks the passage of time and updates the WaterStuff (floating debris) to ensure the scene remains dynamic:

renderer.setAnimationLoop(() => {
  const dt = clock.getDelta();
  t += dt;
  gu.time.value = t * 1.25; // update global time for shaders
  waterStuff.update(dt); // move floating particles
  renderer.render(scene, camera);
})

This loop acts as the heartbeat of the simulation, constantly refreshing the visuals and advancing the procedural animations.