颜色/纹理/颜色&纹理混合填充

在 xcode 新建一个工程，自定义一个继承UIView 的 SLView，所有代码将在 SLView 里进行编写，把 storyboard 里的 view 继承自SLView。 1.png

在 SLView 编写代码

#import "SLView.h"
#import <OpenGLES/ES3/gl.h>
#import "GLESMath.h"
#import "GLESUtils.h"

@interface SLView ()

@property(nonatomic,strong)CAEAGLLayer * myEagLayer;
@property(nonatomic,strong)EAGLContext * myContext;

@property(nonatomic,assign)GLuint myColorRenderBuffer;
@property(nonatomic,assign)GLuint myColorFrameBuffer;

@property(nonatomic,assign)GLuint myProgram;
@property(nonatomic,assign)GLuint myVertices;

@end

@implementation SLView
{
    float xDegree;
    float yDegree;
    float zDegree;
    BOOL bX;
    BOOL bY;
    BOOL bZ;
    NSTimer* myTimer;
}


-(void)layoutSubviews
{
    //1.设置图层
    [self setUpLayer];
    
    //2.设置上下文
    [self setUpContext];
    
    //3.清空缓存区
    [self deleteBuffer];
    
    //4.设置renderBuffer
    [self setUpRenderBuffer];
    
    //5.设置frameBuffer
    [self setUpFrameBuffer];
    
    //6.绘制
    [self render];
}


#pragma mark - 1.设置图层
-(void)setUpLayer
{
    self.myEagLayer = (CAEAGLLayer *)self.layer;
    [self setContentScaleFactor:[[UIScreen mainScreen] scale]];
    self.myEagLayer.opaque = YES;
    self.myEagLayer.drawableProperties = @{kEAGLDrawablePropertyColorFormat:kEAGLColorFormatRGBA8,kEAGLDrawablePropertyRetainedBacking:@(false)};
}

+(Class)layerClass
{
    return [CAEAGLLayer class];
}


#pragma mark - 2.设置上下文
-(void)setUpContext
{
    EAGLContext * context = [[EAGLContext alloc] initWithAPI: kEAGLRenderingAPIOpenGLES3];
    if (!context)
    {
        NSLog(@"create context failed!");
        return;
    }
    
    if (![EAGLContext setCurrentContext:context])
    {
        NSLog(@"setCurrentContext failed!");
        return;
    }
    
    self.myContext = context;
}


#pragma mark - 3.清空缓存区
-(void)deleteBuffer
{
    glDeleteBuffers(1, &_myColorRenderBuffer);
    _myColorRenderBuffer = 0;
    
    glDeleteBuffers(1, &_myColorFrameBuffer);
    _myColorFrameBuffer = 0;
}


#pragma mark - 4.设置renderBuffer
-(void)setUpRenderBuffer
{
    //1.定义一个缓存区
    GLuint buffer;
    //2.申请一个缓存区标志
    glGenRenderbuffers(1, &buffer);
    self.myColorRenderBuffer = buffer;
    //4.将标识符绑定到GL_RENDERBUFFER
    glBindRenderbuffer(GL_RENDERBUFFER, self.myColorRenderBuffer);
    [self.myContext renderbufferStorage:GL_RENDERBUFFER fromDrawable:self.myEagLayer];
}


#pragma mark - 5.设置frameBuffer
-(void)setUpFrameBuffer
{
    //1.定义一个缓存区
    GLuint buffer;
    //2.申请一个缓存区标志
    glGenFramebuffers(1, &buffer);
    self.myColorFrameBuffer = buffer;
    //4.设置当前的framebuffer
    glBindFramebuffer(GL_FRAMEBUFFER, self.myColorFrameBuffer);
    //5.将_myColorRenderBuffer 装配到GL_COLOR_ATTACHMENT0 附着点上
    glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_RENDERBUFFER, self.myColorRenderBuffer);
}


