WebGL - Scegli: Una Guida per Principianti

Ciao, aspiranti programmatori! Oggi ci imbarcheremo in un viaggio emozionante nel mondo degli shader di WebGL. Non preoccupatevi se non avete mai scritto una riga di codice prima – sarò il vostro guida amichevole attraverso questo paesaggio colorato della grafica computerizzata.

Cos'è uno Shader?

Prima di immergerci, capiremo cos'è uno shader. Immagina di dipingere un'immagine. La tela è lo schermo del tuo computer, e gli shader sono come pennelli magici che dicono al computer esattamente come colorare ogni pixel. Cool, vero?

Tipi di Dati

Nel mondo degli shader, abbiamo alcuni tipi di dati speciali con cui lavorare. Ecco un'occhiata:

Tipo di Dato	Descrizione	Esempio
float	Un numero a virgola mobile di precisione singola	3.14
vec2	Un vettore 2D	vec2(1.0, 2.0)
vec3	Un vettore 3D	vec3(1.0, 2.0, 3.0)
vec4	Un vettore 4D	vec4(1.0, 2.0, 3.0, 4.0)
mat2	Una matrice 2x2	mat2(1.0, 2.0, 3.0, 4.0)
mat3	Una matrice 3x3	mat3(1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0)
mat4	Una matrice 4x4	mat4(1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0, 11.0, 12.0, 13.0, 14.0, 15.0, 16.0)

Non preoccupatevi se questi sembrano schiaccianti – li useremo passo per passo!

Qualificatori

I qualificatori sono come etichette speciali che mettiamo sulle nostre variabili. Dicono allo shader come trattare queste variabili. Ecco i principali:

Qualificatore	Descrizione
attribute	Valori di input che cambiano per ogni vertice
uniform	Valori di input che rimangono costanti per tutti i vertici
varying	Valori passati dallo shader dei vertici allo shader dei frammenti

Shader dei Vertici

Lo shader dei vertici è come lo scheletro del nostro modello 3D. Calcola dove ogni punto (vertice) del nostro modello dovrebbe essere sullo schermo. Ecco uno shader dei vertici semplice:

attribute vec3 aVertexPosition;
uniform mat4 uModelViewMatrix;
uniform mat4 uProjectionMatrix;

void main(void) {
gl_Position = uProjectionMatrix * uModelViewMatrix * vec4(aVertexPosition, 1.0);
}

Scomponiamo questo:

1. Dichiariamo un attribute chiamato aVertexPosition - questa è la posizione del nostro vertice.
2. Abbiamo due matrici uniform - queste ci aiutano a posizionare e proiettare il nostro modello 3D su uno schermo 2D.
3. Nella funzione main, calcoliamo la posizione finale del nostro vertice.

Shader dei Frammenti

Se lo shader dei vertici è lo scheletro, lo shader dei frammenti è la pelle. Decide il colore di ogni pixel. Ecco uno shader dei frammenti semplice:

precision mediump float;

void main(void) {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}

Questo shader sta dipingendo tutto rosso! La vec4(1.0, 0.0, 0.0, 1.0) rappresenta il rosso pieno, nessun verde, nessun blu e opacità piena.

Salvare e Compilare i Programmi Shader

Ora che abbiamo scritto i nostri shader, dobbiamo informare WebGL su di loro. Ecco come facciamo in JavaScript:

function getShader(gl, id) {
const shaderScript = document.getElementById(id);
if (!shaderScript) return null;

const str = shaderScript.text;
let shader;

if (shaderScript.type === "x-shader/x-fragment") {
shader = gl.createShader(gl.FRAGMENT_SHADER);
} else if (shaderScript.type === "x-shader/x-vertex") {
shader = gl.createShader(gl.VERTEX_SHADER);
} else {
return null;
}

gl.shaderSource(shader, str);
gl.compileShader(shader);

if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
alert(gl.getShaderInfoLog(shader));
return null;
}

return shader;
}

Questa funzione fa alcune cose:

1. Trova il nostro codice shader nel documento HTML.
2. Crea uno shader del tipo giusto (vertex o fragment).
3. Compila lo shader e verifica gli errori.

Programma Combinato

Infine, dobbiamo combinare i nostri shader dei vertici e dei frammenti in un programma:

const shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);

if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
alert("Could not initialize shaders");
}

gl.useProgram(shaderProgram);

Questo codice crea un programma, attacca i nostri shader, collega il programma e dice a WebGL di usarlo.

Ecco fatto! Avete appena compiuto i vostri primi passi nel mondo degli shader di WebGL. Ricordate, come imparare qualsiasi nuova lingua, ci vuole pratica. Non scoraggiatevi se non clicca subito – continuate a sperimentare e presto sarete in grado di creare incredibili grafiche 3D nel vostro browser web!

Nei miei anni di insegnamento, ho visto centinaia di studenti passare da principianti a maghi degli shader. Una delle mie studentesse ha persino usato queste competenze per creare una galleria d'arte virtuale per il suo progetto finale – immagina di camminare attraverso un museo 3D direttamente nel tuo browser web!

Quindi, cosa creerete con le vostre nuove competenze shader? L'unica limitazione è la vostra immaginazione! Buon codice, futuri esperti di grafica!

Credits: Image by storyset