Three.js BufferGeometry with dynamic children

Questions
, ,
1

0down votefavorite

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

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?

2

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?

3

To accelerate by using less draw call.

4

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.

1 Like