git:20260912.c3d58ff to v3.0.0

+ ---

+ name: web-game-engine-expert

+ description: "Expert guide for modern web-based game development. Covers PlayCanvas, Babylon.js Havok, Three.js/R3F Rapier & Jolt Physics, Fixed-Timestep Accumulators, Zero-GC Pooling, ECS (bitECS/Miniplex), Spatial Audio (HRTF), and WebTransport networking / Panduan ahli pengembangan game web modern dan efisien."

+ author: "vibes-plug-swarm"

+ version: "3.0.0"

+ ---

+

+ # Web Game Engine Expert (Physics, Architecture & Game Loops)

+

+ [English](#english) | [Bahasa Indonesia](#bahasa-indonesia)

+

+ ---

+

+ <a name="english"></a>

+ ## English

+

+ ### Orchestration & Integration

+ Connects and orchestrates with relevant domain skills:

+ - `web-3d-graphics-expert` — Visual rendering layer (WebGPU, Three.js, Babylon.js, PlayCanvas).

+ - `glsl-shader-expert` — Custom gameplay shaders, damage flashes, VFX materials.

+ - `webxr-ar-vr-expert` — Spatial controls and VR/AR controller tracking.

+ - `realtime-collaboration-expert` — Low-latency multiplayer state synchronization (WebRTC / WebTransport).

+ - `performance-web-vitals` — Frame budgeting (16.6ms for 60fps, 8.3ms for 120fps) and eliminating Garbage Collection stalls.

+ - `wasm-edge-computing-expert` — Compiling custom Rust/C++ simulation modules to WASM.

+

+ ### Description

+ Production-grade guidance for engineering commercial-quality 2D and 3D web games running at steady 60 to 144+ FPS. Enforces strict game architectural patterns: **Fixed-Timestep Accumulators with render interpolation**, **WebAssembly Physics Engines** (Rapier 3D, Jolt Physics, Havok), **Zero-GC Object Pooling** to eliminate JavaScript garbage collection stutters, **Entity Component System (ECS)** architectures, **Web Audio API 3D Spatial Sound (HRTF)**, and **WebTransport / WebRTC low-latency netcode**.

+

+ ### Trigger Conditions

+ Activate this skill when the user is:

+ - Developing a web-based game or physics simulation (2D or 3D).

+ - Integrating physics with `@dimforge/rapier3d`, `jolt-physics`, `@babylonjs/havok`, or `@react-three/rapier`.

+ - Building or refactoring a game loop to fix frame pacing or physics stuttering on 120Hz/144Hz monitors.

+ - Implementing an Entity Component System (ECS) with `bitECS` or `miniplex`.

+ - Designing zero-allocation object pools for projectiles, particles, or temporary math vectors.

+ - Adding Gamepad API, Pointer Lock mouse look, or mobile virtual touch controls.

+ - Integrating 3D positional audio via the Web Audio API.

+ - Architecting multiplayer game networking with WebTransport (QUIC datagrams) or WebRTC DataChannels.

+

+ ---

+

+ ### Modern Web Game Engine Landscape (2026)

+

+ | Engine / Stack | Dimension | Physics Backend | Key Strengths |

+ | :--- | :--- | :--- | :--- |

+ | **PlayCanvas Engine** | 3D | Ammo.js / Rapier WASM | Complete production game engine, tiny runtime (~200KB), mobile-first 60fps, built-in sound & input. |

+ | **Babylon.js + Havok** | 3D | Havok Physics WASM | AAA physics simulation, native sub-stepping, character controllers, convex decomposition. |

+ | **Three.js / R3F + Rapier / Jolt** | 3D | Rapier 3D (Rust) / Jolt (C++) | Modular, massive ecosystem, best for React/Vue indie games and procedural worlds. |

+ | **LittleJS** | 2D | Built-in lightweight physics | Micro-size (<50KB), hyper-fast hybrid WebGL/2D canvas, ideal for 2D platformers & game jams. |

+ | **PixiJS v8** | 2D | Matter.js / Rapier 2D | Next-gen WebGPU 2D rendering pipeline, thousands of animated sprites at 144 FPS. |

+ | **Needle Engine** | 3D | PhysX / Rapier | Export directly from Unity/Blender into Three.js with full component lifecycles. |

+

+ ---

+

+ ### 1. The Deterministic Game Loop: Fixed-Timestep Accumulator

+

+ > **CRITICAL RULE**: Never tie physics updates directly to `requestAnimationFrame` delta time. A variable delta causes non-deterministic physics, tunneling, and jitter on 120Hz/144Hz monitors.

+ - **Solution:** Accumulate frame time and step physics at a fixed tick rate (e.g., 60Hz). Calculate `alpha` to interpolate render transforms smoothly between the previous and current physics state.

+

+ ```typescript

+ export class GameLoop {

+ private accumulator = 0;

+ private lastTime = performance.now();

+ private readonly FIXED_TIMESTEP = 1 / 60; // 60Hz fixed physics step

+ private readonly MAX_FRAME_TIME = 0.25; // Clamp to prevent "spiral of death" during lag

+

+ constructor(

+ private updatePhysics: (dt: number) => void,

+ private render: (alpha: number) => void

+ ) {}

+

+ public start() {

+ this.lastTime = performance.now();

+ requestAnimationFrame(this.tick);

+ }

+

+ private tick = (currentTime: number) => {

+ let frameTime = (currentTime - this.lastTime) / 1000;

+ this.lastTime = currentTime;

+

+ // Clamp huge lags (e.g., user changed browser tab)

+ if (frameTime > this.MAX_FRAME_TIME) {

+ frameTime = this.MAX_FRAME_TIME;

+ }

+

+ this.accumulator += frameTime;

+

+ // Execute fixed updates

+ while (this.accumulator >= this.FIXED_TIMESTEP) {

+ this.updatePhysics(this.FIXED_TIMESTEP);

+ this.accumulator -= this.FIXED_TIMESTEP;

+ }

+

+ // Alpha is the leftover fractional progress towards the next physics step [0.0, 1.0)

+ const alpha = this.accumulator / this.FIXED_TIMESTEP;

+ this.render(alpha);

+

+ requestAnimationFrame(this.tick);

+ };

+ }

+ ```

+

+ ---

+

+ ### 2. High-Performance WASM Physics: Rapier & Jolt

+

+ #### Option A: Rapier 3D (Rust + WASM + SIMD)

+ Lightweight, determinism-friendly, native support in React Three Fiber (`@react-three/rapier`):

+ ```tsx

+ import { Physics, RigidBody, CuboidCollider } from '@react-three/rapier';

+

+ export function GamePhysicsWorld({ children }: { children: React.ReactNode }) {

+ return (

+ <Physics gravity={[0, -9.81, 0]} timeStep="vary">

+ {/* Player Dynamic Capsule */}

+ <RigidBody position={[0, 2, 0]} enabledRotations={[false, false, false]} colliders="ball">

+ <mesh>

+ <sphereGeometry args={[0.5]} />

+ <meshStandardMaterial color="dodgerblue" />

+ </mesh>

+ </RigidBody>

+

+ {/* Static Floor */}

+ <RigidBody type="fixed">

+ <CuboidCollider args={[20, 0.5, 20]} position={[0, -0.5, 0]} />

+ </RigidBody>

+

+ {children}

+ </Physics>

+ );

+ }

+ ```

+

+ #### Option B: Jolt Physics WASM (`jolt-physics`)

+ The AAA open-source physics engine used in titles like *Horizon Forbidden West*. Best for massive simulations (>2,000 rigid bodies) and advanced ragdolls in vanilla Three.js or Babylon.js.

+

+ > **Physics Best Practice**: ALWAYS use primitive colliders (`Sphere`, `Box`, `Capsule`) for moving dynamic bodies. NEVER use `Trimesh` (triangle mesh) for dynamic objects; `Trimesh` should only be used for static world terrain.

+

+ ---

+

+ ### 3. Zero-GC Memory Management & Object Pooling

+

+ > **CRITICAL RULE**: In games, memory allocation (`new Vector3()`, `new Bullet()`) inside the tick loop triggers V8 Garbage Collection (GC) pauses every few seconds, dropping frames from 60 to 45 FPS.

+ - **Scratch Object Reuse:** Create scratch variables once at module level.

+ ```typescript

+ // BAD: Allocates a new vector every frame

+ const dir = new THREE.Vector3().subVectors(target, source).normalize();

+

+ // GOOD: Reuses module-level scratch vector

+ const _scratchVec = new THREE.Vector3();

+ _scratchVec.subVectors(target, source).normalize();

+ ```

+ - **Generic Object Pool:**

+ ```typescript

+ export class ObjectPool<T> {

+ private pool: T[] = [];

+ constructor(

+ private factory: () => T,

+ private reset: (item: T) => void,

+ initialSize = 50

+ ) {

+ for (let i = 0; i < initialSize; i++) {

+ this.pool.push(this.factory());

+ }

+ }

+

+ public acquire(): T {

+ return this.pool.length > 0 ? this.pool.pop()! : this.factory();

+ }

+

+ public release(item: T): void {

+ this.reset(item);

+ this.pool.push(item);

+ }

+ }

+ ```

+

+ ---

+

+ ### 4. Input Management: Pointer Lock & Gamepad API

+

+ ```typescript

+ // 1. First-Person / Third-Person Mouse Look

+ export function setupPointerLock(canvas: HTMLCanvasElement, onLook: (dx: number, dy: number) => void) {

+ canvas.addEventListener('click', () => {

+ if (document.pointerLockElement !== canvas) {

+ canvas.requestPointerLock();

+ }

+ });

+

+ window.addEventListener('mousemove', (e) => {

+ if (document.pointerLockElement === canvas) {

+ onLook(e.movementX, e.movementY);

+ }

+ });

+ }

+

+ // 2. Gamepad API with Deadzone Normalization

+ export function pollGamepad(deadzone = 0.15) {

+ const gamepads = navigator.getGamepads ? navigator.getGamepads() : [];

+ const gp = gamepads[0];

+ if (!gp) return null;

+

+ const filterAxis = (val: number) => (Math.abs(val) > deadzone ? val : 0);

+

+ return {

+ moveX: filterAxis(gp.axes[0]),

+ moveY: filterAxis(gp.axes[1]),

+ lookX: filterAxis(gp.axes[2]),

+ lookY: filterAxis(gp.axes[3]),

+ buttonJump: gp.buttons[0]?.pressed ?? false,

+ buttonAction: gp.buttons[1]?.pressed ?? false

+ };

+ }

+ ```

+

+ ---

+

+ ### 5. 3D Spatial Positional Audio (Web Audio API)

+

+ ```typescript

+ export class SpatialAudioManager {

+ private ctx = new AudioContext();

+ private listener = this.ctx.listener;

+

+ public updateListenerPosition(pos: { x: number; y: number; z: number }, forward: { x: number; y: number; z: number }, up = { x: 0, y: 1, z: 0 }) {

+ if (this.listener.positionX) {

+ this.listener.positionX.value = pos.x;

+ this.listener.positionY.value = pos.y;

+ this.listener.positionZ.value = pos.z;

+ this.listener.forwardX.value = forward.x;

+ this.listener.forwardY.value = forward.y;

+ this.listener.forwardZ.value = forward.z;

+ this.listener.upX.value = up.x;

+ this.listener.upY.value = up.y;

+ this.listener.upZ.value = up.z;

+ }

+ }

+

+ public createSpatialSound(audioBuffer: AudioBuffer, pos: { x: number; y: number; z: number }) {

+ const source = this.ctx.createBufferSource();

+ source.buffer = audioBuffer;

+

+ const panner = this.ctx.createPanner();

+ panner.panningModel = 'HRTF'; // High-fidelity Head-Related Transfer Function

+ panner.distanceModel = 'inverse';

+ panner.refDistance = 1;

+ panner.maxDistance = 1000;

+ panner.rolloffFactor = 1;

+ panner.positionX.value = pos.x;

+ panner.positionY.value = pos.y;

+ panner.positionZ.value = pos.z;

+

+ source.connect(panner);

+ panner.connect(this.ctx.destination);

+ source.start();

+ }

+ }

+ ```

+

+ ---

+

+ ### 6. Modern Multiplayer Networking: WebTransport vs WebRTC

+

+ For fast-paced real-time action games:

+ - **Avoid WebSockets for player movement:** WebSockets use TCP. When a packet is lost, TCP pauses delivery of all subsequent packets (Head-of-Line blocking), causing massive lag spikes.

+ - **Use WebTransport (QUIC) or WebRTC DataChannels:**

+ - Unreliable, unordered datagrams for continuous movement updates (`x, y, z, vx, vy, vz`).

+ - Reliable streams for critical state transitions (damage, weapon fire, chat, player joined).

+ - **Client-Side Prediction & Reconciliation:**

+ 1. Client immediately simulates movement locally upon keypress and stores input history with tick numbers.

+ 2. Server processes input at fixed 20Hz-60Hz and replies with authoritative position.

+ 3. Client reconciles authoritative state and replays unacknowledged inputs to avoid input lag.

+

+ ---

+

+ <a name="bahasa-indonesia"></a>

+ ## Bahasa Indonesia

+

+ ### Integrasi Orkestrasi

+ Terhubung dan mengorkestrasi skill domain yang relevan:

+ - `web-3d-graphics-expert` — Lapisan visual rendering (WebGPU, Three.js, Babylon.js, PlayCanvas).

+ - `glsl-shader-expert` — Shader kustom untuk efek visual, kilatan luka, dan partikel game.

+ - `webxr-ar-vr-expert` — Kontrol spasial dan pelacakan kontroler VR/AR.

+ - `realtime-collaboration-expert` — Sinkronisasi state multiplayer real-time (WebRTC / WebTransport).

+ - `performance-web-vitals` — Manajemen frame budget (16.6ms untuk 60fps) dan pencegahan Garbage Collection stall.

+ - `wasm-edge-computing-expert` — Kompilasi modul simulasi C++/Rust kustom ke WebAssembly.

+

+ ### Deskripsi

+ Panduan produksi untuk merekayasa game web komersial 2D dan 3D dengan target stabil di 60 hingga 144+ FPS. Menerapkan arsitektur game modern: **Fixed-Timestep Accumulator dengan interpolasi render**, **Physics Engine berbasis WebAssembly** (Rapier 3D, Jolt Physics, Havok), **Zero-GC Object Pooling** untuk mencegah lonjakan Garbage Collector JavaScript, arsitektur **ECS (Entity Component System)**, **Audio Spasial 3D Web Audio API (HRTF)**, dan **Netcode WebTransport / WebRTC berlatensi rendah**.

+

+ ### Kondisi Pemicu

+ Aktifkan skill ini ketika pengguna:

+ - Membangun game web atau simulasi fisika (2D maupun 3D).

+ - Mengintegrasikan mesin fisika `@dimforge/rapier3d`, `jolt-physics`, `@babylonjs/havok`, atau `@react-three/rapier`.

+ - Memperbaiki ketidakteraturan fisika atau *stuttering* pada monitor 120Hz/144Hz.

+ - Mengimplementasikan ECS (*Entity Component System*) dengan `bitECS` atau `miniplex`.

+ - Mendesain *Object Pool* tanpa alokasi memori berulang untuk proyektil, peluru, atau partikel.

+ - Mengintegrasikan kontrol Gamepad API, Pointer Lock (mouse look), atau kontrol sentuh virtual mobile.

+ - Menambahkan audio spasial 3D menggunakan Web Audio API.

+ - Merancang arsitektur multiplayer real-time menggunakan WebTransport atau WebRTC.

+

+ ---

+

+ ### Prinsip Inti Rekayasa Game Web

+

+ 1. **Fixed-Timestep Accumulator Loop (Wajib)**:

+ - Jangan pernah menjalankan komputasi fisika langsung pada delta waktu `requestAnimationFrame`. Perubahan refresh rate monitor (60Hz, 120Hz, 144Hz) akan merusak konsistensi fisika.

+ - Akumulasikan waktu frame dan jalankan langkah fisika pada tick tetap (misal 60Hz), lalu hitung `alpha` untuk menginterpolasikan posisi render grafis secara mulus.

+

+ 2. **Mesin Fisika WASM (Rapier / Jolt / Havok)**:

+ - Gunakan **Rapier 3D** (Rust WASM + SIMD) untuk Three.js/R3F.

+ - Gunakan **Jolt Physics** untuk simulasi skala besar ribuan objek dinamis.

+ - Gunakan **Havok** jika membangun di atas Babylon.js.

+ - Hindari penggunaan *mesh collider* (Trimesh) pada objek bergerak; selalu gunakan primitif (Bola, Kotak, Kapsul).

+

+ 3. **Manajemen Memori Zero-GC**:

+ - Pembuatan objek baru (`new Vector3()`, objek peluru) setiap frame memicu *Garbage Collection* di browser yang menyebabkan frame drop berkala.

+ - Daur ulang objek menggunakan pola *Object Pooling* dan gunakan kembali variabel scratch statis.

+

+ 4. **Kontrol Responsif**:

+ - Manfaatkan *Pointer Lock API* untuk kontrol kamera first-person / third-person dengan `movementX` dan `movementY`.

+ - Gunakan *Gamepad API* dengan deadzone filter untuk mendukung controller konsol (PlayStation, Xbox).

+

+ 5. **Audio Spasial 3D (HRTF)**:

+ - Hubungkan *AudioListener* ke transformasi kamera, dan hubungkan suara ke *PannerNode* dengan model panning `'HRTF'` untuk audio 3 dimensi realistis berdasarkan jarak dan arah.

+

+ 6. **Netcode Modern (WebTransport)**:

+ - Jangan gunakan WebSocket (TCP) untuk posisi pergerakan pemain karena rentan terhadap *Head-of-Line blocking*.