WebGL - Fondamenti: Una Introduzione Amichevole per i Principianti

Ciao a tutti, futuri maghi di WebGL! Sono entusiasta di essere il vostro guida in questo emozionante viaggio nel mondo di WebGL. Come qualcuno che ha insegnato grafica computerizzata per anni, non posso aspettare per condividere la magia di WebGL con voi. Non preoccupatevi se siete nuovi alla programmazione - inizieremo da zero e costruiremo le nostre conoscenze passo dopo passo. Allora, prendete una tazza di caffè (o tè, se è la vostra cosa), e tuffiamoci!

Cos'è WebGL?

Prima di immergerci nei dettagli, capiremo di cosa si occupa WebGL. WebGL (Web Graphics Library) è una potente API JavaScript che ci permette di creare straordinarie grafiche 3D direttamente nei nostri browser web. È come avere una mini-cinema a portata di mano!

Pensate a WebGL come a un ponte tra il vostro browser e l'hardware grafico del vostro computer. Ci permette di sfruttare la potenza della vostra GPU (Graphics Processing Unit) per visualizzare scene 3D complesse con una performance fluida. Bel pezzo, vero?

WebGL - Sistema di Coordinate

Ora, parliamo del sistema di coordinate di WebGL. Immagina di stare nel mezzo di un enorme, invisibile cubo 3D. Questo è essenzialmente ciò che il sistema di coordinate di WebGL è!

Il Sistema di Coordinate Cartesiano

WebGL utilizza un sistema di coordinate cartesiano 3D. È simile al sistema 2D che avete forse imparato in matematica, ma con una dimensione in più:

• Asse X: Orizzontale (da sinistra a destra)
• Asse Y: Verticale (da basso a sopra)
• Asse Z: Profondità (da dietro a davanti)

Ecco un esempio semplice per aiutarvi a visualizzarlo:

// Definisci un vertice (punto nello spazio 3D)
var vertex = [
0.5,  // Coordinata X
0.7,  // Coordinata Y
0.0   // Coordinata Z
];

In questo esempio, stiamo definendo un punto che è leggermente a destra (0.5) e in alto (0.7) dal centro, e esattamente sulla superficie dello schermo (0.0).

Lo Spazio di Taglio

Una peculiarità di WebGL è che utilizza un intervallo di coordinate speciale chiamato "spazio di taglio". Tutte le coordinate devono cadere tra -1.0 e 1.0 su ciascun asse. Tutto ciò che è fuori questo intervallo viene "tagliato" (non viene disegnato).

// Un punto nell'angolo in alto a destra dello spazio di taglio
var cornerPoint = [1.0, 1.0, 0.0];

// Un punto che sarà tagliato (non visibile)
var clippedPoint = [1.5, 0.5, 0.0];

Grafica WebGL

Ora che abbiamo capito il sistema di coordinate, parliamo di come WebGL effettivamente disegna le cose.

Primitivi

WebGL disegna tutto utilizzando semplici forme chiamate primitivi. I tre principali sono:

1. Punti
2. Linee
3. Triangoli

Ecco una tabella riassuntiva di questi primitivi:

Primitivo	Descrizione	Caso d'uso
Punti	Singoli pixel	Effetti di particelle, stelle
Linee	Linee dritte tra punti	Wireframe, grafici
Triangoli	Forme a tre punti	La maggior parte dei modelli 3D, terreni

Vediamo come potremmo definire un semplice triangolo:

var triangleVertices = [
0.0,  0.5,  0.0,  // Punto superiore
-0.5, -0.5,  0.0,  // Punto inferiore sinistro
0.5, -0.5,  0.0   // Punto inferiore destro
];

Questo codice definisce i tre punti di un triangolo. Ogni punto è rappresentato da tre numeri (x, y, z).

Buffer

Per ottenere il nostro triangolo sullo schermo, dobbiamo utilizzare qualcosa chiamato buffer. Pensate a un buffer come a un contenitore che tiene i nostri dati dei vertici e li invia alla GPU.

Ecco come potremmo creare e riempire un buffer:

// Crea un buffer
var buffer = gl.createBuffer();

// Lega il buffer (rendilo attivo)
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);

// Riempi il buffer con i nostri dati del triangolo
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(triangleVertices), gl.STATIC_DRAW);

Non preoccupatevi se questo sembra un po' confusionario ora. Lo analizzeremo di più man mano che procediamo!

Programmi Shader

Ora arrivederciamo alla parte veramente emozionante: gli shader! Gli shader sono programmi speciali che vengono eseguiti sulla vostra GPU. Sono come piccole fabbriche che processano ogni vertice e pixel della vostra scena 3D.

Tipi di Shader

Ci sono due principali tipi di shader in WebGL:

1. Vertex Shader: Processa ogni vertice (punto) nella vostra scena 3D
2. Fragment Shader: Determina il colore di ogni pixel

Ecco un esempio semplice di ciascuno:

// Vertex Shader
attribute vec4 a_position;

void main() {
gl_Position = a_position;
}

// Fragment Shader
precision mediump float;

void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);  // Colore rosso brillante
}

Lo shader vertex prende ogni punto (vertice) e decide dove dovrebbe essere sullo schermo. Lo shader fragment poi colora tutti i pixel tra questi punti.

Compilazione e Collegamento degli Shader

Per utilizzare i nostri shader, dobbiamo compilarli e collegarli in un programma:

// Crea un programma shader
var program = gl.createProgram();

// Allega e compila gli shader
var vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
var fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);

// Collega il programma
gl.linkProgram(program);

Questo processo è come compilare e collegare un programma regolare, ma avviene sulla GPU!

Variabili del Linguaggio di Shader OpenGL ES

Infine, parliamo di alcune variabili speciali utilizzate nel Linguaggio di Shader OpenGL ES (il linguaggio in cui sono scritti i nostri shader).

Attributi

Gli attributi sono variabili di input utilizzate negli shader vertex. Di solito contengono dati su ogni vertice, come la posizione o il colore.

attribute vec4 a_position;

Uniformi

Le uniformi sono variabili globali che rimangono le stesse per tutti i vertici e i frammenti. Sono fantastiche per cose come matrici di trasformazione o informazioni di illuminazione.

uniform mat4 u_modelViewMatrix;

Variabili Interpolanti

Le variabili interpolanti sono variabili che passano dati dallo shader vertex allo shader fragment. Sono interpolate tra i vertici.

varying vec4 v_color;

Ecco una tabella riassuntiva di questi tipi di variabili:

Tipo di Variabile	Utilizzato In	Scopo
Attributo	Shader Vertex	Dati per vertice
Uniforme	Entrambi	Dati globali
Variabile Interpolante	Entrambi	Dati passati dallo shader vertex allo shader fragment

Ecco fatto! Abbiamo coperto i fondamenti di WebGL, dai sistemi di coordinate agli shader. Ricorda, imparare WebGL è come imparare a dipingere - richiede pratica e pazienza. Non scoraggiatevi se non tutto vi sembra chiaro subito. Continuate a sperimentare, e presto sarete in grado di creare grafica 3D straordinaria nel vostro browser!

Buon coding, futuri maestri di WebGL!

Credits: Image by storyset