# Three.js BufferGeometry with dynamic children

**URL:** <https://discourse.threejs.org/t/three-js-buffergeometry-with-dynamic-children/5053>\
**Category:** Questions\
**Tags:** buffergeometry, transform, geometry\
**Created:** [November 22, 2018, 1:35pm UTC](https://discourse.threejs.org/t/three-js-buffergeometry-with-dynamic-children/5053 "2018-11-22T13:35:25Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ovilia](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ovilia/32/3284_2.png) [@Ovilia](https://discourse.threejs.org/u/Ovilia)\
**Post date:** [November 22, 2018, 1:35pm UTC](https://discourse.threejs.org/t/three-js-buffergeometry-with-dynamic-children/5053/1 "2018-11-22T13:35:25Z")

</div>

0down vote[favorite](https://stackoverflow.com/questions/53424043/three-js-buffergeometry-with-dynamic-children?noredirect=1#)

I have several particles sharing the same shape, with different rotation, position, and scale.

```auto
var mesh = new THREE.Mesh(new THREE.Geometry(), material);
var geoArr = [];

function init() {
    var template = new THREE.BufferGeometry().fromGeometry(
        new THREE.TetrahedronGeometry(5, 0)
    );

    for (var i = 0; i < 20; ++i) {
        var geo = template.clone();

        // each geo have different rotate, scale, and translate
        geo.rotateX(...);
        geo.scale(...);
        geo.translate(...);
        geoArr.push(geo);
    }
    var bufferedGeo = THREE.BufferGeometryUtils.mergeBufferGeometries(this.geoArr);
    mesh.geometry = bufferedGeo;
}

function render() {
    // in each frame, rotate, scale, and translate are supposed to change
    for (var i = 0; i < geoArr.length; ++i) {
        geo.rotateX(...); // ???
        // Should I call rotateX, scale and translate? 
        // This will accumulate previous settings. How to set like mesh.position?
    }
    var bufferedGeo = THREE.BufferGeometryUtils.mergeBufferGeometries(this.geoArr);
    mesh.geometry = bufferedGeo;
}

```

I’m not sure if I should use BufferGeometryUtils in this way and how should I set transform in each render frame?

Merging geometries in render loop is because each gemetries is changing position, rotation and scale in a frame. Since buffered geometry contains vertex positions that are transformed in the last frame. How should I revert the transform in last frame and apply new transform otherwise?

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [November 22, 2018, 2:47pm UTC](https://discourse.threejs.org/t/three-js-buffergeometry-with-dynamic-children/5053/2 "2018-11-22T14:47:05Z")

</div>

Hi!  
I’m still curious, why do you want to merge 20 geometries, instead of having 20 meshes which you can rotate, translate and scale as much as you wish?

---

<div class="post-metadata">

**Author:** ![Ovilia](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ovilia/32/3284_2.png) [@Ovilia](https://discourse.threejs.org/u/Ovilia)\
**Post date:** [November 29, 2018, 3:16pm UTC](https://discourse.threejs.org/t/three-js-buffergeometry-with-dynamic-children/5053/3 "2018-11-29T15:16:32Z")

</div>

To accelerate by using less draw call.

---

<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:** [November 29, 2018, 3:21pm UTC](https://discourse.threejs.org/t/three-js-buffergeometry-with-dynamic-children/5053/4 "2018-11-29T15:21:48Z")

</div>

If you have only 20 meshes, it’s not really worth to merge them and loose the respective flexibility. I don’t think you notice a visible performance benefit, even on low-end devices.

It’s also no good approach to use `BufferGeometryUtils.mergeBufferGeometries()` inside `render()` since it creates a new instance of `BufferGeometry` per invocation. In general, object creation is something you want to avoid in an animation loop.

If you want to modify an instance of `BufferGeometry`, you have to modify its attributes and set the respective `needsUpdate` flag of an attribute to `true`.