DEV Community: Matthias von Bargen

[Boost]

Matthias von Bargen — Tue, 05 May 2026 07:53:49 +0000

Matthias von Bargen

May 5

Realistic Ragdoll Physics in Three.js

#threejs #javascript #webdev #gamedev

Comments

3 min read

Realistic Ragdoll Physics in Three.js

Matthias von Bargen — Tue, 05 May 2026 07:41:59 +0000

Implementing Realistic Ragdoll Physics with Three.js and Rapier.js

Have you ever wondered how to transition a character from a fluid animation to a limp, realistic heap upon impact? Whether it's for a game-over sequence or a chaotic physics sandbox, ragdoll physics is a staple of immersive 3D experiences.

Today, we’re diving into a implementation of Three.js ragdoll physics using the high-performance Rapier.js engine, based on the rapierjs-ragdoll repository and its threejs ragdoll demo.

Why Rapier.js for Three.js?

While Ammo.js and Cannon.js are popular choices, Rapier.js is written in Rust and compiled to WebAssembly. It’s incredibly fast, stable, and offers a clean API that fits perfectly into the modern TypeScript/JavaScript ecosystem. When combined with Three.js, it allows for complex simulations—like multi-jointed ragdolls—without sacrificing frame rates.

Key Features of the Implementation

The rapierjs-ragdoll project showcases a robust system for syncing skeletal meshes with physical bodies. Here’s what makes it stand out:

Bone Synchronization: Every frame, the physics engine updates the position and rotation of rigid bodies, which are then mapped back to the Three.js bones.
Real-time Debugging: Includes a toggleable debug renderer (via Tweakpane) to see the underlying physics colliders.
Blender Integration: The system is designed to work with standard GLTF models exported from Blender, provided the bone naming matches the mapping.

How It Works: Under the Hood

1. Creating the Physics World

The simulation starts by initializing the Rapier3D world. Using @dimforge/rapier3d-compat, we gain access to a cross-platform physics engine.

import RAPIER from '@dimforge/rapier3d-compat';

// Initialize the world with gravity
const gravity = { x: 0.0, y: -9.81, z: 0.0 };
const world = new RAPIER.World(gravity);

2. Building the Ragdoll

Each part of the ragdoll (head, torso, upper arm, etc.) is a Dynamic Rigid Body. These bodies are then constrained by joints.

Rigid Bodies: Act as the "bones" of the physics simulation.
Joints: Define the pivot points (e.g., the shoulder connecting the torso and the arm).

3. The Sync Loop

The most critical part of a Three.js ragdoll is ensuring the visual mesh matches the physics simulation. In every requestAnimationFrame, the project iterates through the bone mapping:

// Pseudocode for the sync loop
function update() {
    world.step(); // Step the physics engine

    ragdollParts.forEach(part => {
        const position = part.rigidBody.translation();
        const rotation = part.rigidBody.rotation();

        // Update Three.js Bone
        part.bone.position.set(position.x, position.y, position.z);
        part.bone.quaternion.set(rotation.x, rotation.y, rotation.z, rotation.w);
    });
}

Getting Started

If you want to try this yourself, the setup is straightforward. The project uses TypeScript and Vite for a modern development experience.

Clone the repo: git clone https://github.com/mattvb91/rapierjs-ragdoll
Install dependencies: npm install
Run the demo: npm run dev

Pro Tip: Bone Naming

The project relies on specific bone names to map the physics bodies correctly. Use the included blender file as a starting point and match the configuration for the bone names in Ragdoll.ts.

Conclusion

Creating a Three.js ragdoll doesn't have to be a "nightmare fuel" experience. By leveraging Rapier.js, you get a performant, predictable physics simulation that breathes life into your 3D characters.

Check out the live demo here to see it in action, and don't forget to star the GitHub repository if you find it useful for your next game project!

Keywords: Three.js ragdoll, Rapier.js physics, WebGL character physics, Three.js game development, JavaScript ragdoll tutorial.

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

Matthias von Bargen — Mon, 30 Mar 2026 17:38:17 +0000

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

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) ──────── │
  │                               │

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)

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)

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

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

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

AI Ecommerce content generation

Matthias von Bargen — Sat, 25 Mar 2023 10:26:27 +0000

Check out our latest update on how you can utilize the Tinyshop OpenAI integration to quickly generate content outlines for the products in your webshop or generate completely new ones.

Learn more here: Ecommerce AI Solution

Innovative Ideas for Your Next SaaS Startup

Matthias von Bargen — Mon, 20 Mar 2023 16:20:52 +0000

Seize the Market by Unleashing Your Entrepreneurial Spirit

The global Software as a Service (SaaS) market is experiencing rapid growth and is projected to reach new heights in the coming years. The scalability and flexibility of cloud-based applications have made it easier than ever for startups to develop, deploy, and market their products. However, the industry is also becoming increasingly competitive, which means entrepreneurs need to come up with unique and innovative ideas to stand out from the crowd. In this article, we will explore ten exciting ideas for your next SaaS startup, so you can pave the way to success.

Virtual Reality (VR) Collaboration Platform

As remote work continues to gain traction, businesses are on the lookout for more immersive ways to connect and collaborate with their teams. A VR collaboration platform can provide users with a virtual environment where they can interact with colleagues and partners as if they were physically present. This platform can integrate with existing project management, communication, and productivity tools, offering a seamless experience for users.

AI-powered Content Creation

Artificial intelligence (AI) is making waves in various industries, and the content creation realm is no exception. A SaaS platform that leverages AI algorithms to generate blog posts, articles, social media posts, and other types of content can save businesses time and effort. The platform can offer customized content based on industry, target audience, and goals, as well as suggest edits and improvements to ensure high-quality output.

Personalized Learning Management System (LMS)

The education and corporate training sectors are witnessing a surge in demand for personalized learning experiences. A SaaS LMS that uses AI and machine learning to analyze learner data and create tailor-made curriculums can cater to this demand. The platform can also provide analytics and insights to help instructors and organizations track progress, identify areas of improvement, and optimize learning experiences.

Mental Health and Wellness Platform

Mental health and wellness have become increasingly important, especially in today's fast-paced and stressful world. A SaaS platform that offers digital mental health services, such as therapy, coaching, and self-help resources, can make these services more accessible to individuals and businesses. The platform can utilize AI to match users with appropriate resources and professionals based on their needs, preferences, and progress.

Sustainable Supply Chain Management

Environmental consciousness is on the rise, with many businesses seeking to improve their sustainability practices. A SaaS platform that helps companies optimize their supply chain for sustainability can provide valuable insights and tools for making better decisions. The platform can assess suppliers, identify areas for improvement, and suggest strategies to reduce waste, emissions, and resource consumption.

Freelancer Management System (FMS)

As more and more people turn to freelancing, businesses need efficient ways to manage and collaborate with their external workforce. A SaaS FMS can offer a centralized platform for businesses to find, onboard, and manage freelancers across various projects. The platform can also integrate with existing HR and project management tools, streamlining communication and workflows.

Voice-Assisted Productivity Platform

Voice assistants are becoming increasingly popular for personal use, but there's potential for expansion into the realm of productivity as well. A SaaS platform that offers voice-assisted tools for tasks like note-taking, scheduling, and project management can help users stay organized and save time. The platform can integrate with popular productivity apps and adapt to user preferences over time using AI algorithms.

Cybersecurity Education and Training

Cybersecurity threats are a growing concern for businesses of all sizes, making it essential for organizations to invest in employee education and training. A SaaS platform that provides engaging, interactive cybersecurity training modules can help employees stay informed about potential threats and best practices for mitigating risks. The platform can offer gamification features, real-time simulations, and assessments to ensure knowledge retention and promote continuous learning.

Smart Contract Management Platform

With the rise of blockchain technology, smart contracts are becoming an essential component of many business transactions. A SaaS platform that simplifies smart contract creation, management, and execution can help businesses harness the power of blockchain more effectively. The platform can provide a user-friendly interface for drafting, reviewing, and executing smart contracts, as well as offer security features and compliance checks to ensure the integrity of the agreements.

Customizable Event Planning and Management

Organizing and managing events can be complex, time-consuming, and costly. A SaaS platform that streamlines event planning and management can save businesses time, resources, and stress. The platform can offer customizable templates, registration tools, communication features, and analytics to help organizers create successful events. Integration with popular social media platforms and marketing tools can also enhance the event promotion process.

Conclusion

The SaaS landscape is ripe with opportunities for entrepreneurs looking to launch innovative solutions that cater to emerging needs and trends. By focusing on areas such as virtual collaboration, AI-powered content creation, personalized learning, mental health, sustainability, freelancer management, voice-assisted productivity, cybersecurity education, smart contracts, and event planning, your startup can carve out a niche in the market and stand out from the competition. Remember, the key to success lies in finding the right idea, validating it through market research, and developing a robust product that solves real problems for your target audience. With the right approach and dedication, your next SaaS startup can make a significant impact on the industry and pave the way to success.

I am currently in the process of launching my own free webshop SaaS service: TinyShop.cloud. Feel free to check it out.