Shader in WebGL vs openGL?

Question

Desidero utilizzare gli shader da utilizzare in WebGL e in particolare three.js. Esiste una versione specifica di GLSL utilizzata da WebGL e three.js?

Answer 1

shader WebGL seguono il GLSL ES 1.017 spec

https://www.khronos.org/registry/gles/specs/2.0/GLSL_ES_Specification_1.0.17.pdf

Questo è diverso da quello desktop OpenGL in diversi modi. Uno è la versione 1.0 di GLSL ES, come GL desktop nella versione 4.2 di GLSL (non ES)

Una grande differenza tra WebGL GLSL e molti articoli trovati sugli shader su Internet non esiste una pipeline di funzioni fisse in OpenGL ES 2.0 e quindi nessuna pipeline di funzioni fisse in WebGL.

La pipeline di funzioni fisse viene lasciata da OpenGL 1.0 dove si utilizzano comandi come glLight e glVertex e glNormal. E poi i tuoi shader avevano bisogno di un modo per fare riferimento a quei dati. In OpenGL ES e WebGL tutto ciò che è andato perché tutto ciò che uno shader fa è 100% fino all'utente. Tutto ciò che WebGL ti consente di definire i tuoi input (attributi, uniformi) e nominarli come preferisci.

shaders WebGL2 seguono il GLSL ES 3.00 spec

https://www.khronos.org/registry/OpenGL/specs/es/3.0/es_spec_3.0.pdf

Quanto Three.js, Three.js è un 3d motore e fornisce il proprio insieme di standard di ingressi, nomi e altre caratteristiche quando genera uno shader. See the docs per alcuni dettagli. The uniforms and attributes provided by default are documented here. È inoltre possibile look at the source o check out an example.

Three.js fornisce anche qualcosa chiamato RawShaderMaterial che non aggiunge alcuna cosa predefinita apparentemente, nel qual caso si scrive semplicemente WebGL GLSL standard.

È possibile trovare gli attributi e le uniformi standard di three.js here.

Per quanto riguarda un posto per imparare GLSL non ho davvero un suggerimento. Dipende davvero dal tuo livello di esperienza con la programmazione in generale e da come ti piace imparare. Imparo guardando esempi meglio della lettura di manuali. Forse qualcun altro può aggiungere alcuni link.

Shaders as a concept are pretty simple. Crei un paio di shader, li configuri con input, chiami gl.drawArrays o gl.drawElements e passi un conteggio. Il vertex shader verrà chiamato count count e necessario impostare gl_Position. Ogni 1 o 3 volte si chiama WebGL quindi disegnerà un punto, una linea o un triangolo. Per fare ciò chiamerà il tuo framment shader chiedendo per ogni pixel che sta per disegnare il colore che lo rende quel pixel. Lo shader di frammenti deve impostare gl_FragColor. Gli shader ricevono i dati da attributes, uniforms, textures e varyings. attributes sono dati per vertice. Tirano i loro dati dai buffer, un pezzo di dati per attributo per iterazione del vertex shader. Uniforms sono come impostare le variabili globali prima dell'esecuzione dello shader. È possibile passare i dati da un vertex shader a un framment shader con varying. Tali dati verranno interpolati o diversi;) tra i valori impostati per ciascun vertice di un primitivo (triangolo) mentre lo shader di frammento viene chiamato per fornire un colore per ciascun pixel.

Spetta a te fornire i dati in modo creativo allo shader e utilizzare tali dati in modo creativo per impostare gl_Position e gl_FragColor.Ottengo molte idee guardando esempi.

GLSL è piuttosto semplice. Esistono alcuni tipi int, float, vec2, vec3, vec4, mat2, mat3, mat4. Rispondono agli operatori +, -, *, / ecc. Esistono alcune funzioni integrate.

È possibile trovare una versione concisa di tutte le informazioni GLSL nelle ultime 2 pagine dello WebGL Reference Card.

Questo è stato abbastanza per me. Quello e guardando working programs.

L'unica cosa interessante per me rispetto alla maggior parte delle lingue era il sinonimo di campi VEC e lo swizzling. Un vec4 per esempio

vec4 v = vec4(1.0, 2.0, 3.0, 4.0); 

è possibile fare riferimento le varie componenti della v utilizzando x,y,z,w o s,t,u,v o r,g,b,a o lo stile array. Così, per esempio

float red = v.r; // OR 
float red = v.x; // same thing OR 
float red = v.s; // same thing OR 
float red = v[0]; // same thing 

L'altra cosa che puoi fare è swizzle

vec4 color = v.bgra; // swap red and blue 
vec4 bw = v.ggga; // make a monotone color just green & keep alpha 

e si può anche ottenere sottocomponenti

vec2 just_xy = v.xy;