Ripple Effect

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 through statistics, but through gameplay. By letting players swim through a polluted ocean and rescue individual turtles, we transform environmental education into personal agency. Each turtle saved represents a real action players can take.

What it does

Ripple Effect is an interactive 3D ocean game where players navigate 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 __. The game progresses through __ educational checkpoints:

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

Players unlock new areas by saving turtles—the game locks them behind a "start line" that advances only after each rescue, creating natural pacing and preventing skipping checkpoints.

How we built it

Tech Stack:

• Three.js – WebGL 3D rendering for ocean, turtles, and trash
• InstancedMesh – 300+ animated plastic bottles via GPU instancing (crucial for 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 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 usage

Challenges we ran into

1. Trash jumping during tile wraps – Z-position updates were coupled to tile recycling; decoupled them so trash stays stable
2. Performance collapse – 300+ individual trash clones tanked frame rate; switched to InstancedMesh, reducing draw calls 100x
3. Ocean animations only on first tile – Fixed by creating per-tile AnimationMixer instances
4. Player bypassing checkpoints – Implemented dynamic back-limit that advances per turtle save
5. Mobile unplayability – Built on-screen directional controller with visual feedback for Replit

Accomplishments that we're proud of

• ✅ 60fps gameplay with 300+ animated trash objects via GPU instancing
• ✅ Procedural dialogue system (6 unique checkpoint facts + 6 actionable tips)
• ✅ Seamless infinite ocean with zero visible snapping
• ✅ Text-to-speech integration for accessibility
• ✅ Mobile-ready on-screen controller
• ✅ Clean 500-line vanilla JS architecture
• ✅ Educational narrative that doesn't interrupt gameplay flow

What we learned

• GPU instancing scales – InstancedMesh is essential for 100+ dynamic objects in real-time 3D
• Grid snapping > position tracking – Tile wrapping is cleaner with modulo-based snapping than min/max bounds
• Game feel matters – Uniform trash rotation and turtle animations add immersion without complexity
• Constraints enable design – Back-limit mechanic forces intentional pacing and prevents sequence-breaking
• Web Audio works – Browser speech synthesis is reliable for accessibility without server dependencies

What's next for Ripple Effect

1. Expanded Content – 20+ checkpoints with region-specific ocean facts (Pacific, Atlantic, Indian)
2. Leaderboard – Track turtles saved and completion time
3. Visual Enhancements – Particle effects, underwater light rays, coral ecosystems
4. Adaptive Difficulty – Turtle spawn distance increases as player progresses
5. Multiplayer – Co-op or competitive modes
6. Nonprofit Integration – Partner with Ocean Cleanup Project, WWF for donation links
7. Mobile App – React Native export to app stores

Built With

• three.js