OpenGL ES案例03 - 使用GLSL完成纹理图片加载

案例：根据对GLSL语言的理解，自定义一个顶点着色器和一个片元着色器，使用着色器API完成纹理的加载。
进阶：解决纹理倒置问题。
效果如下：


翻转前效果

翻转后效果

准备工作

  1. 新建iOS应用工程，修改当前controller的view。将原来的view继承于UIView改成继承于HView。
  2. 自定义一个HVIew类，后续绘制图片在该类中完成。
  3. 新建顶点着色器文件和片元着色器文件。
    3.1 command + N，开始新建文件。
    3.2 选择iOS->Other->Empty，新建两个空文件，分别命名为：shaderv.vsh、shaderf.fsh

至此准备工作完成，接下来就开始编码工作。

自定义着色器

自定义着色器本质上其实是一个字符串，但是在Xcode的编写过程没有任何错误提示，因此，在编写过程中需要格外仔细。

  1. 顶点着色器shaderv.vsh
  • 定义两个attribute修饰符修饰的变量，分别表示顶点坐标和纹理坐标
  • 定义一个varying修饰符修饰的变量，用于将纹理坐标从顶点着色器传递给片元着色器
  • main函数，在该函数内给内建变量gl_Position赋值。若顶点坐标不需要变换，则直接将顶点坐标赋值给内建变量gl_Position。若顶点坐标需要进行变换，则将变换后的结果赋值给内建变量gl_Position。
attribute vec4 position;
attribute vec2 textCoordinate;
varying lowp vec2 varyTextCoord;
void main(){
    varyTextCoord = textCoordinate;
    gl_Position = position;
}

2.片元着色器shaderf.fsh

  • 指定片元着色器中float类型的精度，如果不写，可能会报一些异常错误
  • 定义一个与顶点着色器桥接的纹理坐标，写法必须同在顶点着色器写法一致，否则将无法收到从顶点着色器传递过来的数据
  • 定义一个unifom修饰符修饰的变量，用于获取纹理坐标上每个像素点的纹素。
  • main函数，在函数内给内建变量gl_FragColor赋值。通过texture2D内建函数获取当前颜色值，它有两个参数：参数1：纹理图片；参数2：纹理坐标，返回值：vec4类型的颜色值。当颜色不需要进行修改时，可直接将vec4类型的颜色值赋值给内建变量gl_FragColor。当颜色需要修改时，将最终修改的结果赋值给内建变量gl_FragColor。
precision highp float;
varying lowp vec2 varyTextCoord;
uniform sampler2D colorMap;
void main(){
    gl_FragColor = texture2D(colorMap, varyTextCoord);
}

初始化

1. 创建图层

1.1 图层主要是显示OpenGL ES绘制内容的载体。它的创建有两种方式：
  • 直接使用当前view的layer。但是view的layer是继承于CALayer，需要重写类方法layerClass，使其继承于CAEAGLLayer。
  • 直接使用[[CAEAGLLayer alloc] init]方法创建一个CAEAGLLayer类型的图层，并将新创建的图层添加到当前图层上。
self. myEagLayer = (CAEAGLLayer*)self.layer;
+ (Class)layerClass{
    return [CAEAGLLayer class];
}
1.2 设置scale，这里设置当前view的scale与屏幕的scale一样大
[self setContentScaleFactor:[[UIScreen mainScreen] scale]];
1.3 设置描述属性，这里设置不维持渲染内容以及颜色格式为RGBA8
  • kEAGLDrawablePropertyRetainedBacking：表示绘图表面显示后，是否保留其内容，true-保留，false-不保留。
  • kEAGLDrawablePropertyColorFormat：可绘制表面的内部颜色缓存区格式，这个key对应的值是一个NSString指定特定颜色缓存区对象。默认是kEAGLColorFormatRGBA8；