#pragma mark - 6.绘制
-(void)render
{
    //1.清屏颜色
    glClearColor(0.0f, 0.0f, 0.0f, 1.0f);
    glClear(GL_COLOR_BUFFER_BIT);
    
    GLfloat scale = [[UIScreen mainScreen] scale];
    //2.设置视口
    glViewport(self.frame.origin.x * scale, self.frame.origin.y * scale, self.frame.size.width * scale, self.frame.size.height * scale);
    
    //3.获取顶点着色程序、片元着色器程序文件位置
    NSString * vertFile = [[NSBundle mainBundle] pathForResource:@"shaderv" ofType:@"glsl"];
    NSString * fragFile = [[NSBundle mainBundle] pathForResource:@"shaderf" ofType:@"glsl"];
    
    //4.判断self.myProgram是否存在，存在则清空其文件
    if (self.myProgram)
    {
        glDeleteProgram(self.myProgram);
        self.myProgram = 0;
    }
    
    //5.加载程序到myProgram中来
    self.myProgram = [self loadShader:vertFile fragFile:fragFile];
    
    //6.链接
    glLinkProgram(self.myProgram);
    
    GLint * linkStatus;
    //7.获取链接状态
    glGetProgramiv(self.myProgram, GL_LINK_STATUS, &linkStatus);
    if (linkStatus == GL_FALSE)
    {
        GLchar messages[520];
        glGetProgramInfoLog(self.myProgram, sizeof(messages), 0, &messages[0]);
        NSString * messageStr = [NSString stringWithUTF8String:messages];
        NSLog(@"error = %@\n",messageStr);
        return;
    }
    else
    {
        glUseProgram(self.myProgram);
    }
    
    //8.创建顶点数组 & 索引数组
    //(1)顶点数组 前3顶点值（x,y,z），后3位颜色值(RGB)
    GLfloat attrArr[] =
    {
        -0.5f, 0.5f, 0.0f,      0.0f, 0.0f, 0.5f,       0.0f, 1.0f,//左上
        0.5f, 0.5f, 0.0f,       0.0f, 0.5f, 0.0f,       1.0f, 1.0f,//右上
        -0.5f, -0.5f, 0.0f,     0.5f, 0.0f, 1.0f,       0.0f, 0.0f,//左下
        0.5f, -0.5f, 0.0f,      0.0f, 0.0f, 0.5f,       1.0f, 0.0f,//右下
        
        0.0f, 0.0f, 1.0f,       1.0f, 1.0f, 1.0f,       0.5f, 0.5f,//顶点
    };
    
     //(2).索引数组
    GLuint indices[] =
    {
        0, 3, 2,
        0, 1, 3,
        0, 2, 4,
        0, 4, 1,
        2, 3, 4,
        1, 4, 3,
    };
    
    //(3).判断顶点缓存区是否为空，如果为空则申请一个缓存区标识符
    if (self.myVertices == 0)
    {
        glGenBuffers(1, &_myVertices);
    }
    
    //9.-----处理顶点数据-------
    //(1).将_myVertices绑定到GL_ARRAY_BUFFER标识符上
    glBindBuffer(GL_ARRAY_BUFFER, _myVertices);
    //(2).把顶点数据从CPU内存复制到GPU上
    glBufferData(GL_ARRAY_BUFFER, sizeof(attrArr), attrArr, GL_DYNAMIC_DRAW);
    
    //(3).将顶点数据通过myPrograme中的传递到顶点着色程序的position
    //1.glGetAttribLocation,用来获取vertex attribute的入口的.
    //2.告诉OpenGL ES,通过glEnableVertexAttribArray，
    //3.最后数据是通过glVertexAttribPointer传递过去的。
    GLuint position = glGetAttribLocation(self.myProgram, "position");
    //(4).打开position
    glEnableVertexAttribArray(position);
    //(5).设置读取方式
    //参数1：index,顶点数据的索引
    //参数2：size,每个顶点属性的组件数量，1，2，3，或者4.默认初始值是4.
    //参数3：type,数据中的每个组件的类型，常用的有GL_FLOAT,GL_BYTE,GL_SHORT。默认初始值为GL_FLOAT
    //参数4：normalized,固定点数据值是否应该归一化，或者直接转换为固定值。（GL_FALSE）
    //参数5：stride,连续顶点属性之间的偏移量，默认为0；
    //参数6：指定一个指针，指向数组中的第一个顶点属性的第一个组件。默认为0
    glVertexAttribPointer(position, 3, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 8, NULL);
    
    //10.--------处理顶点颜色值-------
    //(1).glGetAttribLocation,用来获取vertex attribute的入口的.
    //注意：第二参数字符串必须和shaderv.glsl中的输入变量：positionColor保持一致
    GLuint positionColor = glGetAttribLocation(self.myProgram, "positionColor");
    //(2).设置合适的格式从buffer里面读取数据
    glEnableVertexAttribArray(positionColor);
    //(3).设置读取方式
    //参数1：index,顶点数据的索引
    //参数2：size,每个顶点属性的组件数量，1，2，3，或者4.默认初始值是4.
    //参数3：type,数据中的每个组件的类型，常用的有GL_FLOAT,GL_BYTE,GL_SHORT。默认初始值为GL_FLOAT
    //参数4：normalized,固定点数据值是否应该归一化，或者直接转换为固定值。（GL_FALSE）
    //参数5：stride,连续顶点属性之间的偏移量，默认为0；
    //参数6：指定一个指针，指向数组中的第一个顶点属性的第一个组件。默认为0
    glVertexAttribPointer(positionColor, 3, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 8, (GLfloat *)NULL + 3);
    
    
    //纹理坐标
     GLuint textCoor = glGetAttribLocation(self.myProgram, "textCoor");
     glEnableVertexAttribArray(textCoor);
     glVertexAttribPointer(textCoor, 2, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 8, (float *)NULL + 6);
    
    //加载纹理
    [self setUpTexture:@"tianqi"];
    //设置纹理采样器 sampler2D
    glUniform1i(glGetUniformLocation(self.myProgram, "colorMap"), 0);
    
        
    //11.找到myProgram中的projectionMatrix、modelViewMatrix 2个矩阵的地址。如果找到则返回地址，否则返回-1，表示没有找到2个对象。
    GLuint projectionMatrix = glGetUniformLocation(self.myProgram, "projectionMatrix");
    GLuint modelViewMatrix = glGetUniformLocation(self.myProgram, "modelViewMatrix");
    
    //12.创建4 * 4投影矩阵
    KSMatrix4 temProjectionMatrix;
    //(1)获取单元矩阵
    ksMatrixLoadIdentity(&temProjectionMatrix);
    //(2)获取透视矩阵
    /*
     参数1：矩阵
     参数2：视角，度数为单位
     参数3：纵横比
     参数4：近平面距离
     参数5：远平面距离
     */
    ksPerspective(&temProjectionMatrix, 30.0f, self.frame.size.width/self.frame.size.height, 5.0f, 20.0f);
    //(3)将投影矩阵传递到顶点着色器
    /*
     void glUniformMatrix4fv(GLint location,  GLsizei count,  GLboolean transpose,  const GLfloat *value);
     参数列表：
     location:指要更改的uniform变量的位置
     count:更改矩阵的个数
     transpose:是否要转置矩阵，并将它作为uniform变量的值。必须为GL_FALSE
     value:执行count个元素的指针，用来更新指定uniform变量
     */
    glUniformMatrix4fv(projectionMatrix, 1, GL_FALSE, &temProjectionMatrix.m[0][0]);
    
    
    //13.创建一个4 * 4 矩阵，模型视图矩阵
    KSMatrix4 temModelViewMatrix;
    //(1)获取单元矩阵
    ksMatrixLoadIdentity(&temModelViewMatrix);
    //(2)平移，z轴平移-10
    ksTranslate(&temModelViewMatrix, 0.0f, 0.0f, -10.0f);
    
    //(3)创建一个4 * 4 矩阵，旋转矩阵
    KSMatrix4 rotationMatrix;
    //(4)初始化为单元矩阵
    ksMatrixLoadIdentity(&rotationMatrix);
    //(5)旋转
    ksRotate(&rotationMatrix, xDegree, 1.0f, 0.0f, 0.0f); //绕X轴
    ksRotate(&rotationMatrix, yDegree, 0.0f, 1.0f, 0.0f); //绕Y轴
    ksRotate(&rotationMatrix, zDegree, 0.0f, 0.0f, 1.0f); //绕Z轴
    
    //(6)把变换矩阵相乘.将temModelViewMatrix矩阵与rotationMatrix矩阵相乘，结合到模型视图
    ksMatrixMultiply(&temModelViewMatrix, &rotationMatrix, &temModelViewMatrix);
    //(7)将模型视图矩阵传递到顶点着色器
    /*
     void glUniformMatrix4fv(GLint location,  GLsizei count,  GLboolean transpose,  const GLfloat *value);
     参数列表：
     location:指要更改的uniform变量的位置
     count:更改矩阵的个数
     transpose:是否要转置矩阵，并将它作为uniform变量的值。必须为GL_FALSE
     value:执行count个元素的指针，用来更新指定uniform变量
     */
    glUniformMatrix4fv(modelViewMatrix, 1, GL_FALSE, &temModelViewMatrix.m[0][0]);

    //14.开启剔除操作效果
    glEnable(GL_CULL_FACE);
    
    //15.使用索引绘图
    /*
     void glDrawElements(GLenum mode,GLsizei count,GLenum type,const GLvoid * indices);
     参数列表：
     mode:要呈现的画图的模型
                GL_POINTS
                GL_LINES
                GL_LINE_LOOP
                GL_LINE_STRIP
                GL_TRIANGLES
                GL_TRIANGLE_STRIP
                GL_TRIANGLE_FAN
     count:绘图个数
     type:类型
             GL_BYTE
             GL_UNSIGNED_BYTE
             GL_SHORT
             GL_UNSIGNED_SHORT
             GL_INT
             GL_UNSIGNED_INT
     indices：绘制索引数组
     */
    glDrawElements(GL_TRIANGLES, sizeof(indices)/sizeof(indices[0]), GL_UNSIGNED_INT, indices);
    
    //16.要求本地窗口系统显示OpenGL ES渲染<目标>
    [self.myContext presentRenderbuffer:GL_RENDERBUFFER];
}


