[LayaAir3]关于3D场景透视投影到2DSpirte性能消耗问题
我们的项目是一个移动端的WebAR项目,需要将采用透视相机的3D场景叠加至2D的设备摄像头画面上。项目中存在追踪算法,每帧都会对3D场景中的模型或者3D相机的位置和姿势(位姿)进行修改。
我们的项目原本在Three.js渲染下完成部署。后来这个项目由于需求需要在LayaAir引擎(3.2.0)上部署,依据官方的教程以及社区的声音,需要采用将3D相机投影到2D纹理的方式处理。
目前该项目在效果上已经成功通过LayaAir引擎复现,在确定非算法、摄像头调用等因素的干扰下,目前项目性能消耗较为严重,手机会发烫,且在渲染过程中帧率较低,实际体验可能不如Three.js的效果。
总体的感觉,性能问题可能出在三维投影到二维纹理上。请问这个问题是不是由于我所采用的渲染代码错误,还是LayaAir有其他更好的渲染方式。
下面是我采用投影的代码段。
我们的项目原本在Three.js渲染下完成部署。后来这个项目由于需求需要在LayaAir引擎(3.2.0)上部署,依据官方的教程以及社区的声音,需要采用将3D相机投影到2D纹理的方式处理。
目前该项目在效果上已经成功通过LayaAir引擎复现,在确定非算法、摄像头调用等因素的干扰下,目前项目性能消耗较为严重,手机会发烫,且在渲染过程中帧率较低,实际体验可能不如Three.js的效果。
总体的感觉,性能问题可能出在三维投影到二维纹理上。请问这个问题是不是由于我所采用的渲染代码错误,还是LayaAir有其他更好的渲染方式。
下面是我采用投影的代码段。
Laya.loader.load(this.gltfResource,Laya.Loader.HIERARCHY).then(res=>{
this.robot = res.create();
this.robot.name = "robot"
this.robot.transform.localScale = new Laya.Vector3(this.curscale, this.curscale, this.curscale);
this.robot.getComponent<Laya.Animator>(Laya.Animator).speed = 2.5;
// this.scence_3d.addChild(this.robot);
this.main_camera.transform.rotation = new Laya.Quaternion(0,0,0,1);
this.main_camera.transform.position = new Laya.Vector3(0, 0, 5);
this.main_camera.fieldOfView = 75;
let directlightSprite = new Laya.Sprite3D();
let dircom = directlightSprite.addComponent(Laya.DirectionLightCom);
this.scence_3d.addChild(directlightSprite);
//方向光的颜色
dircom.color.setValue(1, 1, 1, 1);
//设置平行光的方向
var mat: Laya.Matrix4x4 = directlightSprite.transform.worldMatrix;
mat.setForward(new Laya.Vector3(0, -1, -1));
directlightSprite.transform.worldMatrix = mat;
this.main_camera.name = "main_camera";
this.main_camera.msaa = true;
this.main_camera.orthographic = false;
this.scence_3d.addChild(this.main_camera);
this.main_camera.clearColor = new Laya.Color(0, 0, 0, 0); // 清除相机拍摄到的背景
this.main_camera.removeAllLayers();
this.main_camera.addLayer(0);
//一定要给对应的渲染对象节点设置层与摄像机一样的层,如果不清楚是哪个节点,就写个循环,把所有节点都遍历设置一下,否则会影响显示结果
// (<Laya.Sprite3D>this.robot.getChildAt(0).getChildAt(0)).layer = 0;
this.main_camera.renderTarget = new Laya.RenderTexture(this.width, this.height, Laya.RenderTargetFormat.R16G16B16A16, Laya.RenderTargetFormat.DEPTHSTENCIL_24_8);
// this.robot_2d.graphics.drawImage(new Laya.Texture(this.main_camera.renderTarget));
this.robot_2d.texture = new Laya.Texture(this.main_camera.renderTarget)
this.robot_2d.size(this.width,this.height)
this.robot_2d.name = "robot_2d"
this.owner.addChild(this.robot_2d)
this.robot_2d.pos(0, 0,true);
console.log("模型加载成功")
this.robot_init = true;
})
}
没有找到相关结果
已邀请:
要回复问题请先登录
0 个回复