WebGL - Applicazione di esempio: Una guida per principianti

Ciao a tutti, futuri maghi di WebGL! Sono entusiasta di essere il vostro guida in questo emozionante viaggio nel mondo di WebGL. Come insegnante di scienze informatiche con anni di esperienza, ho visto centinaia di studenti illuminarsi quando creano i loro primi grafici 3D sul web. Oggi, ci imbarcheremo cùngli in quella stessa avventura. Allora, fate il nodo alla cintura e tuffiamoci!

WebGL - Sample Application

Cos'è WebGL?

Prima di iniziare a programmare, capiremo cos'è WebGL. WebGL (Web Graphics Library) è un'API JavaScript che ci permette di visualizzare grafica interattiva 3D e 2D nei browser web senza l'uso di plugin. È come dare alle nostre pagine web superpoteri per creare visivi stupefacenti!

Struttura di un'applicazione WebGL

Un'applicazione WebGL tipicamente è composta da diversi componenti chiave. Vediamo insieme:

1. Canvas HTML

Il canvas è il nostro tavolo da disegno. È qui che accade tutta la magia!

<canvas id="myCanvas" width="640" height="480">
Il tuo browser non supporta il tag HTML5 canvas.
</canvas>

Questo crea un canvas di 640x480 pixel sulla tua pagina web. Pensa a esso come il cavalletto del tuo artista, pronto per il capolavoro!

2. Codice JavaScript

Qui scriviamo i nostri comandi WebGL. È come dare istruzioni al nostro artista virtuale.

3. Vertex Shader e Fragment Shader

Questi sono programmi speciali che funzionano sulla GPU. Sono come i pennelli e le palette di colori per i nostri grafici 3D.

4. Buffer

I buffer memorizzano i dati dei nostri oggetti 3D. Immagina li come le materie prime per le nostre sculture 3D.

Ora che conosciamo gli ingredienti, prepariamo una deliziosa applicazione WebGL!

Applicazione di esempio

Creiamo una semplice applicazione WebGL che disegna un triangolo colorato. Passeremo attraverso ciascun passo in dettaglio.

Passo 1: Configurare l'HTML

Prima, dobbiamo creare un file HTML con un elemento canvas:

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="640" height="480">
Il tuo browser non supporta il tag HTML5 canvas.
</canvas>
<script src="webgl-demo.js"></script>
</body>
</html>

Questo crea il nostro canvas e collega a un file JavaScript che creeremo dopo.

Passo 2: Inizializzare WebGL

Ora, creiamo il nostro file webgl-demo.js e configuriamo WebGL:

function main() {
const canvas = document.getElementById("myCanvas");
const gl = canvas.getContext("webgl");

if (!gl) {
alert("Il tuo browser non supporta WebGL!");
return;
}

// WebGL è pronto per l'uso!
}

window.onload = main;

Questa funzione ottiene il nostro canvas, inizializza WebGL e verifica se è supportato. È come controllare se abbiamo tutti i materiali artistici prima di iniziare.

Passo 3: Creare Shaders

Ora, creiamo i nostri vertex e fragment shaders:

function createShader(gl, type, source) {
const shader = gl.createShader(type);
gl.shaderSource(shader, source);
gl.compileShader(shader);

if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
console.error('Si è verificato un errore durante la compilazione degli shaders: ' + gl.getShaderInfoLog(shader));
gl.deleteShader(shader);
return null;
}

return shader;
}

const vertexShaderSource = `
attribute vec4 a_position;
void main() {
gl_Position = a_position;
}
`;

const fragmentShaderSource = `
precision mediump float;
void main() {
gl_FragColor = vec4(1, 0, 0.5, 1);
}
`;

const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);

Questi shaders definiscono come il nostro triangolo sarà posizionato e colorato. Lo shader vertex posiziona il nostro triangolo, mentre lo shader fragment gli dà un gradevole colore rosa.

Passo 4: Creare un Programma

Ora, colleghiamo i nostri shaders in un programma:

function createProgram(gl, vertexShader, fragmentShader) {
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);

if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
console.error('Impossibile inizializzare il programma shader: ' + gl.getProgramInfoLog(program));
return null;
}

return program;
}

const program = createProgram(gl, vertexShader, fragmentShader);

È come assemblare i nostri strumenti artistici e prepararsi a dipingere!

Passo 5: Creare un Buffer

Ora, creiamo un buffer per memorizzare i vertici del nostro triangolo:

const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

const positions = [
0, 0,
0, 0.5,
0.7, 0,
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

Questo definisce la forma del nostro triangolo. È come fare lo schema di base prima di iniziare a dipingere.

Passo 6: Renderizzare il Triangolo

Infine, disegniamo il nostro triangolo:

gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
gl.clearColor(0, 0, 0, 0);
gl.clear(gl.COLOR_BUFFER_BIT);

gl.useProgram(program);

const positionAttributeLocation = gl.getAttribLocation(program, "a_position");
gl.enableVertexAttribArray(positionAttributeLocation);
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);

gl.drawArrays(gl.TRIANGLES, 0, 3);

È qui che avviene la magia! Puliamo il canvas, impostiamo il nostro programma e buffer, e infine disegniamo il nostro triangolo.

Conclusione

Congratulazioni! Hai appena creato la tua prima applicazione WebGL. Hai fatto il primo passo in un mondo più grande di grafica 3D sul web. Ricorda, come ogni forma d'arte, padroneggiare WebGL richiede pratica e pazienza. Ma con ogni riga di codice, stai dipingendo un web più vivido e interattivo. Continua a esplorare, a creare e, soprattutto, divertiti!

Ecco una tabella che riassume i principali metodi che abbiamo utilizzato:

Metodo	Descrizione
`getContext("webgl")`	Inizializza WebGL
`createShader()`	Crea uno shader
`shaderSource()`	Definisce il codice sorgente dello shader
`compileShader()`	Compila uno shader
`createProgram()`	Crea un programma
`attachShader()`	Allega uno shader a un programma
`linkProgram()`	Collega un programma
`createBuffer()`	Crea un buffer
`bindBuffer()`	Lega un buffer
`bufferData()`	Riempie un buffer con dati
`viewport()`	Imposta la viewport
`clearColor()`	Imposta il colore di pulizia
`clear()`	Pulisce il canvas
`useProgram()`	Usa un programma
`getAttribLocation()`	Ottiene la posizione di un attributo
`enableVertexAttribArray()`	Abilita un array di attributi
`vertexAttribPointer()`	Specifica il layout dei dati dei vertici
`drawArrays()`	Renderizza primitives

Tieni questa tabella a portata di mano mentre continui il tuo viaggio con WebGL. Buon coding!

Credits: Image by storyset

Tutorial precedente:

WebGL - Pipeline Grafico

Prossimo tutorial:

WebGL - Contesto