OpenGL ES GLSL绘制金字塔

这个金字塔的外部效果，由顶点颜色和纹理颜色混合成，我们先实现用顶点颜色实现这个金字塔的样子，最终效果如下图所示：

QQ20200802-122907-HD.gif

绘制这个金字塔，我们分6部去实现这个效果：

第一步：绘制图层：

self.mEagLayer = (CAEAGLLayer *)self.layer;
    [self setContentScaleFactor:[[UIScreen mainScreen]scale]];
    self.mEagLayer.opaque = YES;
    self.mEagLayer.drawableProperties = [NSDictionary dictionaryWithObjectsAndKeys:[NSNumber numberWithBool:NO],kEAGLDrawablePropertyRetainedBacking,kEAGLColorFormatRGBA8,kEAGLDrawablePropertyColorFormat, nil];

第二步设置上下文：

EAGLContext *context = [[EAGLContext alloc]initWithAPI:kEAGLRenderingAPIOpenGLES3];
    if(!context){
        NSLog(@"创建失败");
        return;
    }
    if(![EAGLContext setCurrentContext:context]){
        NSLog(@"设置失败");
        return;
    }
    self.mContext = context;

第三步：删除缓冲区

glDeleteBuffers(1, &_myColorRenderBuffer);
    _myColorRenderBuffer = 0;
    glDeleteBuffers(1, &_myColorFrameBuffer);
    _myColorFrameBuffer = 0;

第四步、第五步：设置RenderBuffer和FrameBuffer

-(void)setupFrameBuffer{
    //1、定义一个缓存区
    GLuint buffer;
    //2、申请缓冲区标志
    glGenFramebuffers(1, &buffer);
    //3、赋值
    self.myColorFrameBuffer = buffer;
    //4、设置当前的frameBuffer
    glBindFramebuffer(GL_FRAMEBUFFER, self.myColorFrameBuffer);
    //5、将myColorFrameBuffer配置到GL_COLOR_ATTACHMENT0附着点上
    glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_RENDERBUFFER, self.myColorRenderBuffer);
}

//4、设置renderbuffer
-(void)setupRenderBuffer{
    //1、定义一个缓冲区
    GLuint buffer;
    //2、申请一个缓冲区标志
    glGenRenderbuffers(1, &buffer);
    //3、赋值
    self.myColorRenderBuffer = buffer;
    //4、将标示符绑定
    glBindRenderbuffer(GL_RENDERBUFFER, self.myColorRenderBuffer);
    [self.mContext renderbufferStorage:GL_RENDERBUFFER fromDrawable:self.mEagLayer];
}

在第六步之前，我们还需要编写GLSL着色器：

新建两个空文件，shaderf.glsl和shaderv.glsl
在shaderf.glsl中的代码：

precision highp float;
varying lowp vec4 varyColor;
void main(){
    gl_FragColor = varyColor;
}

在shaderv.glsl中的代码：

attribute vec4 position;
attribute vec4 positionColor;
uniform mat4 projectionMatrix;
uniform mat4 modelViewMatrix;
varying lowp vec4 varyColor;
void main(){
    varyColor = positionColor;
    vec4 vPos;
    
    vPos = projectionMatrix * modelViewMatrix * position;
    gl_Position = vPos;
}

然后我们将加载GLSL文件的代码写成两个函数来实现：

-(GLuint)loadShader:(NSString *)vert frag:(NSString *)frag{
    //创建两个临时变量
    GLuint verShader,fragShader;
    //创建一个program
    GLuint program = glCreateProgram();
    
    //编译文件
    [self compileShader:&verShader type:GL_VERTEX_SHADER file:vert];
    [self compileShader:&fragShader type:GL_FRAGMENT_SHADER file:frag];
    
    //创建最终的程序
    glAttachShader(program, verShader);
    glAttachShader(program, fragShader);
    
    //释放不需要的shader
    glDeleteShader(verShader);
    glDeleteShader(fragShader);
    
    return program;

}

//链接shader
-(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
    *shader = glCreateShader(type);
    
    //将顶点着色器源码附加到着色器对象上
    glShaderSource(*shader, 1, &source, NULL);
    
    //将着色器源代码编译成目标代码
    glCompileShader(*shader);
}

