使用ThreeJs搭建BIM模型浏览器，第九步-性能优化(2)

感谢网友给的建议。

我之前一直是使用threejs的102dev版本，以为geometry共享了就行了，但是这并不是threejs里面所说的Instance。在新的threejs版本中，新增加了几个很有意思的Instance类，这里重点挑InstancedMesh来说。InstancedMesh与使用一个geometry共享创建出Mesh是不一样的，InstancedMesh最终达到的效果是一次Drawcall，而共享geometry创建出来的Mesh并无此效果，效率跟不共享创建Mesh渲染性能上没有太大区别，只是可能会省点内存。

InstancedMesh是R110之后出现
官网简介：
A special version of Mesh with instanced rendering support. Use InstancedMesh if you have to render a large number of objects with the same geometry and material but with different world transformations. The usage of InstancedMesh will help you to reduce the number of draw calls and thus improve the overall rendering performance in your application.
大量相同的几何，会减少绘图调用的次数，大量提高页面性能；

参考文档：

http://www.qmodel.cn/threejs/three/docs/index.html#api/en/objects/InstancedMesh

查看示例：

http://www.qmodel.cn/threejs/three/examples/?q=instanc#webgl_instancing_raycast

用法：




    

        

            

            

        

        

            
                var geometry = new THREE.SphereBufferGeometry( 0.2 );
            

        

    

    

        

            

            

        

        

            
                var material = new THREE.MeshPhongMaterial( { flatShading: true } );
            

        

    

    

        

            

            

        

        

            
                var amount=80
            

        

    

    

        

            

            

        

        

            
                var count=amount*amount*amount;
            

        

    

    

        

            

            

        

        

            
                var mesh = new THREE.InstancedMesh( geometry, material, count );
            

        

    

    

        

            

            

        

        

            
                var i = 0;
            

        

    

    

        

            

            

        

        

            
                var offset = ( amount - 1 ) / 2;
            

        

    

    

        

            

            

        

        

            
                var transform = new THREE.Object3D();
            

        

    

    

        

            

            

        

        

            
                for ( var x = 0; x < amount; x ++ ) {
            

        

    

    

        

            

            

        

        

            
                for ( var y = 0; y < amount; y ++ ) {
            

        

    

    

        

            

            

        

        

            
                for ( var z = 0; z < amount; z ++ ) {
            

        

    

    

        

            

            

        

        

            
                transform.position.set( offset - x, offset - y, offset - z );
            

        

    

    

        

            

            

        

        

            
                transform.updateMatrix();
            

        

    

    

        

            

            

        

        

            
                mesh.setMatrixAt( i ++, transform.matrix );
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                scene.add( mesh );

点击获取InstancedId，官方示例




    

        

            

            

        

        

            
                // move
            

        

    

    

        

            

            

        

        

            
                function onMouseMove( event ) {
            

        

    

    

        

            

            

        

        

            
                event.preventDefault();
            

        

    

    

        

            

            

        

        

            
                mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
            

        

    

    

        

            

            

        

        

            
                mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                // render
            

        

    

    

        

            

            

        

        

            
                function render() {
            

        

    

    

        

            

            

        

        

            
                raycaster.setFromCamera( mouse, camera );
            

        

    

    

        

            

            

        

        

            
                var intersection = raycaster.intersectObject( mesh );
            

        

    

    

        

            

            

        

        

            
                if ( intersection.length > 0 ) {
            

        

    

    

        

            

            

        

        

            
                // 获取当前实例的ID 索引
            

        

    

    

        

            

            

        

        

            
                var instanceId = intersection[ 0 ].instanceId;
            

        

    

    

        

            

            

        

        

            
                // 根据当前的索引 获取当前的矩阵
            

        

    

    

        

            

            

        

        

            
                mesh.getMatrixAt( instanceId, instanceMatrix );
            

        

    

    

        

            

            

        

        

            
                // 更新矩阵
            

        

    

    

        

            

            

        

        

            
                matrix.multiplyMatrices( instanceMatrix, rotationMatrix );
            

        

    

    

        

            

            

        

        

            
                // 设置拾取当前几何的矩阵
            

        

    

    

        

            

            

        

        

            
                mesh.setMatrixAt( instanceId, matrix );
            

        

    

    

        

            

            

        

        

            
                // 更新矩阵
            

        

    

    

        

            

            

        

        

            
                mesh.instanceMatrix.needsUpdate = true;
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                renderer.render( scene, camera );
            

        

    

    

        

            

            

        

        

            
                }

实际测试性能效率，当使用InstancedMesh时，如上述代码。如果使用的是Mesh，我的渣渣电脑已经渲染不出来了。

如何解决使用InstancedMesh后，构件选择的问题？通过射线相交，可以取到Instance实例的索引ID，可使用ID来找到对应的构件。大家多看官方示例代码就可以了。

补充一点思路，如果网友有更好的方案也欢迎留言。

隐藏构件，把矩阵设置为0矩阵隐藏某个instanceId,0矩阵为[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,]

选择构件：可以考虑把InstancedMesh的geometry和被Pick到的Matrix构造一个新的InstancedMesh放在对应的位置，材质替换为高亮选中的材质，且把原来的Matrix设置为0矩阵，则实现隐藏。实际上目前120版本，Mesh和InstancedMesh还是有不少BUG的，建议全部使用InstancedMesh。

透明度和颜色设置：与选择构件同理，不过考虑到还原操作，对数据的管理会更复杂一些。这里会特征一些内存，效率上也有所降低，最终效果如何，全看编码人员的控制力了。

Merge之后也可以实现Drawcall的减少，且可以实现不同材质的合并。我就尝试过把一整个建筑模型合并成一个geometry，没错，性能提升巨大，且内存锐减一半！merge可以实现不同材质的几何直接合并，但是因为group的处理，还是会拆分为多次drawcall，没有太多作用。关于merge的总结可以看一下后面的介绍。

对比geometry.merge和Instance实例化、普通Mesh。以一个5万构件的全专业（建筑、结构、给排水、暖通、电气）的住宅塔楼为例（复用率还比较高的）。

	Instance实例化几何体	Merge合并几何体	普通Mesh
Material	相同	相同	可不同
Geometry	相同	可不同	可不同
单个控制	使用索引可实现	难以实现	容易实际
生成时间	快速	Merge需要计算消耗	一般。量大
渲染性能	较优	更优，极致减少drawcall	差
内存占用	极少	较少	较多
Drawcall次数	约1万次	1次	5万次