Reality Ripples Online

Set sail on a tranquil yet mind-bending 3D ocean with a pirate ship, built to navigate the waves of reality (and hackathon deadlines!).

Comment

Inspiration: Setting Sail on the Sea of Innovation!

"Reality Ripples Online" isn't just a pretty visual; it's a metaphorical journey born from a very real one! As I navigate the exciting waters of incorporating my own company in parallel with this hackathon, the image of a ship sailing on a vast, dynamic ocean deeply resonated. It felt like the perfect symbol for launching new ventures, tackling new challenges, and finding direction amidst endless possibilities. Who knew hackathons could be so meta?

Our journey began with a rather pixelated sketch (a masterpiece crafted in Windows Paint, no less!) and a few AI image generation attempts to visualize this ambitious concept. Early prototypes in plain CSS and even some initial Three.js experiments got us closer, but the vision truly solidified when we discovered Three.js's dynamic ocean rendering utility. It was like finding the perfect compass on our creative voyage!

A huge confidence boost came from discovering "A trip under the moonlight" (MIT License by jbouny/fft-ocean), a project from 10 years ago. Its stunning visuals and the realization that dynamic oceans were "possible" gave me the courage to push through, even when the waves got choppy during development. Their codebase also offered invaluable context on how to structure prompts and port features to the latest Three.js versions – a real lighthouse in the vast sea of code!

How We Built This (and Survived 5 One-Shot Attempts!):

Building "Reality Ripples Online" was a testament to iterative design and a sprinkle of good old-fashioned perseverance. Turns out, even AI needs a little "five-shot" coaching instead of one-shot sometimes! After several tries to get the initial prompt just right, we finally coaxed Bolt.new into giving us the foundation we needed. From there, it was a process of finessing physics values and loading custom 3D models (a majestic pirate ship! a charming little planet!) to replace the initial placeholders.

We leveraged the power of React (with Vite for blazing-fast development) and Three.js to construct our interactive world. The magic truly happened with:

  • Dynamic Ocean Rendering: Utilizes three/addons/objects/Water.js for realistic wave motion, reflections, and lighting.
  • Procedural Sky & Sun: A fully dynamic sky that changes based on the sun's position, creating realistic lighting for any time of day.
  • Interactive Environment Controls: Use the leva panel to manipulate the time of day (sun elevation/azimuth) and water properties (color, wave size, distortion) in real-time.
  • Navigable Pirate Ship: Full keyboard control (WASD/Arrow Keys) for steering and moving the ship across the water.
  • Cinematic Camera Rig: A smooth, interpolating camera rig that elegantly follows the ship's movements while still allowing user control.
  • Physically-Based Rendering: Employs ACESFilmicToneMapping and proper lighting to achieve high-quality, realistic visuals.

Challenges & Learnings:

Beyond the initial "one-shot" prompt challenges, ensuring seamless integration between the ship's movement, the ocean's dynamics, and the sky's lighting proved to be a delightful puzzle. We learned a ton about shader synchronization, optimizing 3D assets for web performance, and the sheer power of modern web technologies like Three.js's WebRTC providers and the react-three-fiber ecosystem. Debugging physics values to ensure the ship "felt" right on the water was a particularly fun (and occasionally frustrating!) endeavor. Every ripple, every sway of the ship – it all came with its own tiny victory.

Acknowledgments:

A massive shout-out to:

Built With

  • bolt.new
  • css
  • leva
  • react-18-(with-vite)
  • react-three/drei
  • react-three/fiber
  • tailwind
  • three.js
  • three/addons/objects/water.js
Share this project:

Updates