LayaAir2.12新特性:增加性能分析工具、增加骨骼遮罩、增加新的纹理压缩格式、增加RenderTexture抗锯齿等功能

2021-05-08 16:07:34 浏览数 (1)

一波3D相关的LayaAir引擎功能更新来了,LayaAir 2.12不仅带来了重磅的性能分析工具,纹理压缩格式也新增支持了开发者期待的ETC2与ASTC。3D引擎中还增加了骨骼遮罩功能、RenderTexture的抗锯齿功能,以及优化引擎库大小等等。本篇会分别详细介绍。

增加性能分析工具

性能问题,一直是开发者最为关心的问题之一,为了让开发者更好的分析性能和优化性能,LayaAir IDE 2.12版本开始推出了性能分析工具。该工具为开发者提供某些LayaAir引擎关键函数的占用时间,以此来分析游戏运行时的关键卡顿点,最终达到性能优化的目的。

优化工具集成在LayaAir IDE内部,可以很方便的分析PC,安卓,iOS,以及小游戏平台的游戏性能。

性能分析工具截图

如果开发者只想简单的了解一下某个函数的性能,并不想打开IDE的性能分析工具,我们也准备了简易的性能分析方式。通过几行代码便可以直接将性能指标显示在渲染面板上面。

TS代码示例如下:

代码语言:javascript复制
  //设置性能分析工具
  Laya.PerformancePlugin.setPerformanceDataTool((Laya as any).PerformanceDataTool.instance);
  //开启性能分析
  Laya.PerformancePlugin.enable = true;
  //分析PerformancePlugin.PERFORMANCE_LAYA_3D性能块
  PerformancePlugin.showFunSampleFun(PerformancePlugin.PERFORMANCE_LAYA_3D);

按上面的示例代码,会在游戏界面上显示如下图所示的性能分析面板。

游戏界面上的分析面板

上图那条白色曲线,是每帧真实消耗的时间,下面那条彩色曲线便是在showFunSampleFun函数调用的性能块的时间消耗时间。绿色直线是60帧时间线,红色直线是30帧时间线。这样,我们就可以通过简易的分析面板,快速判断出到底是哪里造成了性能压力。

如果开发者还想测试自己开发的模块性能,我们也为开发者提供了强大的自定义性能分析功能。例如,如何获得某个函数的具体调用时间,如何分析某个函数某几个模块分别占用函数调用的比例。这里就不展开介绍了,具体的性能分析工具的使用,Layabox的开发者中心已提供了文档。

文档地址为: https://ldc2.layabox.com/doc/?nav=zh-ts-4-24-2

文档截图

增加RenderTexture抗锯齿

虽然引擎一直有抗锯齿功能,但由于WebGL 1.0不支持RenderTarget抗锯齿,所以我们只有canvas自带的抗锯齿功能。当开发者使用了RenderTexture、后期处理或Camera的HDR功能时,就会导致抗锯齿无效,影响了渲染效果。

而LayaAir 2.12 版本开始,引擎在WebGL 2.0中支持了多重采样的渲染buffer,在创建一个RenderTexture的时候,只需在构造函数的最后一个参数mulSamples填入大于1的值,便可创建一个自带抗锯齿的RenderTexture,即可以实现抗锯齿的效果。但需要注意的是,该参数不能大于设备支持的最大多重采样数。

还有,抗锯齿功能会增加GPU性能消耗,所以大部分情况下都是在最后渲染到屏幕的那张RenderTexture上面设置抗锯齿。

抗锯齿使用前后的效果对比

另外,引擎还增加了将RenderTexture转换为Base64的方法Utils3D.uint8ArrayToArrayBuffer。

开发者开发一些需要离屏渲染的功能时,很多离屏渲染都是中间结果,比如bloom功能,会有多个离屏画布来回渲染,为了方便开发者调试离屏渲染的方便,引擎提供了unit8ArrayToArrayBuffer函数,用于将RenderTexture的渲染结果直接转换为base64格式的数据,好直接在浏览器中看到渲染结果,也可以将渲染结果直接保存为png图片。

代码如下:

代码语言:javascript复制
  debugRenderTexture(){
      console.log( Utils3D.uint8ArrayToArrayBuffer(this.Rendertexture));
  }

打印出的数据如下图所示:

增加骨骼遮罩功能

LayaAir 2.12版本开始,引擎在骨骼动画系统中增加骨骼遮罩功能,开发者可以设置不同动画层的骨骼遮罩,来控制动画层播放动画对整体动画显示的影响,大大方便了开发者骨骼动画的拆分重组,大幅减少了动画数据。并且此功能支持LayaAir的Unity插件一键导出。

