CSharpGL(10)两个纹理叠加

CSharpGL(10)两个纹理叠加

本文很简单，只说明如何用shader实现叠加两个纹理的效果。

另外，最近CSharpGL对渲染框架做了修改，清理一些别扭的内容（DoRender()前后的事件都去掉了，明确了Renderer的概念）。本文顺带也成了对新框架的一个应用过程的例子。

下载

这个示例是CSharpGL的一部分，CSharpGL已在GitHub开源，欢迎对OpenGL有兴趣的同学加入（https://github.com/bitzhuwei/CSharpGL）

先写shader

Shader是算法，VBO是数据结构。数据结构常有，而算法不常有。先写shader，万事可定。

Vertex shader

顶点shader用来设定顶点位置，传递贴图的UV坐标到fragment shader。

#version 150 core

in vec3 in_Position;
in vec2 in_UV;  
out vec2 pass_UV;

uniform mat4 projectionMatrix;
uniform mat4 viewMatrix;
uniform mat4 modelMatrix;

void main(void) 
{
    gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(in_Position, 1.0);

    pass_UV = in_UV;
}

Fragment shader

片段shader根据UV坐标获取两个贴图上的颜色，然后按指定比例叠加。

#version 150 core

in vec2 pass_UV;//从vertex shader传来的UV坐标
out vec4 out_Color;//fragment shader的输出，名字不必是out_Color
uniform sampler2D texture1;
uniform sampler2D texture2;
uniform float percent;//叠加比例

void main(void) 
{
    out_Color = texture(texture1, pass_UV) * percent + texture(texture2, pass_UV) * (1.0 - percent);
}

后写Renderer

一个Renderer对应一个(vertex shader+fragment shader+.. shader)组成的shader program。指定两个纹理的关键步骤见下面的代码。

        protected override void DoRender(RenderEventArgs e)
        {
            ShaderProgram program = this.shaderProgram;
            // 绑定shader
            program.Bind();

            program.SetUniformMatrix4(strprojectionMatrix, projectionMatrix.to_array());
            program.SetUniformMatrix4(strviewMatrix, viewMatrix.to_array());
            program.SetUniformMatrix4(strmodelMatrix, modelMatrix.to_array());

            //设定第一个贴图
            program.SetUniform(strtexture1, 0);//texture1.Name);
            GL.ActiveTexture(GL.GL_TEXTURE0);
            GL.Enable(GL.GL_TEXTURE_2D);
            texture1.Bind();

            //设定第二个贴图
            program.SetUniform(strtexture2, 1);//texture2.Name);
            GL.ActiveTexture(GL.GL_TEXTURE1);
            GL.Enable(GL.GL_TEXTURE_2D);
            texture2.Bind();
            
            program.SetUniform(strpercent, percent);

            if (this.vertexArrayObject == null)
            {
                var vertexArrayObject = new VertexArrayObject(
                    this.positionBufferRenderer,
                    this.colorBufferRenderer,
                    //this.normalBufferRenderer,
                    this.indexBufferRenderer);
                //创建的过程就是执行一次渲染的过程，所以不必再调用Render(e, program);
                vertexArrayObject.Create(e, program);

                this.vertexArrayObject = vertexArrayObject;
            }
            else
            {
                this.vertexArrayObject.Render(e, program);
            }

            // 解绑shader
            program.Unbind();

            texture2.Unbind();
            texture1.Unbind();
        }

 

总结

要同时使用多个贴图的关键是调用GL.ActiveTexture(GL.GL_TEXTURE0);

//设定第一个贴图

program.SetUniform(strtexture1, 0);//texture1.Name);

GL.ActiveTexture(GL.GL_TEXTURE0);

GL.Enable(GL.GL_TEXTURE_2D);

texture1.Bind();