Go Mobile 例子 basic 源码分析

ghj1976 · · 2495 次点击 · · 开始浏览    
这是一个创建于 的文章,其中的信息可能已经有所发展或是发生改变。

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 下执行效果截图, 放大或者缩小窗口大小,这个三角形会按照比率做自动变化。

image image

源码分析如下:

三角形坐标定义:

Vertex (顶点)

顶点是3D建模时用到的最小构成元素,顶点定义为两条或是多条边交会的地方。在3D模型中一个顶点可以为多条边,面或是多边形所共享。一个顶点也可以代表一个点光源或是Camera的位置。

下图定义了三角形的三个顶点和对应的代码实现:

image

image

这里把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)

 

image_thumb9

为了绘制你的图形,你必须编译着色器代码,将它们添加至一个OpenGL ES Program对象中,然后执行链接。在你的绘制对象时,上述步骤就只执行一次。

这里的顶点着色器和片段着色器的具体含义后面分析。

着色器包含了OpenGL Shading Language(GLSL)代码,它必须先被编译然后才能在OpenGL环境中使用。要编译这些代码,需要在你的渲染器类中创建一个辅助方法,我们可以看到 gomobile 帮我们把这个方法封装在CreateProgram 中了 :

下面代码是 golang.org/x/mobile/exp/gl/glutil 的代码。

 image_thumb12

Note:编译OpenGL ES着色器及链接操作对于CPU周期和处理时间而言,消耗是巨大的,所以你应该避免重复执行这些事情。你应该在构建你的应用时,确保它们只被创建了一次,并且缓存以备后续使用。

 

传值给OpenGL

尽管我们已经有了数据,OpenGL并不能直接使用它们。OpenGL对它能读取的内存有些限制。你可以按需分配你的顶点数据,但是这些内存对OpenGL并不直接可见。因此,第一步就是分配OpenGL可见的内存,并填充我们的数据。这是通过缓存对象(buffer object,以下简称BO)来实现的。
一个缓存对象,是一个线性数组形式的内存,由OpenGL根据用户请求管理和分配。这块内存的内容可由用户控制,但是用户也仅能间接地控制。可以把buffer object当做GPU内存中的数组。
GPU可以快速读取它,因此在它里面存储数据有性能优势。

image

前面我们已经有了顶点数据,问题是它在我们的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。

要注意的使用完某个功能之后,要关闭这个功能以免影响后续操作:
image

 

顶点着色器

这个例子中的 vertexShader 就是 顶点着色器

image_thumb2

这里的 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  变量则是这个位置指针。

对应代码如下:

image

glctx.GetAttribLocation  返回指定属性变量的位置。

returns the location of an attribute variable.
在 GetAttribLocation 这个函数这里完成了映射捆绑。
 

赋值代码在下面:

image

有关这个函数的声明如下:

image

直接给 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 的关联指针

image

赋值,直接赋值,没有上面 position 那么多弯弯绕。

image

 

顶点的位置计算

计算中用到的几个值:

1、touchX、touchY  触点位置。

默认 touchX、touchY 是在屏幕的正中央,当有 touch 事件发生时,则是屏幕的对应位置。 以屏幕的实际像素为准。

image

屏幕的坐标系如下图,左上角为原点,向右是X轴,向下是Y轴。

image

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)

image

转换成下面OpenGL的坐标系(OpenGL中使用, 长宽 -1到1)。

image

转换的算法就是上面的,2倍减一, 由于Y轴涉及到翻转,再外面加一个负数。

6、OpenGL 的实际位置

在offset4位置画模型,就是模型的具体实际位置。

gl_Position = position + offset4;

注意,这里我们画的三角形 top left 点 是上面的,而不是向下, 模型我们直接就用的 OpenGL的这个坐标系。

由于坐标系是从 -1到 1, 长度 0.4 就是 1/5 , 我们可以看到画出来的三角形, 长宽 分别是屏幕尺寸的 1/5.

 

片段着色器

图像颜色的设置

fragmentShader

就是片段着色器

image_thumb5

precision用来确定默认精度修饰符,precision mediump float; 基本相当于中等精度。

参考: http://blog.csdn.net/wangyuchun_799/article/details/7752322

uniform vec4 color  只读的,4个浮点的向量 color。
所画图的颜色赋值过程

绑定关系

在应用启动时,完成绑定关系

image
 

赋值

每次需要绘画时,赋值。
image 
 

Render (渲染)

我们已定义好了多边形,下面就要了解如和使用OpenGL ES的API来绘制(渲染)这个多边形了。OpenGL ES提供了两类方法来绘制一个空间几何图形:

image

DrawArrays 使用VetexBuffer 来绘制,顶点的顺序由vertexBuffer中的顺序指定。

DrawElements 可以重新定义顶点的顺序,顶点的顺序由indices Buffer 指定。

前面我们已定义里顶点数组,因此我们将采用 DrawArrays  来绘制多边形。

同样的顶点,可以定义的几何图形可以有所不同,比如三个顶点,可以代表三个独立的点,也可以表示一个三角形,这就需要使用mode参数 来指明所需绘制的几何图形的基本类型。

image

有关各个 mode 的几何类型请参考: http://www.imobilebbs.com/wordpress/archives/1512

 

Coordinate System坐标系

OpenGL使用了右手坐标系统,右手坐标系判断方法:在空间直角坐标系中,让右手拇指指向x轴的正方向,食指指向y轴的正方向,如果中指能指向z轴的正方向,则称这个坐标系为右手直角坐标系。

image

 

坐标转换

OpenGL 绘图过程中涉及到 坐标系的转换, 类似下图。

image

图来自: 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
}

image

 

显示 fps 调试信息

image

参考资料:

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


有疑问加站长微信联系(非本文作者)

本文来自:博客园

感谢作者:ghj1976

查看原文:Go Mobile 例子 basic 源码分析

入群交流(和以上内容无关):加入Go大咖交流群,或添加微信:liuxiaoyan-s 备注:入群;或加QQ群:701969077

2495 次点击  ∙  1 赞  
加入收藏 微博
暂无回复
添加一条新回复 (您需要 登录 后才能回复 没有账号 ?)
  • 请尽量让自己的回复能够对别人有帮助
  • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`
  • 支持 @ 本站用户;支持表情(输入 : 提示),见 Emoji cheat sheet
  • 图片支持拖拽、截图粘贴等方式上传