2018 / 03 / 07
G3D —— Hybrid 环境下的 WebGL 3D 渲染引擎
G3D 是一款开源 3D 渲染引擎，目前由我开发和维护。这篇宣传最初发表于淘宝前端团队博客。这里是个人博客上保存的一份备份。
G3D 是一款基于 WebGL 的 JavaScript 3D 渲染引擎，借助 GCanvas，G3D 可以运行在 Weex，ReactNative 等 hybrid 环境下。G3D 由淘宝终端团队推出，并于 2018 年 3 月与 GCanvas 同时宣布正式开源。
那么就会有同学问了，G3D 和 three.js 有什么不同呀？G3D 和 GCanvas 究竟是什么关系啊？这篇文章，就聊一聊 G3D 这个产品的来龙去脉。
为什么有 G3D
G3D 的起源要从 GCanvas 说起。
GCanvas 在 Weex 和 ReactNative 环境下提供了浏览器环境中 Canvas 的绘图能力，手机淘宝 App 的 Weex 容器已经内置了 GCanvas。和 Canvas 一样，GCanvas 的绘图能力包括 2d 上下文和 webgl 上下文的绘图能力。2d 上下文相对较为简单，可以直接拿来使用；而 webgl 上下文比较复杂，从 webgl API 到真正的 3d 应用之间往往还需要一层 3d 渲染引擎，社区中的 three.js，babylon.js 等就是这类 3d 渲染引擎中的翘楚。
GCanvas 开发团队曾尝试把 three.js 和 babylon.js 接入到 GCanvas 环境中来，遇到了一些困难：
- 社区中的 webgl 渲染引擎依赖了大量的 DOM API 和原生对象，在 Weex 与 ReactNative 环境中不存在这些 API 与原生对象。开发团队也曾尝试对 Babylon.js 和 three.js 进行改造，但发现成本比较高，而且后续跟进原版项目 bugfix 与功能迭代的难度也比较大。
- 如 GCanvas 文档所述， GCanvas 目前仅支持 WebGL API 的一个子集。直接引入 Babylon.js 和 three.js，在 GCanvas环境下还暂时无法正常工作。
- 由于 three.js 和 babylon.js 的体积已经比较巨大，其中很多功能在手机淘宝的业务场景中暂时用不到。因此，即使能够成功改造，巨大的 js 体积也会拖垮手淘中很多页面的性能。
所以，GCanvas 开发团队决定从零开始开发一个小型的 WebGL 渲染引擎 G3D，并以此作为 GCanvas 3D 能力的辅助。可以预见，G3D 和 GCanvas WebGL 将会是相辅相成，互相促进，共同发展；并且在较长一段时间内，G3D 将是使用 GCanvas WebGL 能力，除了直接操作原生 WebGL API 之外的唯一选择。
G3D 有哪些功能
G3D 具有 3D 渲染引擎的基本功能：
- 定义场景，定义透视相机。
- 光照方面，目前支持 1)环境光；2)平行光；3)点光；4)穹顶光。
- 材质方面，目前支持 1)基于冯氏反射模型的冯式面材质（朗伯面是冯氏面的一种特殊情况）；2) 非光照材质。
- 几何体方面，目前支持直接创建的几何体包括立方体，球体，圆柱，圆锥，折线；当然更多情况下是可以通过解析模型数据创建几何体。
- 模型解析方面，目前支持 1) OBJ/MTL 模型；2) STL 模型这两种模型格式。
- 交互：支持 3D点选/拖拽（由于 GCanvas framebuffer 仍未正常，此功能仅在浏览器中有效）。
- 动画：支持骨骼动画和蒙皮动画。
值得注意的是，由于 G3D 需要运行在 Hybrid 环境下，无法依赖 DOM API，所以与 three.js，babylon.js 等浏览器环境的引擎相比，G3D 无法支持诸如声音播放，文件加载等非渲染核心功能。举例来说，如果使用 three.js 加载模型，只需要调用相关方法传入模型的 url 即可，three.js 会自动加载和解析模型；但在使用 G3D 时，你需要手动获取该文件的内容（Hybrid 与浏览器会不一样），然后将内容字符串传入 G3D.MeshBuilder 的相关方法。
G3D 的未来
目前 G3D 已经在淘宝 3D 定制等业务中有所使用，在未来的半年到一年里，G3D 主要的目的有两个：
- 追赶 Babylon.js 和 three.js 的高阶功能，如阴影、Shader材质、预处理、法线纹理、光线追踪等等，在其过程中推动 GCanvas WebGL 的完善，同时赋能业务和社区。
- 进一步打通 G3D 与建模-动画工具链的通道，完善模型-材质数据结构，提升渲染效果，达到「（Blender 等工具中）所见即（G3D渲染出）所得」的开发体验，最大程度地降低 3D 项目的开发成本。