MavonEngine: A TypeScript Multiplayer 3D Game Engine for the Browser Now Available

Building a multiplayer 3D browser game means stitching together a renderer, a physics engine, a networking layer, and writing glue code to keep them all in sync. MavonEngine was built to eliminate that problem entirely. **MavonEngine** is a TypeScript game engine built on [Three.js](https://threejs.org/) and [Rapier3D](https://rapier.rs/), designed around a single idea: write your game logic once, and have it run identically on both the server and the client - with state synchronization handled automatically. --- ## Get started in one command ```bash npx @mavonengine/create-bootstrap ``` That's it. This scaffolds a full multiplayer project with an authoritative server, a networked client, working WebRTC transport, and a shared entity system - all wired together and ready to run. > Single-player template is also in the works - stay tuned. --- ## Why MavonEngine? Most multiplayer browser games are held together with duct tape. You pick a renderer, bolt on a physics library, find a WebSocket solution, manually serialize your game state, and spend more time writing sync code than actual game logic. MavonEngine ships rendering, physics, networking, animation, particles, and debugging as a unified whole - not a collection of loosely connected libraries. They are designed to work together from the ground up. --- ## What's included ### Full-Stack Multiplayer Architecture The engine uses an **authoritative server** model, inspired by [Gaffer On Games](https://gafferongames.com/) and the Source Engine networking model. ```plaintext Client Server │ │ │── command (input) ──────────► │ │ │ 1) process command │ │ 2) step physics │ │ 3) update state │◄── state sync (tick) ──────── │ │ │ ``` Clients send input commands. The server queues them in a **command buffer**, steps physics on each tick, and broadcasts world state back. Only entities within the **visibility radius** of each client are synced - distance-based culling is built in. Real-time transport runs over **UDP via WebRTC** using [geckos.io](https://github.com/geckosio/geckos.io), giving you low-latency unreliable messaging suited to game state sync. Bandwidth tracking and server health monitoring are included out of the box. ### Entity System The entity hierarchy gives you the right base class for any game object: ```plaintext GameObject └── Actor (pushdown automaton state machine) ├── Entity3D (Three.js model + animations) └── LivingActor (health, damage, healing) ``` A minimal networked setup looks like this: ```typescript import { MavonServer, Entity } from '@mavonengine/core' const server = new MavonServer() server.onPlayerJoin((player) => { const entity = new Entity({ position: [0, 1, 0] }) server.world.add(entity) server.sync(player, entity) }) server.start(3000) ``` The `serialize()` method on every `GameObject` means entities know how to describe their own state over the wire - no manual serialization needed. ### Integrated 3D Physics Rapier3D runs on both the server and the client. The kinematic character controller handles slope climbing (configurable up to 45°) and auto-slide on steep terrain (30°). Full body and collider management is available, and debug visualization can be toggled at runtime. ### Advanced Rendering Three.js handles the client-side scene. Custom GLSL shader support is built in, along with debug rendering modes - wireframe, armature overlays, and physics debug visualization - all accessible via the debug panel. ### Skeletal Animation Load GLTF models (with Draco compression support), manage animation states, and transition between them with configurable fade durations. Efficient skeleton cloning is included for instanced models. ### Particle Effects Built-in effects like rain and smoke are ready to drop in. Custom shader support lets you create unique particle visuals beyond the defaults. --- ## Debug mode Add `#debug` to your URL to open the Tweakpane debug panel: ```plaintext http://localhost:3000/#debug ``` This activates performance monitoring, physics overlays, and the in-editor overlay - making it easy to catch issues fast without instrumenting your code manually. --- ## Prefabs MavonEngine includes a community-driven prefab system: ready-to-use `GameObject` subclasses for common game elements. Current built-in prefabs: - **Grass** - Lush grass fields with wind simulation, entity-based deformation, and LOD support. Configure density, sway, and color in seconds. - **Water** - Water surface shader with 3 LOD levels and basic customizations out of the box. Anyone can build and publish prefabs to the community registry. The engine includes tooling for creating and packaging your own. --- ## Level Editor (early WIP) A level editor is in active development that loads directly from the running game instance in the browser. Still early, but the goal is a fully integrated in-page editing experience - no separate tool to context-switch to. --- ## What can you build? MavonEngine is purpose-built for real-time multiplayer in the browser: - Action RPGs - PvP combat games - Open world multiplayer - Physics-based games Anything that needs players, physics, and a shared world. --- ## Core libraries | Library | Role | |---------|------| | [Three.js](https://threejs.org/) | Client rendering and scene management | | [Rapier3D](https://rapier.rs/) | Server and client-side physics simulation | | [geckos.io](https://github.com/geckosio/geckos.io) | UDP via WebRTC for real-time multiplayer | --- ## Try it ```bash npx @mavonengine/create-bootstrap ``` Documentation, a live demo, and the community are all available at **[mavonengine.com](https://mavonengine.com)**.