Build a better game with the right AI prompts.

# Task: Optimize the existing Three.js game's audio and video pipeline

You are a senior Three.js, Web Audio, browser media, and web performance engineer.

## Inspect before changing anything

Identify:

- Three.js version
- WebGL or WebGPU renderer
- AudioContext lifecycle and unlock behavior
- THREE.Audio and THREE.PositionalAudio usage
- HTMLAudioElement and MediaElementAudioSourceNode usage
- AudioLoader usage
- Video element and video-texture usage
- Asset loader and LoadingManager behavior
- CDN or static-asset delivery
- Service worker behavior, if present
- Browser caching and asset hashing
- Current audio and video formats

Do not replace the existing system unless necessary.

## Audio classification and delivery

Separate audio into UI, short gameplay SFX, repeated gameplay SFX, positional 3D SFX, dialogue, music, ambience, and cinematic audio.

- Use mono for positional effects when stereo information is unnecessary.
- Prefer Opus for web-delivered long-form audio when browser compatibility permits it.
- Use AAC as a targeted fallback where it improves compatibility.
- Keep extremely short, frequently triggered effects optimized for low latency.
- Do not download the entire audio library during initial page load.

Use this loading policy where appropriate:

- Critical preload: UI sounds, first-gameplay sounds, and sounds required immediately after loading.
- Lazy load: level-specific effects, NPC dialogue, uncommon effects, boss effects, and later-game audio.
- Stream: long music, long dialogue, long ambience, and cinematic audio.

Cache previously loaded audio, load asynchronously, and do not block the render loop.

## Audio performance

Implement or improve:

- Audio object pooling
- Maximum simultaneous voices
- Sound priority
- Distance-based culling
- Audio virtualization where appropriate
- Duplicate-event suppression
- Environmental sound aggregation
- Cleanup of unused AudioBuffers and media elements
- Proper AudioContext suspend, resume, interruption, and teardown behavior

When many sounds occur simultaneously, prioritize player-critical sounds, nearby combat, important enemy sounds, gameplay feedback, environmental sounds, then distant background sounds. Do not use a simple global limit that ignores importance.

## Video

Inspect every video and record its resolution, frame rate, bitrate, duration, codec, container, audio codec, loading behavior, and purpose.

- Avoid downloading large videos during initial startup.
- Use asynchronous loading and hardware-accelerated browser playback where possible.
- Provide a fallback only when required.
- Respect autoplay restrictions.
- Handle mobile Safari, iOS playback restrictions, Android browser behavior, tab suspension, visibility changes, network interruption, fullscreen transitions, and orientation changes.

## Network and tests

Integrate with the current CDN. Use immutable content-hashed filenames and long-lived browser caching where supported. Avoid duplicate requests and do not download fallback formats unless needed.

Test supported targets among desktop Chrome, Safari, Firefox, iOS Safari, and Android Chrome. Report browser-specific limitations.

Finish with a table containing:

Asset category | Format | Channels | Compression | Loading strategy | Cache strategy | Fallback

Include measured before-and-after startup download, media memory, loading latency, simultaneous voices, and frame-time impact.

## Three.js WebGPU and WebGL renderer architecture

If this project uses Three.js, inspect the installed Three.js version and its official documentation before choosing renderer imports or APIs. Do not copy an older WebGPU setup from memory.

