开源项目: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

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
本文作者:叶斋
本文来自云栖社区合作伙伴“淘宝技术”,了解相关信息可以关注“淘宝技术”微信公众号

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Gear的技术优势
Gear 关键的技术创新在于其新颖的跨合约通信方式。Gear 使用 Actor 通信模型和 WebAssembly VM,支持并行处理,并具有速度快、成本低的优势。 事实证明, WebAssembly VM 比任何其他方案运行速度都要快。使用 WebAssembly 可以让 GEAR 的智能合约直接编译成机器码,运行速度媲美原生。更快的速度意味着更低的交易成本和更高的效率。
6 0
C 语言项目_项目流程|学习笔记
快速学习 C 语言项目_项目流程
5 0
mysql事务隔离级别
mysql事务隔离级别
9 0
SpringBoot时间格式化的5种方法!(9)
SpringBoot时间格式化的5种方法!(9)
4 0
ThreadLocal不好用?那是你没用对!(6)
ThreadLocal不好用?那是你没用对!(6)
3 0
MQTT知识大全【科普贴】
MQTT(Message Queuing Telemetry Transport,消息队列遥测传输协议),是一种基于客户端与服务器之间发布/订阅(publish/subscribe)模式的"轻量级"通讯协议。为了保证通讯的安全性和可靠性,该协议基于TCP/IP协议构建。由IBM在1999年发布,最初被用于石油管道传感器与卫星的通讯连接,2014年,它正式成为一个OASIS开放标准并得到了大量开源语言的支持。
8 0
SpringBoot时间格式化的5种方法!(2)
SpringBoot时间格式化的5种方法!(2)
3 0
Bootstrap 起步|学习笔记
快速学习 Bootstrap 起步
4 0
SpringBoot时间格式化的5种方法!(3)
SpringBoot时间格式化的5种方法!(3)
6 0
前后端分离 -- 深入浅出 Spring Boot + Vue 实现工程项目进度管理系统 Vue不过如此~
前后端分离 -- 深入浅出 Spring Boot + Vue 实现工程项目进度管理系统 Vue不过如此~
5 0
+关注
技术小能手
云栖运营小编~
7208
文章
9
问答
来源圈子
更多
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载