颜色缓冲区格式 描述
kEAGLColorFormatRGBA8 32位RGBA的颜色，4*8=32位
kEAGLColorFormatRGB565 16位RGB的颜色
kEAGLColorFormatSRGBA8 sRGB代表了标准的红、绿、蓝，即CRT显示器、LCD显示器、投影机、打印机以及其他设备中色彩再现所使用的三个基本色素。sRGB的色彩空间基于独立的色彩坐标，可以使色彩在不同的设备使用传输中对应于同一个色彩坐标体系，而不受这些设备各自具有的不同色彩坐标的影响。 
self.myEagLayer.drawableProperties = [NSDictionary dictionaryWithObjectsAndKeys:@false, kEAGLDrawablePropertyRetainedBacking, kEAGLColorFormatSRGBA8, kEAGLDrawablePropertyColorFormat, nil];

2. 创建上下文

上下文主要用来保存OpenGL ES的状态，是一个状态机，不论GLKit还是GLSL，都需要使用context。
2.1 创建上下文，并指定OpenGL ES渲染API的版本号

self.myContext = [[EAGLContext alloc] initWithAPI:kEAGLRenderingAPIOpenGLES3];

2.2 设置当前上下文

[EAGLContext setCurrentContext:self.myContext];

3. 清空缓冲区

清除缓冲区的残留数据，防止其它无用数据对绘制效果造成影响

//清空渲染缓存区
glDeleteBuffers(1, &_myColorRenderBuffer);
self.myColorRenderBuffer = 0;
    
//清空帧缓存区
glDeleteBuffers(1, &_myColorFrameBuffer);
self.myColorFrameBuffer = 0;

4. 设置缓冲区

设置缓冲区包括设置RenderBuffer和FrameBuffer。

  1. RenderBuffer：是一个通过应用分配的2D图像缓冲区，需要附着在FrameBuffer上。
    1.1 RenderBuffer有3种缓冲区

    • 深度缓冲区（Depth Buffer）：存储深度值等
    • 纹理缓冲区（Depth Buffer）：存储纹理坐标中对应的纹素、颜色值等
    • 模板缓冲区（Stencil Buffer）：存储模板等

    1.2 设置RenderBuffer

    • 定义一个缓存区ID
    • 申请一个缓冲区标志
    • 将缓冲区标识绑定到GL_RENDERBUFFER
    • 绑定一个可绘制对象（layer）的存储到一个OpenGL ES RenderBuffer对象
-(void)setupRenderBuffer{
    //1.定义一个缓存区ID
    GLuint buffer;
    //2.申请一个缓存区标志
    glGenRenderbuffers(1, &buffer);
    
    self.myColorRenderBuffer = buffer;
    
    glBindRenderbuffer(GL_RENDERBUFFER, self.myColorRenderBuffer);
    
    [self.myContext renderbufferStorage:GL_RENDERBUFFER fromDrawable:self.myEagLayer];
}

  1. FrameBuffer：是一个收集颜色、深度、模板缓冲区的附着点，简称FBO，即是一个管理者，用来管理RenderBuffer，且FrameBuffer没有实际的存储功能，真正实现存储的是RenderBuffer。
    2.1 FrameBuffer有3个附着点

    • 颜色附着点（Color Attachment）：管理纹理、颜色缓冲区
    • 深度附着点（depth Attachment）：管理深度缓冲区，会根据当前深度缓冲中的值修改颜色缓冲中的内容
    • 模板附着点（Stencil Attachment）：管理模板缓冲区

    2.2 设置FrameBuffer

    • 定义一个缓存区ID
    • 申请一个缓冲区标志
    • 将缓冲区标识绑定到GL_FRAMEBUFFER
    • 通过FrameBuffer来管理RenderBuffer，将RenderBuffer附着到FrameBuffer的GL_COLOR_ATTACHMENT0附着点上。
-(void)setupFrameBuffer{
    GLuint buffer;
    glGenFramebuffers(1, &buffer);
    
    self.myColorFrameBuffer = buffer;
    
    glBindFramebuffer(GL_FRAMEBUFFER, self.myColorFrameBuffer);
    
    glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_RENDERBUFFER, self.myColorRenderBuffer);
}

注意点：绑定renderBuffer和FrameBuffer是有顺序的，先有RenderBuffer，才有FrameBuffer。

