紧接上文WebApp，在终端设备中，不管是游戏引擎还是UIKit，图形图像都是基于跨平台的OpenGL ES技术，区分不同的场景，图形图像分为两个分支，一个以高性能的图形显示为目标的cocos2d-x引擎，一个是以省电节能适合App的UIKit框架。希望对大家学习WebApp有所帮助。

一）今天我们继续逆向思维

Game VS App，既然都是基于OpenGL ES，那我们找出共同点，是否可以让二者的界限，变得更模糊？既可以满足高性能的Game引擎，可以保持App开发？

请仔细观看上图，我们的框架多了一个WebKit？
对的，我以为WebKit是统一Game与App的一个代表作，也就是H5框架，它提供的WebGL本质是就是一层薄薄的OpenGL的封装，可以提供高性能的图形渲染能力；上层提供的Dom框架，从一开始就定义为UI布局而生。灵活轻量的JavaScript语言，无需编译直接运行的方式，为前端开发者提供了所见即所得的开发支持。

二）开发方式的对比

我们对比H5的开发方式，与Android、iOS、Cocos2d正在推动的python、Swift、lua，脚本语言的开发架构图：

仔细回想，H5、Android、iOS都是逐步落实脚本化开发，为开发者省去大量的编译、连接、打包的过程，进一步提高开发效率。在这一领域，H5绝对是实现这一思想最早的领路人，也是最早、最全面实现跨平台的技术框架，我们的机器可能不会安装java，但一定有浏览器，浏览器不一定是IE，可能是Friefox、Chrome，但浏览器一定支持JS语言！

JS语言虽然各大浏览器相互发展，有WebKit、Blink、SpiderMonkey、IE等等，我们在对比上面的架构图，基本分为三层：

三）灵活的脚本 + 高性能的图形内核

3.1上层脚本开发

js、lua、swift、python，未开发者提供所见即所得的技术支持，节约开发成本，带来了一部分资源浪费【这一层就是用来浪费硬件资源的】

3.2中层渲染引擎

WebCore、Blink、iOSUIKit，AndroidUIKit，Cocos2d-x，高性能的图形渲染引擎，直接通过JNI、OCRuntime、JSBinding、luaBinding，提供上层API支持【这一层就是用来最大化的利用硬件资源】

3.3 底层跨平台

OpenGL ES统一的跨平台的渲染API，打通Android、iOS等等终端设备，这里不得不提一下苹果公司一直是OpenGL ES的推动者，最早支持OpenGL ES2.0也是苹果，这个领域苹果是做的最好的，乔布斯30年的持续坚持，怪不得UIKit做的这么好！【这一层就是用来统一多终端多设备，跨平台的】

四）看到这里，我们必需明确一个观点

脚本语言是将来App开发的方向，这一点从苹果、谷歌等大公司的技术推动就可以看得出来。同时，C/C++/OC/Java等语言会长期共荣，也不会消亡。

这里我们引出本章的主题，所见即所得的开发技术:
上层脚本语言，我选择JS语言【开发者众多，已经通吃PC、phone、pad】
中层渲染引擎，我选择JSBindingPIXI，也就是WebApp2.0的主角，AEPixi框架【为06、07两篇文章填坑】
底层跨平台，我选择OpenGL ES2.0【所有的终端都支持】

五）pixijs是什么？

Super fast HTML 5 2D rendering engine that uses webGL with canvas fallback
The aim of this project is to provide a fast lightweight 2D library that works across all devices. The Pixi renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast.

六）使用pixijs做UIKit

任何一个UIKit框架，都需要向下封装OpenGL，向上提供高级API支持，这里pixijs已经提供了基础的UI组件。目前JS已经存在大量的UI框架，主流的有：xx./xxxx/xxx，我们从替换到掉底层的基础控件，如下图所示：
同时也要讲讲WebGL做UI的好处。

七）使用C/C++Native化pixijs

在《Cocos2d-JS为什么选择SpiderMonkey》已经讲过，JS在执行一条命令的时候，由于是弱类型语言，在解释执行过程中，需要做多次转换，对于需要大量浮点运算的图形引擎来说，即使打开jit功能，运行效率也无法与传统的C/C++媲美。上面我们提到，中层渲染引擎就是要充分挖掘硬件性能，为上层脚本的解释执行，提供高效的支持。

八）C++与SpiderMonkey的结合

这里我们将采用SpiderMonkey + C/C++的方式，通过JSBinding注入到JS运行环境，将大量矩阵转换、浮点数计算、碰撞检测、物理系统、地图系统等等Native化为高效的C/C++，同时针对不同的平台，提供硬件加速功能。让上层的JS语言无需关心底层的实现，只要关注业务逻辑即可。

总结

本章节，架构图比较多，没有做详细讲解，先挖坑，还请大家持续的关注。
编程也是一门哲学，未来的世界我们无法断言，立足现在，回顾过去，发现技术发展过程的本质，才能更好的为将来坐准备，切勿学习诺基亚，生于忧患死于安乐。

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标移动开发Webapp频道！