最近公司项目开始做三维的项目,出于易用性考虑选用了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