2025年8月29日中文

探索 WebGL 遮挡查询以优化渲染。学习如何有效利用它们进行可见性测试，为您的网页应用带来显著的性能提升。

WebGL 遮挡查询：可见性测试与性能优化

在 WebGL 开发领域，性能至关重要。复杂场景中大量的对象会迅速给 GPU 带来压力，导致掉帧和糟糕的用户体验。一种有效的缓解技术是遮挡剔除，即不渲染被其他物体遮挡的对象，从而节省宝贵的处理时间。WebGL 遮挡查询提供了一种有效确定对象可见性的机制，从而实现高效的遮挡剔除。

什么是 WebGL 遮挡查询？

WebGL 遮挡查询是一项功能，它允许您询问 GPU 一组特定的渲染命令绘制了多少片元（像素）。本质上，您提交一个对象的绘制调用，GPU 会告诉您它的任何片元是否通过了深度测试并实际可见。然后，这些信息可用于确定该对象是否被场景中的其他对象遮挡。如果查询返回零（或一个非常小的数字），则意味着该对象被完全（或大部分）遮挡，并且在后续帧中不需要被渲染。这项技术显著减少了渲染工作量并提高了性能，尤其是在复杂场景中。

遮挡查询如何工作：一个简化的概述

创建查询对象：您首先使用 gl.createQuery() 创建一个查询对象。该对象将保存遮挡查询的结果。
开始查询：您使用 gl.beginQuery(gl.ANY_SAMPLES_PASSED, query) 开始查询。gl.ANY_SAMPLES_PASSED 目标指定我们关心的是否有任何样本（片元）通过了深度测试。还存在其他目标，例如 gl.ANY_SAMPLES_PASSED_CONSERVATIVE（提供一个更保守的结果，可能包含假正例以获得更好的性能）和 gl.SAMPLES_PASSED（计算通过深度测试的样本数量，在 WebGL2 中已弃用）。
渲染可能被遮挡的对象：然后，您为要测试可见性的对象发出绘制调用。这通常是一个简化的包围盒或对象的粗略表示。渲染简化版本可以减少查询本身对性能的影响。
结束查询：您使用 gl.endQuery(gl.ANY_SAMPLES_PASSED) 结束查询。
检索查询结果：查询结果不是立即可用的。GPU 需要时间来处理渲染命令并确定通过的片元数量。您可以使用 gl.getQueryParameter(query, gl.QUERY_RESULT) 检索结果。
解释结果：如果查询结果大于零，则意味着该对象的至少一个片元是可见的。如果结果为零，则意味着该对象被完全遮挡。
使用结果进行遮挡剔除：根据查询结果，您可以决定是否在后续帧中渲染完整的、详细的对象。

使用遮挡查询的好处

提高渲染性能：通过避免渲染被遮挡的对象，遮挡查询可以显著减少渲染工作量，从而带来更高的帧率和更流畅的用户体验。
降低 GPU 负载：更少的渲染意味着 GPU 的工作量减少，这可以延长移动设备的电池寿命并减少台式电脑的发热。
增强视觉保真度：通过优化渲染性能，您可以承担渲染更复杂、更精细的场景而无需牺牲帧率。
可扩展性：遮挡查询对于具有大量对象的复杂场景尤其有益，因为性能增益会随着场景复杂度的增加而增加。

挑战与注意事项

虽然遮挡查询提供了显著的好处，但也存在一些需要注意的挑战和注意事项：

延迟：遮挡查询会引入延迟，因为查询结果不是立即可用的。GPU 需要时间来处理渲染命令并确定通过的片元数量。如果处理不当，这种延迟可能会导致视觉伪影。
查询开销：执行遮挡查询本身也会产生一定的开销。GPU 需要跟踪查询状态并计算通过深度测试的片元。如果查询使用不当，这种开销可能会抵消其带来的性能优势。
保守遮挡：为了最大限度地减少延迟的影响，通常希望使用保守遮挡，即即使只有少量片元可见，也认为对象是可见的。这可能会导致渲染部分被遮挡的对象，但可以避免激进的遮挡剔除可能产生的视觉伪影。
包围体选择：为遮挡查询选择的包围体（例如，包围盒、包围球）会显著影响性能。更简单的包围体渲染速度更快，但可能导致更多的假正例（即，即使对象大部分被遮挡，也被认为是可见的）。
同步：检索查询结果需要在 CPU 和 GPU 之间进行同步。这种同步可能会在渲染管线中引入停顿，从而对性能产生负面影响。
浏览器和硬件兼容性：确保目标浏览器和硬件支持遮挡查询。虽然该功能已被广泛支持，但较旧的系统可能缺少此功能，需要有备用机制。

使用 WebGL 遮挡查询的最佳实践

为了最大化遮挡查询的好处并最小化其挑战，请考虑以下最佳实践：

1. 使用简化的包围体

不要为遮挡查询渲染完整的、详细的对象，而是渲染一个简化的包围体，例如包围盒或包围球。这可以减少渲染工作量并加快查询过程。包围体应紧密包裹对象，以尽量减少假正例。

示例：想象一个复杂的汽车 3D 模型。您无需为遮挡查询渲染整个汽车模型，而是可以渲染一个包裹汽车的简单包围盒。这个包围盒的渲染速度将远快于完整的汽车模型。

2. 使用分层遮挡剔除

对于复杂场景，可以考虑使用分层遮挡剔除，即将对象组织成一个包围体层次结构。然后，您可以先对较高级别的包围体执行遮挡查询。如果一个较高级别的包围体被遮挡，您就可以避免对其子级执行遮挡查询。这可以显著减少所需的遮挡查询数量。

