To create larger amounts of particles more than like 100,000, which method is the best to do so? Three.Points or Three.InstancedMesh or Three.Mesh

Questions
1

Hi there,

Can I ask, to create larger amounts of particles more than like 100,000, which method is the best to do so in three.js? Three.Points or Three.InstancedMesh or Three.Mesh? Why?

Thanks.

2

Depends - what kind of particles / effect? Or just universal solution for any general effect?

2D particles → points or instanced triangles or postprocessing overlay
3D particles → instanced meshes or single buffer geometry with fancy noise shader

1 Like
4

Can you teach me how they work together? I tried a few methods. Only the following works. Why? I thought they could easily replace with one another.

var pointsGeometry = new THREE.BufferGeometry();
pointsGeometry.setAttribute(“normal”, new THREE.BufferAttribute(new Float32Array(normals), 3, false));
pointsGeometry.setAttribute(‘position’, new THREE.BufferAttribute(new Float32Array(vertices), 3, false));
pointsGeometry.setAttribute(‘color’, new THREE.BufferAttribute(new Float32Array(colors), 3, false));
pointsGeometry.setAttribute(‘sizes’, new THREE.BufferAttribute(new Float32Array(sizes), 1, false));

var pointsMaterial = new THREE.ShaderMaterial({
uniforms: uniforms,
vertexShader: document.getElementById(‘vertexshader_test’).textContent,
fragmentShader :document.getElementById(‘fragmentshader_test’).textContent,
});
particles = new THREE.Points(pointsGeometry, pointsMaterial);

I changed the functions above as follows. The program failed and the screen was even frozen with no error message.
THREE.BufferGeometry changed to InstancedBufferGeometry,
THREE.BufferAttribute changed to InstancedBufferAttribute
THREE.Points changed to THREE.Mesh or changed to THREE.InstancedMesh

5

Can you teach me how they work together? I tried a few methods. Only the following works. Why? I thought they could easily replace with one another.

var pointsGeometry = new THREE.BufferGeometry();
pointsGeometry.setAttribute(“normal”, new THREE.BufferAttribute(new Float32Array(normals), 3, false));
pointsGeometry.setAttribute(‘position’, new THREE.BufferAttribute(new Float32Array(vertices), 3, false));
pointsGeometry.setAttribute(‘color’, new THREE.BufferAttribute(new Float32Array(colors), 3, false));
pointsGeometry.setAttribute(‘sizes’, new THREE.BufferAttribute(new Float32Array(sizes), 1, false));

var pointsMaterial = new THREE.ShaderMaterial({

uniforms: uniforms,
vertexShader: document.getElementById(‘vertexshader_test’).textContent,
fragmentShader :document.getElementById(‘fragmentshader_test’).textContent,
});
particles = new THREE.Points(pointsGeometry, pointsMaterial);

I changed the functions above as follows. The program failed and the screen was even frozen with no error message.
THREE.BufferGeometry changed to InstancedBufferGeometry,
THREE.BufferAttribute changed to InstancedBufferAttribute
THREE.Points changed to THREE.Mesh or changed to THREE.InstancedMesh

6

@S_Loan
What difficulty do you have with particles?
This example has 500k points and works well (have a look at its source code).

7

Thanks for your input. I used the same functions as the example you offered. It worked well. But, my question is when I tried replacing with other functions as follows and it did not work. Don’t they easily replace with one another to create large amounts of particles? I’m confused with the look-alike functions. Correct me, if i’m mistaken. Thanks.

THREE.BufferGeometry is changed to InstancedBufferGeometry,
THREE.BufferAttribute is changed to InstancedBufferAttribute
THREE.Points is changed to THREE.Mesh or changed to THREE.InstancedMesh