G3D 渲染引擎简介

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

本文同步分享在 博客“xiangzhihong8”（CSDN）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。