更强的动画能力,更好的渲染质感,Oasis Engine 0.5 发布-阿里云开发者社区

开发者社区> AlibabaF2E> 正文
登录阅读全文

更强的动画能力,更好的渲染质感,Oasis Engine 0.5 发布

简介: 本次里程碑重点重新设计了动画系统,提供了全新的 Animator 组件并支持了 BlendShape 动画,动画能力得到大幅提升。渲染方面重新设计了 PBR 材质接口,环境光的漫反射部分提供了球谐模式,PBR 工作流得到提升。2D 方面增加了精灵图集功能,Spine 增强了换肤能力,Lottie 动画也集成到编辑器中。官网支持中英文双语,新增 20+ 示例。

作者|Oasis 团队-子鱼 Alibaba F2E  9月8日


image.png


Oasis Engine 是一个移动优先的高性能 Web 图形引擎:https://oasisengine.cn/ 

是广泛应用在支付宝五福、打年兽等各种互动业务中的图形引擎。


本次里程碑重点重新设计了动画系统,提供了全新的 Animator 组件并支持了 BlendShape 动画,动画能力得到大幅提升。渲染方面重新设计了 PBR 材质接口,环境光的漫反射部分提供了球谐模式,PBR 工作流得到提升。2D 方面增加了精灵图集功能,Spine 增强了换肤能力,Lottie 动画也集成到编辑器中。官网支持中英文双语,新增 20+ 示例。



动画


Animtor


动画是引擎必不可少的核心系统,可以让原本静态的场景生动起来。随着动画相关功能的需求越来越多,以及考虑未来引擎动画系统的健康发展,此次我们重新设计了动画系统,在功能、易用性和性能均带来不同程度的提升,同时也为动画系统未来的功能扩展打下了基础。主要升级点如下(详见文档):


  • 动画过渡:不再需要目标动画和原动画严格的骨骼匹配即可进行动画的过渡,可以很大程度减少设计师的工作量。
  • 动画叠加:改为依照所属动画层的混合模式及权重进行叠加并支持多层的动画叠加,你可以轻松的叠加多个动作而不只是之前的两个。
  • 动画状态机能力:你可以通过动画状态机去管理你的项目动画,状态与状态的切换会自动为你加上你设置好的过渡,暂时还不支持条件切换,该功能会在下个里程碑添加。
  • 动画状态裁剪:你可以对已有的动画切片进行裁剪而达到复用,而不需要设计师重新制作。
  • 动画事件:改为脚本化的驱动方式,使用方式更加灵活简单。


新版动画系统在性能上提升了 30% 左右:


image.png

老版动画系统

image.png

新版动画系统

测试环境:机型:Mi 11 Pro  |  浏览器:Chrome 92.0.4515.131  |  系统版本:Android11


除了引擎功能之外,编辑器也增加了动画编辑能力。通过 Animator 编辑器,你可以在上面方便的为动画添加过渡和叠加。


image.png


BlendShape


BlendShape(MorphTarget)动画是一种常见的动画表现形式,尤其在精细动画表现方面被广泛应用,比如角色面部表情动画。我们为 ModelMesh 新增了 BlendShape能力。此外我们还支持了 glTF 模型的 BlendShape 动画解析导入,并与新版的 Animator 系统进行了深度融合,和蒙皮动画一样,开发者加载带有 BlendShape 动画的 glTF 后只需调用 Animator 动画组件的 play() 接口即可播放使用,无需任何额外操作。详见文档。


640-2.gif



渲染


IBL 球谐


在 PBR 工作流中,我们可以设置环境光的漫反射和镜面反射来达到 IBL基于图像的照明)。不同于镜面反射,漫反射因为光反射波瓣很大,得到的是比较低频的信号,即看上去像是一张高斯模糊过后的贴图。在之前的版本中,我们通过设置环境光的 diffuseMode,来切换漫反射为纯色模式或者纹理模式,也就是说我们之前需要上传一张立方体纹理(6张贴图)才能实现漫反射的低频信号,而且占用了一个着色器的宝贵纹理单元;此次我们使用3阶球谐函数,即9个不同方向上的颜色值,27个数字(9*3 RGB)代替立方体纹理模式,不仅释放了一个着色器的纹理单元,而且带来了更好的效果。详见文档。(烘焙工具见下文预告)

image.png


PBR 接口重构


在过往的PBR材质接口设计中,我们妥协了太多业务衍生出来的接口,比如透明度贴图,其实完全可以合并到基础纹理的透明通道中来代替实现,不够纯粹的接口不仅使开发者感到迷茫,也会使运算性能下降。因此,经过对合理性和未来扩展性的充分考虑,我们对 PBR 材质接口进行了一次合理的 BreakingChange 调整,接口变动详见 PR 讨论。


背景纹理模式


