Three.js merge geometry very slow

Question

I am just learning Three.js, and find the documentation somewhat difficult to work with (there's a lot of "todos" all over the place).

I am simply trying to display 50,000 to 500,000 red spheres on the screen. This code is kind of modeled after Mr. Doob's city example (http://www.mrdoob.com/lab/javascript/webgl/city/01/). The only difference is that mine is very slow, or actually hangs Chrome in some instances (on a MBP retina):

moleculeGeometry = new THREE.Geometry()
sphereGeometry = new THREE.SphereGeometry 0.7, 6, 6
sphereMaterial = new THREE.MeshLambertMaterial {color: 'red'}
sphere = new THREE.Mesh sphereGeometry, sphereMaterial

alert 'start merging'

for i in [0...90000]
    sphere.position.x = atoms.coords[i][0]
    sphere.position.y = atoms.coords[i][1]
    sphere.position.z = atoms.coords[i][2]
    THREE.GeometryUtils.merge moleculeGeometry, sphere

alert 'finished merging'

mesh = new THREE.Mesh moleculeGeometry, sphereMaterial
scene.add mesh

render()

Any ideas here? The time between the 'start merging' alert and 'finished merging' alerts is very long, if it even finishes at all instead of hanging.

Possible ideas include

Preallocating an array of vertices for the geometry. I imagine each time I merge the sphere into the overall geometry more memory is allocated
Merging sets of two spheres at a time, then merging two of those sets at a time, then repeating this process until the whole "scene" is merged. (There's a name for this technique, but I can't remember what it's called.) That seems like overkill. 90,000 merges should not be a bottleneck for anything on a modern computer.

Thanks

Maybe you should check for BufferGeometry examples that come with Three.js. In theory you upload all your sphere stuff to the GPU thus making it way faster to render. See the examples how this is done in three.js. — GuyGood
You seem to be missing a significant lot of brackets and semicolons. Oh, coffee. — Alex Mund

Alex Mund Alex Mund · Accepted Answer · 2013-09-08T16:36:03

Remove sphereMaterial from sphere. Like this:

sphere = new THREE.Mesh sphereGeometry

You don't need it because sphereMaterial is in mesh.

Disclaimer: I'm just learning Three JS too. ;3

Three.js merge geometry very slow

1 Answers