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 If you want ...

Get Three.js Cookbook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.