CSharpGL(30)用条件渲染(Conditional Rendering)来提升OpenGL的渲染效率

CSharpGL(30)用条件渲染(Conditional Rendering)来提升OpenGL的渲染效率

当场景中有比较复杂的模型时，条件渲染能够加速对复杂模型的渲染。

条件渲染(Conditional Rendering)

当我们能够断定一个模型被其他模型挡住（因此不会被Camera看到）时，我们就可以跳过对此模型的渲染。这就是条件渲染的根本。

那么如何去判断？方法就是用一个简单的包围盒（比如一个立方体）去渲染一下，看看fragment是不是有变化（即包围盒上的某些部分通过了depth test，最终渲染到Framebuffer上了）。如果没有任何一个fragment发生改变，就说明这个包围盒是被挡住了，那么被包围起来的模型也必然是被挡住了。

下载

CSharpGL已在GitHub开源，欢迎对OpenGL有兴趣的同学加入（https://github.com/bitzhuwei/CSharpGL）

原理

本篇需要用到2个知识点。

遮面查询(Occlusion Query)

这里OpenGL提供了一个Query Object。类似Buffer Object，Vertex Array Object等，也是通过glGen*等方式使用的。

Query Object的作用就是记录一个包围盒是否改变了某些fragment。

如下代码所示，在通常的渲染前后用glBeginQuery和glEndQuery包围起来，Query就会记录是否有fragment被改变了。

glBeginQuery(GL_SAMPLES_PASSED, queryId);
glDrawArrays(GL_TRIANGLES, 0, 3);
glEndQuery(GL_SAMPLES_PASSED);

之后用下述方式即可获知是否有fragment被改变了。只要SampleRendered()返回值为false，那么这个模型就不用渲染了。

        /// <summary>
        /// 
        /// </summary>
        /// <returns></returns>
        public bool SampleRendered()
        {
            var result = new int[1];
            int count = 1000;
            while (result[0] == 0 && count-- > 0)
            {
                glGetQueryObjectiv(this.Id, OpenGL.GL_QUERY_RESULT_AVAILABLE, result);
            }

            if (result[0] != 0)
            {
                glGetQueryObjectiv(this.Id, OpenGL.GL_QUERY_RESULT, result);
            }
            else
            {
                result[0] = 1;
            }

            return result[0] != 0;
        }

条件渲染(Conditional Rendering)

上述Query对象使用时的一个缺点是，CPU必须用循环等待GPU的Query结果。这就拖延了后续渲染步骤，降低了FPS。

为避免CPU循环等待，OpenGL提供了下面2个指令，他们的作用就是用GPU代替了CPU循环的功能。

glBeginConditionalRender(uint id, uint mode);
glEndConditionalRender();

其使用方式也像Query对象一样，把通常的渲染指令包围起来即可。

glBeginConditionalRender(queryId, GL_QUERY_WAIT);
glDrawArrays(GL_TRIANGLE_FAN, 0, numVertices);
glEndConditionalRender();

示例

一个特别的3D模型

我们需要设计一个顶点多而又被一个简单的模型遮挡住的模型。这个复杂模型就用点云表示，用于遮挡的模型就用一个简单的Cube就可以了。

