Cos'è WebGL?

WebGL è una libreria di grafica 3D per il web, basata su OpenGL ES e integrata direttamente nei browser moderni. Consente di creare scene 3D interattive e di alta qualità all'interno di una pagina web, senza la necessità di plugin o software aggiuntivi.

A cosa serve WebGL?

WebGL viene utilizzato per creare applicazioni web 3D, giochi, visualizzatori di dati e altre esperienze interattive. Grazie alla sua integrazione diretta nei browser moderni, è possibile creare esperienze 3D senza dover installare alcun software aggiuntivo. WebGL offre anche prestazioni elevate, grazie alla sua capacità di sfruttare l'accelerazione hardware della GPU.

Caratteristiche principali di WebGL

• Prestazioni elevate: WebGL sfrutta l'accelerazione hardware della GPU per fornire prestazioni elevate durante la creazione di scene 3D.

• Integrazione diretta nei browser: WebGL è integrato direttamente nei browser moderni, senza la necessità di plugin o software aggiuntivi.

• Supporto per la grafica 3D: WebGL supporta la creazione di scene 3D complesse, con texture, illuminazione, ombre e altri effetti grafici.

• Flessibilità: WebGL è altamente personalizzabile e può essere utilizzato per creare una vasta gamma di esperienze 3D, dal gioco alla visualizzazione dei dati.

Esempio di sintassi per WebGL

Per utilizzare WebGL, è necessario avere conoscenze di programmazione in JavaScript e di grafica 3D. Di seguito è riportato un esempio di codice per creare una scena 3D semplice:

// Ottenere il canvas
var canvas = document.getElementById('myCanvas');

// Inizializzare WebGL
var gl = canvas.getContext('webgl');

// Creare un buffer per i vertici
var vertexBuffer = gl.createBuffer();

// Definire i vertici
var vertices = [
   0.0,  1.0,  0.0,
  -1.0, -1.0,  0.0,
   1.0, -1.0,  0.0
];

// Caricare i vertici nel buffer
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

// Creare un programma shader
var vertexShader = gl.createShader(gl.VERTEX_SHADER);
var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);

// Definire il codice sorgente per i shader
var vertexShaderSource = 'attribute vec3 aPosition;\nvoid main() {\n  gl_Position = vec4(aPosition, 1.0);\n}';
var fragmentShaderSource = 'void main() {\n  gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n}';

// Compilare i shader
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);

gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);

// Creare un programma shader
var shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);
gl.useProgram(shaderProgram);

// Associare il buffer dei vertici all'attributo del programma shader
var positionAttributeLocation = gl.getAttribLocation(shaderProgram, 'aPosition');
gl.enableVertexAttribArray(positionAttributeLocation);
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.vertexAttribPointer(positionAttributeLocation, 3, gl.FLOAT, false, 0, 0);

// Disegnare la scena
gl.drawArrays(gl.TRIANGLES, 0, 3);

Linguaggi usati in WebGL

JavaScript