第六步：在写完着色器之后，开始绘制金字塔，这一步是最重要的。

 //1、清屏颜色
    glClearColor(0.5, 0.7, 0.9, 1.0);
    glClear(GL_COLOR_BUFFER_BIT);
    
    CGFloat scale = [[UIScreen mainScreen]scale];
    
    //2、设置视口
    glViewport(self.frame.origin.x*scale, self.frame.origin.y, 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 frag:fragFile];
    
    //6、链接
    glLinkProgram(self.myProgram);
    GLint linkSuccess;
    
    //7、获取链接状态
    glGetProgramiv(self.myProgram, GL_LINK_STATUS, &linkSuccess);
    if (linkSuccess == GL_FALSE) {
        GLchar messages[256];
        glGetProgramInfoLog(self.myProgram, sizeof(messages), 0, &messages[0]);
        NSString *messageString = [NSString stringWithUTF8String:messages];
        NSLog(@"error:%@", messageString);
        
        return ;
    }else {
        glUseProgram(self.myProgram);
    }
    
    //8、创建顶点数组&索引数组
    GLfloat attrArr[] =
    {
        -0.5f, 0.5f, 0.0f,      1.0f, 0.0f, 1.0f, //左上0
        0.5f, 0.5f, 0.0f,       1.0f, 0.0f, 1.0f, //右上1
        -0.5f, -0.5f, 0.0f,     1.0f, 1.0f, 1.0f, //左下2
        
        0.5f, -0.5f, 0.0f,      1.0f, 1.0f, 1.0f, //右下3
        0.0f, 0.0f, 1.0f,       0.0f, 1.0f, 0.0f, //顶点4
    };
    
    //(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、处理顶点数据
    
    glBindBuffer(GL_ARRAY_BUFFER, _myVertices);
    glBufferData(GL_ARRAY_BUFFER, sizeof(attrArr), attrArr, GL_DYNAMIC_DRAW);
    
    GLuint position = glGetAttribLocation(self.myProgram, "position");
    
    //打开position
    glEnableVertexAttribArray(position);
    
    glVertexAttribPointer(position, 3, GL_FLOAT, GL_FALSE, sizeof(GLfloat)*6, NULL);
    
    
    //10、处理顶点颜色值
    GLuint positionColor = glGetAttribLocation(self.myProgram, "positionColor");
    
    glEnableVertexAttribArray(positionColor);
    
    glVertexAttribPointer(positionColor, 3, GL_FLOAT, GL_FALSE, sizeof(GLfloat)*6, (float *)NULL +3);
        
    //11、找到myProgram中的projectionMatrix、modelViewMatrix 2个矩阵的地址。如果找到则返回地址，否则返回-1，表示没有找到2个对象。
    GLuint projectionMatrixSlot = glGetUniformLocation(self.myProgram, "projectionMatrix");
    GLuint modelViewMatrixSlot = glGetUniformLocation(self.myProgram, "modelViewMatrix");
    
    float width = self.frame.size.width;
    float height = self.frame.size.height;
    
    
    //12、创建4*4投影矩阵
    KSMatrix4 _projectionMatrix;
    
    ksMatrixLoadIdentity(&_projectionMatrix);
    float aspect = width/height;
    
    ksPerspective(&_projectionMatrix, 30, aspect, 5.0, 20.0);
    
    glUniformMatrix4fv(projectionMatrixSlot, 1, GL_FALSE, (GLfloat *)&_projectionMatrix.m[0][0]);
    
    //13、创建一个4*4矩阵
    KSMatrix4 _modelViewMatrix;
    //获取单元矩阵
    ksMatrixLoadIdentity(&_modelViewMatrix);
    //平移z轴平移-10
    ksTranslate(&_modelViewMatrix, 0.0, 0.0, -10.0);
    //创建4*4矩阵，旋转矩阵
    KSMatrix4 _rotationMatrix;
    //设置为单元矩阵
    ksMatrixLoadIdentity(&_rotationMatrix);
    //旋转
    ksRotate(&_rotationMatrix, xAngle, 1.0, 0.0, 0.0);
    ksRotate(&_rotationMatrix, yAngle, 0.0, 1.0, 0.0);
    ksRotate(&_rotationMatrix, zAngle, 0.0, 0.0, 1.0);
    //矩阵相乘
    ksMatrixMultiply(&_modelViewMatrix, &_rotationMatrix, &_modelViewMatrix);
    
    //将模型视图矩阵传递到顶点着色器
    glUniformMatrix4fv(modelViewMatrixSlot, 1, GL_FALSE, (GLfloat *)&_modelViewMatrix.m[0][0]);
    
    //开启正背面剔除
    glEnable(GL_CULL_FACE);

    
    glDrawElements(GL_TRIANGLES, sizeof(indices)/sizeof(indices[0]), GL_UNSIGNED_INT, indices);
    
    //要求本地窗口系统显示OpenGL ES渲染<目标>
    [self.mContext presentRenderbuffer:GL_RENDERBUFFER];

