-
- 日常开发中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要求纹路坐标原点在图片最下面,而图片信息中的原点一般都在最上方,一行行记录下来的,就会导致整个图片上下颠倒了。
Demo