Back to Details

threejs-debug-profiler

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Three.js Debug Profiler

Three.js 调试分析工具

Purpose

用途

Find root causes and optimize measured bottlenecks without breaking playability.
找出问题根源并优化已定位的性能瓶颈，同时不影响游戏的可玩性。

Debug Workflow

调试流程

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.
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.
  1. Reproduce locally.
  2. Read console/page/network errors.
  3. Check canvas display size and drawing-buffer size.
  4. Check renderer/context/loop ownership.
  5. Check camera, aspect, near/far, lights, materials, fog, scene contents, transforms.
  6. Check asset paths/loaders/CORS/base path.
  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.
  8. Fix root cause in owning module.
  9. Verify browser screenshot, nonblank canvas, console/page errors, and broken path.
当调试渲染/运行时/移动端问题、资源加载、音频加载/播放、动画、窗口缩放、输入、空白画布、物理/碰撞错误或进行性能分析时，第一步需加载
references/debug-profile-checklists.md
文件。将调试情况记录在参考台账中，包含是否完成、问题路径及失败原因。若调试或分析工作跳过该参考文件，则不得标记调试/分析阶段完成。
进行渲染/运行时错误诊断时，加载
references/checklists/scene-debugging.md
；进行性能分析时，加载
references/checklists/performance-profile.md
；处理移动端渲染/输入问题时，加载
references/checklists/mobile-input.md
。仅当用户要求可复用的调试/分析提示词或任务模板时，才加载
references/prompt-templates.md
。
  1. 在本地复现问题。
  2. 查看控制台/页面/网络错误信息。
  3. 检查画布显示尺寸与绘图缓冲区尺寸。
  4. 检查渲染器/上下文/循环的归属。
  5. 检查相机、宽高比、近/远裁剪面、灯光、材质、雾化效果、场景内容、变换属性。
  6. 检查资源路径/加载器/CORS/基础路径。
  7. 涉及音频时，检查动画增量单位、物理/更新顺序、固定时间步长、碰撞体/刚体归属、输入监听器、指针/触摸行为、窗口缩放，以及音频上下文解锁/解码错误。
  8. 在问题所属模块中修复根源问题。
  9. 验证浏览器截图、非空白画布、控制台/页面错误及已修复的问题路径。

Performance Workflow

性能优化流程

  1. Reproduce in correct build mode.
  2. Record baseline: FPS/frame time, draw calls, triangles, geometries, textures, memory, bundle.
  3. Identify CPU/GPU/memory/network bottleneck.
  4. Optimize one thing at a time: instancing, shared resources, culling, LOD, DPR cap, cheaper shadows/post, texture discipline.
  5. Re-measure same scenario and verify visuals/playability.
  1. 在正确的构建模式下复现问题。
  2. 记录基准指标：FPS/帧时间、绘制调用数、三角形数量、几何体数量、纹理、内存、包体积。
  3. 识别CPU/GPU/内存/网络瓶颈。
  4. 每次仅优化一项：实例化、共享资源、剔除、LOD细节层次、DPR上限、更轻量化的阴影/后处理、纹理规范。
  5. 重新测量同一场景并验证视觉效果/可玩性。

Final Response

最终反馈

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.
首先说明问题根源或性能瓶颈。汇报参考台账、使用的检查项、修改的文件、基准/优化后指标、执行的命令、截图/工件、重新测试的问题路径以及剩余风险。