← LeaderboardThe Skill Leaderboard

threejs-debug-profiler

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.

Description awaits a fresh source check.

Published by majidmanzarpour ↗majidmanzarpour/threejs-game-skills

Try your first task

Find and fix a blank game canvas

Start a fresh conversation.

Use threejs-debug-profiler to diagnose the blank canvas in this Three.js game. Reproduce it using the startup command and URL I provide, inspect console, page, and network errors, identify the owning module, and fix the root cause. Retest the same broken path and report the cause, files changed, verification evidence, and remaining risks.

Required inputs

  • The existing Three.js game project.
  • The startup command and URL that reproduce the blank canvas.
  • Reproduction steps and affected browser or viewport.

Previously published starter task based on a pinned source version; check the source and required inputs before running. Task evidence ↗

SKILL.md

name: threejs-debug-profilerdescription: "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."

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.