β

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

Taobao FED | 淘宝前端团队 90 阅读

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 环境中来,遇到了一些困难:

所以,GCanvas 开发团队决定从零开始开发一个小型的 WebGL 渲染引擎 G3D,并以此作为 GCanvas 3D 能力的辅助。可以预见,G3D 和 GCanvas WebGL 将会是相辅相成,互相促进,共同发展;并且在较长一段时间内,G3D 将是使用 GCanvas WebGL 能力,除了直接操作原生 WebGL API 之外的唯一选择。

G3D 有哪些功能

G3D 具有 3D 渲染引擎的基本功能:

值得注意的是,由于 G3D 需要运行在 Hybrid 环境下,无法依赖 DOM API,所以与 three.js,Babylon.js 等浏览器环境的引擎相比,G3D 无法支持诸如声音播放,文件加载等非渲染核心功能。举例来说,如果使用 three.js 加载模型,只需要调用相关方法传入模型的 url 即可,three.js 会自动加载和解析模型;但在使用 G3D 时,你需要手动获取该文件的内容(Hybrid 与浏览器会不一样),然后将内容字符串传入 G3D.MeshBuilder 的相关方法。

G3D 的未来

目前 G3D 已经在淘宝 3D 定制等业务中有所使用,在未来的半年到一年里,G3D 主要的目的有两个:

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

G3D 是一款基于 We

作者:Taobao FED | 淘宝前端团队
淘宝前端团队(FED)
原文地址:G3D —— Hybrid 环境下的 WebGL 3D 渲染引擎, 感谢原作者分享。

发表评论