DEV Community

Matthias von Bargen
Matthias von Bargen

Posted on

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

#gamedev

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 and Rapier3D, 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 

npx @mavonengine/create-bootstrap
Enter fullscreen mode Exit fullscreen mode

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 and the Source Engine networking model.

Client                          Server
  │                               │
  │── command (input) ──────────► │
  │                               │  1) process command
  │                               │  2) step physics
  │                               │  3) update state
  │◄── state sync (tick) ──────── │
  │                               │
Enter fullscreen mode Exit fullscreen mode

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, 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:

GameObject
  └── Actor (pushdown automaton state machine)
        ├── Entity3D  (Three.js model + animations)
        └── LivingActor  (health, damage, healing)
Enter fullscreen mode Exit fullscreen mode

A minimal networked setup looks like this:

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)
Enter fullscreen mode Exit fullscreen mode

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:

http://localhost:3000/#debug
Enter fullscreen mode Exit fullscreen mode

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 Client rendering and scene management
Rapier3D Server and client-side physics simulation
geckos.io UDP via WebRTC for real-time multiplayer

Try it 

npx @mavonengine/create-bootstrap
Enter fullscreen mode Exit fullscreen mode

Documentation, a live demo, and the community are all available at mavonengine.com.

Top comments (0)