运用CSharpGL封装的功能，很快就可以做出这个模型来。

    /// <summary>
    /// demostrates how to perform conditional rendering.
    /// </summary>
    internal class ConditionalRenderer : RendererBase
    {
        private const int xside = 5, yside = 5, zside = 5;
        private const int pointCount = 10000;
        private static readonly vec3 unitLengths = new vec3(1, 1, 1);
        private const float scaleFactor = 1.0f;

        private List<Tuple<CubeRenderer, RendererBase, Query>> coupleList = new List<Tuple<CubeRenderer, RendererBase, Query>>();
        private DepthMaskSwitch depthMaskSwitch = new DepthMaskSwitch(false);
        private ColorMaskSwitch colorMaskSwitch = new ColorMaskSwitch(false, false, false, false);

        private bool enableConditionalRendering = true;

        public bool ConditionalRendering
        {
            get { return enableConditionalRendering; }
            set { enableConditionalRendering = value; }
        }

        private bool renderBoundingBox = false;

        public bool RenderBoundingBox
        {
            get { return renderBoundingBox; }
            set { renderBoundingBox = value; }
        }

        private bool renderTargetModel = true;

        public bool RenderTargetModel
        {
            get { return renderTargetModel; }
            set { renderTargetModel = value; }
        }

        public static ConditionalRenderer Create()
        {
            var result = new ConditionalRenderer();
            {
                var wallRenderer = CubeRenderer.Create(new Cube(new vec3(unitLengths.x * 2, unitLengths.y * 2, 0.1f) * new vec3(xside, yside, zside)));
                wallRenderer.WorldPosition = new vec3(0, 0, 6);
                var boxRenderer = CubeRenderer.Create(new Cube(new vec3(unitLengths.x * 2, unitLengths.y * 2, 0.1f) * new vec3(xside, yside, zside)));
                boxRenderer.WorldPosition = new vec3(0, 0, 6);
                var query = new Query();
                result.coupleList.Add(new Tuple<CubeRenderer, RendererBase, Query>(boxRenderer, wallRenderer, query));
            }
            for (int x = 0; x < xside; x++)
            {
                for (int y = 0; y < yside; y++)
                {
                    for (int z = 0; z < zside; z++)
                    {
                        var model = new RandomPointsModel(unitLengths, pointCount);
                        RandomPointsRenderer renderer = RandomPointsRenderer.Create(model);
                        renderer.PointColor = Color.FromArgb(
                            (int)((float)(x + 1) / (float)xside * 255),
                            (int)((float)(y + 1) / (float)yside * 255),
                            (int)((float)(z + 1) / (float)zside * 255));
                        renderer.WorldPosition =
                            (new vec3(x, y, z) * unitLengths * scaleFactor)
                            - (new vec3(xside - 1, yside - 1, zside - 1) * unitLengths * scaleFactor * 0.5f);
                        var cubeRenderer = CubeRenderer.Create(new Cube(unitLengths));
                        cubeRenderer.WorldPosition = renderer.WorldPosition;
                        var query = new Query();
                        result.coupleList.Add(new Tuple<CubeRenderer, RendererBase, Query>(cubeRenderer, renderer, query));
                    }
                }
            }

            result.Lengths = new vec3(xside + 1, yside + 1, zside + 1) * unitLengths * scaleFactor;

            return result;
        }

        private ConditionalRenderer()
        { }

        protected override void DoInitialize()
        {
            foreach (var item in this.coupleList)
            {
                item.Item1.Initialize();
                item.Item2.Initialize();
                item.Item3.Initialize();
            }
        }

        protected override void DoRender(RenderEventArgs arg)
        {
            if (this.ConditionalRendering)
            {
                this.depthMaskSwitch.On();
                this.colorMaskSwitch.On();
                foreach (var item in this.coupleList)
                {
                    item.Item3.BeginQuery(QueryTarget.AnySamplesPassed);
                    item.Item1.Render(arg);
                    item.Item3.EndQuery(QueryTarget.AnySamplesPassed);
                }
                this.colorMaskSwitch.Off();
                this.depthMaskSwitch.Off();
                var result = new int[1];
                foreach (var item in this.coupleList)
                {
                    item.Item3.BeginConditionalRender(ConditionalRenderMode.QueryByRegionWait);
                    //if (item.Item3.SampleRendered())
                    {
                        if (this.renderTargetModel) { item.Item2.Render(arg); }
                        if (this.renderBoundingBox) { item.Item1.Render(arg); }
                    }
                    item.Item3.EndConditionalRender();
                }
            }
            else
            {
                foreach (var item in this.coupleList)
                {
                    if (this.renderTargetModel) { item.Item2.Render(arg); }
                    if (this.renderBoundingBox) { item.Item1.Render(arg); }
                }
            }
        }
    }

 

条件渲染效果

下面让蓝色的墙遮挡住彩色点云。

总结

条件渲染(Conditional Rendering)是一项非常厉害的技术。当要渲染一个数据量很大的模型时，用条件渲染技术能够显著提升渲染效率，因为这个技术能够少画一些被遮挡的内容。