Traduzione: Muovere Oggetti nello Spazio 3D

Ciao, aspiranti sviluppatori WebGL! Oggi ci imbarcheremo in un viaggio emozionante nel mondo della grafica 3D. Esploreremo il concetto di traduzione in WebGL, che è essenzialmente un modo fantasioso di dire "muovere le cose". Alla fine di questo tutorial, sarete in grado di far ballare gli oggetti sullo schermo come in un balletto digitale! Allora, tuffiamoci!

WebGL - Translation

Cos'è la Traduzione in WebGL?

Prima di iniziare a muovere i triangoli come pedine di scacchi, capiremo cosa significhi davvero la traduzione nel contesto della grafica computerizzata.

Le Basi della Traduzione

La traduzione è il processo di spostamento di un oggetto da una posizione a un'altra in uno spazio 2D o 3D. È come prendere una tazza dalla scrivania e metterla su uno scaffale. La tazza (il nostro oggetto) è passata dalla sua posizione originale a una nuova.

In WebGL, utilizziamo la matematica per ottenere questo movimento. Non preoccupatevi se non siete esperti di matematica - WebGL si occupa della maggior parte del lavoro pesante per noi!

Perché la Traduzione è Importante?

Immaginate un videogioco in cui i personaggi non possono muoversi, o un software di modellazione 3D dove gli oggetti sono bloccati in posizione. Piuttosto noioso, vero? La traduzione ci permette di creare grafica dinamica e interattiva che risponde all'input dell'utente o segue animazioni predeterminate.

Passaggi per Tradurre un Triangolo

Ora che capiamo cosa sia la traduzione, analizziamo il processo di muovere un semplice triangolo in WebGL. Lo faremo passo per passo, così potrete seguire facilmente.

Passo 1: Definire il Tuo Triangolo

Prima, dobbiamo creare il nostro triangolo. In WebGL, definiamo le forme utilizzando vertici (punti angolari). Ecco come potremmo definire un semplice triangolo:

const vertices = [
0.0, 0.5,   // Vertice superiore
-0.5, -0.5,  // Vertice inferiore sinistro
0.5, -0.5   // Vertice inferiore destro
];

Questo crea un triangolo con il vertice superiore a (0, 0.5) e i vertici della base a (-0.5, -0.5) e (0.5, -0.5).

Passo 2: Creare una Matrice di Traduzione

Per muovere il nostro triangolo, dobbiamo creare una matrice di traduzione. Questa matrice dice a WebGL quanto spostare il nostro oggetto lungo ciascun asse (x, y e z). Ecco come creiamo una matrice di traduzione:

const translationMatrix = [
1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
tx, ty, 0, 1
];

Dove tx e ty sono le quantità che vogliamo spostare lungo gli assi x e y rispettivamente.

Passo 3: Applicare la Traduzione nel Vertex Shader

Ora arrivesse la parte emozionante! Dobbiamo modificare il nostro vertex shader per applicare la traduzione. Ecco un semplice vertex shader che include la traduzione:

attribute vec2 a_position;
uniform mat4 u_translation;

void main() {
gl_Position = u_translation * vec4(a_position, 0, 1);
}

Questo shader prende ogni posizione del vertice, la converte in un vettore 4D (necessario per la moltiplicazione matriciale) e poi lo moltiplica per la nostra matrice di traduzione.

Passo 4: Aggiornare i Valori di Traduzione

Per far muovere il nostro triangolo, dobbiamo aggiornare i valori di traduzione nel tempo. Possiamo farlo nel nostro codice JavaScript:

function updateAndDraw() {
tx += 0.01;  // Muovi a destra
ty += 0.005; // Muovi in alto

// Aggiorna la matrice di traduzione
gl.uniformMatrix4fv(translationLocation, false, translationMatrix);

// Disegna il triangolo
gl.drawArrays(gl.TRIANGLES, 0, 3);

requestAnimationFrame(updateAndDraw);
}

Questa funzione aggiorna i nostri valori di traduzione, invia la nuova matrice alla GPU e poi ridisegna il nostro triangolo. La chiamata requestAnimationFrame assicura che questo avvenga in modo fluido, frame per frame.

Esempio – Tradurre un Triangolo

Mettiamo tutto insieme con un esempio completo. Questo codice creerà un triangolo che si muove diagonalmente across lo schermo:

// Vertex shader
const vertexShaderSource = `
attribute vec2 a_position;
uniform mat4 u_translation;

void main() {
gl_Position = u_translation * vec4(a_position, 0, 1);
}
`;

// Fragment shader
const fragmentShaderSource = `
precision mediump float;

void main() {
gl_FragColor = vec4(1, 0, 0, 1);  // Colore rosso
}
`;

// Inizializza WebGL
const canvas = document.getElementById('glcanvas');
const gl = canvas.getContext('webgl');

// Crea e compila gli shader
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);

const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);

// Crea il programma
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);

// Crea il buffer e carica i dati dei vertici
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
const positions = [
0.0, 0.5,
-0.5, -0.5,
0.5, -0.5
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

// Imposta l'attributo
const positionAttributeLocation = gl.getAttribLocation(program, "a_position");
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);

// Imposta l'uniforme
const translationLocation = gl.getUniformLocation(program, "u_translation");

// Variabili di traduzione
let tx = 0;
let ty = 0;

function updateAndDraw() {
// Pulisci il canvas
gl.clear(gl.COLOR_BUFFER_BIT);

// Aggiorna la traduzione
tx += 0.01;
ty += 0.005;

// Crea la matrice di traduzione
const translationMatrix = [
1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
tx, ty, 0, 1
];

// Invia la matrice allo shader
gl.uniformMatrix4fv(translationLocation, false, translationMatrix);

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

// Richiedi il prossimo frame
requestAnimationFrame(updateAndDraw);
}

// Inizia l'animazione
updateAndDraw();

Questo codice crea un triangolo rosso che si muove diagonalmente across lo schermo. Ecco cosa sta succedendo:

Definiamo i nostri shader, che includono la matrice di traduzione.
Inizializziamo WebGL, creiamo il programma e carichiamo i vertici del triangolo.
Creiamo le variabili per la traduzione (tx e ty).
Nella nostra funzione updateAndDraw, noi:

Puliamo il canvas
Aggiorniamo i valori di traduzione
Creiamo una nuova matrice di traduzione
Inviamo questa matrice alla GPU
Disegniamo il triangolo
Richiediamo il prossimo frame di animazione

E voilà! Avete creato un triangolo che si muove in WebGL. Congratulazioni!

Conclusione

La traduzione in WebGL potrebbe sembrare complessa all'inizio, ma è davvero solo questione di muovere oggetti in modo intelligente. Abbiamo coperto le basi qui, ma c'è molto di più che puoi fare con la traduzione - combinarla con la rotazione e la scala, creare animazioni complesse, o persino costruire ambienti 3D interattivi.

Ricorda, ogni viaggio inizia con un singolo passo - o nel nostro caso, un singolo movimento del triangolo. Continua a praticare, continua a sperimentare, e prima di sapere, creerai grafica 3D che si muove e interagisce in modi che non avresti mai immaginato possibili.

Buon coding, e che i tuoi triangoli trovino sempre la loro strada a casa!

Credits: Image by storyset