WebGL - Disegnare un Quadrilatero
Ciao, futuri sviluppatori web! Oggi ci imbarcheremo in un viaggio emozionante nel mondo di WebGL, dove impareremo a disegnare un quadrilatero (o "quad" per brevità). Non preoccupatevi se siete nuovi alla programmazione - vi guiderò attraverso ogni passo con la pazienza di un insegnante esperto che ha aiutato innumerevoli studenti come voi.
Cos'è WebGL?
Prima di immergerci nel disegno dei quadrilateri, prendiamo un momento per comprendere cos'è WebGL. WebGL (Web Graphics Library) è una potente API JavaScript che ci permette di creare grafica 2D e 3D mozzafiato nei browser web. È come avere un pennello magico che può portare alla vita la vostra immaginazione su una pagina web!
Passaggi per Disegnare un Quadrilatero
Ora, dividiamo il processo di disegno di un quad in passaggi gestibili. Pensateci come costruire una casa - inizieremo con le fondamenta e poi costruiremo sopra.
Passaggio 1: Impostare il Canvas HTML
Prima di tutto, abbiamo bisogno di un canvas su cui disegnare. In HTML, utilizziamo l'elemento <canvas>. È come preparare un cavalletto per dipingere.
<canvas id="myCanvas" width="600" height="400">
Il tuo browser non supporta il tag HTML5 canvas.
</canvas>Passaggio 2: Inizializzare il Contesto WebGL
Successivamente, dobbiamo ottenere il nostro contesto WebGL. È come afferrare il nostro pennello magico WebGL.
const canvas = document.getElementById('myCanvas');
const gl = canvas.getContext('webgl');
if (!gl) {
console.log('WebGL non supportato, ricade su experimental-webgl');
gl = canvas.getContext('experimental-webgl');
}
if (!gl) {
alert('Il tuo browser non supporta WebGL');
}Passaggio 3: Creare lo Shader Vertex
Ora, creeremo uno shader vertex. Questo告诉我们 dove disegnare gli angoli del nostro quad.
const vertexShaderSource = `
attribute vec2 a_position;
void main() {
gl_Position = vec4(a_position, 0.0, 1.0);
}
`;
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);Passaggio 4: Creare lo Shader Fragment
Lo shader fragment decide che colore avrà il nostro quad. Facciamolo un bel blu allegro!
const fragmentShaderSource = `
precision mediump float;
void main() {
gl_FragColor = vec4(0.0, 0.0, 1.0, 1.0);
}
`;
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);Passaggio 5: Creare e Collegare il Programma
Ora, creeremo un programma e collegheremo i nostri shaders ad esso. È come unire il nostro pennello e la nostra vernice.
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);Passaggio 6: Creare un Buffer e Caricare i Dati dei Vertici
È giunto il momento di definire gli angoli del nostro quad!
const positions = [
-0.7, -0.5,
0.7, -0.5,
0.7, 0.5,
-0.7, 0.5
];
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);Passaggio 7: Connettere il Buffer di Posizione all'Attributo
Dobbiamo dire a WebGL come leggere i nostri dati di posizione.
const positionAttributeLocation = gl.getAttribLocation(program, "a_position");
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);Passaggio 8: Disegnare il Quadrilatero
Finalmente, il momento che stavamo aspettando - disegniamo il nostro quad!
gl.useProgram(program);
gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);Esempio - Disegnare un Quadrilatero
Ora, mettiamo tutto insieme in un esempio completo:
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebGL Quad</title>
</head>
<body>
<canvas id="myCanvas" width="600" height="400">
Il tuo browser non supporta il tag HTML5 canvas.
</canvas>
<script>
const canvas = document.getElementById('myCanvas');
const gl = canvas.getContext('webgl');
if (!gl) {
alert('Il tuo browser non supporta WebGL');
}
const vertexShaderSource = `
attribute vec2 a_position;
void main() {
gl_Position = vec4(a_position, 0.0, 1.0);
}
`;
const fragmentShaderSource = `
precision mediump float;
void main() {
gl_FragColor = vec4(0.0, 0.0, 1.0, 1.0);
}
`;
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);
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
const positions = [
-0.7, -0.5,
0.7, -0.5,
0.7, 0.5,
-0.7, 0.5
];
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
const positionAttributeLocation = gl.getAttribLocation(program, "a_position");
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);
gl.useProgram(program);
gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);
</script>
</body>
</html>Ecco fatto! Il vostro quadrilatero WebGL. Quando aprirete questo file HTML in un browser, dovreste vedere un bellissimo quadrilatero blu sul canvas.
Conclusione
Complimenti per aver disegnato il vostro primo quadrilatero WebGL! Oggi abbiamo coperto molto terreno, dal setup del canvas alla creazione degli shaders e infine al disegno della nostra forma. Ricordate, imparare WebGL è come imparare a dipingere - richiede pratica e pazienza. Non demordete se non ci riesce subito. Continuate a sperimentare, e presto sarete in grado di creare grafica 3D mozzafiato sul web!
Nella nostra prossima lezione, esploreremo come aggiungere interattività alle nostre creazioni WebGL. Finché, buon coding!
Credits: Image by storyset