一般我们学习一种新的语言，创建的工程都是从Hello world开始的。不过OpenGL ES一般是从绘制一个三角形开始的。Demo
屏幕图像的显示原理
- 首先画三角形，如果是在一张白纸上画。那画画的步骤是这样的：
1.确定3个顶点（不在同一直线上）
2.把它们用线段连接起来
3.涂色（要是有颜色的话）
-
那OpenGL 绘制三角形的步骤又是怎样的呢？
我们先简单的来了解一下 OpenGL 的工作流程
渲染流程图
简化版
-
那么大致步骤和白纸绘图是一样的就是：
1.顶点数据（确定3个顶点）
2.传输给顶点着色器，然后进行图元配置（相当于：把它们用线段连接起来）
3.然后进行光栅化和插值（涂色）
光栅化就是将图元转化成一个二维片段的过程，而这些转化的片段将由片元着色器处理，这些二维片段就是屏幕上可绘制的像素。
OpenGL 可以绘制三种基本元素：点、线、 三角形
三角形是计算机图形学中常用的基本形状图元，（个人理解：可以说计算机绘制的所有多边形和柱体，都是由三角形组成的）
- 3.代码实现
这里先用GLKit实现，因为GLKit苹果封装了顶点着色器和片元着色器，对于刚入门的我们理解比较简单。 - 1.设置图层
//1.设置图层
func setupLayer() {
//创建一个OpenGL ES上下文并将其分配给从storyboard加载的视图
//注意⚠️：这里需要把storyboard的View记得添加为GLKView, 还有把ViewController继承自： GLKViewController
glkView = self.view as? GLKView
//配置视图创建的渲染缓冲区
/*
OpenGL ES 有一个缓存区，它用以存储将在屏幕中显示的颜色。你可以使用其属性来设置缓冲区中的每个
像素的颜色格式。
默认：GLKViewDrawableColorFormatRGBA8888，即缓存区的每个像素的最小组成部分（RGBA）使用
8个bit，（所以每个像素4个字节，4*8个bit）。
GLKViewDrawableColorFormatRGB565,如果你的APP允许更小范围的颜色，即可设置这个。会让你的
APP消耗更小的资源（内存和处理时间）
*/
glkView.drawableColorFormat = .RGBA8888
/*
OpenGL ES 另一个缓存区，深度缓冲区。帮助我们确保可以更接近观察者的对象显示在远一些的对象前面。
（离观察者近一些的对象会挡住在它后面的对象）
默认：OpenGL把接近观察者的对象的所有像素存储到深度缓冲区，当开始绘制一个像素时，它（OpenGL）
首先检查深度缓冲区，看是否已经绘制了更接近观察者的什么东西，如果是则忽略它（要绘制的像素，
就是说，在绘制一个像素之前，看看前面有没有挡着它的东西，如果有那就不用绘制了）。否则，
把它增加到深度缓冲区和颜色缓冲区。
缺省值是GLKViewDrawableDepthFormatNone，意味着完全没有深度缓冲区。
但是如果你要使用这个属性（一般用于3D游戏），你应该选择GLKViewDrawableDepthFormat16
或GLKViewDrawableDepthFormat24。这里的差别是使用GLKViewDrawableDepthFormat16
将消耗更少的资源，但是当对象非常接近彼此时，你可能存在渲染问题（）
*/
glkView.drawableDepthFormat = GLKViewDrawableDepthFormat.format24
/*
你的OpenGL上下文的另一个可选的缓冲区是stencil（模板）缓冲区。它帮助你把绘制区
域限定到屏幕的一个特定部分。它还用于像影子一类的事物=比如你可以使用stencil缓冲
区确保影子投射到地板。缺省值是GLKViewDrawableStencilFormatNone，
意思是没有stencil缓冲区，但是你可以通过设置其值为GLKViewDrawableStencilFormat8
（唯一的其他选项）使能它
*/
// view.drawableStencilFormat = GLKViewDrawableStencilFormat8;
//启用多重采样
/*
这是你可以设置的最后一个可选缓冲区，对应的GLKView属性是multisampling。
如果你曾经尝试过使用OpenGL画线并关注过"锯齿壮线"，multisampling就可以帮助你处理
以前对于每个像素，都会调用一次fragment shader（片段着色器），
drawableMultisample基本上替代了这个工作，它将一个像素分成更小的单元，
并在更细微的层面上多次调用fragment shader。之后它将返回的颜色合并，
生成更光滑的几何边缘效果。
要小心此操作，因为它需要占用你的app的更多的处理时间和内存。
缺省值是GLKViewDrawableMultisampleNone，但是你可以通过设置其值GLKViewDrawableMultisample4X为来使能它
*/
//view.drawableMultisample = GLKViewDrawableMultisample4X;
EAGLContext.setCurrent(context)
glEnable(GLenum(GL_DEPTH_TEST)) //开启深度测试，就是让离你近的物体可以遮挡离你远的物体。
glClearColor(1, 0, 0, 1.0)//设置surface的清除颜色，也就是渲染到屏幕上的背景色。
}
- 2.设置上下文
//2.设置上下文
func setupContext() {
//EAGLContext 是苹果在iOS 平台下实现的OpenGLES渲染层，用于渲染结果在目标surface上的更新。
//1.新建上下文
context = EAGLContext(api: EAGLRenderingAPI.openGLES2)
if (context == nil) {
NSLog("Failed to load context")
}
EAGLContext.setCurrent(context)
//开启深度测试，就是让离你近的物体可以遮挡离你远的物体。
glEnable(GLenum(GL_DEPTH_TEST))
//给glkView上下文赋值
glkView.context = context
}
- 3.设置顶点数据（位置，颜色，纹理(渲染图片时用到)）
//3.设置顶点数据（位置，颜色，纹理(渲染图片时用到)）
func setupVertexData() {
//第一步：设置顶点数组
//OpenGL ES的世界坐标系是[-1, 1]，故而点(0, 0)是在屏幕的正中间。
//顶点数据，3个是顶点坐标x,y,z；
let vertexArray: [GLfloat] = [
0.5, -0.5, 0.0, //右下
-0.5, 0.5, 0.0, //左上
-0.5, -0.5, 0.0 //左下
]
//第二步：开启顶点缓冲区
//顶点缓存区
var buffer: GLuint = GLuint()
//申请一个缓存区标识符
glGenBuffers(1, &buffer)
//glBindBuffer把标识符绑定到GL_ARRAY_BUFFER上
glBindBuffer(GLenum(GL_ARRAY_BUFFER), buffer)
//glBufferData把顶点数据从cpu内存复制到gpu内存
glBufferData(GLenum(GL_ARRAY_BUFFER), MemoryLayout<GLfloat>.size * vertexArray.count, vertexArray, GLenum(GL_STATIC_DRAW))
//第三步：设置合适的格式从buffer里面读取数据）
/*
默认情况下，出于性能考虑，所有顶点着色器的属性（Attribute）变量都是关闭的，意味着数据在着色器端是不可见的，哪怕数据已经上传到GPU，由glEnableVertexAttribArray启用指定属性，才可在顶点着色器中访问逐顶点的属性数据。glVertexAttribPointer或VBO只是建立CPU和GPU之间的逻辑连接，从而实现了CPU数据上传至GPU。但是，数据在GPU端是否可见，即，着色器能否读取到数据，由是否启用了对应的属性决定，这就是glEnableVertexAttribArray的功能，允许顶点着色器读取GPU（服务器端）数据。
*/
glEnableVertexAttribArray(GLuint(GLKVertexAttrib.position.rawValue))
//glVertexAttribPointer 使用来上传顶点数据到GPU的方法（设置合适的格式从buffer里面读取数据）
// index: 指定要修改的顶点属性的索引值
// size : 指定每个顶点属性的组件数量。必须为1、2、3或者4。初始值为4。（如position是由3个（x,y,z）组成，而颜色是4个（r,g,b,a））
// type : 指定数组中每个组件的数据类型。可用的符号常量有GL_BYTE, GL_UNSIGNED_BYTE, GL_SHORT,GL_UNSIGNED_SHORT, GL_FIXED, 和 GL_FLOAT，初始值为GL_FLOAT。
// normalized : 指定当被访问时，固定点数据值是否应该被归一化（GL_TRUE）或者直接转换为固定点值（GL_FALSE）
// stride : 指定连续顶点属性之间的偏移量。如果为0，那么顶点属性会被理解为：它们是紧密排列在一起的。初始值为0
// ptr : 指定一个指针，指向数组中第一个顶点属性的第一个组件。初始值为0 这个值受到VBO的影响
/*
VBO,顶点缓存对象
在不使用VBO的情况下：事情是这样的，ptr就是一个指针，指向的是需要上传到顶点数据指针。通常是数组名的偏移量。
在使用VBO的情况下：首先要glBindBuffer，以后ptr指向的就不是具体的数据了。因为数据已经缓存在缓冲区了。这里的ptr指向的是缓冲区数据的偏移量。这里的偏移量是整型，但是需要强制转换为const GLvoid *类型传入。注意的是，这里的偏移的意思是数据个数总宽度数值。
比如说：这里存放的数据前面有3个float类型数据，那么这里的偏移就是，3*sizeof(float).
最后解释一下，glVertexAttribPointer的工作原理：
首先，通过index得到着色器对应的变量openGL会把数据复制给着色器的变量。
以后，通过size和type知道当前数据什么类型，有几个。openGL会映射到float，vec2, vec3 等等。
由于每次上传的顶点数据不止一个，可能是一次4，5，6顶点数据。那么通过stride就是在数组中间隔多少byte字节拿到下个顶点此类型数据。
最后，通过ptr的指针在迭代中获得所有数据。
那么，最最后openGL如何知道ptr指向的数组有多长，读取几次呢。是的，openGL不知道。所以在调用绘制的时候，需要传入一个count数值，就是告诉openGL绘制的时候迭代几次glVertexAttribPointer调用。
*/
//(GLfloat *)NULL + 0 指针，指向数组首地址
glVertexAttribPointer(GLuint(GLKVertexAttrib.position.rawValue), 3, GLenum(GL_FLOAT), GLboolean(GL_FALSE), GLsizei(MemoryLayout<GLfloat>.size * 3), UnsafeRawPointer(bitPattern: MemoryLayout<GLfloat>.size * 0))
}
- 4.设置着色器：顶点着色器和片元着色器 (苹果GLKit已经将这两个着色器封装了)
//4.设置着色器：顶点着色器和片元着色器 (苹果GLKit已经将这两个着色器封装了)
func setupEffect() {
//着色器
myEffect = GLKBaseEffect()
}
- 5.绘制渲染(GLKViewDelegate 实现)
//5.绘制渲染
override func glkView(_ view: GLKView, drawIn rect: CGRect) {
glClearColor(0, 0, 1.0, 1.0)
//清除surface内容，恢复至初始状态
glClear(GLbitfield(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT))
//启动着色器
myEffect.prepareToDraw()
/*
定义：
void glDrawArrays( GLenum mode, GLint first, GLsizei count);
参数：
mode：
需要渲染的图元类型，包括 GL_POINTS, GL_LINE_STRIP, GL_LINE_LOOP, GL_LINES, GL_TRIANGLE_STRIP, GL_TRIANGLE_FAN ，GL_TRIANGLES。
first：
从数组缓存中的哪一位开始绘制，一般为0.
count：
数组中顶点的数量.
*/
glDrawArrays(GLenum(GL_TRIANGLES), 0, 6)
}
效果图
至此，我们就完成了从顶点数据到三角形的绘制了。接下来我们来看看如何绘制一张图片呢？
华丽的分割线
上面我们说过：OpenGL 可以绘制三种基本元素：点、线、 三角形
那么画一张图片的步骤是怎么样的呢？
1.画一个四边形
2.加载纹理（图片）
- 1.画一个四边形
一个四边形由两个三角形组成，画三角形上面我们已经讲过，所以画两个就行。
那么顶点数据就变成这样：
//2个三角形构成
let vertexArray: [GLfloat] = [
0.5, -0.5, 0.0, //右下
0.5, 0.5, 0.0, //右上
-0.5, 0.5, 0.0, //左上
0.5, -0.5, 0.0, //右下
-0.5, 0.5, 0.0, //左上
-0.5, -0.5, 0.0, //左下
]
还有绘制渲染那里的数据也变一下，顶点数据变为：6
glDrawArrays(GLenum(GL_TRIANGLES), 0, 6)
运行结果：会得出一个白色的四边形来。
思考题：怎么得出如下的四边形来呢？
提示：细心的同学，可能会发现（顶点数据可以包含：位置，颜色，纹理(渲染图片时用到)）
效果图
那么顶点数据中加入颜色值，还有设置一下颜色属性就行了。如下
let vertexArray: [GLfloat] = [
//位置：（x, y, z）颜色：（r, g, b）
0.5, -0.5, 0.0, 1.0, 0.0, 0.0, //右下
0.5, 0.5, 0.0, 1.0, 0.0, 0.0, //右上
-0.5, 0.5, 0.0, 1.0, 0.0, 0.0, //左上
0.5, -0.5, 0.0, 0.0, 1.0, 0.0, //右下
-0.5, 0.5, 0.0, 0.0, 1.0, 0.0, //左上
-0.5, -0.5, 0.0, 0.0, 1.0, 0.0, //左下
]
...
//顶点位置，顶点个数为：3，起点为：0，步长为：6
glEnableVertexAttribArray(GLuint(GLKVertexAttrib.position.rawValue))
glVertexAttribPointer(GLuint(GLKVertexAttrib.position.rawValue), 3, GLenum(GL_FLOAT), GLboolean(GL_FALSE), GLsizei(MemoryLayout<GLfloat>.size * 6), UnsafeRawPointer(bitPattern: MemoryLayout<GLfloat>.size * 0))
//顶点颜色，顶点个数为：3，起点为：3，步长为：6
glEnableVertexAttribArray(GLuint(GLKVertexAttrib.color.rawValue))
glVertexAttribPointer(GLuint(GLKVertexAttrib.color.rawValue), 3, GLenum(GL_FLOAT), GLboolean(GL_FALSE), GLsizei(MemoryLayout<GLfloat>.size * 6), UnsafeRawPointer(bitPattern: MemoryLayout<GLfloat>.size * 3))
这就完成了顶点和顶点颜色的渲染了。那么纹理(图片)的渲染道理也是差不多的，接下来让我们学习如何渲染纹理吧。
那么顶点的数据就多加上纹理坐标一般为(s, t)，那么顶点数据就变成这样了：
//第一步：设置顶点数组
//OpenGL ES的世界坐标系是[-1, 1]，故而点(0, 0)是在屏幕的正中间。
//顶点数据，前3个是顶点坐标x,y,z；后面2个是纹理坐标。
//纹理坐标系的取值范围是[0, 1]，原点是在左下角。故而点(0, 0)在左下角，点(1, 1)在右上角
//2个三角形构成
let vertexArray: [GLfloat] = [
//位置：（x, y, z） 颜色：（r, g, b） 纹理：（s, t）
0.5, -0.5, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, //右下
0.5, 0.5, 0.0, 1.0, 0.0, 0.0, 1.0, 1.0, //右上
-0.5, 0.5, 0.0, 1.0, 0.0, 0.0, 0.0, 1.0, //左上
0.5, -0.5, 0.0, 0.0, 1.0, 0.0, 1.0, 0.0, //右下
-0.5, 0.5, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, //左上
-0.5, -0.5, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0 //左下
]
...
//顶点位置，顶点个数为：3，起点为：0，步长为：8
glEnableVertexAttribArray(GLuint(GLKVertexAttrib.position.rawValue))
glVertexAttribPointer(GLuint(GLKVertexAttrib.position.rawValue), 3, GLenum(GL_FLOAT), GLboolean(GL_FALSE), GLsizei(MemoryLayout<GLfloat>.size * 6), UnsafeRawPointer(bitPattern: MemoryLayout<GLfloat>.size * 0))
//顶点颜色，顶点个数为：3，起点为：3，步长为：8
glEnableVertexAttribArray(GLuint(GLKVertexAttrib.color.rawValue))
glVertexAttribPointer(GLuint(GLKVertexAttrib.color.rawValue), 3, GLenum(GL_FLOAT), GLboolean(GL_FALSE), GLsizei(MemoryLayout<GLfloat>.size * 6), UnsafeRawPointer(bitPattern: MemoryLayout<GLfloat>.size * 3))
//纹理，顶点个数为：2，起点为：6，步长为：8
glEnableVertexAttribArray(GLuint(GLKVertexAttrib.texCoord0.rawValue))
glVertexAttribPointer(GLuint(GLKVertexAttrib.texCoord0.rawValue), 2, GLenum(GL_FLOAT), GLboolean(GL_FALSE), GLsizei(MemoryLayout<GLfloat>.size * 8), UnsafeRawPointer(bitPattern: MemoryLayout<GLfloat>.size * 6))
有了顶点数据有了纹理坐标之后，但是从始至终都没有加载过纹理，所以我们还需要: 加载纹理。
- 加载纹理
//加载纹理
func setupTexture() {
//第一步，获取纹理图片保存路径
let filePath = Bundle.main.path(forResource: "cTest", ofType: "jpg")
//GLKTextureLoaderOriginBottomLeft,纹理坐标是相反的
let options: [String : NSNumber] = [GLKTextureLoaderOriginBottomLeft : 1]
let textureInfo: GLKTextureInfo = try! GLKTextureLoader.texture(withContentsOfFile: filePath!, options: options)
//第一个纹理属性
myEffect.texture2d0.enabled = GLboolean(GL_TRUE)
//纹理的名字
myEffect.texture2d0.name = textureInfo.name
}
效果图
图片被压缩了，怎么办呢？我们可以把图片按照比例缩放至屏幕上。相当于UIImageView的scaleAspectFit。我们可以通过：
AVMakeRectWithAspectRatioInsideRect(CGSize aspectRatio, CGRect boundingRect)
这个方法有什么用呢？
这个方法就是计算在一个rect里，如果需要保持一个size比例不变，这个size的真实位置。
那么顶点数据就变为这样：
let image = UIImage(named: "cTest.jpg")!
let realRect = AVMakeRect(aspectRatio: image.size, insideRect: self.view.bounds)
let widthRatio: Float = Float(realRect.size.width/self.view.bounds.size.width)
let heightRatio: Float = Float(realRect.size.height/self.view.bounds.size.height)
let vertexArray: [GLfloat] = [
//位置：（x, y, z） 颜色：（r, g, b） 纹理：（s, t）
widthRatio, -heightRatio, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, //右下
widthRatio, heightRatio, 0.0, 1.0, 0.0, 0.0, 1.0, 1.0, //右上
-widthRatio, heightRatio, 0.0, 1.0, 0.0, 0.0, 0.0, 1.0, //左上
widthRatio, -heightRatio, 0.0, 0.0, 1.0, 0.0, 1.0, 0.0, //右下
-widthRatio, heightRatio, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, //左上
-widthRatio, -heightRatio, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0 //左下
]
效果图
愉快的学习记录到此就结束了，下一步我们将学习不使用GLKit，直接用GLSL进行渲染。
网友评论