WebGL2中EXT_disjoint_timer_query_webgl2检测渲染完成失效，求解决

一、EXT_disjoint_timer_query_webgl2 查询结果一直不可用的原因 #

你的代码核心问题是用while死循环阻塞了主线程：WebGL的查询结果需要GPU完成任务后通知浏览器，再由浏览器更新查询状态；但主线程被死循环占满时，浏览器无法处理GPU的回调通知，available的值永远不会被更新。

另外还有两个潜在注意点：

• 需确保EXT_disjoint_timer_query_webgl2扩展被成功获取（部分浏览器可能因HTTPS/隐私限制不支持）
• 查询资源使用后需手动释放，避免内存泄漏

二、修复定时器查询的正确写法 #

将死循环改为异步轮询，让主线程有机会处理GPU状态更新：

// 获取扩展
const ext = gWebGL.getExtension('EXT_disjoint_timer_query_webgl2');
if (!ext) {
  console.error('EXT_disjoint_timer_query_webgl2 扩展不受支持');
  return;
}

// 创建并启动查询
const query = gWebGL.createQuery();
gWebGL.beginQuery(ext.TIME_ELAPSED_EXT, query);

// 执行绘制
gWebGL.drawArrays(gWebGL.TRIANGLE_STRIP, 0, 4);

gWebGL.endQuery(ext.TIME_ELAPSED_EXT);

// 异步轮询查询结果
function checkQuery() {
  const available = gWebGL.getQueryParameter(query, gWebGL.QUERY_RESULT_AVAILABLE);
  const disjoint = gWebGL.getParameter(ext.GPU_DISJOINT_EXT);

  if (available) {
    if (!disjoint) {
      const timeElapsed = gWebGL.getQueryParameter(query, gWebGL.QUERY_RESULT);
      console.log('渲染耗时（纳秒）:', timeElapsed);
    } else {
      console.warn('GPU执行中断，结果不可靠');
    }
    gWebGL.deleteQuery(query); // 释放资源
  } else {
    // 用requestIdleCallback更节省性能，也可用setTimeout
    requestIdleCallback(checkQuery);
  }
}

checkQuery();

三、同步检测渲染完成的替代方案 #

如果核心需求是确保drawArrays完成后再执行后续逻辑，而非统计耗时，可直接使用finish()强制同步：

// 执行绘制
gWebGL.drawArrays(gWebGL.TRIANGLE_STRIP, 0, 4);

// 阻塞主线程，直到GPU完成所有pending渲染命令
gWebGL.finish();

// 此处代码会在渲染完成、输出缓冲区更新后执行
console.log('渲染已完成');

注意： #

finish()会带来明显性能开销，适合低频触发的事件驱动场景（如你的科学应用），不适合高频渲染场景。

内容的提问来源于stack exchange，提问作者noah.b