OpenGL 2D纹理加载解析&&自定义着色器

一、着色器简述：

1.OpenGL的着色器一般在开发过程中我们只要涉及到两种：一个顶点着色器，一个片元着色器。还有一种可选的着色器称为几何着色器。
顶点着色器代码如下：

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

void main(){
    
    varyTextCoord = textCoordinate;
    gl_Position = position;  
}

片元着色器代码如下：

precision highp float;
varying lowp vec2 varyTextCoord;
uniform sampler2D colorMap;

void main()
{
    //lowp vec4 temp = texture2D(colorMap, varyTextCoord);
    //gl_FragColor = temp;
    
    gl_FragColor = texture2D(colorMap, varyTextCoord);

}

二、纹理加载解析

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的没一行的内存所占的比特数
     参数6：colorSpace,bitmap上使用的颜色空间  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.图片翻转矫正

 CGContextTranslateCTM(spriteContext, rect.origin.x, rect.origin.y);
    CGContextTranslateCTM(spriteContext, 0, rect.size.height);
    CGContextScaleCTM(spriteContext, 1.0, -1.0);
    CGContextTranslateCTM(spriteContext, -rect.origin.x, -rect.origin.y);
    CGContextDrawImage(spriteContext, rect, spriteImage);

8.画图完毕就释放上下文

 CGContextRelease(spriteContext);

9.绑定纹理到默认的纹理ID

 glBindTexture(GL_TEXTURE_2D, 0);

10.设置纹理属性

  /*
     参数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);

11.载入纹理2D数据

    float fw = width, fh = height;
 
    /*
     参数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);

Demo详情介绍