Hi there, I’m having trouble optimizing the “overhead cost” of a scene with lots of spheres in it, could you guys give some advises?
So I have this scene with lots of spheres, like below (one unit cell) :
and it has lots of periodic replicates, so it really should like like this (multiple unit cells):
You can probably tell it’s something related to chemistry 
To optimize the performance, the scene itself is a giant buffergeoemtry, and the periodic replicates are handled by instancing. the rendering performance is phenomenal, but the problem I’m having is that preparing this geometry (~6000 spheres per unit cell) takes ~300ms on my laptop. since similar scenes sometimes has to be created and played sequentially as a movie, I would really appreciate if we could optimize this overhead step hopefully down to <50ms level
I have created a live example here: https://jsfiddle.net/7pbxy4eg/2/ (it’s working now), the overhead performance is printed to the console
more specifically, the spheres are prepared as:
var sphereTemplate = new THREE.SphereBufferGeometry(1, 12,12);
for (var i = 0; i < moleculeData.length; i++) {
var atomData = moleculeData[i];
...........
atomList.push(sphereTemplate.clone().scale(atomSize, atomSize, atomSize).translate(atomData.x, atomData.y,atomData.z));
............
var tempColor = new THREE.Color( color );
atomColorList.push([tempColor.r, tempColor.g, tempColor.b]);
}
var atomsGeometry = combineGeometry(atomList, atomColorList);
var material = getMoleculeMaterialInstanced(options); // getting customized material for instancing
var offsetResult = getOffsetArray(systemDimension, latticeVectors, options); //getting offset array
atomsGeometry.setAttribute('offset', new THREE.InstancedBufferAttribute(offsetResult.sumDisplacement, 3 ));
var atoms = new THREE.Mesh( atomsGeometry, material);
where
function combineGeometry(geoarray, colorarray) {
let posArrLength = 0;
let normArrLength = 0;
let uvArrLength = 0;
let indexArrLength = 0;
geoarray.forEach(geometry => {
posArrLength += geometry.attributes.position.count * 3;
normArrLength += geometry.attributes.normal.count * 3;
uvArrLength += geometry.attributes.uv.count * 2;
indexArrLength += geometry.index.count;
});
const sumPosArr = new Float32Array(posArrLength);
const sumColorArr = new Float32Array(posArrLength);
const sumNormArr = new Float32Array(normArrLength);
const sumUvArr = new Float32Array(uvArrLength);
const sumIndexArr = new Uint32Array(indexArrLength);
const postotalarr = [];
let sumPosCursor = 0;
let sumNormCursor = 0;
let sumUvCursor = 0;
let sumIndexCursor = 0;
let sumIndexCursor2 = 0;
for (let a = 0; a < geoarray.length; a++ ) {
const posAttArr = geoarray[a].getAttribute('position').array;
for (let b = 0; b < posAttArr.length; b++) {
sumPosArr[b + sumPosCursor] = posAttArr[b];
sumColorArr[b + sumPosCursor] = colorarray[a][b % 3];
}
sumPosCursor += posAttArr.length;
const numAttArr = geoarray[a].getAttribute('normal').array;
for (let b = 0; b < numAttArr.length; b++) {
sumNormArr[b + sumNormCursor] = numAttArr[b];
}
sumNormCursor += numAttArr.length;
const uvAttArr = geoarray[a].getAttribute('uv').array;
for (let b = 0; b < uvAttArr.length; b++) {
sumUvArr[b + sumUvCursor] = uvAttArr[b];
}
sumUvCursor += uvAttArr.length;
const indexArr = geoarray[a].index.array;
for (let b = 0; b < indexArr.length; b++) {
sumIndexArr[b + sumIndexCursor] = indexArr[b] + sumIndexCursor2;
}
sumIndexCursor += indexArr.length;
sumIndexCursor2 += posAttArr.length / 3;
}
const combinedGeometry = new THREE.InstancedBufferGeometry();
combinedGeometry.setAttribute('position', new THREE.BufferAttribute(sumPosArr, 3 ));
combinedGeometry.setAttribute('normal', new THREE.BufferAttribute(sumNormArr, 3 ));
combinedGeometry.setAttribute('uv', new THREE.BufferAttribute(sumUvArr, 2 ));
combinedGeometry.setAttribute('color', new THREE.BufferAttribute(sumColorArr, 3 ));
combinedGeometry.setIndex(new THREE.BufferAttribute(sumIndexArr, 1));
return combinedGeometry;
}
based on my observation, preparing the list of sphereBufferGeometry takes ~150 - 200ms, and combining the geometry takes ~ 100 - 150ms. Do you guys have any suggestions to improve this performance?
PS: I’ve also considered instancing the ~6000 spheres in one unit cell, but since there are ~10-1000 periodic replicates, the instanced attribute array would be super long, unless there are ways of two-level instancing…?
(