示例：考虑一个城市场景。您可以将建筑物组织成街区，然后将街区组织成区域。然后，您可以先对区域执行遮挡查询。如果一个区域被遮挡，您就可以避免对该区域内的单个街区和建筑物执行遮挡查询。

3. 利用帧连贯性

遮挡查询表现出帧连贯性，这意味着一个对象的可见性很可能在相邻帧之间是相似的。您可以利用这种帧连贯性，通过缓存查询结果来预测对象在后续帧中的可见性。这可以减少所需的遮挡查询数量并提高性能。

示例：如果一个对象在上一帧是可见的，您可以假设它在当前帧也很可能是可见的。然后，您可以延迟对该对象执行遮挡查询，直到它可能被遮挡时（例如，当它移动到另一个对象后面时）。

4. 考虑使用保守遮挡

为了最大限度地减少延迟的影响，可以考虑使用保守遮挡，即即使只有少量片元可见，也认为对象是可见的。这可以通过在查询结果上设置一个阈值来实现。如果查询结果高于该阈值，则认为对象可见。否则，认为其被遮挡。

示例：您可以设置一个 10 个片元的阈值。如果查询结果大于 10，则认为对象可见。否则，认为其被遮挡。合适的阈值将取决于您场景中对象的大小和复杂性。

5. 实现备用机制

并非所有浏览器和硬件都支持遮挡查询。因此，实现一个在遮挡查询不可用时可以使用的备用机制非常重要。这可能包括使用更简单的遮挡剔除算法，或者干脆完全禁用遮挡剔除。

示例：您可以检查是否支持 EXT_occlusion_query_boolean 扩展。如果不支持，您可以回退到使用简单的基于距离的剔除算法，即不渲染离相机太远的对象。

6. 优化渲染管线

在优化渲染性能方面，遮挡查询只是其中一环。优化渲染管线的其余部分也同样重要，包括：

减少绘制调用次数：批处理绘制调用可以显著减少渲染开销。
使用高效的着色器：优化着色器可以减少处理每个顶点和片元所花费的时间。
使用 Mipmapping：Mipmapping 可以提高纹理过滤性能。
减少过度绘制：过度绘制发生在一个片元被绘制在另一个片元之上时，浪费了处理时间。
使用实例化渲染：实例化渲染允许您通过一次绘制调用来渲染同一对象的多个副本。

7. 异步查询检索

如果 GPU 尚未完成查询处理，检索查询结果可能会导致停顿。利用可用的异步检索机制有助于缓解此问题。相关技术可能包括等待一定数量的帧后再检索结果，或使用专用的工作线程来处理查询检索过程，从而避免阻塞主渲染线程。

代码示例：一个基本的遮挡查询实现

这是一个简化的示例，演示了 WebGL 中遮挡查询的基本用法：


// 创建一个查询对象
const query = gl.createQuery();

// 开始查询
gl.beginQuery(gl.ANY_SAMPLES_PASSED, query);

// 渲染对象（例如，一个包围盒）
gl.drawArrays(gl.TRIANGLES, 0, vertexCount);

// 结束查询
gl.endQuery(gl.ANY_SAMPLES_PASSED);

// 异步检索查询结果（使用 requestAnimationFrame 的示例）
function checkQueryResult() {
 gl.getQueryParameter(query, gl.QUERY_RESULT_AVAILABLE, (available) => {
 if (available) {
 gl.getQueryParameter(query, gl.QUERY_RESULT, (result) => {
 const isVisible = result > 0;
 // 使用可见性结果来决定是否渲染完整的对象
 if (isVisible) {
 renderFullObject();
 }
 });
 } else {
 requestAnimationFrame(checkQueryResult);
 }
 });
}

requestAnimationFrame(checkQueryResult);

注意：这是一个简化的示例，不包括错误处理、正确的资源管理或高级优化技术。请记住根据您的特定场景和需求进行调整。在生产环境中，错误处理至关重要，尤其是在扩展支持和查询可用性方面。还需考虑针对不同潜在场景进行调整。

遮挡查询在实际应用中的应用

遮挡查询被广泛应用于各种实际应用中，包括：

游戏开发：遮挡剔除是优化游戏渲染性能的关键技术，尤其是在包含许多对象的复杂场景中。例如使用 WebAssembly 和 WebGL 在浏览器中渲染的 AAA 级游戏，以及具有详细环境的网页休闲游戏。
建筑可视化：遮挡查询可用于提高建筑可视化的性能，允许用户实时探索大型且详细的建筑模型。想象一下探索一个拥有无数展品的虚拟博物馆——遮挡剔除确保了流畅的导航。
地理信息系统 (GIS)：遮挡查询可用于优化大型复杂地理数据集（如城市和景观）的渲染。例如，在网页浏览器中可视化用于城市规划模拟的城市景观 3D 模型，可以从遮挡剔除中获益匪浅。
医学成像：遮挡查询可用于提高医学成像应用的性能，让医生能够实时可视化复杂的解剖结构。
电子商务：对于展示产品 3D 模型的网站，遮挡查询有助于降低 GPU 负载，确保即使在性能较差的设备上也能获得更流畅的体验。考虑在移动设备上查看一件复杂家具的 3D 模型；遮挡剔除可以帮助维持合理的帧率。

结论

WebGL 遮挡查询是优化渲染性能和改善网页应用用户体验的强大工具。通过有效地剔除被遮挡的对象，您可以减少渲染工作量，提高帧率，并实现更复杂、更详细的场景。尽管存在延迟和查询开销等挑战，但遵循最佳实践并仔细考虑您应用的具体需求，可以释放遮挡查询的全部潜力。通过掌握这些技术，全球的开发者可以提供更丰富、更具沉浸感且性能卓越的网页 3D 体验。