Skip to content

Week 3

Jump to bottom
Becca edited this page Dec 2, 2025 · 5 revisions

Combining everything and adding extra bits!

Updated shaders for plants and decorations to add some extra depth to everything!

Extras include:

  • Hermit Crab
  • Boids Algo
  • Treasure chest with bubbles
  • Sand/Bubble interactivity
  • Fish feeding interactivity
interactivity.mp4

Final Results

Overview

This final project is a procedural aquarium generator that produces an entire underwater scene with sand floor, plants, rocks, driftwood, decorations, fish, and small critters. Most geometry is built on the CPU as simple meshes (spheres, ribbons, etc.), but the real magic is in:

  • Instancing and per-instance attributes (positions, scales, phases, colors).
  • Shared collision + bounds so layers play nicely together.
  • Stylized shaders for sand, plants, water, glass, fish, and a hermit crab.

You can:

  • Randomize the tank layout with scatter/regenerate buttons.
  • Tweak sliders for plant density, coral size, driftwood gnarl, floor palettes, gravel vs. sand, chest settings, and more.
  • Adjust goldfish body and fin proportions.
  • Toggle tank layers on/off.
  • Use an orbit camera to explore the tank.
  • Enter interaction mode and click the sand or treasure chest to spawn bubbles!

Highlighted features

  • Procedural sand + gravel floor
  • Tunable noise amplitude, bump, scale, and palette (sand/grey/rainbow).
  • Exposed getParams() used by other systems to align with the floor.
  • Clumped grass + plant generators
  • Noise-driven density so grass appears in tufts.
  • Multiple plant families (grass, egeria, barclaya, corals) with separate controls.

Decorations

  • Driftwood (piece count, branches, gnarl, twist, detail, grain frequency and mix, warmth).
  • Boulder fields with regeneration and count sliders.
  • Fish house with adjustable geometry.
  • Shell scatter.
  • Treasure chest with bubbles and interactive events.

Critters

  • Hermit crab with stylized shell and body, cartoony fish-like eyes, scuttling sideways motion, and bobbing legs/claws.

Goldfish

  • Fully parametric body (length/height/width, arch) and fins (caudal, dorsal, pelvic, pectoral, anal) controlled via UI.
  • Geometry regeneration pipeline linked to UI sliders.

Interactivity & polish

  • Click-based bubble spawning and chest interactions, gated by an "interaction mode" key. A "drop food" toggle for the fish that cause them to swim toward a tasty morsel.
  • Fog tuned to camera distance.
  • Overall color palette and material tweaks to feel more cohesive and playful.

Post Mortem

How did the project go overall?

Overall, this project went really well. We ended up with a feature-complete, playful aquarium generator that feels alive and surprisingly expressive. The core ideas we cared about (making a fun and interactive fish tank) made it into the final version.

The main challenge was not technical WebGL basics, but scope management: deciding which subsystems were worth polishing and which ideas needed to be cut.

Goals vs. outcomes

Original goals:

  • Build a generator that can produce many different tank layouts from random seeds.
  • Use instancing + parameterized meshes to keep things lightweight.
  • Implement at least one interesting animated creature (fish) and some environmental motion (plants swaying, bubbles).
  • Give the user enough controls to meaningfully explore the design space.

What we achieved:

  • Multiple procedural layers (floor, plants, hardscape, decorations, critters) that can all be re-rolled and tuned.
  • A goldfish generator with a dedicated UI panel and geometry regeneration.
  • A fun extra critter (hermit crab).
  • Interactive elements (bubbles, treasure chest, feeding) that make it feel more like a toy than a static render.
  • A reasonable amount of visual polish: tuned colors, softer shading, rim light, fog, etc.

Things we pivoted or cut:

  • Scaled back advanced water/caustic effects to keep performance reasonable and leave time for aesthetic tuning.
  • Instead of many plant species, leaned into parameter-rich generators for a smaller number of families.

What we learned

  • Shared utilities (like the collision system and floor parameters) are incredibly valuable. Investing more time in those early on could have helped us down the line.
  • Having a single place where “shared state” is assembled per frame (main.js) made adding new layers much less painful.
  • Small touches (bubble puffs, highlights, shell stripes) do a ton of work in making the scene feel charming.

If we had more time

  • Add a small UI seed browser so you can bookmark favorite tank layouts and reload them.
  • More sophisticated behavior for critters (e.g. hermit crab investigating the chest).
  • Extra species: tiny schooling fish, shrimp, or a shy eel hiding in driftwood.
  • Post-processing (slight blur / color grading) to push the underwater mood even further.

⋆｡˚ °‧ 𓆝 𓆟 𓆞 𓆝 𓆟 ·｡⋆｡˚

fish-swimming.mp4

Clone this wiki locally