WebGL-Shader folgen der GLSL ES 1.017-Spezifikation
Das unterscheidet sich von Desktop OpenGL auf verschiedene Arten. Eine davon ist die Version 1.0 von GLSL ES, wo als Desktop-GL Version 4.2 von GLSL (nicht ES)
Ein großer Unterschied zwischen WebGL GLSL und vielen Artikeln über Shader im Internet ist, dass es in OpenGL ES 2.0 keine feste Funktionspipeline gibt und daher keine feste Funktionspipeline in WebGL.
Die feste Funktionspipeline bleibt von OpenGL 1.0 übrig, wo Sie Befehle wie glLight und glVertex und glNormal verwenden würden. Und dann benötigten deine Shader eine Möglichkeit, diese Daten zu referenzieren. In OpenGL ES und WebGL ist das alles weg, weil alles, was ein Shader macht, 100% für den Benutzer ist. In WebGL können Sie Ihre eigenen Eingaben (Attribute, Uniformen) definieren und sie beliebig benennen.
WebGL2-Shader folgen der GLSL ES 3.00-Spezifikation
Wie bei three.js ist three.js eine 3D-Engine und stellt beim Generieren eines Shaders eigene Standardeingaben, Namen und andere Features bereit. Weitere Informationen finden Sie in den Dokumenten . Die standardmäßig bereitgestellten Uniformen und Attribute sind hier dokumentiert . Sie können auch auf die Quelle schauen oder Überprüfen Sie ein Beispiel .
Three.js bietet auch etwas, das als RawShaderMaterial bezeichnet wird und in diesem Fall offensichtlich keine vordefinierten Dinge hinzufügt Sie schreiben einfach Standard-WebGL GLSL.
Sie können die three.js-Standardattribute und -Uniforts hier finden .
Was einen Ort zum Lernen von GLSL betrifft, habe ich keinen Vorschlag. Es hängt wirklich von Ihrer Erfahrung mit dem Programmieren im Allgemeinen ab und wie Sie gerne lernen. Ich lerne, indem ich mir Beispiele ansehe, die besser sind als Handbücher zu lesen. Vielleicht kann jemand anderes einige Links hinzufügen.
Shader als Konzept sind ziemlich einfach . Sie erstellen ein Paar von Shadern, richten sie mit Eingaben ein, rufen gl.drawArrays oder gl.drawElements auf und geben eine Anzahl ein. Ihr Vertex-Shader wird Zählzeiten genannt und muss gl_Position setzen. Alle 1 bis 3 Mal heißt es WebGL wird dann einen Punkt, eine Linie oder ein Dreieck zeichnen. Um dies zu tun, ruft es Ihren Fragment-Shader auf und fragt nach jedem Pixel, der gerade gezeichnet wird, welche Farbe das Pixel erzeugt. Der Fragment-Shader muss gl_FragColor festlegen. Die Shader erhalten Daten von attributes , uniforms , textures und varyings . attributes sind pro Vertex-Daten. Sie ziehen ihre Daten aus Puffern, ein Stück Daten pro Attribut pro Iteration Ihres Vertex-Shaders. Uniforms sind wie globale Variablen zu setzen, bevor der Shader ausgeführt wird. Sie können Daten von einem Vertex-Shader an einen Fragment-Shader mit varying übergeben. Diese Daten werden interpoliert oder variiert;) zwischen den Werten, die für jeden Eckpunkt eines Grundelements (Dreiecks) gesetzt werden, wenn der Fragment-Shader aufgerufen wird, um für jedes Pixel eine Farbe bereitzustellen.
Es liegt an Ihnen, dem Shader kreativ Daten zur Verfügung zu stellen und diese Daten kreativ zu verwenden, um gl_Position und gl_FragColor festzulegen. Ich bekomme die meisten Ideen von Beispielen.
GLSL selbst ist ziemlich geradlinig. Es gibt ein paar Typen int, float, vec2, vec3, vec4, mat2, mat3, mat4 . Sie reagieren auf die Operatoren +, -, *, / usw. Es gibt einige eingebaute Funktionen.
Eine knappe Version aller GLSL-Informationen finden Sie auf den letzten 2 Seiten der WebGL-Referenzkarte .
Das war genug für mich. Das und Arbeitsprogramme .
Das eine interessante Ding für mich gegenüber den meisten Sprachen waren Synonyme für Vec-Felder und das Swizzling. Ein vec4 zum Beispiel
%Vor% Sie können auf die verschiedenen Komponenten von v verweisen, indem Sie x,y,z,w oder s,t,u,v oder r,g,b,a oder den Array-Stil verwenden. So zum Beispiel
Das andere, was Sie tun können, ist swizzle
%Vor%Und Sie können auch Unterkomponenten erhalten
%Vor%