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

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

增加性能分析工具

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

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

性能分析工具截图

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

TS代码示例如下：

  //设置性能分析工具
  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图片。

代码如下:

  debugRenderTexture(){
      console.log( Utils3D.uint8ArrayToArrayBuffer(this.Rendertexture));
  }

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

增加骨骼遮罩功能

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

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

增加ETC2\ASTC\PVRTC纹理压缩格式

由于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纹理格式如下面的表格所示：

即使是引擎旧版已支持的纹理压缩格式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方法，代码如下：

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的易用性。

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

setShaderPropertyValue("u_DiffuseTexture");
getShaderPropertyValue("u_DiffuseTexture");

其它新增与优化

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

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

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

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

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

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