Si sente molto parlare delle WebGL e in questo breve tutorial cercheremo di avvicinarci ad esse anche grazie all’utilizzo di Threejs, una comodissima libreria in grado di farci risparmiare numerosi dettagli implementativi.
Cos’è webGL?
La Web-based Graphics Library è una tecnologia relativamente recente che consente di integrare la grafica 3D all’interno di pagine web, senza l’utilizzo di programmi o plug-in esterni. Sfruttando l’accelerazione hardware presente nei dispositivi è possibile realizzare facilmente grafica 3D in tempo reale sui nostri browser … impensabile qualche anno fa!
Per iniziare con il nostro progetto dobbiamo creare un’area di lavoro e un modello da poter visualizzare a 360°.
Scarichiamo Threejs (http://threejs.org/build/three.min.js) e Orbitcontrol.js (https://gist.github.com/mrflix/8351020) e posizioniamoli all’interno di una cartella “js” nel nostro progetto.
Creiamo un file index.html con il seguente codice:
[code lang=”html”]<!doctype html>
<html lang="it">
<head>
<title>WebGl made easy con You-n</title>
<meta charset="utf-8">
</head>
<body style="margin: 0;">
<script src="js/three.min.js"></script>
<script src="js/OrbitControls.js"></script>
<script>
// Qui andremo ad inserire il codice.
</script>
</body>
</html>
[/code]
Diamo ora un rapido sguardo alla struttura di un progetto Threejs. Si compone tipicamente di tre funzioni principali: init(), animate() e render().
[code lang=”js”]var scene, camera, renderer; init();animate();
function init() {
}
function animate(){
requestAnimationFrame(animate);
render();
}
function render(){
renderer.render(scene, camera);
}[/code]
Per poter creare il nostro mondo 3D, dobbiamo lavorare sulla funzione init(), creando due oggetti fondamentali:
1. La scena dove andremo a disegnare il nostro modello;
2. La camera attraverso la quale vedremo la scena.
scene = new THREE.Scene();
var WIDTH = window.innerWidth,
HEIGHT = window.innerHeight;
// Creiamo il renderer e lo aggiungiamo al dom.
renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(WIDTH, HEIGHT);
document.body.appendChild(renderer.domElement);
// Definiamo il tipo di camera utilizzata.
camera = new THREE.PerspectiveCamera(45, WIDTH / HEIGHT, 0.1, 20000);
camera.position.set(-4, 2, 4);
scene.add(camera);[/code]
Come possiamo vedere nel codice appena scritto, abbiamo impostato la grandezza dell’area utilizzabile dalla nostra scena al 100%. Ovviamente è possibile inserire qualsiasi valore.
Threejs mette a disposizione 3 tipi di camera:
– Camera,
– Ortograpic camera,
– Perspective camera.
La prima è una classe base astratta che in genere viene ereditata al momento della creazione di una camera. La seconda genera, partendo da una visione ortogonale, una vista assonometrica della scena. La terza, invece, utilizza una visione prospettica.
[code lang=”js”]camera = new THREE.PerspectiveCamera(45, WIDTH / HEIGHT, 0.1, 20000);[/code]I quattro parametri si riferiscono rispettivamente a:
– Campo visivo verticale della camera espresso in gradi;
– Il rapporto altezza/larghezza della camera (qui inseriremo i parametri definiti all’inizio);
– La distanza del piano più vicino rispetto al cono di proiezione della camera;
– La distanza del piano più lontano.
Se vogliamo che la nostra area di lavoro si adatti ad un eventuale ridimensionamento della finestra del browser, basterà inserire queste poche righe di codice:
[code lang=”js”]window.addEventListener(‘resize’, function() {var WIDTH = window.innerWidth,
HEIGHT = window.innerHeight;
renderer.setSize(WIDTH, HEIGHT);
camera.aspect = WIDTH / HEIGHT;
camera.updateProjectionMatrix();
});[/code]
Settiamo il background della scena, che nel nostro caso è un blu molto scuro, così da focalizzare l’attenzione sul modello:
[code lang=”js”]renderer.setClearColorHex(0x333F47, 1);[/code]A questo punto è opportuno creare dei punti luce necessari ad illuminare la scena.
In questo progetto ne abbiamo utilizzati due di tipo “Point light”: irradiano luce in tutte le direzioni (come ad esempio una lampadina).
Threejs anche in questo caso consente la scelta di diversi tipi di luci:
– Light
– Area Light
– Point Light
– Directional Light
– Spot Light
– Ambient Light
– Hemisphere Light
Alcuni dettagli utili:
Light è un tipo di classe astratta base per le luci.
Area Light emette luce da una superficie, identificata da un rettangolo.
Point Light emette luce in maniera omnidirezionale.
Directional Light crea una sorgente di luce che irradia da una determinata posizione ad un’altra.
Spot Light è simile a Point Light, ma irradia solo in una direzione.
Ambient Light crea un’illuminazione globale il cui colore è applicato a tutta la scena.
E’ arrivato il momento di creare il modello.
In questo progetto creeremo un cubo. In seguito impareremo ad importare modelli customizzati.
Iniziamo:
[code lang=”js”]var geometry = new THREE.CubeGeometry(2, 2, 2);[/code]Realizziamo il materiale che definirà le caratteristiche visive:
[code lang=”js”]var material = new THREE.MeshLambertMaterial({color: 0x55B663});[/code]In questo progetto è stato creato un materiale di tipo Lambert. Threejs mette a disposizione una vasta gamma di materiali che vedremo prossimamente 🙂
Con queste ultime righe possiamo unire il modello al materiale; aggiungiamo successivamente la mesh alla scena.
[code lang=”js”]var mesh = new THREE.Mesh(geometry, material);scene.add(mesh);[/code]
Ultima fase: inseriamo i controlli per ruotare la vista.
[code lang=”js”]controls = new THREE.OrbitControls(camera, renderer.domElement);[/code]Come è andata?
Parliamone nei commenti! 🙂