Point Clouds and Postprocessing - Three.js - page 255

sortPoints property makes sure that when you use transparent points, as
we do in this recipe, they are rendered correctly.
4. The last step to perform is to add the created THREE.PointCloud object to
the scene:
scene.add(pc);
Now, Three.js will render the point cloud just like it does any other 3D object.
How it works...
When you create THREE.PointCloud , Three.js creates a point for each vertex of
the provided THREE.Geometry object. No other information in THREE.Geometry is
used. Internally, for THREE.WebGLRenderer , it directly uses GL_POINTS , which is
a WebGL primitive, to render the individual points (refer to https://www.khronos.org/
opengles/sdk/docs/man/xhtml/glDrawElements.xml for more information). Then, us-
ing a custom fragment shader, it styles these points. The result is that when you use
THREE.WebGLRenderer , you can easily render millions of points while maintaining
great performance.
There's more...
Points are a great way to represent all kinds of different effects. For some interesting
applications of points, you can look at the following examples:
• One million points rendered on WebGL: http://soulwire.github.io/WebGL-
GPU-Particles/
• Morphing from one geometry to another using a point cloud: ht-
tp://oos.moxiecode.com/js_webgl/particles_morph/index.html
See also
In this chapter, we have a number of recipes that deal with points that are closely
related to this one: