O'Reilly logo

Learning Three.js: The JavaScript 3D Library for WebGL by Jos Dirksen

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Creating custom post processing shaders

In this section you'll learn how to create a custom shader that you can use in post processing. We'll create two different shaders. The first one will convert the current image into a grayscale image, and the second one will convert the image to an 8-bit image by reducing the number of colors that are available.

Note

Creating the vertex and fragment shaders is a very broad subject. In this section, we will only touch the surface of what can be done by these shaders and how they work. For more in-depth information, you can find the WebGL specification at http://www.khronos.org/webgl/. An additional good resource full of examples is shadertoy: https://www.shadertoy.com/

Custom grayscale shader

To create a custom ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required