阅读 119

OpenGL学习(十一)-- 用 GLSL 实现加载图片

我的 OpenGL 专题学习目录,希望和大家一起学习交流进步!


一、前言

上次我写了一篇 OpenGL学习(九)-- OpenGL ES 初探(下)GLKit,使用 GLKit 加载了一个立体图形,但是我们知道苹果提供的 GLKit 的功能是有限的,所以这次我们就不用 GLKitGLKBaseEffect,而使用编译链接自定义的着色器 (shader),用简单的 GLSL 语言来实现顶点、片元着色器,并实现加载一张图片。 上一篇 OpenGL学习(十)-- 着色语言 GLSL 语法介绍 已经对 GLSL 的语法进行了介绍,有语法不懂的地方可以去看看。

二、GLSL 加载图片的完整流程

学习时,最好是先总结出思维导图,可以帮助我们理解并记忆流程步骤,下面是我画的一张用 GLSL 加载图片的完整的思维导图,里面的如 setuplayer、setupContext 等函数是我根据步骤自己封装出来的,具体可看文末的整体源码。

GLSL加载图片总流程.jpeg

下面着重把绘制的步骤拆分开来,绘制了绘制部分的思维导图:

GLSL加载图片流程.png

三、编写GLSL文件

我们写的 GLSL 代码对 xcode 来说就是一长串的字符串,所以后缀名用什么都无所谓,当我们阅读 GPUImage 源码、ijkplayer 源码的时候,可以发现它们的 shader 就是用普通的字符串来存储的,这是没有任何问题的,缺点只是不易于阅读和书写。

所以我们一般会创建一个文件,后缀为 .vsh".fsh".vsh 代表 verterx shader 顶点着色器,".fsh" 代表 fragment shader 片元着色器。 常用后缀有:.vsh".fsh" 和通用后缀 glsl

如果着色器文件命名的是通用的后缀 glsl,那如何区分哪个是顶点着色器哪个是片元着色器? 顶点着色器里一定有对内建函数 gl_Position 的赋值,片元着色器内则有对内建函数 gl_FragColor 的赋值,可以以此来判断。

顶点着色器:

attribute vec4 position;
attribute vec2 textCoordinate;
varying lowp vec2 varyTextCoord;

void main() {
    varyTextCoord = textCoordinate;
    gl_Position = position;
}
复制代码

片元着色器:

varying lowp vec2 varyTextCoord;
uniform sampler2D colorMap;

void main() {
    gl_FragColor = texture2D(colorMap, varyTextCoord);
}
复制代码

四、常用 API

下面介绍一些常用的 API。这些常用 API 我们务必要掌握记住,因为我们写的 GLSL 代码,并不是由 xcode 帮我们编译的,而是由我们开发者自行编译、自行 link、自行生成 program 的。

1、创建与编译一个着色器

(1)glCreateShader 创建着色器

GLuint glCreateShader(GLenum type);
复制代码
  • 参数 type 创建着色器的类型,GL_VERTEX_SHADER 或者 GL_FRAGMENT_SHADER
  • 返回值: 是指向新着⾊器对象的句柄,可以调⽤。

(2)glDeleteShader 删除着色器

void glDeleteShader(GLuint shader);
复制代码
  • 参数 shader 要删除的着⾊器对象句柄

(3)glShaderSource 将着色器源码附加到着色器对象上

void glShaderSource (GLuint shader, GLsizei count, const GLchar* const *string, const GLint* length);
复制代码
  • 参数 1:shader 指向着⾊器对象的句柄。
  • 参数 2:count 着⾊器源字符串的数量,着⾊器可以由多个源字符串组成,但是每个着⾊器只有一个 main 函数。
  • 参数 3:strings 指向着色器源字符串的指针。
  • 参数 length 长度,具有每个字符串长度的数组,或 NULL,这意味着字符串是 NULL 终止的。

(4)glCompileShader 编译

void glCompileShader (GLuint shader) 
复制代码
  • 参数 shader 需要编译的着⾊器对象的句柄。

2、创建并链接程序(program)

