前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >LayaAir2.12新特性:增加性能分析工具、增加骨骼遮罩、增加新的纹理压缩格式、增加RenderTexture抗锯齿等功能

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

作者头像
Layabox Charley
发布2021-05-08 16:07:34
1.6K0
发布2021-05-08 16:07:34
举报
文章被收录于专栏:Layabox

一波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的结合,在以前引擎版本的动画系统中,至少要多出一倍的数据量。

增加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纹理格式如下面的表格所示:

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库也是将引擎相关的物理直接合到了物理引擎库中。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2021-04-21,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 Layabox 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
文件存储
文件存储(Cloud File Storage,CFS)为您提供安全可靠、可扩展的共享文件存储服务。文件存储可与腾讯云服务器、容器服务、批量计算等服务搭配使用,为多个计算节点提供容量和性能可弹性扩展的高性能共享存储。腾讯云文件存储的管理界面简单、易使用,可实现对现有应用的无缝集成;按实际用量付费,为您节约成本,简化 IT 运维工作。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档