maptalk.three实例化尝试

    最近公司项目开始做三维的项目,出于易用性考虑选用了maptalks和maptalks.three。

    maptalks是一款国内开发者开发的开源webgis框架,maptalks.three是一个基于maptalks的三维插件,通过这个库魄爷我可以比较方便的使用three的方式来绘制想要的三维效果。开发过程中遇到不少问题,比较麻烦得是大量mesh绘制导致速度变慢和内存暴增,通常的解决问题做法就是使用实例化和合并几何图形的方式。

    本文主要介绍实例化的内容,实例化是个什么东西呢?实例化是一种只调用一次渲染函数却能绘制出很多物体的技术,它节省渲染一个物体时从CPU到GPU的通信时间。实例数组是这样的一个对象,使用它,可以把原来的的uniform变量转换成attribute变量,而且这个attribute变量对应的缓冲区可以被多个对象使用;这样在绘制的时候,可以减少webgl的调用次数。

let mesh = new THREE.InstancedMesh(geometry, material, length);
let transform = new THREE.Object3D();
const position = threeLayer.coordinateToVector3(center, 0);
let xoffset = position.x - defaultXY.x;
let yoffset = position.y - defaultXY.y;
transform.position.set(xoffset, yoffset, 0);
transform.scale.set(xscale,yscale,zscale);
transform.updateMatrix();
mesh.setMatrixAt(i, transform.matrix);
mesh.position.set(x,y,z)

    值得注意的是要事先准备一个几何体作为模板对象,,然后设置矩阵中相对于模板几何体的偏移量,最后设置一次绘制数据量,本文中使用的是几何中心转三维坐标后计算xyz偏移量以及缩放xyz比例,全部计算完毕后InstancedMesh这个要设置好位置xyz。
使用实例化过后,显著降低了内存,绘制八千个几何体仅需要10MB内存

参考资料:

https://threejs.org/examples/physics_cannon_instancing.html

https://cloud.tencent.com/developer/article/1438356

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值