How mshumer/claude-of-duty works
Purpose and runtime
Claude of Duty is a browser-first first-person shooter built with Three.js r180 and WebGL2. It procedurally generates all gameplay content—geometry, materials, animation, and audio—at load time; three is the sole runtime dependency. Vite serves the app. The main entry point is src/main.js, with the engine lifecycle centered in src/core/engine.js.
Boot, orchestration, and shared state
src/main.js composes the major subsystems into a running game. Core services provide configuration, deterministic random generation, input, shared object registration, and shader warm-up:
• src/core/engine.js
• src/core/input.js
• src/core/registry.js
• src/core/prewarm.js
Prewarming is architecturally material: it compiles required WebGL programs before gameplay to avoid runtime shader-compilation hitches while preserving deterministic visual output.
World construction and collision boundary
The world subsystem procedurally builds the market-street level from layouts, a modular building kit, interiors, ground, props, and dressing. It produces scene geometry and physical surfaces consumed by rendering, player movement, projectiles, and AI:
• src/world/builder.js
• src/world/layout.js
• src/world/buildings.js
• src/world/index.js
Physics owns collision representation and simulation rather than relying on a physics library. Its BVH supports world queries; character movement, rigid bodies, ragdolls, and penetration are separate consumers of that spatial foundation:
• src/physics/bvh.js
• src/physics/character.js
• src/physics/penetration.js
• src/physics/index.js
Player, weapons, and combat flow
Input drives the player movement state machine and camera. The player controls sprinting, crouching, jumping, slide/mantle/lean, health, and camera feel:
• src/player/index.js
• src/player/movement.js
• src/player/camera.js
Weapons construct procedural first-person models and viewmodels, manage firing/reload state, and emit ballistic results. Ballistics then queries physics, applies travel/drop and penetration, and fans combat outcomes to targets, effects, audio, and UI:
• src/weapons/index.js
• src/weapons/ballistics.js
• src/weapons/viewmodel.js
• src/weapons/defs.js
AI actors
AI creates procedural skinned soldiers and squads, governs navigation, perception, targeting, animation, and death/ragdoll transitions. It is a gameplay consumer of world navigation and physics, and a producer of combat actions:
• src/ai/index.js
• src/ai/agent.js
• src/ai/nav.js
• src/ai/soldier.js
Visual content and render pipeline
Materials are generated on the GPU from procedural masks/noise and GLSL surface definitions, avoiding external texture assets:
• src/materials/generator.js
• src/materials/library.js
• src/materials/shader.js
Rendering owns the HDR frame pipeline: shadows, MRT prepass, ambient occlusion, reflections, temporal accumulation, motion blur, bloom, exposure, grading, and final composite:
• src/render/index.js
• src/render/prepass.js
• src/render/csm.js
• src/render/composite.js
Sky/environment generation provides atmospheric lighting, PMREM environment data, clouds, and volumetric effects to the world/render boundary:
• src/sky/index.js
• src/sky/atmosphere.js
• src/sky/volumetrics.js
Combat and environmental visuals are event-driven overlays on the scene—particles, impacts, decals, tracers, muzzle flashes, shells, and explosions:
• src/fx/index.js
• src/fx/particles.js
• src/fx/impacts.js
• src/fx/explosions.js
Audio, HUD, and verification infrastructure
Audio uses Web Audio synthesis, mixing, convolution/reverb, HRTF spatialization, and occlusion; weapon and world events feed it rather than file-backed assets:
• src/audio/index.js
• src/audio/mixer.js
• src/audio/spatial.js
• src/audio/weapons.js
UI is DOM/CSS HUD state driven by player and combat events:
• src/ui/index.js
• src/ui/health.js
• src/ui/hitmarkers.js
• src/ui/minimap.js
Headless Chromium tooling captures scripted frames, isolates deterministic baselines, pixel-diffs output, profiles real gameplay, and runs smoke tests:
• tools/baseline.mjs
• tools/imagediff.mjs
• tools/profile.mjs
• tools/playtest.mjs
Main entry points: ballistics.js Ballistics · index.js HDR Renderer · builder.js World Builder · main.js Application Boot
Components 22
Game Runtime
Browser game boot and simulation.
- Application Boot · Composes subsystems into the running game.
src/main.js - Engine Lifecycle · Owns the frame lifecycle and subsystem updates.
src/core/engine.js - Input Service
src/core/input.js - Object Registry · Registers shared game objects.
src/core/registry.js - Shader Prewarm · Compiles required WebGL programs before gameplay.
src/core/prewarm.js - Physics Simulation · Owns collision simulation, character bodies, ragdolls, and penetration.
src/physics/index.js - Collision BVH · World-query foundation for movement and ballistic hits.
src/physics/bvh.js - Player Controller · Controls movement state, health, and camera feel.
src/player/index.js - Weapons · Manages procedural weapons, viewmodels, firing, and reloads.
src/weapons/index.js - Ballistics · Resolves travel, drop, collision, and penetration outcomes.
src/weapons/ballistics.js - AI Actors · Runs squads, navigation, perception, animation, and ragdoll transitions.
src/ai/index.js
Procedural Content
Generated world, materials, and environment.
- World Builder · Builds the market-street scene, layouts, buildings, and physical surfaces.
src/world/builder.js - Material Generator · Generates GPU masks, noise, and GLSL surface materials.
src/materials/generator.js - Sky & Environment · Provides atmosphere, PMREM lighting, clouds, and volumetrics.
src/sky/index.js
Presentation
GPU rendering and event-driven feedback.
- HDR Renderer · Runs shadows, MRT prepass, temporal effects, post-processing, and composite.
src/render/index.js - Combat FX · Renders particles, impacts, decals, tracers, and explosions.
src/fx/index.js - Spatial Audio · Synthesizes, mixes, spatializes, and occludes event-driven sound.
src/audio/index.js - HUD · Displays player and combat state.
src/ui/index.js
Verification
Headless Chromium validation tooling.
- Deterministic Baselines · Captures scripted headless Chromium frames.
tools/baseline.mjs - Pixel Diff · Compares rendered output with deterministic baselines.
tools/imagediff.mjs - Gameplay Profiler · Profiles real gameplay in Chromium.
tools/profile.mjs - Smoke Playtest · Runs scripted gameplay smoke tests.
tools/playtest.mjs
Connections 28
- Application Boot → Engine Lifecycle: boots
- Application Boot → Input Service: initializes
- Application Boot → Object Registry: initializes
- Engine Lifecycle → Shader Prewarm: warms up
- Engine Lifecycle → World Builder: builds
- World Builder → Material Generator: uses
- World Builder → Physics Simulation: provides surfaces
- Physics Simulation → Collision BVH: builds queries
- Input Service → Player Controller: drives
- Player Controller → Physics Simulation: character movement
- Player Controller → Weapons: controls
- Weapons → Ballistics: fires
- Ballistics → Physics Simulation: queries hits
- AI Actors → World Builder: uses navigation
- AI Actors → Physics Simulation: uses collision
- AI Actors → Ballistics: combat actions
- Ballistics → Combat FX: impact events
- Ballistics → Spatial Audio: combat events
- Ballistics → HUD: hit events
- World Builder → HDR Renderer: scene geometry
- Material Generator → HDR Renderer: surface materials
- Sky & Environment → HDR Renderer: lighting and volumetrics
- Player Controller → HDR Renderer: camera
- Combat FX → HDR Renderer: scene overlays
- HDR Renderer → Shader Prewarm: programs to compile
- Deterministic Baselines → Pixel Diff: baseline frames
- Gameplay Profiler → Application Boot: profiles runtime
- Smoke Playtest → Application Boot: drives smoke tests