1. 日常开发中OpenGL开发流程
  • 1.设置图层
  • 2.设置图形上下文
  • 3.设置烘托缓冲区(renderBuffer)
  • 4.设置帧缓冲区(frameBuffer)
  • 5.编译、链接着色器(shader)
  • 6.设置VBO (Vertex Buffer Objects)
  • 7.设置纹路
  • 8.烘托

上面的根本进程本质就是着色器的烘托进程,所以咱们要了解着色器的烘托进程是非常重要的

  • 着色器烘托流程
    iOS视觉-- (03) OpenGL ES+GLSL如何渲染图片解析

iOS视觉-- (03) OpenGL ES+GLSL如何渲染图片解析

  • 1.设置图层
    //1.设置图层
    func setupLayer() {
        //给图层开辟空间
        /*
         重写layerClass,将DDView返回的图层从CALayer替换成CAEAGLLayer
         */
        myEagLayer = (self.layer as! CAEAGLLayer)
        //设置扩大倍数
        self.contentScaleFactor = UIScreen.main.scale
        //CALayer 默许是透明的,有必要将它设为不透明才干将其可见。
        self.layer.isOpaque = true
        //设置描绘特点,这儿设置不保持烘托内容以及色彩格局为RGBA8
        /*
         kEAGLDrawablePropertyRetainedBacking                          表明绘图外表显现后,是否保留其内容。这个key的值,是一个经过NSNumber包装的bool值。如果是false,则显现内容后不能依赖于相同的内容,ture表明显现后内容不变。一般只要在需求内容保存不变的情况下,才建议设置运用,由于会导致功能降低、内存运用量增减。一般设置为flase.
        kEAGLDrawablePropertyColorFormat
             可制作外表的内部色彩缓存区格局,这个key对应的值是一个NSString指定特定色彩缓存区目标。默许是kEAGLColorFormatRGBA8;
             kEAGLColorFormatRGBA8:32位RGBA的色彩,4*8=32位
             kEAGLColorFormatRGB565:16位RGB的色彩,
             kEAGLColorFormatSRGBA8:sRGB代表了标准的红、绿、蓝,即CRT显现器、LCD显现器、投影机、打印机以及其他设备中色彩再现所运用的三个根本色素。sRGB的色彩空间基于独立的色彩坐标,能够使色彩在不同的设备运用传输中对应于同一个色彩坐标体系,而不受这些设备各自具有的不同色彩坐标的影响。
         */
        myEagLayer.drawableProperties = [kEAGLDrawablePropertyRetainedBacking : false, kEAGLDrawablePropertyColorFormat : kEAGLColorFormatRGBA8]
    }
    override class var layerClass: AnyClass {
        return CAEAGLLayer.self
    }
  • 2.设置图形上下文
    //2.设置上下文
    func setupContext() {
        //创立上下文 指定OpenGL ES 烘托API版本,咱们运用2.0
        if let context = EAGLContext(api: .openGLES2) {
            //设置图形上下文
            EAGLContext.setCurrent(context)
            myContext = context
        } else {
            print("Create context failed!")
        }
    }

buffer 分为frame buffer 和 render buffer2个大类。其间frame buffer 相当于render buffer的办理者。frame buffer object即称FBO,常用于离屏烘托缓存等。render buffer则又可分为3类。colorBuffer、depthBuffer、stencilBuffer。

iOS视觉-- (03) OpenGL ES+GLSL如何渲染图片解析

