Efficient way to update some portion of geometry

At the moment I am working on building web based viewer (ofcourse using three.js) for incremental 3D reconstruction framework. I have VoxelBlocks which are then “meshed” into meshes (let’s call them m0, m1 … mx). At the moment, I am merging them as follows:

        var mesh1 = getMineCraftMesh(MCMesher,dataField,dataDims,[1,0,0]);
        var mesh2 = getMineCraftMesh(MCMesher,dataField,dataDims,[0,3,0]);
        var mesh3 = getMineCraftMesh(MCMesher,dataField,dataDims,[2,2,0]);

        var singleGeometry = new THREE.Geometry();	

        singleGeometry.merge(mesh1.geometry, mesh1.matrix);

        singleGeometry.merge(mesh2.geometry, mesh2.matrix);

        singleGeometry.merge(mesh3.geometry, mesh3.matrix);
        var material = new THREE.MeshPhongMaterial({color: 0x777777});
        surfacemesh = new THREE.Mesh(singleGeometry, material);


Considering if some mesh (let’s say m2) gets updated, how can I efficiently update the merged mesh?

PS. I have already tried to consider a big bufferedGeometry with some predefined number of vertices, colors, normals and faces but that strategy wasted a lot of memory as meshes comes in various shape and sizes.

Merging meshes is only recommended if the meshes are static. If the world transformation of mesh vary, it’s better to give instanced rendering a shot. Have you considered to use THREE.InstancedMesh?

Of course this only works if the objects share the geometry. But in context of voxels, this premise should be true.

Hi Mugen87, does InstancedMesh support different meshes? and any pointers (three.js example etc) on how to dynamically change some part of mesh on run-time?

This is the basic example for InstancedMesh: https://threejs.org/examples/webgl_instancing_dynamic

You can have multiple, distinct meshes but they have to share the same geometry.

Thanks again, but that’s exactly what was confusing me. Since different (VoxelBlock) meshes will have different number of vertices, colors and faces etc. will that be a problem?

I have already modified dynamic instancing example (for some other project) but in this example every mesh share identical geometry (i.e. same number of vertices, colors and faces)

This is definitely a problem, yes.

Ahh thanks, will different number of faces will also be problem? (provided if I keep the number of vertices same)

Yes, on BufferGeometry level, there is no separate face data structure. Just vertex data. If the number of primitives are different, you have a different geometry.

Thanks again, this may be stupid question. Can I create copies of same geometry (i.e. same no. of vertices, colors, normals and faces) but different values of these parameters in instancedMesh?

And can I forcefully make some faces uninitialized (i.e. the ones not used at the moment)?

looking at this line there must be a way. and it is even in the docs.


I’m not sure I understand what you mean here (sorry). InstancedMesh supports by default different transformations per instance (meaning position, rotation and scale). If you need more instanced attributes (like a different color per instance), you have to define these data by yourself. However, this also makes it necessary to modify the build-in shaders so they are able to work with additional attributes. The following example demonstrates this approach:


@makc3d I don’t think BufferAttribute.updateRange is relevant for this use case.

1 Like

Dear @Mugen87 @makc3d thanks again for your reply and explanation. I have already asked the question about vertex color in InstanceMesh at PerVertexColor which works for a same geometry but with different color, but I do not posses enough experience in OpenGL/WebGL to come up with a shader which is needed to accomodate attributes such as different faces/vertices. :frowning: