web-game-engine-expert

Web Game Engine Expert (Physics & ECS)

English | Bahasa Indonesia

---

English

Orchestration & Integration

Connects and orchestrates with relevant domain skills like brainstorming, zero-to-prod-orchestrator, and project-context-mapper to ensure cohesive execution.

Description

Production-grade guidance for building highly interactive 3D simulations and web games. Focuses on integrating modern WebAssembly-based Physics Engines (Havok, Rapier, Cannon-es) and structuring application state using the Entity Component System (ECS) pattern (e.g., bitECS, Miniplex).

Trigger Conditions

Activate this skill when the user is:

• Adding physics (gravity, collisions, rigid bodies) to a 3D scene (Three.js/Babylon.js).
• Dealing with performance issues in web games with thousands of objects.
• Structuring a complex game or simulation architecture.
• Using @dimforge/rapier3d, havok, or cannon-es.

Core Concepts

1. Physics Engine Integration

Avoid calculating collisions manually in JavaScript. Use a dedicated physics engine.

• Babylon.js + Havok: Babylon.js natively supports Havok Physics (the same engine used in AAA titles like Zelda BotW).
• Three.js / React Three Fiber + Rapier: Use @react-three/rapier for seamless integration in R3F. It is written in Rust and compiled to WebAssembly.

// React Three Fiber + Rapier Example
import { Physics, RigidBody } from '@react-three/rapier';

function GameScene() {
  return (
    <Physics gravity={[0, -9.81, 0]}>
      {/* Falling Object */}
      <RigidBody colliders="box" position={[0, 10, 0]}>
        <mesh>
          <boxGeometry />
          <meshStandardMaterial color="hotpink" />
        </mesh>
      </RigidBody>

      {/* Static Floor */}
      <RigidBody type="fixed" colliders="cuboid">
        <mesh position={[0, -1, 0]}>
          <boxGeometry args={[10, 1, 10]} />
          <meshStandardMaterial color="gray" />
        </mesh>
      </RigidBody>
    </Physics>
  );
}