CSharpGL(7)对VAO和VBO的封装

CSharpGL(7)对VAO和VBO的封装

2016-08-13

由于CSharpGL一直在更新，现在这个教程已经不适用最新的代码了。CSharpGL源码中包含10多个独立的Demo，更适合入门参考。

为了尽可能提升渲染效率，CSharpGL是面向Shader的，因此稍有难度。

VAO(VBO)

在legacy OpenGL中，渲染图形是用glVertex()之类的方式实现的。

在modern OpenGL中，则是用VAO和VBO来存储图形信息以备渲染的。

VBO(Vertex Buffer Object)是用来存储顶点属性的对象。VBO就像一个定长的数组(SomeType[] vbo = new SomeType[100];)，只不过是存贮于GPU内存里。我们在编码时可以通过一个代表它的指针来操作它。

VAO(Vertex Array Object)是用来管理VBO的渲染流程的。简单地说，就是让VAO看一次各个VBO是如何完成一次渲染工作的，VAO就记住了这个过程。以后就可以仅借助VAO来完成渲染过程。这就减少了DrawCall。

如果你没有使用过modern OpenGL，没有使用过VBO，那么现在看下文是无意义的。你可以先下载（https://github.com/bitzhuwei/CSharpGL）和稍微浏览一下其中的代码，之后再看本文是如何封装VAO和VBO的。

OpenGL告诉你应该这样用VBO

首先来仔细观察OpenGL提供的使用VBO的方式。

下图是CSharpGL中的一个渲染四面体的例子。我就以渲染这个四面体为例。

 

给出顶点属性

我们给出这个四面体的顶点数据。其中每3个连续的顶点代表一个三角形，显然这里有4个三角形。

        /// <summary>
        /// 金字塔的posotion array.
        /// </summary>
        static vec3[] positions = new vec3[]
    {
        new vec3(0.0f, 1.0f, 0.0f),
        new vec3(-1.0f, -1.0f, 1.0f),
        new vec3(1.0f, -1.0f, 1.0f),
        new vec3(0.0f, 1.0f, 0.0f),
        new vec3(1.0f, -1.0f, 1.0f),
        new vec3(1.0f, -1.0f, -1.0f),
        new vec3(0.0f, 1.0f, 0.0f),
        new vec3(1.0f, -1.0f, -1.0f),
        new vec3(-1.0f, -1.0f, -1.0f),
        new vec3(0.0f, 1.0f, 0.0f),
        new vec3(-1.0f, -1.0f, -1.0f),
        new vec3(-1.0f, -1.0f, 1.0f),
    };

 

有了顶点的位置，下面给出每个顶点的颜色。

        /// <summary>
        /// 金字塔的color array.
        /// </summary>
        static vec3[] colors = new vec3[]
    {
        new vec3(1.0f, 0.0f, 0.0f),
        new vec3(0.0f, 1.0f, 0.0f),
        new vec3(0.0f, 0.0f, 1.0f),
        new vec3(1.0f, 0.0f, 0.0f),
        new vec3(0.0f, 0.0f, 1.0f),
        new vec3(0.0f, 1.0f, 0.0f),
        new vec3(1.0f, 0.0f, 0.0f),
        new vec3(0.0f, 1.0f, 0.0f),
        new vec3(0.0f, 0.0f, 1.0f),
        new vec3(1.0f, 0.0f, 0.0f),
        new vec3(0.0f, 0.0f, 1.0f),
        new vec3(0.0f, 1.0f, 0.0f),
    };

 

准备shader program

在使用VBO前，需要准备好shader program。你只需知道OpenGL会给我们一个ShaderProgram的uint值代表它。VAO、VBO、texture也都有这样一个uint值。

        protected void InitializeShader(out ShaderProgram shaderProgram)
        {
            var vertexShaderSource = ManifestResourceLoader.LoadTextFile(@"SceneElements.PyramidElement.vert");
            var fragmentShaderSource = ManifestResourceLoader.LoadTextFile(@"SceneElements.PyramidElement.frag");

            shaderProgram = new ShaderProgram();
            shaderProgram.Create(vertexShaderSource, fragmentShaderSource, null);

            shaderProgram.AssertValid();
        }

 

这里我们给出vertex shader。此shader里有' in_Position'、' in_Color'两个in变量，分别与positions和colors的VBO对应。

#version 150 core

