three.js渲染循环中集成异步计算输出的实现方案咨询

现有两类自研方案的核心痛点 #

• 交叉循环方案（方案一）
  • 运行逻辑：渲染启动即触发异步分析任务，首帧直接渲染初始空场景，通过requestAnimationFrame调度后续渲染时机；异步任务完成后将结果写入Three.js场景，不主动触发渲染，等待下一次渲染调度周期统一完成内容更新，形成交叉循环链路。
  • 弃用原因：开发初期出现过明确的GPU资源内存泄漏问题，大概率源于几何体、材质等显存资源未及时销毁；且在该交叉循环结构下，新增资源销毁逻辑的耦合复杂度极高，难以长期维护。
• 独立双循环方案（方案二）
  • 运行逻辑：单独搭建独立循环链路运行MediaPipe人脸网格分析任务，将处理结果暂存到全局变量中；Three.js渲染循环完全独立运行，每帧渲染时读取暂存的分析结果，写入对应顶点Buffer完成人脸网格渲染。
  • 现存缺陷：两个独立循环存在明显的任务簇集现象——通过调试器观测可发现，浏览器会连续调度执行完所有排队的渲染循环任务后，才会集中执行排队的所有异步分析任务，无法实现两个流程的均匀时间片分配，易出现帧渲染抖动、交互延迟。

问题根因 #

两类方案的问题本质上都是没有贴合浏览器事件循环的调度规则设计的：

1. 交叉循环方案把异步任务触发、场景资源更新的逻辑散落在两个链路的回调中，资源的创建、销毁没有统一的生命周期管理入口，自然容易出现显存泄漏。
2. 独立双循环方案完全切断了两个流程的协同信号，浏览器的事件循环会按照任务优先级队列的顺序批量执行同类型排队任务，最终形成任务簇集。

最优实现架构 #

核心逻辑为以单渲染循环为调度核心，异步分析为旁路流水线，既保留独立双循环的低耦合优势，又同时解决资源泄漏、任务簇集两类问题：

• 全链路逻辑收敛到Three.js的渲染循环中，所有场景资源的创建、销毁都在渲染循环的统一节点处理，从根源上降低资源管理的复杂度
• 为MediaPipe的分析结果设置带版本标记的暂存槽，分析任务完成时仅覆写暂存槽内容，不直接操作Three.js场景对象，彻底解耦异步分析流程和渲染流程
• 将异步分析任务的提交权完全交给渲染循环，不在MediaPipe的结果回调中递归触发下一次分析任务，从调度逻辑上避免任务簇集

关键调度策略 #

• 每帧渲染优先执行渲染逻辑，渲染完成后再判断是否需要提交新一帧的分析请求，保证浏览器始终把渲染任务放在最高优先级执行
• 可根据设备性能设置动态的分析触发间隔：性能较弱的设备可设置每2-3个渲染帧提交一次分析请求，避免异步分析任务占满事件循环时间片
• 暂存槽采用单帧覆写模式，只保留最新的一帧分析结果，避免旧结果堆积占用内存

适配MediaPipe的示例代码 #

// 带版本标记的分析结果暂存槽
let latestAnalysisResult = null;
let resultVersion = 0;
let lastConsumedVersion = -1;
let lastAnalysisSubmitTime = 0;
// 根据设备性能调整分析触发间隔，约30fps的分析频率
const ANALYSIS_INTERVAL = 33;

const faceMeshModel = new FaceMesh({
  locateFile: (file) => `https://cdn.jsdelivr.net/npm/@mediapipe/face_mesh/${file}`
});

// 结果回调仅更新暂存槽，不涉及任何渲染逻辑
faceMeshModel.onResults((results) => {
  latestAnalysisResult = preprocessResultsForThree(results);
  resultVersion += 1;
});

// 统一在渲染循环中处理所有逻辑
function renderLoop() {
  // 优先处理渲染逻辑
  if (resultVersion > lastConsumedVersion) {
    writeResultToBuffers(latestAnalysisResult);
    lastConsumedVersion = resultVersion;
  }
  renderer.render(scene, camera);

  // 渲染完成后，判断是否需要提交下一次异步分析任务
  const now = performance.now();
  if (now - lastAnalysisSubmitTime > ANALYSIS_INTERVAL) {
    faceMeshModel.send({image: videoElement});
    lastAnalysisSubmitTime = now;
  }

  requestAnimationFrame(renderLoop);
}

// 启动链路
faceMeshModel.send({image: videoElement});
requestAnimationFrame(renderLoop);

该架构下，几何体、材质、Buffer的销毁逻辑仅需要在渲染循环的对应生命周期节点编写，复杂度比交叉循环方案降低90%以上；同时因为异步任务的提交完全由渲染循环调度，不会出现两个循环任务批量簇集执行的问题，帧渲染的稳定性会大幅提升。

内容的提问来源于stack exchange，提问作者Ben Butterworth