-
- 日常开发中OpenGL开发流程
- 1.设置图层
- 2.设置图形上下文
- 3.设置渲染缓冲区（renderBuffer）
- 4.设置帧缓冲区（frameBuffer）
- 5.编译、链接着色器（shader）
- 6.设置VBO (Vertex Buffer Objects)
- 7.设置纹理
- 8.渲染
上面的基本步骤实质就是着色器的渲染过程，所以我们要了解着色器的渲染过程是非常重要的
- 着色器渲染流程
- 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。
- 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
使用时一些注意事项，如下图：
我们通过下图来简单了解下这些变量的传输过程，如下图：
- 顶点着色器代码：
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);
}
-
- 编译、链接着色器
//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))
}
拓展资料：
运行结果：
图片为什么是倒过来的？ 解决办法6种
在使用OpenGL函数加载纹理到图形时，经常遇到纹理上下颠倒的问题。原因是因为OpenGL要求纹理坐标原点在图片最下面，而图片信息中的原点一般都在最上方，一行行记录下来的，就会导致整个图片上下颠倒了。
