G3D —— Hybrid 环境下的 WebGL 3D 渲染引擎

Posted 2021-04-25 淘系前端团队

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 和 React Native 环境下提供了浏览器环境中 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 与 React Native 环境中不存在这些 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 项目的开发成本。