WebGL 2.0 遮挡查询答案

【问题标题】：WebGL 2.0 Occlusion QueryWebGL 2.0 遮挡查询
【发布时间】：2017-02-26 04:24:01
【问题描述】：

我想用 WebGL 渲染一个大场景（一个建模的城市），我认为 occlusion culling 是优化性能的好方法。

而且我知道 WebGL 2.0 有一个名为“查询对象”的新功能来获取遮挡信息。但是每次我使用 gl.getQueryParameter(query, gl.QUERY_RESULT) 时，我都会得到相同的结果 1。

我在这里写了一个演示来解释这个问题：

    var query = gl.createQuery();
    gl.beginQuery(gl.ANY_SAMPLES_PASSED, query);
    gl.drawArrays(gl.TRIANGLES,0,n);
    gl.endQuery(gl.ANY_SAMPLES_PASSED);

    var tick = function(){
        if(!gl.getQueryParameter(query,gl.QUERY_RESULT_AVAILABLE)){
            requestAnimationFrame(tick);
            return;
        }
        var result = gl.getQueryParameter(query,gl.QUERY_RESULT);
        console.log(Number(result));
        gl.deleteQuery(query);
    };

    tick();

这是我的顶点信息，第二个三角形被第一个三角形遮挡。

    var vertexData = new Float32Array([
            0.0,0.5,0.0,        //first triangle
            -0.5,-0.5,0.0,
            0.5,-0.5,0.0,

            0.0,0.5,-0.5,       //second triangle
            -0.5,-0.5,-0.5,
            0.5,-0.5,-0.5
    ]);

结果始终为 1。

结果“1”代表什么？

另外，如何使用 WebGL 2.0 进行遮挡剔除？有什么有用的示例吗？

【问题讨论】：

所以你有一个绘制调用绘制两个三角形，其中一个被另一个覆盖，并要求ANY_SAMPLES_PASSED 给你@987654321 @ 因为你所有的第一个三角形样本都通过了，很容易满足“任何样本”。

标签： opengl-es webgl webgl2

【解决方案1】：

遮挡查询和遮挡剔除不是一回事。

基本的对象剔除可以（并且应该）完全在 CPU 上完成（例如，对对象边界框、门户可见性、八叉树等的视锥体检查）比在 GPU 上更有效，因为应用程序可以利用场景级知识显卡驱动根本就没有。

在 GPU 上，遮挡剔除最容易提供，方法是使用从前到后的渲染顺序渲染不透明对象（同样，游戏引擎通常会对对象批次进行粗略排序），并使用深度测试剔除被遮挡的东西。

遮挡查询是一种非常专业的工具，对少量视觉效果（例如镜头光晕）很有用，但对于单帧内的任何激进剔除来说太难了。

【讨论】：

使用为您的 PVS（潜在可见集）精心设计的数据结构添加基于 CPU 的剔除的 isogen74 答案对于大型场景是必须的。作为一个简单的例子，将世界划分为 1x1km 的区域，并决定你只能看到 5km 以外的地方。然后使用平截头体来确定哪些 1x1k 块实际上在视图中。只尝试画那些东西。这只是一个简单的例子。设计 PVS 的方法有无数种。门户是室内场景的另一个选择。

【解决方案2】：

首先，here is a good example 了解如何使用 WebGL 2 遮挡查询 API。

与其他答案相反，遮挡查询绝对可以用于实现遮挡剔除。问题是您将需要一些复杂的 CPU 端数据结构/算法来帮助您。我没有自己在这里解释得很糟糕，而是将您交给真正的专家GPU Gems 2 - Chapter 6 Hardware Occlusion Queries Made Useful。如果没有适当的算法，您的遮挡查询本身将比仅渲染对象更昂贵！

【讨论】：

【解决方案3】：

gl.ANY_SAMPLES_PASSED 结果只为真 (1) 或假 (0)。不是通过多少样本的信息，而是 ist 为您提供 true (1) 的结果，即任何样本都通过了，不管是哪一个。

【讨论】：