iOS视觉-- (03) OpenGL ES+GLSL如何渲染图片解析

  • 3.设置烘托缓冲区(renderBuffer)
    //3.设置RenderBuffer
    func setupRenderBuffer() {
        //1.界说一个缓存区
        var buffer: GLuint = 0
        //2.请求一个缓存区标识符
        glGenRenderbuffers(1, &buffer)
        //3.将标识符绑定到GL_RENDERBUFFER
        glBindRenderbuffer(GLenum(GL_RENDERBUFFER), buffer)
        renderBuffer = buffer
        //frame buffer仅仅是办理者,不需求分配空间;render buffer的存储空间的分配,关于不同的render buffer,运用不同的API进行分配,而只要分配空间的时候,render buffer句柄才确定其类型
        //renderBuffer烘托缓存区分配存储空间
        myContext.renderbufferStorage(Int(GL_RENDERBUFFER), from: myEagLayer)
    }
  • 4.设置帧缓冲区(frameBuffer)
    //4.设置FrameBuffer
    func setupFrameBuffer() {
        //1.界说一个缓存区
        var buffer: GLuint = 0
        //2.请求一个缓存区标志
        glGenFramebuffers(1, &buffer)
        //3.将标识符绑定到GL_FRAMEBUFFER
        glBindFramebuffer(GLenum(GL_FRAMEBUFFER), buffer)
        //4.
        frameBuffer = buffer
        //生成空间之后,则需求将renderbuffer跟framebuffer进行绑定,调用glFramebufferRenderbuffer函数进行绑定,后边的制作才干起作用
        //5.将_renderBuffer 经过glFramebufferRenderbuffer函数绑定到GL_COLOR_ATTACHMENT0上。
        glFramebufferRenderbuffer(GLenum(GL_FRAMEBUFFER), GLenum(GL_COLOR_ATTACHMENT0), GLenum(GL_RENDERBUFFER), renderBuffer)
        //接下来,能够调用OpenGL ES进行制作处理,终究则需求在EGALContext的OC办法进行终究的烘托制作。这儿烘托的color buffer,这个办法会将buffer烘托到CALayer上。- (BOOL)presentRenderbuffer:(NSUInteger)target;
    }
    //MARK: - Private
    private func checkFramebuffer(error: inout NSError?) ->Bool {
        // 查看 framebuffer 是否创立成功
        let status: Int32 = Int32(glCheckFramebufferStatus(GLenum(GL_FRAMEBUFFER)))
        var errorMessage: String = ""
        var result = false
        switch status {
            case GL_FRAMEBUFFER_UNSUPPORTED:
                errorMessage = "framebuffer不支持该格局"
            case GL_FRAMEBUFFER_COMPLETE:
                NSLog("framebuffer 创立成功")
                result = true
                break;
            case GL_FRAMEBUFFER_INCOMPLETE_MISSING_ATTACHMENT:
                errorMessage = "Framebuffer不完整 缺失组件"
            case GL_FRAMEBUFFER_INCOMPLETE_DIMENSIONS:
                errorMessage = "Framebuffer 不完整, 附加图片有必要要指定巨细"
            default:
                // 一般是超出GL纹路的最大约束
                errorMessage = "未知过错 error !!!!"
        }
        NSLog("%@", errorMessage)
        error = errorMessage.count > 0 ? NSError(domain: "com.XXXX.error", code: Int(status), userInfo: ["ErrorMessage" : errorMessage]) : nil
        return result
    }
  • 5.1着色器(shader) 根据上面的烘托流程图,咱们知道咱们烘托得时候有必要要两个着色器:极点着色器和片元着色器 所以咱们要了解着色器言语GLSL(GL Shading Language),稍后咱们在对其进行简略了解GLSL。

三种向OpenGL 着⾊器传递烘托数据的办法:特点、Uniform、纹路 四种常见变量存储限定符:const、varying、attribute、uniform

运用时一些留意事项,如下图:

iOS视觉-- (03) OpenGL ES+GLSL如何渲染图片解析

咱们经过下图来简略了解下这些变量的传输进程,如下图:

iOS视觉-- (03) OpenGL ES+GLSL如何渲染图片解析

  • 极点着色器代码:
attribute vec4 position; //极点数据
attribute vec2 textCoordinate; //纹路坐标
uniform mat4 rotateMatrix; //旋转矩阵
varying lowp vec2 varyTextCoord; //传递给片元着色器纹路坐标
void main()
{
    varyTextCoord = textCoordinate;
    vec4 vPos = position;
    vPos = vPos * rotateMatrix;
    gl_Position = vPos;
}
  • 片元着色器代码:
