作者|Oasis 团队-子鱼 Alibaba F2E 9月8日
Oasis Engine 是一个移动优先的高性能 Web 图形引擎:https://oasisengine.cn/
是广泛应用在支付宝五福、打年兽等各种互动业务中的图形引擎。
本次里程碑重点重新设计了动画系统,提供了全新的 Animator 组件并支持了 BlendShape 动画,动画能力得到大幅提升。渲染方面重新设计了 PBR 材质接口,环境光的漫反射部分提供了球谐模式,PBR 工作流得到提升。2D 方面增加了精灵图集功能,Spine 增强了换肤能力,Lottie 动画也集成到编辑器中。官网支持中英文双语,新增 20+ 示例。
动画
Animtor
动画是引擎必不可少的核心系统,可以让原本静态的场景生动起来。随着动画相关功能的需求越来越多,以及考虑未来引擎动画系统的健康发展,此次我们重新设计了动画系统,在功能、易用性和性能均带来不同程度的提升,同时也为动画系统未来的功能扩展打下了基础。主要升级点如下(详见文档):
- 动画过渡:不再需要目标动画和原动画严格的骨骼匹配即可进行动画的过渡,可以很大程度减少设计师的工作量。
- 动画叠加:改为依照所属动画层的混合模式及权重进行叠加并支持多层的动画叠加,你可以轻松的叠加多个动作而不只是之前的两个。
- 动画状态机能力:你可以通过动画状态机去管理你的项目动画,状态与状态的切换会自动为你加上你设置好的过渡,暂时还不支持条件切换,该功能会在下个里程碑添加。
- 动画状态裁剪:你可以对已有的动画切片进行裁剪而达到复用,而不需要设计师重新制作。
- 动画事件:改为脚本化的驱动方式,使用方式更加灵活简单。
新版动画系统在性能上提升了 30% 左右:
老版动画系统
新版动画系统
测试环境:机型:Mi 11 Pro | 浏览器:Chrome 92.0.4515.131 | 系统版本:Android11
除了引擎功能之外,编辑器也增加了动画编辑能力。通过 Animator 编辑器,你可以在上面方便的为动画添加过渡和叠加。
BlendShape
BlendShape(MorphTarget)动画是一种常见的动画表现形式,尤其在精细动画表现方面被广泛应用,比如角色面部表情动画。我们为 ModelMesh
新增了 BlendShape
能力。此外我们还支持了 glTF 模型的 BlendShape 动画解析导入,并与新版的 Animator
系统进行了深度融合,和蒙皮动画一样,开发者加载带有 BlendShape 动画的 glTF 后只需调用 Animator
动画组件的 play()
接口即可播放使用,无需任何额外操作。详见文档。
渲染
IBL 球谐
在 PBR 工作流中,我们可以设置环境光的漫反射和镜面反射来达到 IBL(基于图像的照明)。不同于镜面反射,漫反射因为光反射波瓣很大,得到的是比较低频的信号,即看上去像是一张高斯模糊过后的贴图。在之前的版本中,我们通过设置环境光的 diffuseMode,来切换漫反射为纯色模式或者纹理模式,也就是说我们之前需要上传一张立方体纹理(6张贴图)才能实现漫反射的低频信号,而且占用了一个着色器的宝贵纹理单元;此次我们使用3阶球谐函数,即9个不同方向上的颜色值,27个数字(9*3 RGB)代替立方体纹理模式,不仅释放了一个着色器的纹理单元,而且带来了更好的效果。详见文档。(烘焙工具见下文预告)
PBR 接口重构
在过往的PBR材质接口设计中,我们妥协了太多业务衍生出来的接口,比如透明度贴图,其实完全可以合并到基础纹理的透明通道中来代替实现,不够纯粹的接口不仅使开发者感到迷茫,也会使运算性能下降。因此,经过对合理性和未来扩展性的充分考虑,我们对 PBR 材质接口进行了一次合理的 BreakingChange 调整,接口变动详见 PR 讨论。
背景纹理模式
场景中背景支持纹理模式的设置,可使用一张图片作为场景背景。详见文档。
2D
SpriteAtlas
精灵图集是 2D 项目常用的优化手段,它可以带来更少的绘制次数,更少的显存占用和更少的资源请求次数,从而大大提升渲染性能,在 Oasis 中我们也引入了 SpriteAtlas
类来增加这项能力,开发者只需要加载图集资源便可得到 SpriteAtlas
实例,然后根据精灵名称获取对应的精灵即可。详见文档。
为了帮助开发者更便捷的使用 SpriteAtlas,Oasis 为开发者提供了图集打包 Tool-Atlas 工具,可以本地快速导出 SpriteAtlas 需要的 .atlas 文件。此外,在编辑器中已集成 Tool-Atals,开发者只需要选择需要打包的精灵,即可自动完成打包,如下:
物理系统
在今年的 roadmap 规划中,Oasis 将物理相关功能的研发列为重点。本次里程碑对物理触发器事件的使用方式进行了改良,将其脚本化,和其他逻辑事件一样统一使用脚本回调的方式处理,在 Script
当中增加了对应的接口(详见文档):
同时,对 raycast()
接口也进行了重新的设计。新增了 PhysicsManager
,将 raycast()
接口由场景调整至PhysicsManager
,同时也为后期接入更多的物理功能提供了便利。详见Raycast 文档、Collision-Detection 文档。
经过性能和功能上的权衡,Oasis 未来会首选 PhysX 作为物理底层的核心部分。本次里程碑发布了使用 EmScripten 编译的 PhysX.js 仓库,该仓库提供了非常便捷的编译脚本,以及对应的 NVIDIA PhysX Visual Debugger 联调配置。该仓库独立于 Oasis 引擎,欢迎感兴趣的朋友和同行共建并提出 Issue。
生态
Spine 组件
oasis spine在0.5里程碑优化了 buffer 数据的处理方式,一方面优化了内存,另一方面解决了顶点总数扩大时带来的渲染问题。详见文档。优化后,新版运行时能够支持 spine 以下换装能力:
- 全套皮肤更换
- 单附件更换
- 皮肤混搭
新增了addSeparateSlot
与 hackSeparateSlotTexture
API。能够从动画中拆分指定名称的插槽并替换其材质,实现皮肤混搭的效果。
Lottie 组件
考虑到和引擎 2D 底层能力(比如 atlas、蒙版)的整合,本次对 Lottie runtime 进行了全面的重构,并且提供了命令行工具 tool-atlas-lottie 来帮助用户把原生的 lottie JSON 文档转成符合 Oasis atlas 标准的文件。详见文档。此外,也支持在编辑器中添加 Lottie 资产和组件,通过云端的转换能力代替命令行工具实现文件格式转换。详见文档。
其他更新
功能更新:
- 引擎:BlinnPhone 材质支持顶点色;
- 引擎:Color 增加常用方法;
- 编辑器:新加纹理一键生成 Sprite 资源,并自定绑定纹理;
- 编辑器:集成图集打包工具 Atlas;
- 编辑器:增加项目升级引擎版本功能;
- 编辑器:样式改版与交互优化。
文档进行了全面的整合优化:
- 新增 第一个游戏 ,精灵图集 等引擎文档;
- 新增 29 篇编辑器文档;
- 优化 33 篇文档;
- 网站支持中英文双语。
新增 24 个示例:
分类 |
示例 |
2D |
|
Spine |
|
Lottie |
|
动画 |
|
物理 |
|
灯光 |
|
纹理 |
|
相机 |
|
场景 |
|
整体单测覆盖率从 0.4 版本的 45% 提升到了 49%:
- 完善数学库单测。
- 补充材质单测。
研发详情:
- 里程碑0.5
https://github.com/oasis-engine/engine/milestone/3?closed=1 - Change Log
https://github.com/oasis-engine/engine/releases/tag/v0.5.0
0.6 里程碑预告
IBL 烘焙
现在的 IBL 烘焙(各个 mipmap 级别的镜面反射贴图、漫反射球谐)都是交给开发者使用业界工具比如 IBL-Baker 制作,因为概念复杂以及工作流的割裂,很多开发者其实并没有充分利用 IBL 技术,使得 Oasis 的PBR 效果并不是那么有优势。因此在接下来的 0.6 里程碑中,Oasis 将推出自己的 IBL 离线烘焙工具,并集成到编辑器和官网中,使开发者能够快速接入 PBR 工作流。
物理
Oasis 将加入接入 PhysX 并重新设计物理相关的功能,除了重构现有 Collider
外,还将增加 CapsuleCollider
,提供基于 PhysX 优化的raycast
方法,以及增加 RigidBody
组件等。