Can AI Build a AAA‑Level Browser FPS with Three.js? Inside Claude‑of‑Duty

Project Overview

Claude‑of‑Duty is a browser‑run first‑person shooter built with Three.js r180 and WebGL2. The codebase comprises roughly 70 000 lines of code distributed across 11 subsystems, and all textures, meshes, animations, and audio are generated procedurally at load time. The only runtime dependency is Three.js.

Core Capabilities

HDR Rendering Pipeline : cascade shadow maps (CSM) stored in a sampler2DArray, PCSS contact‑hardening, MRT depth/normal/velocity pre‑passes, GTAO, variance‑clipped TAA, tile‑based motion blur, Karis pyramid bloom, GPU‑based EV100 exposure, 33³ LUT colour grading and AgX compositing.

GPU Texture Workshop : 19 procedural surface types (concrete, brick, plaster, asphalt, sand, rusted/painted/brushed metal, wood, fabric, glass, etc.) generated with periodic noise for seamless tiling, Sobel‑derived normal maps, parallax occlusion, tri‑plane projection and curvature‑driven edge wear.

Custom Physics Engine : binned‑SAH BVH (29 k triangles → 14 k nodes, 22 ms build, 0.25 µs ray test), sweep‑capsule character controller with a five‑plane crease stack, CCD for continuous collision, PBD ragdoll, multi‑layer bullet penetration.

Procedural Weapon System : procedural weapon geometry, first‑person view‑model skeleton, ADS aiming, spring recoil, swing, reload/inspect animations, ballistic simulation with flight time and drop.

Synthetic Audio Engine : fully synthesized weapon and environmental sounds using Web Audio, HRTF spatialisation, convolution reverb and occlusion attenuation—no audio files are loaded.

AI Enemy System : skinned soldiers, navigation‑mesh pathfinding, perception, cover selection and death ragdoll animations.

Atmosphere & Sky : real‑time atmospheric scattering, day/night cycle, IBL environment map generation via PMREM, volumetric fog and light shafts.

Subsystem Breakdown

render

: WebGLRenderer, HDR pipeline, all post‑processing (CSM shadows, final compositing). materials: procedural PBR texture generation, shared material library, tri‑plane & detail mapping. sky: physical sky, sun/moon, day‑night, IBL environment map, volumetric fog, light shafts. world: modular level geometry (~120 × 120 m city block), static collision meshes. physics: broad‑phase BVH, narrow‑phase ray tests, character controller, rigid bodies, ragdoll, bullet penetration. player: movement state machine, camera feel, sprint/slide/jump/lean, health. weapons: procedural weapon meshes, view‑model skeleton, ADS, recoil, sway, reload/inspect animations, ballistic trajectory. fx: GPU particles, muzzle flash, tracer, impact decals, smoke, blood, shell ejection. ai: enemy characters, navigation, perception, cover behaviour, combat actions. ui: HUD, crosshair, hit markers, damage indicator, ammo count, kill feed, menus. audio: synthetic weapon/audio generation, spatialisation, reverb, occlusion, mixing.

Toolchain for Reproducible Quality Review

tools/capture.mjs

: GPU‑accelerated headless Chromium capture of a single named camera. tools/shotset.mjs: captures all 11 cameras in one session for quick review. tools/baseline.mjs: generates reproducible screenshots with bit‑exact isolation and fixed frame budget. tools/imagediff.mjs: pixel‑by‑pixel diff; any change exits with non‑zero status. tools/profile.mjs: real‑device pixel‑ratio frame‑time profiling and WebGL call‑count stall attribution. tools/playtest.mjs: scripted movement/shooting smoke test.

Overall Architecture

The engine follows a contract‑based plugin model. The core Engine provides the frame loop, shared context, deterministic RNG, input handling and quality‑preset configuration. Registry registers subsystems, resolves static id and deps, and topologically sorts them. EventBus enables cross‑system events. Subsystems are classes that implement a standard interface, declare static id and static deps, and are instantiated by the Registry in dependency order. The tool layer sits on top, providing screenshot, diff, profiling and smoke‑test utilities that make quality reviews fully reproducible.

Quick Start

Environment: Node.js (for Vite dev server and tooling) and a modern browser that supports WebGL2 (Chrome, Edge, Firefox, Safari).

Hardware: Dedicated GPU or a high‑performance integrated GPU (the "ultra" preset stresses the GPU).

# Clone the repository
git clone https://github.com/mshumer/Claude-of-Duty
cd Claude-of-Duty

# Install dependencies (runtime only needs Three.js; dev deps include Vite, Playwright, pngjs)
npm install

# Start the development server
npm run dev   # http://127.0.0.1:5173

# Build production version
npm run build

# Preview the build output
npm run preview   # http://127.0.0.1:4173

# Capture a single named camera (quality‑review tool)
npm run shot

Open the URL in a supported browser, click the canvas to lock the cursor, and the game starts.

Reference

Repository: https://github.com/mshumer/Claude-of-Duty