OpenGL ES 中,每个 program 对象有且仅有一个 Vertex Shader 对象和一个 Fragment Shader 对象连接到它。

(1)glCreateProgram 创建 program

GLuint glCreateProgram (void)
复制代码
  • 返回值: 返回⼀个执行新程序对象的句柄。

(2)glDeleteProgram 删除 program

void glDeleteProgram(GLuint program)
复制代码
  • 参数 program 指向要删除的程序对象的句柄。

(3)glAttachShader 着色器与程序附着

void glAttachShader (GLuint program, GLuint shader)
复制代码
  • 参数 1:program 指向程序对象的句柄。
  • 参数 2:shader 指向程序附着的着色器对象的句柄。

(4)glDetachShader 断开附着

void glDetachShader(GLuint program, GLuint shader)
复制代码
  • 参数 1:program 指向程序对象的句柄。
  • 参数 2:shader 指向程序断开附着的着色器对象的句柄。

(5)glLinkProgram 链接程序

void glLinkProgram(GLuint program);
复制代码
  • 参数:program 指向程序对象的句柄。

(6)glGetProgramiv 判断是否链接成功

void glGetProgramiv (GLuint program, GLenum pname, GLint* params);
复制代码
  • 参数 1:program 需要获取信息的程序对象的句柄。
  • 参数 2:pname 获取信息的参数,可以是: GL_ACTIVE_ATTRIBUTES GL_ACTIVE_ATTRIBUTES_MAX_LENGTH GL_ACTIVE_UNIFORM_BLOCK GL_ACTIVE_UNIFORM_BLOCK_MAX_LENGTH GL_ACTIVE_UNIFROMS GL_ACTIVE_UNIFORM_MAX_LENGTH GL_ATTACHED_SHADERS GL_DELETE_STATUS GL_INFO_LOG_LENGTH GL_LINK_STATUS GL_PROGRAM_BINARY_RETRIEVABLE_HINT GL_TRANSFORM_FEEDBACK_BUFFER_MODE GL_TRANSFORM_FEEDBACK_VARYINGS GL_TRANSFORM_FEEDBACK_VARYING_MAX_LENGTH GL_VALIDATE_STATUS
  • 参数3:params 指向查询结果整数存储位置的指针。

(7)glUseProgram 使用 program

void glUseProgram (GLuint program);
复制代码
  • 参数:program 设为为活动程序的程序对象的句柄。

3、顶点着色器与片元着色器实现编译、绑定、连接。

(1)glGetAttribLocation 将顶点数据通过 myPrograme 传递到顶点着色程序的 position (传递attribute类型)

int glGetAttribLocation (GLuint program, const GLchar* name)
复制代码
  • 参数 1:program 指定用哪个程序对象的句柄来传递数据。
  • 参数 2:name 顶点变量的名字,此字符串必须和 shaderv.vsh 中的输入变量:position 保持一致。

(2)glGetUniformLocation 将纹理采样器数据通过 myPrograme 传递到片元着色程序的 colorMap (传递uniform类型)

int glGetUniformLocation (GLuint program, const GLchar* name)
复制代码
  • 参数 1:program 指定用哪个程序对象的句柄来传递数据。
  • 参数 2:name 纹理采样器变量的名字,此字符串必须和 shaderf.vsh 中的变量:colorMap 保持一致。

五、源码展示

顶点着色器 shaderv.vsh 和片元着色器 shaderf.fsh 的源码在文章开始已经给出,这里就不再重复。

1、头文件与属性声明

#import <OpenGLES/ES2/gl.h>
#import "WPView.h"
@interface WPView()

//在iOS和tvOS上绘制OpenGL ES内容的图层,继承与CALayer
@property(nonatomic,strong)CAEAGLLayer *myEagLayer;
@property(nonatomic,strong)EAGLContext *myContext;
@property(nonatomic,assign)GLuint myColorRenderBuffer;
@property(nonatomic,assign)GLuint myColorFrameBuffer;
@property(nonatomic,assign)GLuint myPrograme;
@end
复制代码

