ClimateChangers

Swim through a polluted 3D ocean, free turtles trapped in plastic nets, and uncover the reality of the Great Pacific Garbage Patch—an immersive web experience blending gameplay with climate education

Comment

Inspiration

Ocean plastic pollution kills over 1 million seabirds and 100,000 marine mammals annually. We wanted to create an experience that makes this crisis visceral—not just through statistics, but through gameplay. By letting players navigate a polluted ocean and rescue individual turtles, we transform environmental education into personal agency. Each turtle saved represents a real action players can take in the real world.

What It Does

Ripple Effect is an interactive 3D ocean game where players swim through floating plastic waste to find and rescue endangered sea turtles. Each rescue triggers dialogue that teaches actionable sustainability tips—from refusing single-use plastic to proper recycling. The game progresses through educational checkpoints, including:

  • The Garbage Crisis – 8M+ tons of plastic enter oceans yearly
  • Microplastics – How plastic fragments move up the food chain
  • Ghost Gear – Lost fishing nets trapping marine life
  • Coastal Communities – Economic and social impacts
  • Wildlife Health – Direct injuries to ocean animals
  • Hope in Action – Actionable sustainability solutions

Players unlock new areas by saving turtles—the game enforces a “start line” mechanic that advances only after each rescue, naturally pacing the experience and preventing checkpoint skipping.

How We Built It

Tech Stack

  • Three.js – WebGL 3D rendering for ocean, turtles, and trash
  • InstancedMesh – 300+ animated plastic bottles via GPU instancing for high performance
  • GLTFLoader – Asset loading (ocean tiles, turtle models, 3 trash variants)
  • Web Audio API – Text-to-speech for turtle dialogue and accessibility
  • Vanilla JavaScript – Pure game loop, no frameworks

Architecture

  • Infinite ocean tiling with a 4-tile recycling system
  • Per-instance trash bobbing (sine wave) + uniform rotation
  • Dynamic player containment (back-limit advances per checkpoint)
  • On-screen touch controller for mobile gameplay

Challenges

  • Trash “jumping” during tile wraps → decoupled Z-position updates
  • Performance collapse with 300+ objects → switched to InstancedMesh, reducing draw calls 100x
  • Ocean animations only on first tile → fixed with per-tile AnimationMixer
  • Player bypassing checkpoints → dynamic back-limit mechanic
  • Mobile unplayability → added on-screen directional controller

Accomplishments

✅ 60fps gameplay with 300+ animated trash objects via GPU instancing
✅ Procedural dialogue system with facts and actionable tips
✅ Seamless infinite ocean with no snapping artifacts
✅ Text-to-speech for accessibility
✅ Mobile-ready controls
✅ Clean 500-line vanilla JS architecture
✅ Educational narrative integrated without interrupting gameplay

What We Learned

  • GPU instancing scales – essential for 100+ dynamic objects in real-time 3D
  • Grid snapping > position tracking – modulo-based tile wrapping cleaner than bounds checking
  • Game feel matters – uniform trash rotation and turtle animations add immersion
  • Constraints enable design – back-limit mechanic enforces pacing
  • Web Audio works – browser speech synthesis is reliable without a server

What’s Next for Ripple Effect

  • Expanded Content – 20+ checkpoints with region-specific ocean facts (Pacific, Atlantic, Indian)
  • Leaderboard – track turtles saved and completion time
  • Visual Enhancements – particle effects, underwater light rays, coral ecosystems
  • Adaptive Difficulty – turtle spawn distance increases as player progresses
  • Multiplayer – co-op or competitive modes
  • Nonprofit Integration – partner with Ocean Cleanup Project, WWF for donation links
  • Mobile App – React Native export to app stores

Built With

Share this project:

Updates