学习之路系列
本篇主要内容
多重纹理渲染
效果展示
- 这个效果看起来有点诡异
实现过程
- 我这里先把上期的效果Copy过来, 我直接在这上面添加纹理
1.顶点着色器
首相我们在顶点着色器(TextureVertex.glsl)里面添加一段声明
attribute vec2 TexCoordIn;
varying vec2 TexCoordOut;
把下面这段代码添加到main函数的末尾
TexCoordOut = TexCoordIn;
修改完成后如下图:
接着我们在片段着色器(TextureFragment.glsl)里面添加代码
uniform sampler2D ourTexture1;
varying lowp vec2 TexCoordOut;
把下面这段代码
gl_FragColor = OutColor;
改为
gl_FragColor = OutColor * texture2D(ourTexture1, TexCoordOut);
2.设置纹理数据
/*
* 通过UIImage的方式获取纹理对象
*/
+ (GLuint)getTextureImageName:(NSString *)imageName {
// 获取UIImage并转换成CGImage
CGImageRef spriteImage = [UIImage imageNamed:imageName].CGImage;
if(!spriteImage) {
return 0;
}
// 获取图片的大小
GLsizei width = (GLsizei)CGImageGetWidth(spriteImage);
GLsizei height = (GLsizei)CGImageGetHeight(spriteImage);
// 分配内存，并初始化该内存空间为零, 因为一个像素有4个通道(RGBA)所以乘4
GLubyte * spriteData = (GLubyte *)calloc(width * height * 4, sizeof(GLubyte));
/*
* 创建位图上下文
*/
CGContextRef spriteContext = CGBitmapContextCreate(spriteData, width, height, 8, width*4,
CGImageGetColorSpace(spriteImage), kCGImageAlphaPremultipliedLast);
// 在上下文中绘制
CGContextDrawImage(spriteContext, CGRectMake(0, 0, width, height), spriteImage);
// 释放上下文
CGContextRelease(spriteContext);
// 创建纹理对象并且绑定, 纹理对象用无符号整数表示, 这个纹理对象相当于我们在C语言文件操作里面的句柄
GLuint texName;
glGenTextures(1, &texName);
glBindTexture(GL_TEXTURE_2D, texName);
// 加载图像数据, 并上传纹理
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, width, height, 0, GL_RGBA, GL_UNSIGNED_BYTE, spriteData);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
// 解绑纹理对象(在本文这里解不解绑都一样，因为后面还是要绑定)
glBindTexture(GL_TEXTURE_2D, 0);
// 释放分配的内存空间
free(spriteData);
return texName;
}
上面的这些函数讲解可以看这篇文章 LearnOpenGL👍, 里面还有例子, 讲解的很详细
2.获取着色器里的变量
我们在compileShaders方法下新增一段代码
_textureSlot = glGetAttribLocation(_program, "TexCoordIn");
glEnableVertexAttribArray(_textureSlot);
_textureUniform = glGetUniformLocation(_program, "ourTexture1");
//获取纹理对象
_texture1 = [TextureManager getTextureImageName:@"Texture1.jpg"];
3. 开始渲染
在render方法中新增一段代码
static const float Texture[] = {
0, 0,
1, 0,
0, 1,
1, 1,
};
glVertexAttribPointer(_textureSlot, 2, GL_FLOAT, GL_FALSE, 0, Texture);
上面这段代码可以参照上一篇文章
//使用纹理单元
glActiveTexture(GL_TEXTURE0);
//绑定纹理对象
glBindTexture(GL_TEXTURE_2D, _texture1);
//这里的参数要对应纹理单元(如果纹理单元为0,这里也要给0)
glUniform1i(_textureUniform, 0);
这里讲到了两个东西纹理单元和纹理对象
-
纹理对象:
也就是上面我们提到的类似于C语言中文件操作的句柄
-
纹理单元:
纹理单元就是将程序中的纹理贴图反应到像素位置的运算单元，显卡会划分N个纹理存储区域，多重纹理可以开启多个纹理单元。上面的glUniform1i(_textureUniform, 0);这段代码对应的就是纹理单元的位置。
纹理单元的数量跟硬件有关，苹果给用的纹理单元数量如下:
/* TextureUnit */
#define GL_TEXTURE0 0x84C0
#define GL_TEXTURE1 0x84C1
#define GL_TEXTURE2 0x84C2
#define GL_TEXTURE3 0x84C3
#define GL_TEXTURE4 0x84C4
#define GL_TEXTURE5 0x84C5
#define GL_TEXTURE6 0x84C6
#define GL_TEXTURE7 0x84C7
#define GL_TEXTURE8 0x84C8
#define GL_TEXTURE9 0x84C9
#define GL_TEXTURE10 0x84CA
#define GL_TEXTURE11 0x84CB
#define GL_TEXTURE12 0x84CC
#define GL_TEXTURE13 0x84CD
#define GL_TEXTURE14 0x84CE
#define GL_TEXTURE15 0x84CF
#define GL_TEXTURE16 0x84D0
#define GL_TEXTURE17 0x84D1
#define GL_TEXTURE18 0x84D2
#define GL_TEXTURE19 0x84D3
#define GL_TEXTURE20 0x84D4
#define GL_TEXTURE21 0x84D5
#define GL_TEXTURE22 0x84D6
#define GL_TEXTURE23 0x84D7
#define GL_TEXTURE24 0x84D8
#define GL_TEXTURE25 0x84D9
#define GL_TEXTURE26 0x84DA
#define GL_TEXTURE27 0x84DB
#define GL_TEXTURE28 0x84DC
#define GL_TEXTURE29 0x84DD
#define GL_TEXTURE30 0x84DE
#define GL_TEXTURE31 0x84DF
#define GL_ACTIVE_TEXTURE 0x84E0
运行效果
发现图像是反的，解决办法有两个
- 1、修改顶点数据
- 2、修改着色器中的纹理数据
这里使用第二种办法, 将顶点着色器(TextureVertex.glsl)中的
TexCoordOut = TexCoordIn;
改为
TexCoordOut = vec2(TexCoordIn.x, 1. - TexCoordIn.y);
把Y轴颠倒一下以后在运行看看效果
新增纹理
在片段着色器(TextureFragment.glsl)中新增一个变量
uniform sampler2D ourTexture2;
把
gl_FragColor = OutColor * texture2D(ourTexture1, TexCoordOut);
改为
gl_FragColor = OutColor * mix(texture2D(ourTexture1, TexCoordOut), texture2D(ourTexture2, TexCoordOut), 0.7);
mix函数是一个混合线性函数，声明及算法如下
genType mix (genType x, genType y, genType a)
x ⋅ ( 1 − a ) + y ⋅ a
在中compileShaders方法的底部新增下面两端代码
_textureUniform2 = glGetUniformLocation(_program, "ourTexture2");
_texture2 = [TextureManager getTextureImageName:@"Texture2.jpg"];
在渲染方法render新增
glActiveTexture(GL_TEXTURE1);
glBindTexture(GL_TEXTURE_2D, _texture2);
glUniform1i(_textureUniform2, 1);
运行效果
- (void)dealloc {
//删除绑定的渲染缓冲区
if(_renderBuffer) {
glDeleteRenderbuffers(GL_RENDERBUFFER, &_renderBuffer);
}
//删除绑定的帧缓冲区
if(_frameBuffer) {
glDeleteFramebuffers(GL_FRAMEBUFFER, &_frameBuffer);
}
//释放着色器
if(_vertexShader) {
//删除顶点着色器连接
glDetachShader(_program, _vertexShader);
//删除顶点着色器
glDeleteShader(_vertexShader);
}
if(_fragmentShader) {
//删除片段着色器连接
glDetachShader(_program, _fragmentShader);
//删除片段着色器
glDeleteShader(_fragmentShader);
}
if(_program) {
glDeleteProgram(_program);
}
glDisableVertexAttribArray(_positionSlot);
glDisableVertexAttribArray(_colorSlot);
glDisableVertexAttribArray(_textureSlot);
glDeleteTextures(1, &_texture1);
glDeleteTextures(1, &_texture2);
glBindTexture(GL_TEXTURE_2D, 0);
}
最后记得将资源释放
Demo链接:LearnOpenGLES
