Einführung

Das Framework three.js bietet mit dem ShaderMaterial und der Methode .onBeforeCompile( ) für eingebaute Materialien eine einfache Möglichkeit shader auf die Oberfläche der Geometrie zu bringen. Shader sind durch die Berechnung in der GPU sehr schnell. Für jeden Punkt des Bildschirms oder eines Teils davon (Fragment) wird aus seinen 2D Koordinaren eine Farbe und Transparenz parallel in der GPU berechnet. Ein Vektor2( x, y ) wird auf einen Vektor4( Rot,Grün, Blau, Transparenz ) abgebildet.

Man programmiert mit GLSL (OpenGL Shading Language), ähnlich zu C/C++ .
Siehe https://www.khronos.org/opengl/wiki/Core_Language_(GLSL)
Im Falle von three.js für WebGL (Web Graphics Library).

Empfehlenswert zur Einführung in die shader Prorgrammierung ist das Buch der Schader. Es ist in mehreren Sprachen verfügbar. https://thebookofshaders.com/?lan=de

Bei der Einarbeitung ist der zugehörige online Editor http://editor.thebookofshaders.com/ sehr hilfreich. Er hat eine nützliche Syntaxkontrolle.

Als weitere Lektüre zu den Grundlagen ist WebGL Fundamentals https://webglfundamentals.org/webgl/lessons/webgl-fundamentals.html geeignet.
Auch lohnt ein Blick auf:
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

Viele teils sehr anspruchsvolle Beispiele findet man bei shadertoy. https://www.shadertoy.com/

Um shader vom online Editor des Buchs der Shader und von shadertoy mit three.js zu verwenden, sind einige kleine Anpassungen nötig.

So sind die Kopfzeilen # ifdef ... #endif nicht nötig und das Seitenverhältnis (aspect) ist entsprechend der Definition des three.js meshes etwas anders einzubringen. Auch wird auf die uv Werte Bezug genommen. In den sehr einfachen Anfangsbeispielen kann man das gut vergleichen.

Bei shadertoy gibt es vordefinierte Shader Inputs die man über dem Code ausklappen kann. Die Ausgabe fragColor ist für three.js shader durch gl_FragColor zu ersetzen. In den Beispielen mit Code von shadertoy sind die notwendigen Änderungen durch Kommentare // added hofk bzw. // changed hofk kenntlich gemacht.

Im Quellcode ist erkennbar, welche Beispiele auf Mausaktionen und Tastaturbetätigung reagieren.

Die knappe Einführung muss derzeit erst einmal reichen. Früher oder später folgen weitere Kapitel.
Also gleich zu den Basisbeispielen Shader 1