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  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  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, );//texture1.Name);
             GL.ActiveTexture(GL.GL_TEXTURE0);
             GL.Enable(GL.GL_TEXTURE_2D);
             texture1.Bind();

             //设定第二个贴图
             program.SetUniform(strtexture2, );//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();
         }

Renderer.DoRender(RenderEventArgs e)

总结

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

//设定第一个贴图

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

GL.ActiveTexture(GL.GL_TEXTURE0);

GL.Enable(GL.GL_TEXTURE_2D);

texture1.Bind();