前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >LayaAir2.13.1新特性:摄像机增加非透明物体贴图、新增距离裁剪、列表ui组件增加橡皮筋回弹暂停、

LayaAir2.13.1新特性:摄像机增加非透明物体贴图、新增距离裁剪、列表ui组件增加橡皮筋回弹暂停、

作者头像
Layabox Charley
发布2022-04-18 14:32:37
7440
发布2022-04-18 14:32:37
举报
文章被收录于专栏:Layabox

本次2.13.1的版本里,3D引擎方面,摄像机增加非透明物体贴图与玻璃反射示例,新增了距离裁剪,以及包围盒裁剪和阴影裁剪的优化。2D引擎方面,List组件增加橡皮筋回弹暂停功能,以及顶部和底部的数据请求等待刷新示例。

下面我们来详细介绍:

增加距离裁剪与裁剪优化

当3D场景较为庞大复杂时,模型面数对性能的压力就显得格外重要,甚至影响到整体效果表现。

本次的2.13.1版本,我们不仅对裁剪相关功能进行优化,还提供了开发者可自己控制的距离裁剪。可以减少场景中的模型面数,提升性能,增强整体效果。

首先是在Config3D里增加了距离裁剪开关参数distanceVolumCull,该参数默认是关闭的,开发者设置为开启(true),对远处物体进行裁剪。

使用示例代码如下:

代码语言:javascript
复制
//Config3D要在init之前设置
let _cfg = new Config3D();
//开启距离裁剪
_cfg.distanceVolumCull = true;
//初始化引擎的时候,传入修改的Config3D设置
Laya3D.init(100, 100, _cfg);

距离裁剪的默认值是0.005,开发者也可以在开启距离裁剪后,自定义裁剪距离。

使用示例代码如下:

代码语言:javascript
复制
let scene = Laya.stage.addChild(new Laya.Scene3D());
//省略若干代码
Laya.Mesh.load("xxx.lm", Laya.Handler.create(this, (lm:Laya.Mesh)=>{
    let _mesh = scene.addChild(new Laya.Sprite3D()).addChild(new Laya.MeshSprite3D(lm)) as Laya.MeshSprite3D;
    //为模型设置距离裁剪的距离参数,默认值为0.005
    _mesh.meshRenderer.ratioIgnor = 0.003;
}));

按以上方式进行设置后,只有在摄像机的裁剪渲染范围内才会显示出来,例如,某些不重要的模型在远处可能就会被裁剪不可见,离近了才显示出来。这样会优化性能。

除距离裁剪外,还优化了视锥包围盒裁剪,增加包围盒裁剪的概率优化,提升了裁剪效率。

另外,本次版本也对阴影裁剪进行了优化,在阴影裁剪时,会优先剔除不符合绘入阴影图片的物体来进行优化。

以上种种的裁剪优化,可以使得场景中的性能得以提升。是对大型3D项目非常实用的引擎功能。

Camera增加opaquePass

本次版本里,还在Camera里增加了非透明物体贴图opaquePass,开启opaquePass后,会生成非透明物体贴图。在Shader中可以引入u_cameraOpaqueTexture来得到相机渲染管线的非透明图片。

使用示例代码如下:

代码语言:javascript
复制
let scene = Laya.stage.addChild(Laya.Loader.getRes("xx.ls"));
//获取相机
let camera =  scene.getChildByName("Main Camera");
//非透明物体贴图开启
camera.opaquePass = true;

使用非透明物体贴图功能,可以实现玻璃折射,水面折射,热浪等效果。详情见示例GlassRefractionDemo,链接:

https://layaair2.ldc2.layabox.com/demo2/?language=zh&category=3d&group=Advance&name=GlassRefractionDemo

List增加橡皮筋回弹暂停

当List数据到达顶部或底部,仍然有动态加载数据的需求时,通常会需要一个数据加载的等待动画出现在List数据之前,以前版本的List橡皮筋功能开启后,会自动回弹回去。开发者在引擎之外实现该需求的时候,较为吃力。

本次版本,List的滚动条上提供了stopMoveLimit属性,用于停止橡皮筋的自动回弹。提供了topMoveLimit与bottomMoveLimit属性,用于控制顶部或底部达到限制条件(拉动多少像素)后触发对应的事件,通过侦听目标事件再完成数据请求逻辑,请求完成后再恢复橡皮筋回弹。

使用示例代码如下:

代码语言:javascript
复制
export default class RefreshRuntime extends ui.uiDemo.list.RefreshUI {
  /** 滚动条自动回弹效果是否停止 */
  private scrollBarIsStop: boolean = false;
  onEnable(): void {
    //游戏逻辑关联引擎的停止滚动接口
    this.refreshList.scrollBar.stopMoveLimit = this.scrollBarIsStopBind.bind(this);
    //顶部下拉限制
    this.refreshList.scrollBar.topMoveLimit = 80;
    //底部上拉限制
    this.refreshList.scrollBar.bottomMoveLimit = 50;
    
    //顶部下拉达到topMoveLimit限制后触发dragTopLimit事件
    this.refreshList.scrollBar.on("dragTopLimit", this, () => {
       //事件触发后,立即停止滚动条回弹
      this.scrollBarIsStop = true;

      /**……此处省略处理数据请求与修改数据源逻辑*/
      
      //List数据请求完成并修改完List数据源后,恢复滚动条回弹
      this.scrollBarIsStop = false;
    });
    
    //底部上拉达到bottomMoveLimit限制后触发dragBottomLimit事件
    this.refreshList.scrollBar.on("dragBottomLimit", this, () => {
      //事件触发后,立即停止滚动条回弹
      this.scrollBarIsStop = true;

      /**……此处省略处理数据请求与修改数据源逻辑*/

      //List数据请求完成并修改完List数据源后,恢复滚动条回弹
      this.scrollBarIsStop = false;
    });
  }
  /** 关联引擎的滚动限制接口 */
  scrollBarIsStopBind(): boolean {
      return this.scrollBarIsStop;
  }
}

官网中已添加详细的代码示例,方便开发者进一步理解列表数据请求的禁用橡皮筋效果自动回弹的功能使用。demo链接为:

https://layaair.ldc.layabox.com/demo2/?language=zh&category=2d&group=UI&name=RefreshList

写在最后

由于引擎团队的主要精力仍然在为LayaAir3.0引擎的推出而奋斗,LayaAir 2.x版本从2.13.0开始,都将会以小版本的步伐前进。

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

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

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

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

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
图像处理
图像处理基于腾讯云深度学习等人工智能技术,提供综合性的图像优化处理服务,包括图像质量评估、图像清晰度增强、图像智能裁剪等。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档