# CapCôtier - a 3D game to learn the coastal boat license (R3F + synthesized audio)

**URL:** <https://discourse.threejs.org/t/capcotier-a-3d-game-to-learn-the-coastal-boat-license-r3f-synthesized-audio/93050>\
**Category:** Showcase\
**Tags:** web-audio, game, shaders, react-three-fiber\
**Created:** [July 22, 2026, 3:57am UTC](https://discourse.threejs.org/t/capcotier-a-3d-game-to-learn-the-coastal-boat-license-r3f-synthesized-audio/93050 "2026-07-22T03:57:11Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![IlaneLopez](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ilanelopez/32/65583_2.png) [@IlaneLopez](https://discourse.threejs.org/u/IlaneLopez)\
**Post date:** [July 22, 2026, 3:57am UTC](https://discourse.threejs.org/t/capcotier-a-3d-game-to-learn-the-coastal-boat-license-r3f-synthesized-audio/93050/1 "2026-07-22T03:57:11Z")

</div>

**Live:** [https://www.capcotier.fr](https://www.capcotier.fr) - jump straight into the game at [Jouer - CapCôtier, le permis côtier en 3D](https://www.capcotier.fr/game) (free, no signup, works on mobile)

Hi all 👋

I built **CapCôtier** , a 3D game to revise for the French _permis côtier_ (coastal boat license). You take the helm in a stylized bay, navigate buoyed channels, and run graded challenges to learn maritime buoyage (IALA Region A), right-of-way rules, vessel lights/day-marks and sound signals.

It’s one Next.js app: the game lives at `/game`, alongside a set of guide pages.

**Stack**

- React Three Fiber 9 + three.js 0.184, TypeScript
- GLB models (boat, buoys, vessels, port, beach) with baked textures
- Zustand for UI state; all per-frame data lives in refs + module-scope singletons so the render loop never triggers React re-renders

**Bits that were fun to build**

- **Stylized water** - custom `ShaderMaterial`: vertex wave displacement + fragment simplex-noise foam/stripes, distance blend, fog integration. A second noise octave is gated behind the “high” quality profile.
- **Wind-Waker-style wake** - a persistent foam ribbon that widens and ages entirely in the shader; only `uTime` updates per frame.
- **100% synthesized audio, zero audio files** - the ship’s horn (sawtooth ~180 Hz + lowpass + ADSR) and bell (sine + harmonics, exponential decay) used in the sound-signal challenge are generated with the Web Audio API, as is the ambience (sea, engine that tracks RPM, gulls).
- **One consolidated `useFrame`** bobs ~48 buoys and fades passage arrows instead of ~48 per-object callbacks.
- Adaptive quality profiles (low/medium/high + auto via an FPS meter) and a mobile virtual joystick.

It’s all in French (it’s for the French license), but the visuals speak for themselves.

Would love feedback - especially on the water shader and perf on your devices. Thanks!

 ![Capture d’écran 2026-07-21 155514](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/3/f/3f8260979552a8292535369dffa55ca4e825912e.jpeg)  
 ![Capture d’écran 2026-07-21 155452](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/a/a/aaeb9ffa1fa8bd52c0d068e0a6bb8a351c883623.jpeg)