- For a new compatible renderer layer, evaluate the current three/webgpu entry point and WebGPURenderer. The current renderer is designed to select a WebGPU backend when available and fall back to a WebGL 2 backend. Do not add a separate hand-written WebGPU-detection branch and a second renderer unless an audited feature incompatibility, target-browser requirement, or current-version limitation makes that necessary.
- Initialize the renderer asynchronously where deterministic initialization, feature inspection, loading flow, or on-demand rendering requires it. Use the renderer's supported animation-loop lifecycle and prevent gameplay simulation, asset upload, resize, input, or UI startup from racing renderer initialization.
- If the project deliberately uses WebGLRenderer, document why. If it uses WebGPURenderer with a forced WebGL backend, document the compatibility reason and test that path separately.
- Build a renderer capability and compatibility matrix for standard materials, shadows, render targets, post-processing, video textures, animation/skinning, particles, picking, WebXR if applicable, custom shaders, device/context loss, screenshots, and every third-party Three.js extension used by the game.
- Use Three.js Shading Language and node materials for new custom shader work that must run across the WebGPU and WebGL backends. Do not silently port raw GLSL, ShaderMaterial, RawShaderMaterial, or onBeforeCompile customizations without proving an equivalent supported path and visual parity.
- Keep renderer selection behind one documented interface so scenes and gameplay systems do not branch throughout the codebase. Record the active backend in development diagnostics and privacy-safe performance telemetry.
- Handle initialization failure, WebGPU device loss, WebGL context loss, unsupported WebGL 2, reduced features, and recovery with a player-readable fallback rather than a blank canvas or raw exception.

Test the exact pinned Three.js version on every supported browser/device. Compare WebGPU and WebGL 2 with the same build, scene, camera, resolution, device-pixel ratio, quality tier, warm-up, and gameplay route before declaring either backend faster or production-ready.

## Three.js geometry, draw-call, and rendering performance

If the project uses Three.js, do not treat a triangle count or WebGPU selection as a universal performance guarantee. Establish per-device and per-quality-tier budgets from measured CPU frame time, GPU frame time, frame pacing, draw calls, visible triangles, shader and material cost, overdraw/fill rate, lights and shadows, post-processing, texture bandwidth, uploads, animation/skinning, physics, memory, loading, and JavaScript allocation behavior.

Use these only as initial planning hypotheses before profiling, never as pass/fail claims:

- Visible scene geometry: roughly 100k–500k triangles for constrained mobile, 500k–2 million for mid-range mobile, 2–5 million for capable mobile, 2–10 million for older desktop hardware, and 10–50 million for capable gaming desktops when the rest of the frame is controlled.
- Asset envelopes: characters around 5k–50k triangles, props around 100–5k, buildings around 1k–20k, terrain around 100k–500k visible, and approximately 1–5 million visible triangles for a broadly compatible complete scene.
- Draw calls: below 500 is a strong initial target, 500–1,000 requires observation, 1,000–2,000 has increasing CPU risk, and more than 2,000 requires explicit evidence on the target hardware and renderer backend.

Replace those hypotheses with project-specific measured budgets as soon as representative content exists. A lower triangle scene can still be slower because of expensive pixels, shaders, state changes, transparency, shadows, post-processing, animation, physics, or JavaScript work.

Prefer the smallest measured combination of InstancedMesh, BatchedMesh, merged static geometry, shared geometry/materials, texture atlases or arrays where appropriate, frustum culling, distance and screen-size LOD, spatial partitioning, bounded object pools, selective updates, compressed KTX2/Basis textures, compressed glTF meshes where justified, asynchronous loading, streaming, and explicit resource disposal. Do not merge objects that need independent culling, animation, selection, collision, or material behavior without measuring the trade-off.

Record renderer.info counters and browser/GPU profiler captures for representative quiet, dense, high-motion, transparent, shadow-heavy, particle-heavy, UI-overlay, and post-processing states. Profile WebGPU and WebGL 2 separately; WebGPU can reduce some CPU submission overhead and enable compute or modern rendering features, but it does not repair excessive allocations, physics, pathfinding, poor scene organization, expensive fragment shading, oversized shadows, or unnecessary post-processing.

For every optimization, capture the same build and gameplay route before and after, verify visual and gameplay parity, and report the actual bottleneck moved—not only the triangle count.

## Three.js multi-device rendering quality and fallback paths

If the project uses Three.js, design and implement capability-based rendering quality paths so the same game remains playable and visually coherent across constrained phones, capable phones and tablets, integrated-GPU laptops, older desktops, and high-end desktops.

Define documented Low, Balanced, High, and Ultra profiles when the supported device range justifies them. Each profile must specify measured budgets and explicit settings for:

- Renderer backend and supported feature path, render scale, device-pixel-ratio cap, target frame rate, antialiasing, output-buffer precision, and post-processing.
- Visible triangle and draw-call budgets, LOD distances or screen-size thresholds, object and vegetation density, terrain detail, decals, particles, transparent effects, reflection quality, and draw distance.
- Texture resolution, KTX2/Basis variants, anisotropy, material and shader complexity, normal/detail maps, environment maps, lighting count, shadow count, shadow-map resolution, cascades, contact shadows, and baked versus dynamic lighting.
- Character and object animation quality: rig and bone budgets, skinned-mesh count, animation sampling/update rate, interpolation, blend layers, facial animation, lip sync, IK, secondary motion, cloth, hair, ragdolls, physics reactions, crowd animation, and update-distance throttling.
- Asset residency, streaming, preload scope, memory ceilings, cache limits, geometry and texture disposal, worker use, and recovery from memory or graphics-device pressure.

Build the quality system from centralized data rather than scattered conditionals. Use measured capabilities and runtime performance—not only user-agent strings—to select a safe default. Let players override the choice when practical, persist the setting, explain costly options simply, and support safe automatic degradation with hysteresis so quality does not rapidly oscillate. Recover upward only after sustained headroom and never during a critical gameplay moment without an approved transition policy.

Create real asset, material, animation, and effect fallback paths instead of only disabling everything globally. Preserve silhouettes, art direction, gameplay readability, telegraphs, interaction feedback, hit timing, collision, input response, UI meaning, localization, accessibility, network authority, saves, and deterministic gameplay across every profile. Ultra may add presentation detail, but it must not reveal gameplay information or mechanics unavailable on Low.

Test cold start, representative gameplay, dense/high-motion scenes, menus, particles, transparency, lighting and shadows, animation-heavy scenes, background/resume, resize, orientation change, device/context loss, and live profile switching on representative devices. Capture comparable screenshots and performance traces for every profile and backend. Report unsupported combinations and fall back to the nearest verified path with a player-readable message rather than a blank canvas, crash, or raw error.

## Player-readable output requirement

Everything shown to a player must be written and presented for a human player, not for a developer or debugger. This includes menus, HUD labels, buttons, prompts, tutorials, objectives, dialogue, tooltips, loading and save states, empty states, confirmations, warnings, errors, rewards, notifications, accessibility messages, and connection or recovery states.

Use concise plain language, the game's established terminology and tone, recognizable icons with text where meaning could be ambiguous, and a clear next action. A player-facing error should explain what happened in useful terms, whether progress is safe, and what the player can do next.

Never expose raw exceptions, stack traces, JSON, database IDs, internal event names, enum or variable names, file paths, debug coordinates, HTTP status codes without explanation, server implementation details, developer TODOs, placeholder text, or raw telemetry on a player-facing surface. Send technical details to development-only logs, diagnostics, telemetry, or an authenticated support view. A short support reference code may be shown to the player only when it helps support locate the private diagnostic record.

Verify representative success, failure, offline, loading, empty, permission, validation, timeout, save, reconnect, and recovery states from the player's perspective. Developer documentation and final engineering reports may remain technical; this requirement applies to anything the game presents to players.

## Required game documentation

Documentation is part of the definition of done for this task.

Before finishing:

1. Read the existing README, docs directory, architecture notes, decision records, and AI instructions that apply to this system.
2. Update the existing relevant documentation instead of creating a competing document or a second source of truth.
3. If no relevant document exists, create a clearly named Markdown document in the game's established documentation directory. Use docs/ when the project has no existing convention.
4. Document the current system, the decisions made, ownership and lifecycle rules, configuration, files or assets changed, commands and tests run, known limitations, and how another developer should extend or troubleshoot the work.
5. Update AI_INSTRUCTIONS.md or the project's equivalent when this task changes architectural boundaries, required workflows, naming rules, or validation commands.
6. Keep documentation accurate to the implementation. Do not claim support, measurements, or test coverage that was not verified.
7. In the final report, list every documentation file created or updated.