2、入口layoutSubviews 函数

- (void)layoutSubviews {
    //1.设置图层
    [self setupLayer];
    //2.设置图形上下文
    [self setupContext];
    //3.清空缓存区
    [self deleteRenderAndFrameBuffer];
    //4.设置RenderBuffer
    [self setupRenderBuffer];
    //5.设置FrameBuffer
    [self setupFrameBuffer];
    //6.开始绘制
    [self renderLayer];
}
// 重写layerClass,将CCView返回的图层从CALayer替换成CAEAGLLayer
+ (Class)layerClass {
    return [CAEAGLLayer class];
}
复制代码

3、设置图层 setupLayer 函数

// 1.设置图层
- (void)setupLayer {
    //1.创建特殊图层
    self.myEagLayer = (CAEAGLLayer *)self.layer;
    //2.设置scale
    [self setContentScaleFactor:[[UIScreen mainScreen]scale]];
    //3.设置描述属性,这里设置不维持渲染内容以及颜色格式为RGBA8
    self.myEagLayer.drawableProperties = [NSDictionary dictionaryWithObjectsAndKeys:@false,kEAGLDrawablePropertyRetainedBacking, kEAGLColorFormatRGBA8,kEAGLDrawablePropertyColorFormat,nil];
}
复制代码

4、设置上下文 setupContext 函数

// 2.设置上下文
- (void)setupContext {
    // 1.指定OpenGL ES 渲染API版本,我们使用2.0
    EAGLRenderingAPI api = kEAGLRenderingAPIOpenGLES2;
    // 2.创建图形上下文
    EAGLContext *context = [[EAGLContext alloc]initWithAPI:api];
    // 3.判断是否创建成功
    if (!context) {
        NSLog(@"Create context failed!");
        return;
    }
    // 4.设置图形上下文
    if (![EAGLContext setCurrentContext:context]) {
        NSLog(@"setCurrentContext failed!");
        return;
    }
    //5.将局部context,变成全局的
    self.myContext = context;
}
复制代码

5、清空缓存区 deleteRenderAndFrameBuffer 函数

// 3.清空缓存区
- (void)deleteRenderAndFrameBuffer {
    /*
     buffer分为frame buffer 和 render buffer2个大类。
     其中frame buffer 相当于render buffer的管理者。
     frame buffer object即称FBO。
     render buffer则又可分为3类。colorBuffer、depthBuffer、stencilBuffer。
     */
    glDeleteBuffers(1, &_myColorRenderBuffer);
    self.myColorRenderBuffer = 0;
    glDeleteBuffers(1, &_myColorFrameBuffer);
    self.myColorFrameBuffer = 0;
}
复制代码

6、设置 RenderBuffer setupRenderBuffer 函数

// 4.设置RenderBuffer
- (void)setupRenderBuffer {
    //1.定义一个缓存区ID
    GLuint buffer;
    //2.申请一个缓存区标志
    glGenRenderbuffers(1, &buffer);
    //3.
    self.myColorRenderBuffer = buffer;
    //4.将标识符绑定到GL_RENDERBUFFER
    glBindRenderbuffer(GL_RENDERBUFFER, self.myColorRenderBuffer);
    //5.将可绘制对象drawable object's  CAEAGLLayer的存储绑定到OpenGL ES renderBuffer对象
    [self.myContext renderbufferStorage:GL_RENDERBUFFER fromDrawable:self.myEagLayer];
}
复制代码

7、设置 FrameBuffer setupFrameBuffer 函数

// 5.设置FrameBuffer
- (void)setupFrameBuffer {
    //1.定义一个缓存区ID
    GLuint buffer;
    //2.申请一个缓存区标志
    glGenBuffers(1, &buffer);
    //3.
    self.myColorFrameBuffer = buffer;
    //4.
    glBindFramebuffer(GL_FRAMEBUFFER, self.myColorFrameBuffer);
    /*生成帧缓存区之后,则需要将renderbuffer跟framebuffer进行绑定,
     调用glFramebufferRenderbuffer函数进行绑定到对应的附着点上,后面的绘制才能起作用
     */
    //5.将渲染缓存区myColorRenderBuffer 通过glFramebufferRenderbuffer函数绑定到 GL_COLOR_ATTACHMENT0上。
    glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_RENDERBUFFER, self.myColorRenderBuffer);
}
复制代码

