Using Our Own Shaders with ShaderMaterial

The THREE.ShaderMaterial 

THREE.ShaderMaterial is one of the most versatile and complex materials available in Three.js. With this material, we can pass in our own custom shaders that are directly run in the WebGL context. A shader converts Three.js JavaScript meshes into pixels on the screen. With these custom shaders, we can define exactly how our object should be rendered and how to override or alter the defaults from Three.js. In this lesson, we won’t go into too much detail on how to write custom shaders; instead, we will just show a couple of examples. 

Properties of THREE.ShaderMaterial

The THREE.ShaderMaterial has several properties we can set. With THREE.ShaderMaterial, Three.js passes in all the information regarding these properties to our custom shaders, but we still have to process the information to create colors and vertex positions. The following are the properties of THREE.Material that are passed into the shader and that we can interpret for ourselves: 

• wireframe: This renders the material as a wireframe. This is great for debugging purposes. 

• shading: This defines how shading is applied. The possible values are THREE.SmoothShading and THREE.FlatShading. This property isn’t enabled in the example for this material.

• vertexColors: We can define individual colors to be applied to each vertex with this property. It is used to color the various parts of a line. 

• fog: This determines whether this material is affected by global fog settings. This is not shown in action. If this is set to false, the global fog doesn’t affect how this object is rendered. 

Besides these properties that are passed into the shader, THREE.ShaderMaterial also provides several specific properties we can use to pass in additional information into our custom shader. Once again, we won’t go into too much detail on how we can write our own shaders since that would be a course on its ...