开始绘制

初始化

清除屏幕颜色，清空颜色缓冲区，设置视口大小。

//设置清屏颜色
glClearColor(0.3, 0.45, 0.5, 1.0);
    
//清除屏幕
glClear(GL_COLOR_BUFFER_BIT);

//1.设置视口大小
CGFloat scale = [[UIScreen mainScreen] scale];
glViewport(self.frame.origin.x * scale, self.frame.origin.y * scale, self.frame.size.width * scale, self.frame.size.height * scale);

加载自定义着色器

1. 读取并编译顶点着色程序、片元着色程序

1.1 创建一个顶点/片元着色器

*shader = glCreateShader(type);

1.2 以字符串的形式将着色器源码读取出来，并将着色器源码加载到着色器对象上

NSString* content = [NSString stringWithContentsOfFile:file encoding:NSUTF8StringEncoding error:nil];
const GLchar* source = (GLchar*)content.UTF8String;
glShaderSource(*shader, 1, &source, NULL);

1.3 编译着色器，把着色器源代码编译成目标代码。此时得到一个可附着到程序的着色器对象

glCompileShader(*shader);
2. 加载着色器

2.1 创建program

GLint program = glCreateProgram();

2.2 将编译好的着色器对象附着到程序中

glAttachShader(program, verShader);
glAttachShader(program, fragShader);

2.3 释放不需要的着色器对象

glDeleteShader(verShader);
glDeleteShader(fragShader);
  1. 链接program
    在链接之后可调用glGetProgramiv函数判断当前是否链接成功
glLinkProgram(self.myPrograme);
  1. 使用program
glUseProgram(self.myPrograme);

设置并处理顶点数据

  1. 设置顶点数据
GLfloat attrArr[] ={
    0.5f, -0.5f, -1.0f,     1.0f, 0.0f,
    -0.5f, 0.5f, -1.0f,     0.0f, 1.0f,
    -0.5f, -0.5f, -1.0f,    0.0f, 0.0f,
        
    0.5f, 0.5f, -1.0f,      1.0f, 1.0f,
    -0.5f, 0.5f, -1.0f,     0.0f, 1.0f,
    0.5f, -0.5f, -1.0f,     1.0f, 0.0f,
};
  1. 申请一个顶点缓冲区ID，并将它绑定到GL_ARRAY_BUFFER标识符上
GLuint attrBuffer;
glGenBuffers(1, &attrBuffer);
glBindBuffer(GL_ARRAY_BUFFER, attrBuffer);
  1. 把顶点数据从CPU拷贝到GPU
glBufferData(GL_ARRAY_BUFFER, sizeof(attrArr), attrArr, GL_DYNAMIC_DRAW);
  1. 打开顶点/片元着色器属性通道
  • 通过glGetAttribLocation函数获取顶点属性入口，它需要两个参数，参数1：program；参数2：自定义着色器文件中变量名称的字符串，重点：这里的字符串必须同自定义着色器文件中变量名称保持一致。
  • 通过glEnableVertexAttribArray函数打开着色器的属性通道
  • 通过glVertexAttribPointer函数设置读取方式
//设置顶点坐标
GLuint position = glGetAttribLocation(self.myPrograme, "position");
glEnableVertexAttribArray(position);
glVertexAttribPointer(position, 3, GL_FLOAT, GL_FALSE, 5*sizeof(GLfloat), NULL);

//设置纹理坐标
GLuint textCoor = glGetAttribLocation(self.myPrograme, "textCoordinate");
glEnableVertexAttribArray(textCoor);
glVertexAttribPointer(textCoor, 2, GL_FLOAT, GL_FALSE, 5*sizeof(GLfloat), (float *)NULL + 3);

加载纹理

加载纹理的过程是将png/jpg图片解压缩成位图，并通过自定义着色器读取每个像素点的纹素。

  1. 解压缩png/jpg图片，将UIImage转换为CGImageRef。
