该技能提供 Three.js/WebGL/WebGPU 实时站点的性能与加载模式，来源为对多个生产站点工程拆解，按所解决的问题组织，强调每项技术都以复杂度、物理行为简化或硬截断为代价，使用前需阅读其成本说明。
一、加载与预热：解决进度条到 100% 后仍冻结 1-2 秒的问题，原因是 GPU 驱动在首次绘制时惰性编译着色器管线。修复方式是趁加载 UI 仍在时实际渲染一遍所有管线：遍历场景并对网格临时关闭视锥剔除，通过完整后处理链渲染真实帧，逐一切换所有滚动区块/状态；完成后等待两次 requestAnimationFrame 加一个 microtask 再触发 compileEnd 与 reveal。多相机可分阶段使用 renderer.compileAsync；Safari 着色器编译较慢，相关构建会等待第二次编译。加载 UI 应以“编译完成”而非“资源加载完成”为门控；帧数门控示例为在 useFrame 中计数至约第 8 帧再回调。大缓冲区过程化合成（如卷积混响脉冲、噪声纹理）应分块并在创建时调度，避免首次使用时同步阻塞。
二、渲染循环开销控制：静态场景用 shadowMap.autoUpdate=false 配合 needsUpdate 按需更新阴影贴图；将自发光写入独立 MRT 目标供泛光采样；用独立图层加专用相机拆分雨滴/粒子渲染；粒子运动在着色器内按时间 uniform 计算，CPU 每帧只推进一个 uniform，并配合 frustumCulled=false；对近距效果使用带迟滞的进入/退出阈值；将调色链融合为尽量少的全屏 pass；切换功能时重连锁后处理图而非重建，R3F 中效果数组需 useMemo，注意 useFBO 等封装可能产生未使用的渲染目标分配。
三、自适应画质：以单一扁平配置对象集中管理像素比、各效果分辨率缩放、跳帧与开关，同时作为调试接口；降级为一次性单向锁存，基于滚动窗口的 FPS 采样，仅在 reveal 后采样并丢弃最初 2-3 个窗口，窗口内出现超约 100ms 的单帧应丢弃，且降级分阶段执行。
限制：以上为模式汇总，具体阈值与效果需按项目实测；不同浏览器与设备行为存在差异；部分内容基于生产站点剖析，未提供官方 API 或价格信息。