Graphics Reference
In-Depth Information
1. We first set the color of the fragment (the point) to the color defined
on the material (
psColor
), and the opacity is set to the point-specific
opacity (
vOpacity
).
2. Next, we apply the provided texture (
map
).
3. Finally, we multiply the color value(
gl_Fragcolor
) with the point
specific color(
vcolor
).
7. At this point, we've configured the material and created the specific shaders.
Now, we can just create the point cloud and add it to the scene:
ps = new THREE.PointCloud(geometry,
psMat2);
ps.sortPoints = true;
scene.add(ps);
With this last step, you're done.
As you can see, as this isn't a standard Three.js functionality, we need to take some
additional steps to accomplish our goals.
How it works...
In the previous section, we've already explained a bit how the styling of individual
points works. The main thing to remember here is that under the hood, Three.js
creates vertex and fragment shaders for rendering. If there is a functionality you
want that can't be configured in the standard shaders, you can use
THREE.ShaderMaterial
to create your own custom implementations. You can still
use Three.js to create your geometries and handle all the WebGL initialization stuff
but use your own shader implementations.
There's more…
With this setup, you've got a basic skeleton to create your own custom shader based
on point clouds. You can now easily add more functionalities, other configuration op-
tions, and more by just adding to this setup.
