仓库源文，站点原文

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 官网，GCanvas 官网

为什么有 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 项目的开发成本。