更强的动画能力,更好的渲染质感,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. 皮肤混搭

新增了addSeparateSlothackSeparateSlotTexture 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


相关文章
|
18天前
|
缓存 数据处理 数据库
构建高效移动应用:基于云函数的动态背景同步技术
【4月更文挑战第8天】 在移动应用开发中,提升用户体验和后端服务效率始终是核心目标之一。随着云计算的兴起,云函数作为一种轻量级的计算服务模式,为移动应用提供了新的优化途径。本文将探讨一种利用云函数实现的动态背景同步技术,该技术能够在不占用移动设备额外资源的前提下,实现数据的实时更新和同步,从而为用户提供无缝衔接的体验。我们将详细介绍这一技术的工作原理、实现方法以及在实际移动应用中的应用场景。
|
XML JSON 前端开发
官方Lottie库能力增强实现
背景Lottie提供了播放复杂、酷炫动能力画,在移动端被广泛利用。在我们的应用中也被频繁、大量使用。它使用简单,仅需几行代码就能播放设计师设计的动画,帮助开发节省了时间成本。也正因为使用频繁,在使用过程中我们遇到了一些相关的问题。使用Lottie支持加载本地文件播放,也支持远程下载zip,json文件进行播放。这俩者在我们平时开发中都有使用到。本地播放本地播放比较简单。可以直接在xml实现,也可以
985 0
官方Lottie库能力增强实现
|
4月前
|
存储 缓存 运维
实时云渲染平台有哪些?那个更好用?
实时云渲染平台有哪些?那个更好用?
|
4月前
|
编解码 运维 5G
实时云渲染与本地渲染:优劣对比与未来趋势
实时云渲染与本地渲染:优劣对比与未来趋势
|
11月前
|
JavaScript 前端开发 数据库
Unity3d(webGL)构建数字孪生小案例(包含完整的数据交互体系)附赠完整代码
Unity3d(webGL)构建数字孪生小案例(包含完整的数据交互体系)附赠完整代码,请关注公众号:拼搏的小浣熊,获取简化版的代码!
|
vr&ar 图形学 Windows
CATIA等设计类软件实时渲染流化解决方案
**实时渲染技术可以实现在VR/AR眼镜中查看CATIA模型,其实不仅仅是VR和AR眼镜,还可以是手机、平板、电脑中直接打开网页就可以查看和浏览CATIA等3D模型。而VR/AR眼镜中通过实时渲染技术不仅仅可以查看CATIA模型,其他的比如BIM/Unreal/unity等模型也都是OK的。**那具体是怎么实现的呢?使用起来麻烦吗?能不能支持多人同时使用呢?关于这些对于实时渲染比较相关的问题,这里点量云小芹做统一解释说明。
164 0
CATIA等设计类软件实时渲染流化解决方案
|
数据管理 测试技术 C#
一个近乎完美的Unity全平台原生c#热更方案
HybridCLR是一个特性完整、零成本、高性能、低内存的近乎完美的Unity全平台原生c#热更方案。
515 0
一个近乎完美的Unity全平台原生c#热更方案
|
缓存 编解码 算法
Skia深入分析10——Skia库的性能与优化潜力
Skia库性能与优化潜力 图形/渲染 算法/架构 作为图形渲染引擎,性能上是非常重要的,按通常Android手机60帧的刷新率,绘制一帧的总时间只有16ms,可谓是毫厘必争。提升性能到最后,就必然跟不同CPU的特性打交道,毕竟一个SIMD下去,好做的提升5、6倍,不那么好做的也达到2、3倍,收益极其可观。 SIMD,在intel上是SSE,在arm上是neon,在
7804 0
|
存储 JavaScript 前端开发
北海(Kraken)构建大前端混合渲染技术体系 —— Web 与 Flutter Widget 混合渲染方案
组件(模块)封装与开发可以给前端业务开发的过程带来非常大的研发效能的提升,各个业务域的开发者会定制开发许多符合自己业务场景的基础组件(模块)沉淀一套快速复用的物料体系,以保证业务开发的研发效能。同样,在各个 Flutter 团队,也有大量的 Flutter Widget 的物料,以及各种基于 Flutter 场景做的性能优化。在大前端的视角下,我们期望在端内拥有 Web 开发的研发效能以及动态性的同时,也期望通过一些 Native 的优化手段让应用拥有媲美原生的体验与性能。
229 0
北海(Kraken)构建大前端混合渲染技术体系 —— Web 与 Flutter Widget 混合渲染方案
|
存储 JavaScript 前端开发
北海(Kraken)构建大前端混合渲染技术体系 —— Web 与 Flutter Widget 混合渲染方案
北海(Kraken)构建大前端混合渲染技术体系 —— Web 与 Flutter Widget 混合渲染方案
412 1
北海(Kraken)构建大前端混合渲染技术体系 ——  Web 与 Flutter Widget  混合渲染方案