此功能不仅优化了动画流程,还优化了数据内存。比如,组织一个主角的动作,有动作1和动作2,我们可以通过骨骼遮罩,直接实现动作1和动作2的结合,在以前引擎版本的动画系统中,至少要多出一倍的数据量。

增加ETC2ASTCPVRTC纹理压缩格式

由于ETC2的纹理压缩格式没有在各平台普及,所以在LayaAir 2.12之前的版本只支持了安卓平台的ETC1纹理压缩格式。这就导致了,LayaAir引擎支持的ETC1在安卓平台不能像iOS平台那样支持纹理的透明通道。

随着微信小游戏平台支持了ETC2的纹理压缩格式,LayaAir引擎也将在2.12版本开始支持了一批新的ETC2纹理压缩格式,方便开发者可以更方便高效的使用纹理,提高性能,减少显存。

LayaAir引擎2.12版开始支持的ETC2的纹理格式有:ETC2RGB、ETC2RGBA、ETC2RGB_Alpha8格式,对比ETC1纹理压缩,ETC2的压缩纹理支持了Alpha(透明通道),并且去掉了必须时2的幂纹理宽高限制(ETC1还是会有限制)。

除了新增了ETC2的纹理压缩格式,引擎在2.12版本上,还新增支持了ASTC的纹理格式。相对于ETC格式只能用于安卓,PVR格式只能用于iOS,ASTC纹理格式是一种安卓与iOS通用的纹理压缩格式。并且可以根据格式来控制压缩率,是现代比较主流的纹理压缩。

LayaAir引擎2.12版开始支持的ASTC纹理格式如下面的表格所示:

ASTC_4x4

ASTCSRGB_4x4

ASTC_6x6

ASTCSRGB_6x6

ASTC_8x8

ASTCSRGB_8x8

ASTC_10x10

ASTCSRGB_10x10

ASTC_12x12

ASTCSRGB_12x12

即使是引擎旧版已支持的纹理压缩格式PVRTC,在2.12版开始也新增了一种模式选项PVRTC1_4,这是一种4bpp(4 bits per pixel)的压缩模式,提供4:1的压缩系数和图像质量。而原有提供的iOS默认纹理压缩模式是PVRTC1_2(2bpp压缩模式),提供的是8:1的压缩系数和图像质量。

以上提及的功能,在引擎插件面板和LayaAirIDE的面板中也同步进行了对应的支持,效果如下图所示。

LayaAir的Unity导出插件截图

新增3D材质的方法

在之前的引擎版本中,书写材质绑定Uniform的时候,我们需要先注册uniform的名字,并且写好属性,将调用材质内置的ShaderValue,并且需要根据Uniform传入数据的类型,调用不同的方法。

比如设置一个图片,需要调用SetTexture方法,设置一个Vector3需要调用SetVector3方法,代码如下:

代码语言:javascript复制
static ALBEDOTEXTURE: number = Shader3D.propertyNameToID("u_DiffuseTexture");
     SetDiffuseTexture(value: BaseTexture) {
        this._shaderValues.setTexture(CustomMaterial.ALBEDOTEXTURE, value);
}
GetDiffuseTexture(){
  return this._shaderValues.setTexture(CustomMaterial.ALBEDOTEXTURE);
}

从LayaAir 2.12开始,引擎的3D材质增加了SetShaderPropertyValue方法,以及GetShaderPropertyValue方法,用于提高开发者编写材质的自定义shader的易用性。

用以下较短的代码就可以代替上面的方法:

代码语言:javascript复制
setShaderPropertyValue("u_DiffuseTexture");
getShaderPropertyValue("u_DiffuseTexture");

其它新增与优化

在以上新增功能之外,本次版本我们还增加了大量的示例,例如2D方面,增加了复合碰撞器、碰撞过滤器、碰撞事件与传感器、桥、仿生机器人。

3D方面增加了引擎新增功能相关的示例。例如ETC2纹理压缩、ASTC纹理压缩、骨骼遮罩。

还增加了用于表现LayaAir 3D引擎渲染效果的示例,例如下面截图的次表面效果,景深效果。

次表面的效果是当下流行的数字人物渲染技术,例如头发、毛发、眼睛、布料这些,通常会采用数字化人物的渲染。下图右侧我们对皮肤进行了次表面的数字人物渲染,对比左侧图皮肤显得更加细腻。

景深也是比较常见的渲染效果,LayaAir引擎可以实现,有些开发者想了解怎么实现的,我们本次也提供了示例。

优化方面,在新的引擎库中,我们将物理相关的代码完全剔除出了引擎d3包,减少了d3包的大小,也使引擎的功能更加模块化,将物理代码直接合并到了物理引擎中,cannon部分以前需要引用cannon.js和Laya.CannonPhysics.js两个包,现在只需要引用cannon.js便可,bullet库也是将引擎相关的物理直接合到了物理引擎库中。

0 人点赞