in vec3 in_Position;
in vec3 in_Color;  
out vec4 pass_Color;

uniform mat4 MVP;

void main(void) 
{
    gl_Position = MVP * vec4(in_Position, 1.0);

    pass_Color = vec4(in_Color, 1.0);
}

初始化VBO

在这个四面体的例子中，我们需要为positions创建一个VBO，然后为colors再创建一个VBO。现在，positions是CPU内存中的数据，我们要把它上传到GPU内存中。

                var positionBufferObject = new uint[1];
                // 创建VBO
                GL.GenBuffers(1, this.positionBufferObject);
                // 绑定VBO（选中此VBO）
                GL.BindBuffer(BufferTarget.ArrayBuffer, positionBufferObject[0]);
                // 将托管的数据转到非托管内存
                UnmanagedArray<vec3> positionArray = new UnmanagedArray<vec3>(positions.Length);
                for (int i = 0; i < positions.Length; i++)
                {
                    positionArray[i] = positions[i];
                }

                // 将position属性上传到GPU内存，即为VBO填入数据
                GL.BufferData(BufferTarget.ArrayBuffer, positionArray, BufferUsage.StaticDraw);

                positionArray.Dispose();

 

 

这里的GL.GenBuffers、GL.BindBuffer和GL.BufferData完成了初始化VBO的工作。

初始化colors的VBO的过程同上。

VBO初始化完成后，内存中的数组就可以删掉了。

用VBO进行渲染

渲染时的操作如下：

指定顶点属性

                // 绑定VBO（选中此VBO）
                GL.BindBuffer(BufferTarget.ArrayBuffer, positionBufferObject[0]);
                //获取shader中的’in_Position’的指针。
                uint positionLocation = shaderProgram.GetAttributeLocation(strin_Position);
                // 当前VBO（此时为positions的VBO）对应ShaderProgram里的'in_Position'in变量。每3个float（即一个顶点）为一个数据单元。
                GL.VertexAttribPointer(positionLocation, 3, GL.GL_FLOAT, false, 0, IntPtr.Zero);
                // 启用此顶点属性数组。
                GL.EnableVertexAttribArray(positionLocation);

这是指定顶点的position属性的过程，指定顶点的color属性的过程同上。

无索引渲染

各个属性都指定好了，就该开始渲染了：

// 指定要使用哪个VAO。
GL.BindVertexArray(vao[0]);
// 依照VBO中的顺序渲染12个顶点（用渲染三角形的方式）。
GL.DrawArrays(GL.GL_TRIANGLES, 0, 12);
// 不再指定VAO。
GL.BindVertexArray(0);

有索引渲染

上面的渲染方式不能重复利用同一个顶点，而下面的用索引进行渲染的方式则可以。

为了使用索引进行渲染，我们先要初始化一个索引的VBO。这与初始化顶点属性VBO是同样的步骤。

                var indexBufferObject = new uint[1];
                GL.GenBuffers(1, indexBufferObject);
                GL.BindBuffer(BufferTarget.ElementArrayBuffer, indexBufferObject[0]);
                UnmanagedArray<uint> indexArray = new UnmanagedArray<uint>(12);
                for (int i = 0; i < indexArray.Length; i++)
                {
                    indexArray[i] = (uint)i;
                }
                GL.BufferData(BufferTarget.ElementArrayBuffer, indexArray, BufferUsage.StaticDraw);
                indexArray.Dispose();

然后用索引进行渲染：

            GL.BindVertexArray(vao[0]);
            // 依照依照索引VBO中给定的顺序渲染12个顶点（用渲染三角形的方式）
            GL.DrawElements(GL.GL_TRIANGLES, 12, GL.GL_UNSIGNED_INT, IntPtr.Zero);
            GL.BindVertexArray(0); 

OpenGL是如何看待VBO的

从上面的初始化和渲染过程来看，OpenGL里有这样一些概念。

顶点属性(vertex property)

在OpenGL中，想渲染一个顶点，至少需要知道它的位置和颜色这两个信息。位置、颜色这样的信息就称为顶点的属性。当然，像法线等也都是属性。你也可以根据业务需求自定义一些属性。总之，一个VBO描述的是一组顶点的某个属性。例如上文我们定义了一个描述顶点position属性的VBO和一个描述顶点color属性的VBO。

