OpenGL ES(OpenGL for Embedded Systems)是 OpenGL 三维图形API的子集,针对手机、PDA和游戏主机等嵌入式设备而设计。该API由Khronos集团定义推广,Khronos是一个图形软硬件行业协会,该协会主要关注图形和多媒体方面的开放标准。
go 的 golang.org/x/mobile/gl 这个包 是基于OpenGL ES 2了, 文档在: https://godoc.org/golang.org/x/mobile/gl
Khronos的api文档在https://www.khronos.org/opengles/sdk/docs/man/
以 gomobile 的例子中的 basic 例子(源码在:https://github.com/golang/mobile/tree/master/example)为例,它的执行效果如下,
注意这是在不同长宽比下 mac 下执行效果截图, 放大或者缩小窗口大小,这个三角形会按照比率做自动变化。
源码分析如下:
三角形坐标定义:
Vertex (顶点)
顶点是3D建模时用到的最小构成元素,顶点定义为两条或是多条边交会的地方。在3D模型中一个顶点可以为多条边,面或是多边形所共享。一个顶点也可以代表一个点光源或是Camera的位置。
下图定义了三角形的三个顶点和对应的代码实现:
这里把float的坐标转换成 byte数组,它将会传入OpenGl ES的图形处理流程中。
这里定义的不是固定像素尺寸,而是相对屏幕大小的尺寸(屏幕大小是2*2,具体原因后面解释)。
使用 OpenGL 画图形需要定义的项
使用OpenGL ES 2.0画一个定义好的形状需要较多代码,因为你需要提供很多图形渲染流程的细节。具体而言,你必须定义如下几项:
- 顶点着色器(Vertex Shader):用来渲染形状顶点的OpenGL ES代码。
- 片段着色器(Fragment Shader):使用颜色或纹理渲染形状表面的OpenGL ES代码。
- 程式(Program):一个OpenGL ES对象,包含了你希望用来绘制一个或更多图形所要用到的着色器。
你需要至少一个顶点着色器来绘制一个形状,以及一个片段着色器为该形状上色。这些着色器必须被编译然后添加到一个OpenGL ES Program当中,并利用它来绘制形状。
程式(Program)
为了绘制你的图形,你必须编译着色器代码,将它们添加至一个OpenGL ES Program对象中,然后执行链接。在你的绘制对象时,上述步骤就只执行一次。
这里的顶点着色器和片段着色器的具体含义后面分析。
着色器包含了OpenGL Shading Language(GLSL)代码,它必须先被编译然后才能在OpenGL环境中使用。要编译这些代码,需要在你的渲染器类中创建一个辅助方法,我们可以看到 gomobile 帮我们把这个方法封装在CreateProgram 中了 :
下面代码是 golang.org/x/mobile/exp/gl/glutil 的代码。
Note:编译OpenGL ES着色器及链接操作对于CPU周期和处理时间而言,消耗是巨大的,所以你应该避免重复执行这些事情。你应该在构建你的应用时,确保它们只被创建了一次,并且缓存以备后续使用。
传值给OpenGL
尽管我们已经有了数据,OpenGL并不能直接使用它们。OpenGL对它能读取的内存有些限制。你可以按需分配你的顶点数据,但是这些内存对OpenGL并不直接可见。因此,第一步就是分配OpenGL可见的内存,并填充我们的数据。这是通过缓存对象(buffer object,以下简称BO)来实现的。
一个缓存对象,是一个线性数组形式的内存,由OpenGL根据用户请求管理和分配。这块内存的内容可由用户控制,但是用户也仅能间接地控制。可以把buffer object当做GPU内存中的数组。
GPU可以快速读取它,因此在它里面存储数据有性能优势。
前面我们已经有了顶点数据,问题是它在我们的RAM中而不是OpenGL的内存中。要把他搬到OpenGL的内存,需要做上面三行代码:
第一行,创建buffer object。这时候我们还未给他分配任何空间。
第二行,BindBuffer函数将新建的BO绑定到ARRAY_BUFFER上下文中。
第三行,我们通过BufferData函数完成OpenGL中分配空间+数据拷贝的工作。
当这个函数执行完后,BO中就有了顶点数据了。这个函数最后的参数可以是下面值:
- STATIC_DRAW 保存的数据内容只被程序定义一次,GL绘制命令可以使用多次。本文实例代码用的是这个。
- DYNAMIC_DRAW 保存的数据内容将被程序重复定义,GL绘制命令可以使用多次。
后面我们看到 triangleData 再也没有被传递给 OpenGL 过,就是因为这个参数的让后面复用了。
管道开关
有了顶点的定义,下面一步就是如何将它们传给OpenGL ES库,OpenGL ES提供一个成为”管道Pipeline”的机制,这个管道定义了一些“开关”来控制OpenGL ES支持的某些功能,缺省情况这些功能是关闭的,如果需要使用OpenGL ES的这些功能,需要明确告知OpenGL “管道”打开所需功能。
对于这个示例,需要告诉OpenGL库打开 Vertex buffer以便使用顶点坐标Buffer。
要注意的使用完某个功能之后,要关闭这个功能以免影响后续操作:
顶点着色器
这个例子中的 vertexShader 就是 顶点着色器
这里的 version 100 是 Android、iOS、WebGL 使用的 OpenGL ES 2.0 对应的GLSL ES版本。参考: http://blog.csdn.net/u013467442/article/details/46765335
uniform vec2 offset;
attribute vec4 position;
是两个输入参数,uniform 标示只读、attribute 标示专用于顶点着色器,只读。
vec2 标示只包含2个浮点的向量,vec4标示包含4个浮点的向量。
gl_Position是顶点着色器裁切空间输出的位置向量。如果你想让屏幕上渲染出东西gl_Position必须使用。否则我们什么都看不到。
注意 gl_Position 的坐标系跟手机屏幕坐标像素的坐标系不一样。它的坐标系是 右手坐标系统。 详见后面。
顶点着色器 position 赋值
GLSL 中的position (attribute 类型)是模型的原始坐标,即这里的 triangleData,
go中 position 变量则是这个位置指针。
对应代码如下:
glctx.GetAttribLocation 返回指定属性变量的位置。
returns the location of an attribute variable.
在 GetAttribLocation 这个函数这里完成了映射捆绑。
赋值代码在下面:
有关这个函数的声明如下:
直接给 VertexAttribPointer 赋值是不支持的, 你需要使用 BindBuffer 绑定数据缓存区,然后用 BufferData 来填充数值。本例子在初始化时赋值用了标示 STATIC_DRAW , 即后面可以复用这个赋值。
Direct use of VertexAttribPointer to load data into OpenGL is not supported via the Go bindings. Instead, use BindBuffer with an ARRAY_BUFFER and then fill it using BufferData.
The stride argument specifies the byte offset between consecutive vertex attributes.
offset 的赋值
GLSL 中 offset 只是 uniform 的类型, 这样的赋值就简单多了。
建立 go 跟 openGL 的关联指针
赋值,直接赋值,没有上面 position 那么多弯弯绕。
顶点的位置计算
计算中用到的几个值:
1、touchX、touchY 触点位置。
默认 touchX、touchY 是在屏幕的正*,当有 touch 事件发生时,则是屏幕的对应位置。 以屏幕的实际像素为准。
屏幕的坐标系如下图,左上角为原点,向右是X轴,向下是Y轴。
2、sz.WidthPx、sz.HeightPx 屏幕的实际大小尺寸。
对应坐标也如上图。 WidthPx 是宽度、 HeightPx 是长度。
3、传递入 OpenGL 的 offset 值
offset.x 相对屏幕宽度的触点位置 touchX/float32(sz.WidthPx)
offset.y 项目屏幕高度的触点位置 touchY/float32(sz.HeightPx)
它们的值都是 0-1 之间。
4、传递入 OpenGL 的 position 值。
这个值就是 triangleData 的值,只是传递方法有点绕。
5、OpenGL 实际运算的 offset4
这里要做坐标体系的转换。
vec4 offset4 = vec4(2.0*offset.x-1.0, 1.0-2.0*offset.y, 0, 0);
x 放大2倍,
我们会把下面这个基于像素的坐标系(长宽 0到1)
转换成下面OpenGL的坐标系(OpenGL中使用, 长宽 -1到1)。
转换的算法就是上面的,2倍减一, 由于Y轴涉及到翻转,再外面加一个负数。
6、OpenGL 的实际位置
在offset4位置画模型,就是模型的具体实际位置。
gl_Position = position + offset4;
注意,这里我们画的三角形 top left 点 是上面的,而不是向下, 模型我们直接就用的 OpenGL的这个坐标系。
由于坐标系是从 -1到 1, 长度 0.4 就是 1/5 , 我们可以看到画出来的三角形, 长宽 分别是屏幕尺寸的 1/5.
片段着色器
图像颜色的设置
fragmentShader
就是片段着色器
precision用来确定默认精度修饰符,precision mediump float; 基本相当于中等精度。
参考: http://blog.csdn.net/wangyuchun_799/article/details/7752322
uniform vec4 color 只读的,4个浮点的向量 color。
所画图的颜色赋值过程
绑定关系
在应用启动时,完成绑定关系
赋值
每次需要绘画时,赋值。
Render (渲染)
我们已定义好了多边形,下面就要了解如和使用OpenGL ES的API来绘制(渲染)这个多边形了。OpenGL ES提供了两类方法来绘制一个空间几何图形:
DrawArrays 使用VetexBuffer 来绘制,顶点的顺序由vertexBuffer中的顺序指定。
DrawElements 可以重新定义顶点的顺序,顶点的顺序由indices Buffer 指定。
前面我们已定义里顶点数组,因此我们将采用 DrawArrays 来绘制多边形。
同样的顶点,可以定义的几何图形可以有所不同,比如三个顶点,可以代表三个独立的点,也可以表示一个三角形,这就需要使用mode参数 来指明所需绘制的几何图形的基本类型。
有关各个 mode 的几何类型请参考: http://www.imobilebbs.com/wordpress/archives/1512
Coordinate System坐标系
OpenGL使用了右手坐标系统,右手坐标系判断方法:在空间直角坐标系中,让右手拇指指向x轴的正方向,食指指向y轴的正方向,如果中指能指向z轴的正方向,则称这个坐标系为右手直角坐标系。
坐标转换
OpenGL 绘图过程中涉及到 坐标系的转换, 类似下图。
图来自: http://zhangwenli.com/blog/2015/08/28/opengl-matrix-transformations/
使用e.External 避免多次刷屏绘画
if glctx == nil || e.External {
// As we are actively painting as fast as
// we can (usually 60 FPS), skip any paint
// events sent by the system.
continue
}
显示 fps 调试信息
参考资料:
package gl 文档
https://godoc.org/golang.org/x/mobile/gl
Android OpenGL ES 开发教程 从入门到精通 这里讲的是 OpenGL ES 1.1的知识
http://blog.csdn.net/mapdigit/article/details/7526556
绘制形状
http://hukai.me/android-training-course-in-chinese/graphics/opengl/draw.html
OpenGL ES2 学习教程4——Shader语言
https://segmentfault.com/a/1190000004410579