THREE.js Geometry: Particle Systems

CS 482 Lecture, Dr. Lawlor

In THREE.js, things are drawn onscreen by Mesh objects. These are inserted into the scene object, where they live permanently.

Geometry describes the vertices and vertex colors of the object.
Material describes the shader and shader parameters used to render the object.
Mesh describes the object position (myMesh.position, a vec3) and orientation (myMesh.rotation gives Euler angles), and is added to the scene.

Here's how you'd create a simple red box:

	var geometry = new THREE.BoxGeometry( 2, 2, 2 );
        var material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );
        var mesh = new THREE.Mesh( geometry, material );
        scene.add( mesh );

Both OpenGL or WebGL use immediate mode rendering, meaning drawing happens only when you make a draw call, so you need to repeat all your draw calls every frame.

THREE.js and most high-level libraries use retained mode rendering, meaning you add objects to the scene once, and then the objects get drawn repeatedly. You can use scene.remove to detach a mesh from the scene, but you need to do this explicitly.

THREE.js Point Clouds

For an object consisting of many isolated points, THREE.js provides a THREE.PointCloud mesh object. It uses a special THREE.PointCloudMaterial for the material, which has a number of options ranging from simple colored squares for each point, to "point sprites" showing a texture. Point sprites are often used with clumps of smoke or fire to make clouds or fireballs.

The geometry is a generic THREE.Geometry, basically just an array of vertices and an optional array of vertex colors, but it does not use any of the faces (no connectivity information, because there are no triangles). After creating the PointCloud, you can go back and change the geometry's vertices, but they've already been copied over to the GPU (as a Vertex Buffer Object), so by default nothing actually changes onscreen. To get PointCloud changes to show up, you need to set geometry.verticesNeedUpdate = true, and on the next render it will re-upload the vertices. However, you can't change the number of vertices in a Vertex Buffer Object, so adding new points to the geometry simply doesn't work--you need to preallocate all the points you ever expect to need.

Unlike most C++ libraries, which are very picky about access to their private parts, JavaScript in general and THREE.js in particular seems to encourage direct access to the internals of any of its objects, even after they've been used by the library.

Try the THREE.js volcano particle system demo; see the "Setup" tab for details on the geometry and mesh setup.

Particle Systems

A "particle system" is drawn as a bunch of points, but you compute some physics on each point to make them move as a collective. Typically, each frame you loop over the points, compute a net force on each point, and update the point positions and velocities.

The visual effects generated range from rain to clumpy smoke clouds to explosions to burning fire. Because the points are computed independently, typically the effect starts to appear less realistic the closer you look, but it is possible to capture the essence of some very complex phenomena using some very simple physics.