# La Brute Legacy - a browser fighting game with 3D voxel combat, all on a single WebGL canvas

**URL:** <https://discourse.threejs.org/t/la-brute-legacy-a-browser-fighting-game-with-3d-voxel-combat-all-on-a-single-webgl-canvas/92897>\
**Category:** Showcase\
**Created:** [July 15, 2026, 4:27pm UTC](https://discourse.threejs.org/t/la-brute-legacy-a-browser-fighting-game-with-3d-voxel-combat-all-on-a-single-webgl-canvas/92897 "2026-07-15T16:27:14Z")\
**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 15, 2026, 4:27pm UTC](https://discourse.threejs.org/t/la-brute-legacy-a-browser-fighting-game-with-3d-voxel-combat-all-on-a-single-webgl-canvas/92897/1 "2026-07-15T16:27:14Z")

</div>

Hi everyone 👋

I’ve been building **La Brute Legacy** , a turn-based browser fighting game - a modern remake of the classic French game _La Brute_ / _MyBrute_ (Motion-Twin, 2008), which ran on Flash and shut down when Flash died. The whole thing is rendered with Three.js.

👉 **[https://la-brute-legacy.com](https://la-brute-legacy.com)**

Combat is fully automatic and deterministic (seeded RNG), so every fight can be replayed turn-for-turn from stored data. Characters, weapons and hit reactions are voxel models animated in real time.

**A few Three.js implementation details I’m happy with:**

- **Single `<Canvas>` for the entire app.** Instead of spinning up a WebGL context per component, the whole site runs one full-viewport canvas and uses drei’s `<View>` portals tied to each component’s DOM bounds. The brute preview, the combat scene, weapon and potion viewers are all separate `<View>`s on the same context.
- **`frameloop="demand"`** - the GPU only renders on actual state changes, which keeps it cheap enough to run even while ad/idle content sits on the page.
- **GLTF caching + shared draco/meshopt setup** so switching between dozens of weapon models doesn’t re-fetch or re-decode.
- Built on **react-three-fiber + drei** , with GSAP driving the combat tweens and camera moves.

Stack: Three.js / R3F / drei, Next.js App Router, React 19, PostgreSQL.

It’s a non-commercial fan project. Happy to answer anything about the single-canvas / multi-`<View>` architecture, it was the trickiest part to get right and I’d love feedback from people who’ve pushed that pattern further.

Thanks for taking a look! 🙏

 ![IMG_9168](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/c/c/cc29b5e7f6282965685ea43d0a1363e9a1758ba3.jpeg)

 ![IMG_9170](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/6/2/62e77bbea77fd39fbb3e6619a2e29cecc248c755.jpeg)

 ![IMG_9169](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/c/0/c0d970a1b85929c31f8fd649fa69b45c866d4798.jpeg)