# Efficient way to update some portion of geometry

**URL:** <https://discourse.threejs.org/t/efficient-way-to-update-some-portion-of-geometry/13640>\
**Category:** Questions\
**Tags:** geometry\
**Created:** [March 20, 2020, 6:29am UTC](https://discourse.threejs.org/t/efficient-way-to-update-some-portion-of-geometry/13640 "2020-03-20T06:29:52Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![Asif\_Ali](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/asif_ali/32/9441_2.png) [@Asif\_Ali](https://discourse.threejs.org/u/Asif_Ali)\
**Post date:** [March 20, 2020, 6:29am UTC](https://discourse.threejs.org/t/efficient-way-to-update-some-portion-of-geometry/13640/1 "2020-03-20T06:29:52Z")

</div>

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();	

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

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

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

        scene.add(surfacemesh);

```

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.

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [March 20, 2020, 10:00am UTC](https://discourse.threejs.org/t/efficient-way-to-update-some-portion-of-geometry/13640/2 "2020-03-20T10:00:40Z")

</div>

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](https://threejs.org/docs/index.html#api/en/objects/InstancedMesh)?

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

---

<div class="post-metadata">

**Author:** ![Asif\_Ali](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/asif_ali/32/9441_2.png) [@Asif\_Ali](https://discourse.threejs.org/u/Asif_Ali)\
**Post date:** [March 20, 2020, 12:36pm UTC](https://discourse.threejs.org/t/efficient-way-to-update-some-portion-of-geometry/13640/3 "2020-03-20T12:36:00Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [March 20, 2020, 1:13pm UTC](https://discourse.threejs.org/t/efficient-way-to-update-some-portion-of-geometry/13640/4 "2020-03-20T13:13:13Z")

</div>

This is the basic example for `InstancedMesh`: [https://threejs.org/examples/webgl\_instancing\_dynamic](https://threejs.org/examples/webgl_instancing_dynamic)

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

---

<div class="post-metadata">

**Author:** ![Asif\_Ali](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/asif_ali/32/9441_2.png) [@Asif\_Ali](https://discourse.threejs.org/u/Asif_Ali)\
**Post date:** [March 20, 2020, 1:45pm UTC](https://discourse.threejs.org/t/efficient-way-to-update-some-portion-of-geometry/13640/5 "2020-03-20T13:45:46Z")

</div>

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)

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [March 20, 2020, 5:08pm UTC](https://discourse.threejs.org/t/efficient-way-to-update-some-portion-of-geometry/13640/6 "2020-03-20T17:08:39Z")

</div>

> [@Asif\_Ali](#):
>
> different number of vertices,

This is definitely a problem, yes.

---

<div class="post-metadata">

**Author:** ![Asif\_Ali](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/asif_ali/32/9441_2.png) [@Asif\_Ali](https://discourse.threejs.org/u/Asif_Ali)\
**Post date:** [March 20, 2020, 5:11pm UTC](https://discourse.threejs.org/t/efficient-way-to-update-some-portion-of-geometry/13640/7 "2020-03-20T17:11:26Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [March 20, 2020, 5:26pm UTC](https://discourse.threejs.org/t/efficient-way-to-update-some-portion-of-geometry/13640/8 "2020-03-20T17:26:48Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Asif\_Ali](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/asif_ali/32/9441_2.png) [@Asif\_Ali](https://discourse.threejs.org/u/Asif_Ali)\
**Post date:** [March 22, 2020, 6:57pm UTC](https://discourse.threejs.org/t/efficient-way-to-update-some-portion-of-geometry/13640/9 "2020-03-22T18:57:10Z")

</div>

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)?

---

<div class="post-metadata">

**Author:** ![makc3d](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/makc3d/32/10452_2.png) [@makc3d](https://discourse.threejs.org/u/makc3d)\
**Post date:** [March 22, 2020, 7:34pm UTC](https://discourse.threejs.org/t/efficient-way-to-update-some-portion-of-geometry/13640/10 "2020-03-22T19:34:35Z")

</div>

looking at [this line](https://github.com/mrdoob/three.js/blob/ce45cc36d9f123d3cafa2e72b8dc45b69ff22b95/src/renderers/webgl/WebGLAttributes.js#L85) there must be a way. and it is even [in the docs](https://threejs.org/docs/#api/en/core/BufferAttribute.updateRange).

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [March 23, 2020, 9:46am UTC](https://discourse.threejs.org/t/efficient-way-to-update-some-portion-of-geometry/13640/11 "2020-03-23T09:46:14Z")

</div>

> [@Asif\_Ali](#):
>
> 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?

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:

[https://threejs.org/examples/webgl\_instancing\_modified](https://threejs.org/examples/webgl_instancing_modified)

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

---

<div class="post-metadata">

**Author:** ![Asif\_Ali](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/asif_ali/32/9441_2.png) [@Asif\_Ali](https://discourse.threejs.org/u/Asif_Ali)\
**Post date:** [March 24, 2020, 7:17am UTC](https://discourse.threejs.org/t/efficient-way-to-update-some-portion-of-geometry/13640/12 "2020-03-24T07:17:53Z")

</div>

Dear @Mugen87 @makc3d thanks again for your reply and explanation. I have already asked the question about vertex color in InstanceMesh at [PerVertexColor](https://discourse.threejs.org/t/create-circular-planar-elements-from-points/12981/2) 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. ☹