目录
相关文章
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