CGImageRef spriteImage = [UIImage imageNamed:fileName].CGImage;
  1. 根据CGImageRef属性获取图片的宽和高，并开辟一段空间用于存放解压缩后的位图信息。位图数据的大小为宽高4。为什么是宽高4？因为图片共有宽高个像素点，每个像素点有4个字节，即RGBA，因此共有宽高*4大小的空间。
//读取图片的大小，宽和高
size_t width = CGImageGetWidth(spriteImage);
size_t height = CGImageGetHeight(spriteImage);

//获取图片字节数 宽*高*4（RGBA）
GLubyte * spriteData = (GLubyte *) calloc(width * height * 4, sizeof(GLubyte));
  1. 创建CGContextRef上下文
/*
 参数1：data,指向要渲染的绘制图像的内存地址
 参数2：width,bitmap的宽度，单位为像素
 参数3：height,bitmap的高度，单位为像素
 参数4：bitPerComponent,内存中像素的每个组件的位数，比如32位RGBA，就设置为8
 参数5：bytesPerRow,bitmap的没一行的内存所占的比特数
 参数6：colorSpace,bitmap上使用的颜色空间  kCGImageAlphaPremultipliedLast：RGBA
 */
CGContextRef spriteContext = CGBitmapContextCreate(spriteData, width, height, 8, width*4,CGImageGetColorSpace(spriteImage), kCGImageAlphaPremultipliedLast);
  1. 在CGContextRef上将图片绘制出来，调用CGContextDrawImage函数，使用默认方式绘制
/*
 CGContextDrawImage 使用的是Core Graphics框架，坐标系与UIKit 不一样。UIKit框架的原点在屏幕的左上角，Core Graphics框架的原点在屏幕的左下角。
 CGContextDrawImage 
 参数1：绘图上下文
 参数2：rect坐标
 参数3：绘制的图片
*/
CGContextDrawImage(spriteContext, rect, spriteImage);
  1. 绘制完成之后，需要将上下文释放掉
CGContextRelease(spriteContext);
  1. 经过重绘之后，就将jpg/png图片转换成了位图得到了纹理数据。接下来就是载入纹理数据。
    6.1 绑定纹理到默认的纹理ID
    6.2 设置纹理属性
    6.3 载入2D纹理数据
//绑定纹理到默认的纹理ID
glBindTexture(GL_TEXTURE_2D, 0);

//设置纹理属性
/*
 参数1：纹理维度
 参数2：线性过滤、为s,t坐标设置模式
 参数3：wrapMode,环绕模式
*/
glTexParameteri( GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR );
glTexParameteri( GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR );
glTexParameteri( GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
glTexParameteri( GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);

/*
 参数1：纹理模式，GL_TEXTURE_1D、GL_TEXTURE_2D、GL_TEXTURE_3D
 参数2：加载的层次，一般设置为0
 参数3：纹理的颜色值GL_RGBA
 参数4：宽
 参数5：高
 参数6：border，边界宽度
 参数7：format
 参数8：type
 参数9：纹理数据
*/
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, width, height, 0, GL_RGBA, GL_UNSIGNED_BYTE, spriteData);

//释放spriteData
free(spriteData);
  1. 设置纹理采样器
    主要是用来获取纹理中对应像素点的颜色值，即纹素。
  • 通过glGetUniformLocation函数获取片元着色器中uniform的入口。该函数需要传入两个参数，参数1：program；参数2：在片元着色器中用uniform修饰的变量名字的字符串。注意，该字符串必须同片元着色器中对应的变量名保持一致。
  • 使用glUniform1i函数获取纹素，它也有两个参数，参数1：片元着色器中uniform的入口；参数2：纹理ID，默认为0。
glUniform1i(glGetUniformLocation(self.myPrograme, "colorMap"), 0);

绘制

开始绘制，存储到RenderBuffer，从RenderBuffer将图片显示到屏幕上。

  • 调用glDrawArrays函数，指定图元连接方式进行绘制
  • context调用presentRenderbuffer函数将绘制好的图片渲染到屏幕上显示
