Learn Three.js - Third Edition

Creating your own shaders with THREE.ShaderMaterial

THREE.ShaderMaterial is one of the most versatile and complex materials available in Three.js. With this material, you can pass in your own custom shaders that are directly run in the WebGL context. A shader converts Three.js JavaScript meshes to pixels on screen. With these custom shaders, you can define exactly how your object should be rendered and how to override or alter the defaults from Three.js. In this section, we won't go into the details yet of how to write custom shaders. For more information on that, see Chapter 11, Render Postprocessing. For now, we'll just look at a very basic example that shows how you can configure this material.

THREE.ShaderMaterial has a number of properties ...