以上的代码就是绘制顶点颜色金字塔的代码。

下面我们开始用纹理颜色和顶点颜色混合的方法去实现金字塔

首先，将两个GLSL文件代码进行修改：

precision highp float;
varying lowp vec4 varyColor;
varying lowp vec2 varyTextCoord;
uniform sampler2D colorMap;
void main(){
    lowp vec4 temp = texture2D(colorMap,varyTextCoord);
    vec4 mask = varyColor;
    float alpha = 0.3;
    
    vec4 tempColor = mask * (1.0-alpha) + temp * alpha;
    
    gl_FragColor = tempColor;
}




attribute vec4 position;
attribute vec4 positionColor;
attribute vec2 textCoordinate;

uniform mat4 projectionMatrix;
uniform mat4 modelViewMatrix;

varying lowp vec4 varyColor;

varying lowp vec2 varyTextCoord;

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

}

接下来在绘制的方法中的金字塔坐标去添加纹理坐标：

GLfloat attrArr[] =
    {
        -0.5f, 0.5f, 0.0f,      1.0f, 0.0f, 1.0f, 1.0f,1.0f,//左上0
        0.5f, 0.5f, 0.0f,       1.0f, 0.0f, 1.0f, 0.0f,1.0f,//右上1
        -0.5f, -0.5f, 0.0f,     1.0f, 1.0f, 1.0f, 0.0f,0.0f,//左下2
        
        0.5f, -0.5f, 0.0f,      1.0f, 1.0f, 1.0f, 1.0f,1.0f,//右下3
        0.0f, 0.0f, 1.0f,       0.0f, 1.0f, 0.0f, 0.0f,1.0f//顶点4
    };

在坐标设置完之后，我们需要处理纹理数据

 //处理纹理数据
    GLuint textCoor = glGetAttribLocation(self.myProgram, "textCoordinate");
    
    glEnableVertexAttribArray(textCoor);
    
    
    glVertexAttribPointer(textCoor, 2, GL_FLOAT, GL_FALSE, sizeof(GLfloat)*8, (float *)NULL+6);
    
    [self setupTexture:@"fengjing.jpg"];
    
    //设置纹理采样器
    glUniform1i(glGetUniformLocation(self.myProgram, "textCoordinate"), 0);
    

//从图片中加载纹理的函数

-(GLuint)setupTexture:(NSString *)fileName{
    //1、将UIImage转换成CGImageRef
    CGImageRef spriteImage = [UIImage imageNamed:fileName].CGImage;

    //判断图片是否获取成功
    if(!spriteImage){
        NSLog(@"图片加载失败");
        exit(1);
    }

    //2、读取图片大小，宽和高
    size_t width = CGImageGetWidth(spriteImage);
    size_t height = CGImageGetHeight(spriteImage);

    //3、获取图片字节数 宽*高*4（RGBA）

    GLubyte *spriteDate = (GLubyte *)calloc(width*height*4, sizeof(GLubyte));


    //4、创建上下文
 
    CGContextRef spriteContext = CGBitmapContextCreate(spriteDate, width, height, 8, width*4, CGImageGetColorSpace(spriteImage), kCGImageAlphaPremultipliedLast);


    //5、在CGContextRef上--> 将图片绘制出来

    CGRect rect = CGRectMake(0, 0, width, height);

    //6、使用默认方式绘制
    CGContextDrawImage(spriteContext, rect, spriteImage);
    
    //翻转
    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);
    
    //7、画完图就释放上下文
    CGContextRelease(spriteContext);

    //8、绑定纹理到默认的纹理ID
    glBindTexture(GL_TEXTURE_2D, 0);

    //9.设置纹理属性
    

    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数据

    glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, fw, fh, 0, GL_RGBA, GL_UNSIGNED_BYTE, spriteDate);

    //11、释放spriteDate
    free(spriteDate);

    return 0;
}

其中在处理顶点数据和顶点颜色时，我们需要修改数组长度为8

glVertexAttribPointer(position, 3, GL_FLOAT, GL_FALSE, sizeof(GLfloat)*8, NULL);

glVertexAttribPointer(positionColor, 3, GL_FLOAT, GL_FALSE, sizeof(GLfloat)*8, (float *)NULL +3);

当修改完之后，最终效果如下图所示：

QQ20200802-124515-HD.gif

完整demo