glDrawArrays(GL_TRIANGLES, 0, 6);
[self.myContext presentRenderbuffer:GL_RENDERBUFFER];

至此，使用GLSL加载纹理已经完成，完整代码见Demo地址；

从效果图上看到，图片呈倒立显示，这是因为OpenGL要求原点(0,0)位于图片的左下角，Y坐标从下往上增加，而图片纹理的原点(0,0)是位于图片的左上角，Y坐标从上往下增加。所以最后的照片呈上下倒置的效果。
以下是几种解决方案：

  • 方案1：将顶点绕Y轴进行翻转。这样可以实现正常显示。
    问题：如何实现绕Y轴翻转
    解决：将顶点坐标与一个旋转矩阵相乘，得到的结果就是翻转之后的顶点坐标。
    重点：在3D课程中用的是横向量，在OpenGL ES用的是列向量。顶点坐标是一个1行4列的矩阵，因此，旋转矩阵必须是4行4列，这样相乘之后才能得到新的1行4列的顶点坐标。另外，要实现翻转，只需要将该方向的坐标数据进行反向，如当前需要沿X轴反向，只需要将X轴的数据全部*-1，即可将X轴的数据翻转。
    代码详见方案1代码
  • 方案2：可以解压缩图片的时候对图片进行翻转。
    解决：在context绘制的图片，对图片进行翻转。
    重点：由于翻转之后，顶点数据的坐标会发生变化，超过绘制的区域，因此在翻转之后需要将顶点移至绘制区域内。
    主要使用的函数有
//先平移至合适的位置，也可以在翻转之后再移至绘制区域内
CGContextTranslateCTM(context, 0, height);
//将Y轴翻转
CGContextScaleCTM(context, 1, -1);

代码详见方案2代码

  • 方案3：修改片元着色器纹理坐标，将片元着色器中的纹理坐标在Y轴方向翻转。
    重点：如何获取纹理坐标的Y轴方向数据，通过'varyTextCoord.y'即可得到Y轴数据。将1.0-varyTextCoord.y即可实现翻转。
vec2 newCoord = vec2(varyTextCoord.x, 1.0-varyTextCoord.y);
gl_FragColor = texture2D(colorMap, newCoord);

代码详见方案3代码

  • 方案4：修改顶点着色器纹理坐标，将顶点着色器的纹理坐标在Y轴方向翻转。
    该方案原理同方案3一样，只是在不同的着色器完成纹理坐标的翻转。
    代码详见方案4代码

  • 方案5：修改源顶点数据中顶点坐标和纹理坐标的映射关系。
    原理同方案3、4一致，只是直接在顶点数组中修改源数据。
    原顶点数据数组

GLfloat attrArr[] ={
    0.5f, -0.5f, -1.0f,     1.0f, 0.0f,
    -0.5f, 0.5f, -1.0f,     0.0f, 1.0f,
    -0.5f, -0.5f, -1.0f,    0.0f, 0.0f,

    0.5f, 0.5f, -1.0f,      1.0f, 1.0f,
    -0.5f, 0.5f, -1.0f,     0.0f, 1.0f,
    0.5f, -0.5f, -1.0f,     1.0f, 0.0f,
};

修改后的顶点数组

GLfloat attrArr[] ={
    0.5f, -0.5f, -1.0f,     1.0f, 1.0f,
    -0.5f, 0.5f, -1.0f,     0.0f, 0.0f,
    -0.5f, -0.5f, -1.0f,    0.0f, 1.0f,
        
    0.5f, 0.5f, -1.0f,      1.0f, 0.0f,
    -0.5f, 0.5f, -1.0f,     0.0f, 0.0f,
    0.5f, -0.5f, -1.0f,     1.0f, 1.0f,
};

代码详见方案5代码

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 205,132评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 87,802评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 151,566评论 0赞 338
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,858评论 1赞 277
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,867评论 5赞 368
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,695评论 1赞 282
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,064评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,705评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 42,915评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,677评论 2赞 323
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,796评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,432评论 4赞 322
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,041评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,992评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,223评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,185评论 2赞 352
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,535评论 2赞 343