2

I want to render a big scene(a modeled city) using WebGL, and I think occlusion culling is a good way to optimize the performance.

And I know WebGL 2.0 has a new feature called 'Query Objects' to get the occlusion information. But every time I use gl.getQueryParameter(query, gl.QUERY_RESULT), I got the same result 1.

And I wrote a demo here to explain the problem:

    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();

and here are my vertex information that the sceond triangle is obscured by the first triangle.

    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
    ]);

and the result is always 1.

What's the result '1' stands for?

In addition, how could I do occlusion culling using WebGL 2.0? Is there any helpful samples?

4

3 回答 3

3

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

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

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

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

于 2016-10-17T15:00:48.513 回答
2

首先，这里有一个很好的例子来说明如何使用 WebGL 2 遮挡查询 API。

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

于 2020-05-11T18:40:10.760 回答
1

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

于 2021-09-23T08:14:41.650 回答