Three.js Cookbook

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 ...