WebGL入门（047）：EXT_disjoint_timer_query 简介、使用方法、示例代码

还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信（gis-dajianshi），一起交流。

No.	内容链接
1	Openlayers 【入门教程】 - 【源代码+示例300+】
2	Leaflet 【入门教程】 - 【源代码+图文示例 150+】
3	Cesium 【入门教程】 - 【源代码+图文示例200+】
4	MapboxGL【入门教程】 - 【源代码+图文示例150+】
5	前端就业宝典 【面试题+详细答案 1000+】

---

在WebGL中，EXT_disjoint_timer_query扩展提供了一种方式来测量渲染操作的时间。这允许开发者在WebGL应用程序中获取渲染时间的精确度量，这对于性能分析和优化非常有用。

EXT_disjoint_timer_query 简介

EXT_disjoint_timer_query扩展为WebGL添加了对时间查询的支持。这意味着你可以开始和结束一个时间查询，并在稍后获取这段时间内渲染操作所花费的时间。这对于诊断性能瓶颈、优化渲染路径非常有用。

使用方法

使用EXT_disjoint_timer_query扩展的一般步骤如下：

1. 检测扩展：首先确保浏览器支持该扩展。
2. 创建时间查询对象：使用createQueryEXT方法创建时间查询对象。
3. 开始时间查询：使用beginQueryEXT方法开始时间查询。
4. 结束时间查询：使用endQueryEXT方法结束时间查询。
5. 获取时间结果：使用getQueryEXT方法获取时间查询的结果。

示例代码

下面是一个使用EXT_disjoint_timer_query扩展创建和使用时间查询的基本示例：

const canvas = document.getElementById('my-canvas');
const gl = canvas.getContext('webgl2', { antialias: true });

// 检测扩展
const timerQuery = gl.getExtension('EXT_disjoint_timer_query');

if (!timerQuery) {
  console.error('EXT_disjoint_timer_query extension not supported.');
  return;
}

// 创建时间查询对象
const query = timerQuery.createQueryEXT();

// 开始时间查询
timerQuery.beginQueryEXT(timerQuery.TIME_ELAPSED_EXT, query);

// 绘制场景
// 假设这里已经设置了顶点数据
gl.drawArrays(gl.TRIANGLES, 0, 3);

// 结束时间查询
timerQuery.endQueryEXT(timerQuery.TIME_ELAPSED_EXT);

// 获取时间结果
let timeElapsed = 0;
timerQuery.getQueryEXT(query, timerQuery.QUERY_RESULT_AVAILABLE_EXT, (available) => {
  if (available) {
    timeElapsed = timerQuery.getQueryEXT(query, timerQuery.QUERY_RESULT_EXT);
    console.log(`Time elapsed: ${timeElapsed} microseconds`);
  }
});

// 删除时间查询对象
timerQuery.deleteQueryEXT(query);

注意事项

• 确保在绘制之前开始时间查询，在绘制之后结束时间查询。
• 获取时间结果通常需要等待一段时间，因为GPU可能仍在处理渲染命令。
• 由于浏览器和设备支持情况的不同，你应该始终检查扩展是否可用。
• 使用时间查询可能会影响渲染性能，因为它涉及到额外的操作。

结论

使用EXT_disjoint_timer_query扩展可以显著提高WebGL应用程序中的性能分析能力，特别是在诊断性能瓶颈时。然而，由于支持情况的不同，你应该始终检查扩展是否可用，并且不要在生产环境中直接暴露敏感信息给用户。