Graphics Reference
In-Depth Information
Creating a custom fragment shader
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.
Getting ready
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 how you can do this.
How to do it...
Let's start with the JavaScript part of this recipe:
1. A shader always consists of a vertex shader and a fragment shader. In
this recipe, we'll use the standard vertex shader provided by Three.js and
provide our own custom fragment shader. Three.js keeps all its shaders in
THREE.ShaderLib
:
