OpenGL系列之十一：Shader图片转场切换动画

OpenGL系列之一：OpenGL第一个程序
OpenGL系列之二：绘制三角形
OpenGL系列之三：三角形顶点增加颜色
OpenGL系列之四：绘制四边形
OpenGL系列之五：绘制点和线
OpenGL系列之六：绘制立方体
OpenGL系列之七：纹理贴图
OpenGL系列之八：立方体纹理贴图
OpenGL系列之九：glsl着色器语言
OpenGL系列之十：VAO、VBO、EBO的应用

实现效果

实现步骤

1.修改glsl

修改fragment.frag为如下

#version 300 es
precision mediump float;

uniform sampler2D utexture0;
uniform sampler2D utexture1;
uniform float uValue;
in vec2 o_uv;
out vec4  fragColor;

void main(void)
{
    if(o_uv.x <= uValue){
        if(o_uv.y <= uValue){
            fragColor = texture(utexture1,vec2(o_uv.x + 1.0f - uValue,o_uv.y + 1.0f - uValue));
        }else{
            fragColor = texture(utexture0,o_uv);
        }
    }else{
        fragColor = texture(utexture0,o_uv);
    }
}

如下图所示，假设uValue的值为0.2的时候，这时假设要绘制的uv坐标为（0.2，0.2），那么我们把第0张图片（蓝色区域）的uv坐标为（0，0）~ （0.2，0.2）的区域换成第1张图片的（0.8，0.8）~ （1.0，1.0）的区域（也就是图片展示的相交的区域）

2.修改C++代码

我们修改CCRender.cpp，为渲染四边形：

/**
 * 先加载VAO VBO EBO等缓存数据
 */
void CCRender::setupRenderingObject()
{
    //顶点数据
    const CCFloat5 cubeVertexs[]  = {
            {  -1.0,-1.0, 1.0 ,  0.0, 0.0 },
            {  -1.0, 1.0, 1.0 ,  0.0, 1.0 },
            {  1.0, -1.0,  1.0 , 1.0, 0.0 },
            {   1.0, 1.0, 1.0 ,  1.0, 1.0 },
    };

    //索引数据
    const short cubeIndexs[]= {
            0, 1, 2,  2, 1, 3,
    };

    ccVAO.Create();
    ccVAO.Bind();

    ccVBO->Create();
    ccVBO->Bind();
    ccVBO->SetBufferData(cubeVertexs,sizeof(cubeVertexs));


    ccEBO->Create();
    ccEBO->Bind();
    ccEBO->SetBufferData(cubeIndexs,sizeof(cubeIndexs));

    //数据的位置
    int offset = 0;

    ccOpenGlShader.SetAttributeBuffer(0,GL_FLOAT, (void *)offset, 3, sizeof(CCFloat5));
    ccOpenGlShader.EnableAttributeArray(0);

    //由于数据类型为float，而uv数据的在第四第五的位置，因此需要偏移3个
    offset += 3 * sizeof(float);

    ccOpenGlShader.SetAttributeBuffer(1,GL_FLOAT, (void *)offset, 2, sizeof(CCFloat5));
    ccOpenGlShader.EnableAttributeArray(1);

    ccVAO.Release();
    ccVBO->Release();
    ccEBO->Release();
}

然后是绘制的代码：

/**
 * Shader动画
 */
void CCRender::drawShaderAnim() {
//    m_angle += 0.05f;

    u_value += 0.003f;
    if(u_value >= 1.0){
        u_value = 1.0;
    }

    glm::mat4x4  objectMat;
    glm::mat4x4  objectTransMat = glm::translate(glm::mat4(1.0f), glm::vec3(0.0f, 0.0f, -3));
    glm::mat4x4  objectRotMat = glm::rotate(glm::mat4(1.0f),m_angle,glm::vec3(1.0f, 1.0f, 1.0) );
    glm::mat4x4  objectScaleMat = glm::scale(glm::mat4(1.0f),glm::vec3(0.7f, 0.7f, 0.3) );

    glm::mat4 projMat = glm::perspective(glm::radians(60.0f), (float)9/(float)18, 0.1f, 1000.0f);
    objectMat = projMat* objectTransMat * objectScaleMat* objectRotMat ;

    ccOpenGlShader.Bind();

    ccOpenGlShader.SetUniformValue("u_mat",objectMat);
    //设置变化的值
    ccOpenGlShader.SetUniformValue("uValue",u_value);

    ccVAO.Bind();
    
    glActiveTexture(GL_TEXTURE0);
    glBindTexture(GL_TEXTURE_2D,ccTexture.m_texID[0]);
    //给变量utexture0设置值
    ccOpenGlShader.SetUniformValue("utexture0",0);

    glActiveTexture(GL_TEXTURE1);
    //给变量utexture1设置值
    glBindTexture(GL_TEXTURE_2D,ccTexture.m_texID[1]);
    ccOpenGlShader.SetUniformValue("utexture1",1);

    glDrawElements(GL_TRIANGLES,6,GL_UNSIGNED_SHORT,(void *)0);
    ccOpenGlShader.Release();
    ccVAO.Release();
    glBindTexture(GL_TEXTURE_2D,0);
}

上面的代码中加入了u_value变量，然后需要设置给glsl那边，再就是本案例涉及到两个Texture的绑定和绘制，需要将texture设置给glsl

案例源码

https://gitee.com/itfitness/opengl-shader-anim01