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

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

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

文章目录

在 WebGL 中，

WebGLQuery

是一个用于查询渲染状态的对象，主要用于性能监控和调试。通过使用

WebGLQuery

，开发者可以查询诸如时间戳、栅格化顶点数量等信息，这对于分析性能瓶颈和调试渲染过程非常有帮助。

创建 WebGLQuery

要创建一个新的

WebGLQuery

对象，可以使用 WebGL 上下文的方法

createQuery

：

var query = gl.createQuery();

开始查询

在开始渲染之前，需要绑定查询对象并开始查询。通常使用

beginQuery

方法启动查询。

gl.beginQuery(gl.TIME_ELAPSED, query);

结束查询

在结束渲染之后，需要使用

endQuery

方法来结束查询。

gl.endQuery(gl.TIME_ELAPSED);

获取查询结果

查询结果需要在查询结束后一段时间才能获取，这是因为查询结果需要等待 GPU 完成渲染任务后才能确定。可以使用

getQuery

方法来获取查询结果。

var result = gl.getQuery(query, gl.QUERY_RESULT_AVAILABLE);if(result){var elapsedTime = gl.getQuery(query, gl.QUERY_RESULT);
  console.log("Time elapsed: "+ elapsedTime /1000+" milliseconds");}

查询目标

查询目标是指查询的具体内容，常见的查询目标包括：

• TIME_ELAPSED - 查询从开始到结束所花费的时间，单位为纳秒。
• ANY_SAMPLES_PASSED - 查询是否有任何像素通过了深度和模板测试。
• ANY_SAMPLES_PASSED_CONSERVATIVE - 保守版本的 ANY_SAMPLES_PASSED，可能提供更准确的结果但性能开销更大。
• TRANSFORM_FEEDBACK_PRIMITIVES_WRITTEN - 查询有多少原始图形（顶点）被写入到变换反馈缓冲区。

示例

下面是一个完整的示例，展示了如何使用

WebGLQuery

来测量一段渲染操作所花费的时间：

// 创建查询对象var timeQuery = gl.createQuery();// 开始查询
gl.beginQuery(gl.TIME_ELAPSED, timeQuery);// 进行渲染操作// ...// 结束查询
gl.endQuery(gl.TIME_ELAPSED);// 获取查询结果
gl.getQuery(timeQuery, gl.QUERY_RESULT_AVAILABLE,function(result){if(result){var elapsedTime = gl.getQuery(timeQuery, gl.QUERY_RESULT);
    console.log("Time elapsed: "+ elapsedTime /1000+" milliseconds");}});// 清理查询对象
gl.deleteQuery(timeQuery);

总结

WebGLQuery

是 WebGL 中用于查询渲染状态的对象，可以帮助开发者分析性能问题和调试渲染过程。通过正确地使用

WebGLQuery

，可以更好地理解 WebGL 应用程序的性能特征，并据此进行优化。注意，查询结果可能需要一段时间才能准备好，因此在实际应用中需要注意查询结果的异步获取。