WebGL优化：如何仅在事件触发时请求帧且不超出刷新率？

需求背景 #

希望WebGL应用仅在用户修改相机位置或旋转时执行重绘，其余场景保持静态，同时实现类似C++结合DesktopGL/SDL2/GLFW中WaitEvents+垂直同步的效果——仅在输入时处理逻辑，且帧率不超出浏览器刷新率。

现有方案的问题 #

• 方案1：持续requestAnimationFrame循环

  function animate() {
      requestAnimationFrame(animate);
      if (compare_camera_with_previous_frame()) {
          render();
      }
  }
  

  虽能让GPU按需绘制，但每秒60次无意义的状态检查消耗资源，还会将Web应用标记为持续动画状态。

• 方案2：输入事件直接触发animate
  移除循环内的requestAnimationFrame(animate)，改为触摸/鼠标事件中调用，会导致短时间内触发大量渲染请求，帧率飙升至数百FPS，浪费GPU资源。

解决方法 #

核心思路是仅在相机状态变更时发起一次渲染请求，利用requestAnimationFrame的刷新率同步特性限制渲染帧率，具体实现如下：

1. 核心逻辑 #

• 维护一个needsRender标记，用于避免同一帧内重复发起渲染请求
• 相机状态变化时，仅当无 pending 的渲染请求时，才调用requestAnimationFrame
• 在requestAnimationFrame回调中执行渲染，并重置标记

2. 代码示例 #

let needsRender = false;
// 存储上一帧的相机状态（根据实际需求记录位置、旋转等参数）
let lastCameraState = { position: [0,0,0], rotation: [0,0,0] };

// WebGL渲染函数
function render() {
    // 执行实际渲染逻辑：更新相机uniform、绘制场景等
}

// 对比相机状态，判断是否需要渲染
function shouldRender(newCameraState) {
    // 这里用简单的对象对比，实际项目建议用更高效的方式（比如逐个属性比较）
    return JSON.stringify(newCameraState) !== JSON.stringify(lastCameraState);
}

// 处理相机状态变更
function handleCameraUpdate(newCameraState) {
    if (shouldRender(newCameraState)) {
        lastCameraState = {...newCameraState};
        // 只有当前没有等待中的渲染请求时，才发起新请求
        if (!needsRender) {
            needsRender = true;
            requestAnimationFrame(onRenderFrame);
        }
    }
}

// requestAnimationFrame回调函数
function onRenderFrame() {
    needsRender = false;
    render();
}

// 绑定输入事件（以触摸拖动为例）
const canvas = document.getElementById('webgl-canvas');
canvas.addEventListener('touchmove', (e) => {
    // 根据触摸事件计算新的相机状态
    const newCameraState = calculateCameraFromTouch(e);
    handleCameraUpdate(newCameraState);
});

// 鼠标拖动事件同理
canvas.addEventListener('mousemove', (e) => {
    const newCameraState = calculateCameraFromMouse(e);
    handleCameraUpdate(newCameraState);
});

3. 关键说明 #

• needsRender标记避免了短时间内多次输入事件导致的重复渲染请求，确保同一刷新率周期内仅执行一次渲染
• requestAnimationFrame会自动与浏览器刷新率同步（通常60FPS），即使连续触发相机变化，也只会按刷新率执行渲染，不会出现超高帧率
• 无输入时不会发起任何渲染请求，彻底避免了无意义的状态检查，也不会将应用标记为持续动画状态

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