开源项目:G3D —— Hybrid 环境下的 WebGL 3D 渲染引擎

简介:

G3D 是一款基于 WebGL 的 JavaScript 3D 渲染引擎,借助 GCanvas,G3D 可以运行在 Weex,ReactNative 等 hybrid 环境下。G3D 由淘宝终端团队推出,并于 2018 年 3 月与 GCanvas 同时宣布正式开源。

那么就会有同学问了,G3D 和 three.js 有什么不同呀?G3D 和 GCanvas 究竟是什么关系啊?这篇文章,就聊一聊 G3D 这个产品的来龙去脉。

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

原文发布时间为:2018-03-8
本文作者:叶斋
本文来自云栖社区合作伙伴“ 淘宝技术”,了解相关信息可以关注“ 淘宝技术”微信公众号
相关文章
|
1月前
|
开发框架 Linux API
初步探索Pyglet库:打造轻量级多媒体与游戏开发利器
初步探索Pyglet库:打造轻量级多媒体与游戏开发利器
52 0
|
存储 移动开发 weex
Flutter 新一代图形渲染器 Impeller
Flutter 新一代图形渲染器 Impeller
768 0
Flutter 新一代图形渲染器 Impeller
|
人工智能 缓存 弹性计算
Orillusion 引擎正式开源!AIGC 时代下的 WebGPU 轻量级 3D 渲染引擎!
Orillusion 引擎正式开源!AIGC 时代下的 WebGPU 轻量级 3D 渲染引擎!
474 0
BXA
|
程序员 C++ 开发者
使用C++特性构建游戏引擎
游戏引擎是用来设计、开发和构建计算机游戏的软件框架。它们由一些基本的工具和程序构成,可帮助游戏设计师和开发者轻松地创建、管理和优化游戏。基本上,游戏引擎是实现游戏的所有技术的一个集合
BXA
136 0
|
前端开发 JavaScript 小程序
深度 | 跨平台Web Canvas渲染引擎架构的设计与思考
这篇文章主要从技术视角介绍下跨平台WebCanvas的架构设计以及一些关键模块的实现方案(以Android为主),有不准确的地方欢迎指正或者讨论。
深度 | 跨平台Web Canvas渲染引擎架构的设计与思考
|
监控 算法 数据可视化
跨平台多媒体渲染引擎OPR简介
跨平台多媒体渲染引擎OPR简介
375 0
跨平台多媒体渲染引擎OPR简介
|
存储 JavaScript 前端开发
北海(Kraken)构建大前端混合渲染技术体系 —— Web 与 Flutter Widget 混合渲染方案
北海(Kraken)构建大前端混合渲染技术体系 —— Web 与 Flutter Widget 混合渲染方案
434 1
北海(Kraken)构建大前端混合渲染技术体系 ——  Web 与 Flutter Widget  混合渲染方案
|
存储 JavaScript 前端开发
北海(Kraken)构建大前端混合渲染技术体系 —— Web 与 Flutter Widget 混合渲染方案
组件(模块)封装与开发可以给前端业务开发的过程带来非常大的研发效能的提升,各个业务域的开发者会定制开发许多符合自己业务场景的基础组件(模块)沉淀一套快速复用的物料体系,以保证业务开发的研发效能。同样,在各个 Flutter 团队,也有大量的 Flutter Widget 的物料,以及各种基于 Flutter 场景做的性能优化。在大前端的视角下,我们期望在端内拥有 Web 开发的研发效能以及动态性的同时,也期望通过一些 Native 的优化手段让应用拥有媲美原生的体验与性能。
239 0
北海(Kraken)构建大前端混合渲染技术体系 —— Web 与 Flutter Widget 混合渲染方案
|
JSON Dart 前端开发
深入解析基于 Flutter 的 Web 渲染引擎「北海 Kraken 」技术原理
深入解析基于 Flutter 的 Web 渲染引擎「北海 Kraken 」技术原理
694 0
深入解析基于 Flutter 的 Web 渲染引擎「北海 Kraken 」技术原理
|
前端开发 JavaScript
开源项目推荐:Electron,使用网页编程的方式构建跨平台的桌面应用
开源项目推荐:Electron,使用网页编程的方式构建跨平台的桌面应用
671 0

热门文章

最新文章