但是，描述索引的VBO并不是顶点的属性，证据是，索引VBO可以重复引用同一个顶点。这就提醒我们，每个顶点都有且只有1份的才是顶点属性。描述索引的VBO长度不一定等于描述其他顶点属性的VBO的长度。

所以，VBO有描述顶点属性和描述索引两大种类。

显式索引和隐式索引

声明，显式索引和隐式索引是我自创的两个名词，你没听过并不奇怪。

其含义很简单：

显式索引，就是上文中用GL.DrawElements进行渲染的方式。

隐式索引，就是上文中用GL.DrawArrays进行渲染的方式。这种方式没有显式指明索引，但是隐含着的规则是以顶点在VBO中的顺序为索引进行渲染。

封装VBO

有了上面的分析，对VBO的封装就呼之欲出了。

此类图符合VBO分为描述属性和描述索引两类，索引分为显示和隐式两类。

此类图中的对象是为初始化VBO用的。初始化完成后就可以释放掉了。所以有如下的代码：

protected override BufferRenderer CreateRenderer()

{

    uint[] buffers = new uint[1];

    GL.GenBuffers(1, buffers);

    GL.BindBuffer(GL.GL_ARRAY_BUFFER, buffers[0]);

    GL.BufferData(GL.GL_ARRAY_BUFFER, this.ByteLength, this.Header, (uint)this.Usage);

 

    PropertyBufferRenderer renderer = new PropertyBufferRenderer(

    this.VarNameInVertexShader, buffers[0], this.DataSize, this.DataType);

 

    return renderer;

}

 

上述代码中的BufferRenderer是用来反复执行渲染过程的。其类图如下，与VertexBuffer的继承十分对仗。

封装VAO

一个VAO里有多个VBO，就这么简单。

    /// <summary>
    /// 一个vertex array object。（即VAO）
    /// <para>VAO是用来管理VBO的。可以进一步减少DrawCall。</para>
    /// </summary>
    public class VertexArrayObject : IDisposable
    {
        BufferRenderer[] bufferRenderers;
        IndexBufferBaseRenderer indexBufferRenderer;

        /// <summary>
        /// 一个vertex array object。（即VAO）
        /// <para>VAO是用来管理VBO的。可以进一步减少DrawCall。</para>
        /// </summary>
        /// <param name="propertyBuffers">给出此VAO要管理的所有VBO。</param>
        public VertexArrayObject(params BufferRenderer[] propertyBuffers)
        {
            this.bufferRenderers = propertyBuffers;
            foreach (var item in propertyBuffers)
            {
                var renderer = item as IndexBufferBaseRenderer;
                if (renderer != null)
                {
                    indexBufferRenderer = renderer;
                }
            }
        }

        private bool disposedValue;

        /// <summary>
        /// 此VAO的ID，由OpenGL给出。
        /// </summary>
        public uint ID { get; private set; }

        /// <summary>
        /// 在OpenGL中创建VAO。
        /// </summary>
        /// <param name="e"></param>
        /// <param name="shaderProgram"></param>
        public void Create(RenderEventArgs e, Shaders.ShaderProgram shaderProgram)
        {
            uint[] buffers = new uint[1];
            GL.GenVertexArrays(1, buffers);

            this.ID = buffers[0];

            this.Bind();
            foreach (var item in this.bufferRenderers)
            {
                item.Render(e, shaderProgram);
            }
            this.Unbind();
        }

        private void Bind()
        {
            GL.BindVertexArray(this.ID);
        }

        private void Unbind()
        {
            GL.BindVertexArray(0);
        }

        public void Render(RenderEventArgs e, Shaders.ShaderProgram shaderProgram)
        {
            this.Bind();
            this.indexBufferRenderer.Render(e, shaderProgram);
            this.Unbind();
        }

        public override string ToString()
        {
            return string.Format("VAO ID: {0}", this.ID);
        }


        public void Dispose()
        {
            this.Dispose(true);
            GC.SuppressFinalize(this);
        }

        ~VertexArrayObject()
        {
            this.Dispose(false);
        }

        protected virtual void Dispose(bool disposing)
        {

            if (this.disposedValue == false)
            {
                if (disposing)
                {
                    // Dispose managed resources.

                }

                // Dispose unmanaged resources.
                foreach (var item in this.bufferRenderers)
                {
                    item.Dispose();
                }
                GL.DeleteVertexArrays(1, new uint[] { this.ID });
            }

            this.disposedValue = true;
        }

    }

 

详情参考CSharpGL代码即可。