Threejs Debug Profiler

by majidmanzarpour8286774b22a2No license2.4K starsListed Oct 8, 2026Updated Oct 8, 2026Repository updated 10 days ago

Debug and profile Three.js browser games: blank canvases, render and runtime bugs, asset and audio loading, animation, resize, mobile input, plus performance profiling of draw calls, triangles, textures, memory, shader and post-processing cost, and bundle size.

Instructions onlySoftware Development
AI-generated overview

Debugs and profiles Three.js browser games, covering blank canvases, render bugs, asset loading, input, and performance.

What it does
Provides an ordered triage workflow for diagnosing Three.js browser game failures such as blank canvases, render and runtime bugs, asset and audio loading, animation loops, resize, and mobile input. It also guides performance profiling of draw calls, triangles, textures, memory, shader and post-processing cost, and bundle size. Outputs include root causes, files changed, baseline and post-change metrics, commands, screenshots, and residual risks.
When to use it
Use when a Three.js browser game shows a blank canvas, rendering or runtime errors, asset or audio loading problems, animation or input issues, or when user-facing performance needs measuring and optimizing.
Requirements
Instructions only; no scripts. Requires access to the game project, its console, page, and network errors, and a production preview for profiling.

Three.js Debug Profiler

Find root causes and optimize measured bottlenecks without breaking playability.

Follow the changed behavior's scope. Reuse the lead's existing reproduction and evidence; verify the affected path after a fix. A passing focused check only needs broader testing when shared behavior changed or an unresolved risk warrants it. Return measurements and defects to the lead for the consolidated verification pass.

Reference

references/debug-playbook.md — ordered triage for blank canvas, asset and audio loading, loop/animation/physics, input and mobile, the profiling sequence, and the __THREE_GAME_DIAGNOSTICS__ shape. Read it when debugging or profiling anything non-obvious.

Debug

Reproduce first, with the same command and URL the user had, and read the console, page, and network errors. Find the module that owns the failure (renderer, loop, camera, scene, assets, audio, input, physics, UI, or base path), fix the root cause there, and retest the exact broken path. The playbook's triage order covers the common causes, such as more than one active loop, a canvas whose display size doesn't match its drawing buffer, and wrong delta units.

Profile

Profile the production preview when user-facing performance matters. Baseline one fixed scenario, classify the bottleneck (CPU, GPU draw, fragment, vertex, memory, or network), change one thing, and re-measure the same scenario, confirming visuals and playability held. The playbook lists the metrics to baseline and the optimizations in order of payoff.

Report

Lead with the root cause or the measured bottleneck. Then files changed, baseline and post metrics, commands, screenshots, the broken path retested, and residual risks.

Source and attribution

Source:majidmanzarpour/threejs-game-skillsinskills/threejs-debug-profilerat commit8286774

License: No license

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

Threejs Debug Profiler Agent Skill | SourceWeft