varying lowp vec2 varyTextCoord; //极点着色器传递过来的纹路坐标
uniform sampler2D colorMap; //纹路
void main()
{
    gl_FragColor = texture2D(colorMap, varyTextCoord);
}
    1. 编译、链接着色器
   //5.1 编译着色器(shader)
    func compileShader(shaderName: String, shaderType: GLenum) -> GLuint {
        //途径
        let shaderPath = Bundle.main.path(forResource: shaderName, ofType: nil)!
        //创立临时shader
        let shader: GLuint = glCreateShader(shaderType)
        //获取shader途径-C言语字符串
        if let context = try? String(contentsOfFile: shaderPath, encoding: .utf8) {
#warning("法一")
            if let value = context.cString(using:String.Encoding.utf8) {
                var tempString: UnsafePointer<GLchar>? = UnsafePointer<GLchar>?(value)
                glShaderSource(shader, 1, &tempString, nil)
            }
#warning("法二")
            //            context.withCString { (pointer) in
            //                var source: UnsafePointer<GLchar>? = pointer
            //                //绑定shader
            //                //将极点着色器源码附加到着色器目标上。
            //                //参数1:shader,要编译的着色器目标 *shader
            //                //参数2:numOfStrings,传递的源码字符串数量 1个
            //                //参数3:strings,着色器程序的源码(真实的着色器程序源码)
            //                //参数4:lenOfStrings,长度,具有每个字符串长度的数组,或NULL,这意味着字符串是NULL停止的
            //                glShaderSource(shader, 1, &source, nil)
            //            }
        } else {
            NSLog("Failed to load vertex shader")
            return 0
        }
        //编译Shader
        glCompileShader(shader)
        //获取加载Shader的日志信息
        //日志信息长度
        var logLength: GLint = 0
        /*
         在OpenGL中有办法能够获取到 shader过错
         参数1:目标,从哪个Shader
         参数2:获取信息类别,
         GL_COMPILE_STATUS       //编译状况
         GL_INFO_LOG_LENGTH      //日志长度
         GL_SHADER_SOURCE_LENGTH //着色器源文件长度
         GL_SHADER_COMPILER  //着色器编译器
         参数3:获取长度
         */
        glGetShaderiv(shader, GLenum(GL_COMPILE_STATUS), &logLength)
        //判别日志长度 > 0
        if (logLength == GL_FALSE)
        {
            //创立日志字符串
            //malloc(Int(logLength))
            //UnsafeMutablePointer<GLchar>.init(bitPattern: Int(logLength))!
            let log: UnsafeMutablePointer<GLchar> = UnsafeMutablePointer<GLchar>.allocate(capacity: 512)
            /*
             获取日志信息
             参数1:着色器
             参数2:日志信息长度
             参数3:日志信息长度地址
             参数4:日志存储的位置
             */
            //            glGetShaderInfoLog(shader, logLength, &logLength, log)
            glGetShaderInfoLog(shader, 512, nil, log)
            //打印日志信息
            NSLog("Shader compile log:\n%s", log)
            //开释日志字符串
            free(log)
        }
        return shader
    }
    //5.2 链接着色器(shader)
    func compileAndLinkShader() {
        //1. 创立program
        let program: GLuint = glCreateProgram()
        //2. 编译极点着色器程序、片元着色器程序
        let vertShader = compileShader(shaderName: "shaderv.vsh", shaderType: GLenum(GL_VERTEX_SHADER))
        let fragShader = compileShader(shaderName: "shaderf.fsh", shaderType: GLenum(GL_FRAGMENT_SHADER))
        //3. 把着色器绑定到终究的程序
        glAttachShader(program, vertShader)
        glAttachShader(program, fragShader)
        //开释不需求的shader
        glDeleteShader(vertShader)
        glDeleteShader(fragShader)
        myPrograme = program
        //4.链接
        glLinkProgram(myPrograme)
        var linkStatus: GLint = 0
        //获取链接状况
        glGetProgramiv(myPrograme, GLenum(GL_LINK_STATUS), &linkStatus)
        if linkStatus == GL_FALSE {
            NSLog("link error")
            let message = UnsafeMutablePointer<GLchar>.allocate(capacity: 512)
            glGetProgramInfoLog(myPrograme, GLsizei(MemoryLayout<GLchar>.size * 512), nil, message)
            let str = String(utf8String: message)
            print("error = \(str ?? "没获取到过错信息")")
            return
        }
        NSLog("Program link success!")
    }
  • 6.设置VBO (Vertex Buffer Objects)
  //6.设置VBO (Vertex Buffer Objects)
    func setupVBO() {
        //6.设置极点、纹路坐标
        //前3个是极点坐标,后2个是纹路坐标
        let attrArr: [GLfloat] = [
            0.5, -0.5, 0.0,    1.0, 0.0, //右下
            -0.5, 0.5, 0.0,    0.0, 1.0, // 左上
            -0.5, -0.5, 0.0,   0.0, 0.0, // 左下
            0.5, 0.5, 0.0,     1.0, 1.0, // 右上
            -0.5, 0.5, 0.0,    0.0, 1.0, // 左上
            0.5, -0.5, 0.0,    1.0, 0.0  // 右下
        ]
        /*
         处理图片倒置问题 法二:☑️
         0.5, -0.5, 0.0,        1.0, 1.0, //右下
         -0.5, 0.5, 0.0,        0.0, 0.0, // 左上
         -0.5, -0.5, 0.0,       0.0, 1.0, // 左下
         0.5, 0.5, 0.0,         1.0, 0.0, // 右上
         -0.5, 0.5, 0.0,        0.0, 0.0, // 左上
         0.5, -0.5, 0.0,        1.0, 1.0, // 右下
         */
        //-----处理极点数据--------
        //极点缓存区
        var attrBuffer: GLuint = 0
        //请求一个缓存区标识符
        glGenBuffers(1, &attrBuffer)
        //将attrBuffer绑定到GL_ARRAY_BUFFER标识符上
        glBindBuffer(GLenum(GL_ARRAY_BUFFER), attrBuffer)
        //把极点数据从CPU拷贝到GPU上
        glBufferData(GLenum(GL_ARRAY_BUFFER), MemoryLayout<GLfloat>.size * attrArr.count, attrArr, GLenum(GL_DYNAMIC_DRAW))
    }
  • 7.设置纹路
    //7.设置纹路
    @discardableResult func setupTexture(_ name: String) -> GLuint {
        //1.获取图片的CGImageRef
        guard let spriteImage: CGImage = UIImage(named: name)?.cgImage else {
            NSLog("读取图片失败")
            return 0
        }
        //2.读取图片的巨细:宽和高
        let width = spriteImage.width
        let height = spriteImage.height
        //3.获取图片字节数: 宽x高x4(RGBA)
//        let spriteData: UnsafeMutablePointer = UnsafeMutablePointer<GLbyte>.allocate(capacity: MemoryLayout<GLbyte>.size * width * height * 4)
        let spriteData: UnsafeMutableRawPointer = calloc(width * height * 4, MemoryLayout<GLbyte>.size)
        //4.创立上下文
        /*
         参数1:data,指向要烘托的制作图画的内存地址
         参数2:width,bitmap的宽度,单位为像素
         参数3:height,bitmap的高度,单位为像素
         参数4:bitPerComponent,内存中像素的每个组件的位数,比如32位RGBA,就设置为8
         参数5:bytesPerRow,bitmap的每一行的内存所占的比特数
         参数6:colorSpace,bitmap上运用的色彩空间  kCGImageAlphaPremultipliedLast:RGBA
         */
        let spriteContext: CGContext = CGContext(data: spriteData, width: width, height: height, bitsPerComponent: 8, bytesPerRow: width * 4, space: spriteImage.colorSpace!, bitmapInfo: CGImageAlphaInfo.premultipliedLast.rawValue)!
        //5.在CGContextRef上绘图
        let rect = CGRect(x: 0, y: 0, width: width, height: height)
        /*
         CGContextDrawImage 运用的是Core Graphics结构,坐标系与UIKit 不一样。UIKit结构的原点在屏幕的左上角,Core Graphics结构的原点在屏幕的左下角。
         CGContextDrawImage
         参数1:绘图上下文
         参数2:rect坐标
         参数3:制作的图片
         */
        //处理图片倒置问题 办法三: ☑️
//        spriteContext.translateBy(x: 0, y: CGFloat(height))//向下平移图片的高度
//        spriteContext.scaleBy(x: 1, y: -1)
        spriteContext.draw(spriteImage, in: rect)
        /*
         处理图片倒置问题 办法三:
         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);
         */
        //6、画图完毕就开释上下文->swift 主动办理,OC手动开释:CGContextRelease(spriteContext);
//        CGContextRelease(spriteContext);
        //7.绑定纹路到默许的纹路ID(这儿只要一张图片,故而相当于默许于片元着色器里边的colorMap,如果有多张图不能够这么做)
        glBindTexture(GLenum(GL_TEXTURE_2D), 0)
        //设置纹路特点
        /*
         参数1:纹路维度
         参数2:线性过滤、为s,t坐标设置形式
         参数3:wrapMode,环绕形式
         */
        glTexParameteri(GLenum(GL_TEXTURE_2D), GLenum(GL_TEXTURE_MIN_FILTER), GL_LINEAR)
        glTexParameteri(GLenum(GL_TEXTURE_2D), GLenum(GL_TEXTURE_MAG_FILTER), GL_LINEAR)
        glTexParameteri(GLenum(GL_TEXTURE_2D), GLenum(GL_TEXTURE_WRAP_S), GL_CLAMP_TO_EDGE)
        glTexParameteri(GLenum(GL_TEXTURE_2D), GLenum(GL_TEXTURE_WRAP_T), GL_CLAMP_TO_EDGE)
        //载入纹路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(GLenum(GL_TEXTURE_2D), 0, GL_RGBA, GLsizei(width), GLsizei(height), 0, GLenum(GL_RGBA), GLenum(GL_UNSIGNED_BYTE), spriteData)
        //绑定纹路
        /*
         参数1:纹路维度
         参数2:纹路ID,由于只要一个纹路,给0就能够了。
         */
        glBindTexture(GLenum(GL_TEXTURE_2D), 0)
        //开释spriteData
        free(spriteData)
        return 0
    }
  • 8.烘托
    //8.开始制作
    func renderLayer() {
        //设置清屏色彩
        glClearColor(0.0, 1.0, 0.0, 1.0)
        //铲除屏幕
        glClear(GLbitfield(GL_COLOR_BUFFER_BIT))
        //1.设置视口巨细
        let scale = UIScreen.main.scale
        glViewport(GLint(self.frame.origin.x * scale), GLint(self.frame.origin.y * scale), GLsizei(self.frame.size.width * scale), GLsizei(self.frame.size.height * scale))
        //运用着色器
        glUseProgram(myPrograme)
#warning("留意⚠️:想要获取shader里边的变量,这儿要记住要在glLinkProgram后边、后边、后边")
        //----处理极点数据-------
        //将极点数据经过myPrograme中的传递到极点着色程序的position
        /*1.glGetAttribLocation,用来获取vertex attribute的进口的.
          2.告知OpenGL ES,经过glEnableVertexAttribArray,
          3.终究数据是经过glVertexAttribPointer传递过去的。
         */
        //留意:第二参数字符串有必要和shaderv.vsh中的输入变量:position保持共同
        let position = glGetAttribLocation(myPrograme, "position")
        //设置适宜的格局从buffer里边读取数据
        glEnableVertexAttribArray(GLuint(position))
        //设置读取方法
        //参数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(GLuint(position), 3, GLenum(GL_FLOAT), GLboolean(GL_FALSE), GLsizei(MemoryLayout<GLfloat>.size * 5), UnsafeRawPointer(bitPattern: MemoryLayout<GLfloat>.size * 0))
        //----处理纹路数据-------
        //1.glGetAttribLocation,用来获取vertex attribute的进口的.
        //留意:第二参数字符串有必要和shaderv.vsh中的输入变量:textCoordinate保持共同
        let textCoord = glGetAttribLocation(myPrograme, "textCoordinate")
        //设置适宜的格局从buffer里边读取数据
        glEnableVertexAttribArray(GLuint(textCoord))
        //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(GLuint(textCoord), 2, GLenum(GL_FLOAT), GLboolean(GL_FALSE), GLsizei(MemoryLayout<GLfloat>.size * 5), UnsafeRawPointer(bitPattern: MemoryLayout<GLfloat>.size * 3))
        //----基础变换-------
        /*
         一个共同变量在一个图元的制作进程中是不会改变的,所以其值不能在glBegin/glEnd中设置。共同变量适合描绘在一个图元中、一帧中甚至一个场景中都不变的值。共同变量在极点shader和片段shader中都是只读的。首要你需求取得变量在内存中的位置,这个信息只要在连接程序之后才可取得。
         */
        //rotate等于shaderv.vsh中的uniform特点,rotateMatrix
        let rotate = glGetUniformLocation(myPrograme, "rotateMatrix")
        //获取烘托的弧度
        let radians = 0 * Double.pi / 180.0 //处理图片倒置问题 法一:180 ⚠️(图片仍是水平翻转)
        //求得弧度关于的sin\cos值
        let s: GLfloat = GLfloat(sin(radians))
        let c: GLfloat = GLfloat(cos(radians))
        //z轴旋转矩阵 参考3D数学第二节课的环绕z轴烘托矩阵公式
        //为什么和课程不一样?由于在3D课程顶用的是横向量,在OpenGL ES用的是列向量
        let zRotation: [GLfloat] = [
            c,-s, 0, 0,
            s, c, 0, 0,
            0, 0, 1, 0,
            0, 0, 0, 1
        ]
        //设置旋转矩阵
        /*
         void glUniformMatrix4fv (GLint location, GLsizei count, GLboolean transpose, const GLfloat * value)
         经过共同变量(uniform修饰的变量)引证将共同变量值传入烘托管线。
         location : uniform的位置。
         count : 需求加载数据的数组元素的数量或许需求修正的矩阵的数量。
         transpose : 指明矩阵是列优先(column major)矩阵(GL_FALSE)仍是行优先(row major)矩阵(GL_TRUE)。
         value : 指向由count个元素的数组的指针。
         */
        //留意⚠️: OC 中&zRotation[0]能够设置,swift 中不可♂️,没效果
        glUniformMatrix4fv(rotate, 1, GLboolean(GL_FALSE), zRotation)
        glDrawArrays(GLenum(GL_TRIANGLES), 0, 6)
        myContext.presentRenderbuffer(Int(GL_RENDERBUFFER))
    }

拓宽资料:

iOS视觉-- (03) OpenGL ES+GLSL如何渲染图片解析

iOS视觉-- (03) OpenGL ES+GLSL如何渲染图片解析

iOS视觉-- (03) OpenGL ES+GLSL如何渲染图片解析

运行结果:

iOS视觉-- (03) OpenGL ES+GLSL如何渲染图片解析
图片为什么是倒过来的? 处理办法6种

在运用OpenGL函数加载纹路到图形时,常常遇到纹路上下颠倒的问题。原因是由于OpenGL要求纹路坐标原点在图片最下面,而图片信息中的原点一般都在最上方,一行行记录下来的,就会导致整个图片上下颠倒了。

Demo