Introduction

The framework three.js provides with the ShaderMaterial and the method .onBeforeCompile( ) for built-in materials an easy way to bring shaders to the surface of the geometry. Shaders are very fast due to the calculation in the GPU. For each point of the screen or a part of it (fragment) a color and transparency is calculated from its 2D coordinates in parallel in the GPU. A vector2( x, y ) is mapped to a vector4( red,green, blue, transparency ).

One programs with GLSL (OpenGL Shading Language), similar to C/C++ .
See https://www.khronos.org/opengl/wiki/Core_Language_(GLSL)
In the case of three.js for WebGL (Web Graphics Library).

Recommended for introduction to shader prorgramming is the Schader's book. It is available in several languages. https://thebookofshaders.com/

The associated online editor http://editor.thebookofshaders.com/ is very helpful for familiarization. It has a useful syntax control.

For further reading on the basics, WebGL Fundamentals https://webglfundamentals.org/webgl/lessons/webgl-fundamentals.html is suitable.
Also worth a look at: http://learnwebgl.brown37.net/
https://www.khronos.org/registry/OpenGL/specs/gl/GLSLangSpec.3.30.pdf
https://www.khronos.org/registry/OpenGL-Refpages/es3.0/html/index.php

Many partly very sophisticated examples can be found at shadertoy. https://www.shadertoy.com/

To use shader from the online editor of the book of shaders and from shadertoy with three.js, some small adjustments are necessary.

So the headers # ifdef ... #endif are not necessary and the aspect ratio has to be set a bit differently according to the definition of the three.js mesh. Also the uv values are referred to. In the very simple initial examples you can compare this well.

At shadertoy there are predefined shader inputs which can be expanded above the code. The output fragColor is to be replaced for three.js shader by gl_FragColor. In the examples with code from shadertoy the necessary changes are marked by comments // added hofk or // changed hofk.

In the source code you can see which examples react to mouse actions and keyboard actuation.

The concise introduction will have to do for now. Sooner or later, more chapters will follow.

So right to the basic examples Shader 1