InstancedMesh Usage With Multiple Meshed GLTF Model

Questions
, , ,
1

Hi All,
I’ve been trying to create instanced mesh which has more than one meshes. But I couldn’t align those meshes. How can I use InstancedMesh correctly at this situation? Please take a look at the my code blocks and screenshot. If you can help me, I would be very appreciated.

Here is my codes;

oEvents = {
    onLoadInstancedMeshModel: function () {
        var oDummyObject = new THREE.Object3D();
        oDracoLoader.load("./resources/models/vehicles/citibus/scene.glb", function (oGltf) {
            oGltf.scene.traverse(function (child) {
                if (child.isMesh) {
                    let oInstancedMesh = new THREE.InstancedMesh(child.geometry, child.material, 1);
                    oInstancedMesh.setMatrixAt(0, child.matrix);
                    oDummyObject.add(oInstancedMesh);
                }
            });
            oEvents.onSceneRender();
            document.querySelector("#model-state").innerText = "Model Has Been Loaded.";
            document.querySelector("#model-info").innerText = "Frame: " + oRenderer.info.render.frame + ", " + "DrawCall: " + oRenderer.info.render.calls + ", " + "Triangles: " + oRenderer.info.render.triangles;
        });
        oDummyObject.position.set(0, 0, 0);
        oScene.add(oDummyObject);
    },
    onSceneRender: function () {
        //Rendering Scene
        oRenderer.render(oScene, oCamera);
        document.querySelector("#model-info").innerText = "Frame: " + oRenderer.info.render.frame + ", " + "DrawCall: " + oRenderer.info.render.calls + ", " + "Triangles: " + oRenderer.info.render.triangles;
    }
};

As you can see below. Bus model has two different meshes which are black and white ones. But those meshes don’t match each other.

Screen Shot 2022-12-26 at 13.41.30
Screen Shot 2022-12-26 at 13.41.301920×916 32.8 KB

2

Instanced mesh can only use one geometry, you can’t put the white and the black mesh into it separately.

You need to make one geometry from the white and the black mesh, which is a different problem, and it’ll be hard then to give various parts of the bus unique colors or rotate the wheels for example.

It makes sense to use Instanced mesh when you have a large number of geometry instances, so unless you will have a lot of buses on your scene (hundreds+), there is no point in making an Instanced mesh.

3

I need to create nearly 100 bus models in to the scene. But every bus vehicle type has around 25.000 triangles. I’m also using a 3D company model containing 3.285,749 triangles and 1600 drawcall. In order to prevent lagging on the scene, I though that creating vehicles by using Instanced Mesh is the best solution. Am I wrong?

Here is my company model;
https://discourse.threejs.org/t/large-lagging-and-fps-drop-on-scene/45500

1 Like
4

First I’d test if the performance improves without buses, only with the building model left, maybe buses are not the FPS bottleneck.

If it does, then you can merge all bus geometries into one and make an Instanced mesh.