场景中背景支持纹理模式的设置,可使用一张图片作为场景背景。详见文档。


640-3.gif



2D



SpriteAtlas


精灵图集是 2D 项目常用的优化手段,它可以带来更少的绘制次数,更少的显存占用和更少的资源请求次数,从而大大提升渲染性能,在 Oasis 中我们也引入了 SpriteAtlas 类来增加这项能力,开发者只需要加载图集资源便可得到 SpriteAtlas 实例,然后根据精灵名称获取对应的精灵即可。详见文档。

为了帮助开发者更便捷的使用 SpriteAtlas,Oasis 为开发者提供了图集打包 Tool-Atlas 工具,可以本地快速导出 SpriteAtlas 需要的 .atlas 文件。此外,在编辑器中已集成 Tool-Atals,开发者只需要选择需要打包的精灵,即可自动完成打包,如下:


640-4.gif



物理系统



在今年的 roadmap 规划中,Oasis 将物理相关功能的研发列为重点。本次里程碑对物理触发器事件的使用方式进行了改良,将其脚本化,和其他逻辑事件一样统一使用脚本回调的方式处理,在 Script 当中增加了对应的接口(详见文档):


image.png


同时,对 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 以下换装能力:


  1. 全套皮肤更换


640-6.gif640-5.gif


  1. 单附件更换

image.png


  1. 皮肤混搭

新增了addSeparateSlot 与 hackSeparateSlotTexture API。能够从动画中拆分指定名称的插槽并替换其材质,实现皮肤混搭的效果。

image.png


Lottie 组件


考虑到和引擎 2D 底层能力(比如 atlas、蒙版)的整合,本次对 Lottie runtime 进行了全面的重构,并且提供了命令行工具 tool-atlas-lottie 来帮助用户把原生的 lottie JSON 文档转成符合 Oasis atlas 标准的文件。详见文档。此外,也支持在编辑器中添加 Lottie 资产和组件,通过云端的转换能力代替命令行工具实现文件格式转换。详见文档。



其他更新


功能更新:

  • 引擎:BlinnPhone 材质支持顶点色;
  • 引擎:Color 增加常用方法;
  • 编辑器:新加纹理一键生成 Sprite 资源,并自定绑定纹理;
  • 编辑器:集成图集打包工具 Atlas;
  • 编辑器:增加项目升级引擎版本功能;
  • 编辑器:样式改版与交互优化。


文档进行了全面的整合优化:

  • 新增 第一个游戏 ,精灵图集 等引擎文档;
  • 新增 29 篇编辑器文档;
  • 优化 33 篇文档;
  • 网站支持中英文双语。


新增 24 个示例:

分类

示例

2D

  • Sprite Pivot 优化
  • Sprite SheetAnimation 优化
  • Sprite Material Glitch RGB Split
  • Sprite Atlas
  • Flappy Bird

Spine

  • Spine Skin Change
  • Spine Change Attachment
  • Spine Hack Slot Texture

Lottie

  • 性能基线

动画

  • 动画状态播放
  • 动画过渡
  • 动画叠加
  • 动画事件
  • BlendShape 动画

物理

  • Raycast
  • Collision Detection

灯光

  • Light Type
  • Ambient light

纹理

  • Texture Mipmap
  • Texture Anisotropic

相机

  • 多相机
  • RenderTarget
  • 多视图

场景

  • 纹理背景

整体单测覆盖率从 0.4 版本的 45% 提升到了 49%

  • 完善数学库单测。
  • 补充材质单测。


研发详情:



0.6 里程碑预告


IBL 烘焙


现在的 IBL 烘焙(各个 mipmap 级别的镜面反射贴图、漫反射球谐)都是交给开发者使用业界工具比如 IBL-Baker 制作,因为概念复杂以及工作流的割裂,很多开发者其实并没有充分利用 IBL 技术,使得 Oasis 的PBR 效果并不是那么有优势。因此在接下来的 0.6 里程碑中,Oasis 将推出自己的 IBL 离线烘焙工具,并集成到编辑器和官网中,使开发者能够快速接入 PBR 工作流。


物理


Oasis 将加入接入 PhysX 并重新设计物理相关的功能,除了重构现有 Collider 外,还将增加 CapsuleCollider,提供基于 PhysX 优化的raycast 方法,以及增加 RigidBody 组件等。


640-7.gif


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

分享:
AlibabaF2E
使用钉钉扫一扫加入圈子
+ 订阅

阿里经济体前端技术最新内容汇聚在此,由阿里经济体前端委员会官方运营。我们的愿景是建立全球一流的前端团队,链接商业,让数字世界触手可及是我们的使命。阿里经济体前端委员会致力于加强技术前瞻性、推进集体成长、提升国际影响力。同时我们运营着阿里经济体前端的官方公众号:Alibaba F2E,欢迎关注。

官方博客
最新文章
相关文章