Taobao FED

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

G3D —— Hybrid 环境下的 WebGL 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 和 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 项目的开发成本。

正在使用 Disqus 评论,请保持网络畅通