threejs-debug-profiler

Name: threejs-debug-profiler
Author: majidmanzarpour

869installs108forks

How to install threejs-debug-profiler?

majidmanzarpour/threejs-game-skills/threejs-debug-profiler

$npx -y skills add majidmanzarpour/threejs-game-skills --skill threejs-debug-profiler

Installs into the current project.

Summary

Debug and profile Three.js browser games. Combines scene debugging, render/runtime/loading/animation/resize/mobile input fixes, performance profiling, draw calls, triangles, textures, memory, shader/post-processing cost, bundle size, and mobile DPR/input issues.

Files · 1

View on GitHub

SKILL.md

1	# Three.js Debug Profiler
2
3	## Purpose
4
5	Find root causes and optimize measured bottlenecks without breaking playability.
6
7	## Debug Workflow
8
9	Load `references/debug-profile-checklists.md` as the first action when debugging render/runtime/mobile issues, asset loading, audio loading/playback, animation, resize, input, blank canvas, physics/collision bugs, or profiling performance. Track it in a reference ledger with yes/no, path, and failure reason. Do not mark the debug/profile phase complete while this reference is skipped for debug or profiling work.
10
11	Load `references/checklists/scene-debugging.md` for render/runtime bug diagnosis, `references/checklists/performance-profile.md` for profiling work, and `references/checklists/mobile-input.md` for mobile render/input issues. Load `references/prompt-templates.md` only when the user asks for reusable debug/profile prompts or a task template.
12
13	1. Reproduce locally.
14	2. Read console/page/network errors.
15	3. Check canvas display size and drawing-buffer size.
16	4. Check renderer/context/loop ownership.
17	5. Check camera, aspect, near/far, lights, materials, fog, scene contents, transforms.
18	6. Check asset paths/loaders/CORS/base path.
19	7. Check animation delta units, physics/update order, fixed timestep, collider/body ownership, input listeners, pointer/touch behavior, resize, and audio context unlock/decode errors when audio is involved.
20	8. Fix root cause in owning module.
21	9. Verify browser screenshot, nonblank canvas, console/page errors, and broken path.
22
23	## Performance Workflow
24
25	1. Reproduce in correct build mode.
26	2. Record baseline: FPS/frame time, draw calls, triangles, geometries, textures, memory, bundle.
27	3. Identify CPU/GPU/memory/network bottleneck.
28	4. Optimize one thing at a time: instancing, shared resources, culling, LOD, DPR cap, cheaper shadows/post, texture discipline.
29	5. Re-measure same scenario and verify visuals/playability.
30
31	## Final Response
32
33	Lead with root cause or bottleneck. Report the reference ledger, checklist items used, files changed, baseline/post metrics, commands, screenshots/artifacts, broken paths retested, and residual risks.

People who liked this also viewed

6 picks

Type

threejs-debug-profiler

869installs108forks

View on GitHub

How to install threejs-debug-profiler?

majidmanzarpour/threejs-game-skills/threejs-debug-profiler

$npx -y skills add majidmanzarpour/threejs-game-skills --skill threejs-debug-profiler

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Three.js Debug Profiler
2
3	## Purpose
4
5	Find root causes and optimize measured bottlenecks without breaking playability.
6
7	## Debug Workflow
8
9	Load `references/debug-profile-checklists.md` as the first action when debugging render/runtime/mobile issues, asset loading, audio loading/playback, animation, resize, input, blank canvas, physics/collision bugs, or profiling performance. Track it in a reference ledger with yes/no, path, and failure reason. Do not mark the debug/profile phase complete while this reference is skipped for debug or profiling work.
10
11	Load `references/checklists/scene-debugging.md` for render/runtime bug diagnosis, `references/checklists/performance-profile.md` for profiling work, and `references/checklists/mobile-input.md` for mobile render/input issues. Load `references/prompt-templates.md` only when the user asks for reusable debug/profile prompts or a task template.
12
13	1. Reproduce locally.
14	2. Read console/page/network errors.
15	3. Check canvas display size and drawing-buffer size.
16	4. Check renderer/context/loop ownership.
17	5. Check camera, aspect, near/far, lights, materials, fog, scene contents, transforms.
18	6. Check asset paths/loaders/CORS/base path.
19	7. Check animation delta units, physics/update order, fixed timestep, collider/body ownership, input listeners, pointer/touch behavior, resize, and audio context unlock/decode errors when audio is involved.
20	8. Fix root cause in owning module.
21	9. Verify browser screenshot, nonblank canvas, console/page errors, and broken path.
22
23	## Performance Workflow
24
25	1. Reproduce in correct build mode.
26	2. Record baseline: FPS/frame time, draw calls, triangles, geometries, textures, memory, bundle.
27	3. Identify CPU/GPU/memory/network bottleneck.
28	4. Optimize one thing at a time: instancing, shared resources, culling, LOD, DPR cap, cheaper shadows/post, texture discipline.
29	5. Re-measure same scenario and verify visuals/playability.
30
31	## Final Response
32
33	Lead with root cause or bottleneck. Report the reference ledger, checklist items used, files changed, baseline/post metrics, commands, screenshots/artifacts, broken paths retested, and residual risks.

People who liked this also viewed

6 picks

Type