-(GLuint)loadShader:(NSString *)vertFile fragFile:(NSString *)fragFile
{
    GLuint vertShader, fragShader;
    GLuint program = glCreateProgram();
    
    [self compileShader:&vertShader type:GL_VERTEX_SHADER file:vertFile];
    [self compileShader:&fragShader type:GL_FRAGMENT_SHADER file:fragFile];
    
    glAttachShader(program, vertShader);
    glAttachShader(program, fragShader);
    
    glDeleteShader(vertShader);
    glDeleteShader(fragShader);
    
    return program;
}


-(void)compileShader:(GLuint*)shader type:(GLenum)type file:(NSString *)file
{
    NSString * content = [NSString stringWithContentsOfFile:file encoding:NSUTF8StringEncoding error:nil];
    const GLchar * source = (GLchar *)[content UTF8String];
    
    *shader = glCreateShader(type);
    glShaderSource(*shader, 1, &source, NULL);
    
    glCompileShader(*shader);
}


- (IBAction)xClick:(id)sender {
    
    //开启定时器
     if (!myTimer) {
         myTimer = [NSTimer scheduledTimerWithTimeInterval:0.05 target:self selector:@selector(reDegree) userInfo:nil repeats:YES];
     }
     //更新的是X还是Y
     bX = !bX;
}