8、开始绘制 renderLayer 函数

// 6.开始绘制
- (void)renderLayer {
    glClearColor(0.3f, 0.45f, 0.5f, 1.0f);
    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);
    
    // 2.读取顶点着色程序、片元着色程序
    NSString *vertFile = [[NSBundle mainBundle]pathForResource:@"shaderv" ofType:@"vsh"];
    NSString *fragFile = [[NSBundle mainBundle]pathForResource:@"shaderf" ofType:@"fsh"];

    //3.加载shader
    self.myPrograme = [self loadShaders:vertFile Withfrag:fragFile];

    //4.链接
    glLinkProgram(self.myPrograme);
    GLint linkStatus;
    // 获取链接状态
    glGetProgramiv(self.myPrograme, GL_LINK_STATUS, &linkStatus);
    if (linkStatus == GL_FALSE) {
        GLchar message[512];
        glGetProgramInfoLog(self.myPrograme, sizeof(message), 0, &message[0]);
        NSString *messageString = [NSString stringWithUTF8String:message];
        NSLog(@"Program Link Error:%@",messageString);
        return;
    }
    NSLog(@"Program Link Success!");
    // 5.使用program
    glUseProgram(self.myPrograme);
    
    //6.设置顶点、纹理坐标
    //前3个是顶点坐标,后2个是纹理坐标
    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,
    };
    //7.-----处理顶点数据--------
    //(1)顶点缓存区
    GLuint attrBuffer;
    //(2)申请一个缓存区标识符
    glGenBuffers(1, &attrBuffer);
    //(3)将attrBuffer绑定到GL_ARRAY_BUFFER标识符上
    glBindBuffer(GL_ARRAY_BUFFER, attrBuffer);
    //(4)把顶点数据从CPU内存复制到GPU上
    glBufferData(GL_ARRAY_BUFFER, sizeof(attrArr), attrArr, GL_DYNAMIC_DRAW);

    //8.将顶点数据通过myPrograme中的传递到顶点着色程序的position
    //1.glGetAttribLocation,用来获取vertex attribute的入口的.
    //2.告诉OpenGL ES,通过glEnableVertexAttribArray,
    //3.最后数据是通过glVertexAttribPointer传递过去的。
    
    //(1)注意:第二参数字符串必须和shaderv.vsh中的输入变量:position保持一致
    GLuint position = glGetAttribLocation(self.myPrograme, "position");
    
    //(2).设置合适的格式从buffer里面读取数据
    glEnableVertexAttribArray(position);
    
    //(3).设置读取方式
    glVertexAttribPointer(position, 3, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 5, NULL);

    //9.----处理纹理数据-------
    //(1).glGetAttribLocation,用来获取vertex attribute的入口的.
    //注意:第二参数字符串必须和shaderv.vsh中的输入变量:textCoordinate保持一致
    GLuint textCoor = glGetAttribLocation(self.myPrograme, "textCoordinate");
    
    //(2).设置合适的格式从buffer里面读取数据
    glEnableVertexAttribArray(textCoor);
    
    //(3).设置读取方式
    glVertexAttribPointer(textCoor, 2, GL_FLOAT, GL_FALSE, sizeof(GLfloat)*5, (float *)NULL + 3);
    
    //10.加载纹理
    [self setupTexture:@"夏目"];
    
    //11. 设置纹理采样器 sampler2D
    glUniform1i(glGetUniformLocation(self.myPrograme, "colorMap"), 0);
    
    //12.绘图
    glDrawArrays(GL_TRIANGLES, 0, 6);
    
    //13.从渲染缓存区显示到屏幕上
    [self.myContext presentRenderbuffer:GL_RENDERBUFFER];
}
复制代码

8.1、加载shader loadShaders 函数

