A WebGL shader always consists of two parts: the vertex shader that can be used to reposition the individual vertices of the model and a fragment shader that can be used to add color to the model. In this recipe, we'll show you the steps you need to take to use a custom fragment shader.
Before we start with the fragment shader, there is one thing you need to know. Just like with a vertex shader, you don't write the fragment shader code in JavaScript. These shaders are written in the GLSL language. So, if you want to learn more about the functions and notations used in this example, look at the WebGL specification, which can be found at https://www.khronos.org/registry/webgl/specs/1.0/. If you want to experiment with the provided shader code, you can just open up 05.10-custom-fragment-shader.html in your browser.
This shader colors an object based on the normal vector and on the distance from the camera. In the following sections, we will explain...