- (IBAction)yClick:(id)sender {
    
    //开启定时器
     if (!myTimer) {
         myTimer = [NSTimer scheduledTimerWithTimeInterval:0.05 target:self selector:@selector(reDegree) userInfo:nil repeats:YES];
     }
     //更新的是X还是Y
     bY = !bY;
}



- (IBAction)zClick:(id)sender {
    
    //开启定时器
     if (!myTimer) {
         myTimer = [NSTimer scheduledTimerWithTimeInterval:0.05 target:self selector:@selector(reDegree) userInfo:nil repeats:YES];
     }
     //更新的是X还是Y
     bZ = !bZ;
}

-(void)reDegree
{
    //如果停止X轴旋转，X = 0则度数就停留在暂停前的度数.
    //更新度数
    xDegree += bX * 5;
    yDegree += bY * 5;
    zDegree += bZ * 5;
    //重新渲染
    [self render];
    
}

#pragma mark - 从图片中加载纹理
-(void)setUpTexture:(NSString *)fileName
{
    //1.将UIImage转换为CGImageRef
    CGImageRef spriteImage = [UIImage imageNamed:fileName].CGImage;
    
    //2.判断图片是否获取成功
    if (!spriteImage)
    {
        NSLog(@"load image failed!");
        return;
    }
    
    //3.读取图片的宽和高
    size_t width = CGImageGetWidth(spriteImage);
    size_t height = CGImageGetWidth(spriteImage);
    
    //4.获取图片字节数 宽*高*4（RGBA）
    GLubyte * spriteData = (GLubyte *)calloc(width * height * 4, sizeof(GLubyte));
    
    //5.创建上下文
    /*
     参数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);
    
    //6.在CGContextRef上将图片绘制出来
    /*
     CGContextDrawImage 使用的是Core Graphics框架，坐标系与UIKit 不一样。UIKit框架的原点在屏幕的左上角，Core Graphics框架的原点在屏幕的左下角。
     CGContextDrawImage
     参数1：绘图上下文
     参数2：rect坐标
     参数3：绘制的图片
     */
    CGContextDrawImage(spriteContext, CGRectMake(0, 0, width, height), spriteImage);
    
    //解决纹理翻转(方法2)
//    CGRect rect = CGRectMake(0, 0, width, height);
//    CGContextTranslateCTM(spriteContext, 0, rect.size.height);
//    CGContextScaleCTM(spriteContext, 1.0, -1.0);
//    CGContextDrawImage(spriteContext, rect, spriteImage);
    
    CGContextRelease(spriteContext);
    
    //7.绑定纹理
    glBindTexture(GL_TEXTURE_2D, 0);
    
    //8.设置纹理属性
    /*
     参数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);
    
    
    //9.载入纹理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, (GLsizei)width,  (GLsizei)height, 0, GL_RGBA, GL_UNSIGNED_BYTE, spriteData);
    
    //10.释放spriteData
    free(spriteData);
}

创建着色器程序

新建shaderv.glsl和shaderf.glsl文件，shaderv.glsl为顶点着色器，GLSL代码如下：

attribute vec4 position;
attribute vec4 positionColor;
attribute vec2 textCoor;
uniform mat4 projectionMatrix;
uniform mat4 modelViewMatrix;


varying lowp vec2 vTextCoor;
varying lowp vec4 varyColor;

void main()
{
    vTextCoor = textCoor;
    varyColor = positionColor;
    
    vec4 vPos;
    vPos = projectionMatrix * modelViewMatrix * position;
    gl_Position = vPos;
}

shaderf.glsl为片元着色器，GLSL代码如下：

• 颜色填充

precision highp float;

varying lowp vec2 vTextCoor;
varying lowp vec4 varyColor;
uniform sampler2D colorMap;

void main()
{
    gl_FragColor = varyColor;
}

颜色填充.gif

• 纹理填充

precision highp float;

varying lowp vec2 vTextCoor;
varying lowp vec4 varyColor;
uniform sampler2D colorMap;

void main()
{
    gl_FragColor = texture2D(colorMap, vTextCoor);
}

纹理填充.gif

• 颜色纹理混合填充

precision highp float;

varying lowp vec2 vTextCoor;
varying lowp vec4 varyColor;
uniform sampler2D colorMap;

void main()
{
    vec4 weakMask = texture2D(colorMap, vTextCoor);
    vec4 mask = varyColor;
    float alpha = 0.3;

    vec4 tempColor = mask * (1.0 - alpha) + weakMask * alpha;
    gl_FragColor = tempColor;
}

颜色纹理混合.gif