// 加载shader
- (GLuint)loadShaders:(NSString *)vert Withfrag:(NSString *)frag {
    //1.定义2个零时着色器对象
    GLuint verShader, fragShader;
    //创建program
    GLint program = glCreateProgram();
    
    //2.编译顶点着色程序、片元着色器程序
    //参数1:编译完存储的底层地址
    //参数2:编译的类型,GL_VERTEX_SHADER(顶点)、GL_FRAGMENT_SHADER(片元)
    //参数3:文件路径
    [self compileShader:&verShader type:GL_VERTEX_SHADER file:vert];
    [self compileShader:&fragShader type:GL_FRAGMENT_SHADER file:frag];
    
    //3.创建最终的program程序,把shader附着上去
    glAttachShader(program, verShader);
    glAttachShader(program, fragShader);
    
    //4.释放不需要的shader
    glDeleteShader(verShader);
    glDeleteShader(fragShader);
    
    return program;
}
复制代码

8.2、从图片中加载纹理 setupTexture 函数

// 从图片中加载纹理
- (GLuint)setupTexture:(NSString *)fileName {
    //1、将 UIImage 转换为 CGImageRef
    CGImageRef spriteImage = [UIImage imageNamed:fileName].CGImage;
    
    //判断图片是否获取成功
    if (!spriteImage) {
        NSLog(@"Failed to load image %@", fileName);
        exit(1);
    }
    
    //2、读取图片的大小,宽和高
    size_t width = CGImageGetWidth(spriteImage);
    size_t height = CGImageGetHeight(spriteImage);
    
    //3.获取图片字节数 宽*高*4(RGBA)
    GLubyte * spriteData = (GLubyte *) calloc(width * height * 4, sizeof(GLubyte));
    
    //4.创建上下文
    /*
     参数1:data,指向要渲染的绘制图像的内存地址
     参数2:width,bitmap的宽度,单位为像素
     参数3:height,bitmap的高度,单位为像素
     参数4:bitPerComponent,内存中像素的每个组件的位数,比如32位RGBA,就设置为8
     参数5:bytesPerRow,bitmap的没一行的内存所占的比特数,4代表rgba
     参数6:colorSpace,bitmap上使用的颜色空间
     参数7:kCGImageAlphaPremultipliedLast:RGBA
     */
    CGContextRef spriteContext = CGBitmapContextCreate(spriteData, width, height, 8, width*4,CGImageGetColorSpace(spriteImage), kCGImageAlphaPremultipliedLast);

    //5、在CGContextRef上--> 将图片绘制出来
    /*
     CGContextDrawImage 使用的是Core Graphics框架,坐标系与UIKit 不一样。UIKit框架的原点在屏幕的左上角,Core Graphics框架的原点在屏幕的左下角。
     CGContextDrawImage 
     参数1:绘图上下文
     参数2:rect坐标
     参数3:绘制的图片
     */
    CGRect rect = CGRectMake(0, 0, width, height);
   
    //6.使用默认方式绘制
    CGContextDrawImage(spriteContext, rect, spriteImage);

    //7、画图完毕就释放上下文
    CGContextRelease(spriteContext);
    
    // 以上1-7步骤,就是在进行图片解压缩,在yyImage或SD中也可以看到
    
    //8、绑定纹理到默认的纹理ID(
    glBindTexture(GL_TEXTURE_2D, 0);
    
    //9.设置纹理属性
  /*
     参数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);
    
    float fw = width, fh = height;
    
    //10.载入纹理2D数据
    /*
     参数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, fw, fh, 0, GL_RGBA, GL_UNSIGNED_BYTE, spriteData);
    
    //11.释放spriteData
    free(spriteData);   
    return 0;
}
复制代码

效果图:

效果图.png

效果图成功显示出来了,但是却是倒置的,这种问题怎么解决呢?下一篇文章《OpenGL ES 纹理翻转的策略对比》我们一起聊聊几种解决办法,再比较一些他们的优劣吧!

转载请备注原文出处,不得用于商业传播——凡几多

关注下面的标签,发现更多相似文章
评论