Babylon.js – Framework WebGl
Tutorial step-by-step
Prima rappresentazione grafica
Indice
1. Download BabylonJS
2. Parte Web
3. Parte JavaScript
1.
2.
3.
4.
5.
6.
7.
8.
Babylon Engine
Creazione Scena
Oggetti
Camera
Light
Render Loop
Texture
Environment
4. Conclusione
5. Note
1. Download BabylonJS
BabylonJS è un framework JavaScript che permette di sviluppare Grafica Web 3D
basandosi sulle famose WebGl.
È possibile scaricare il framework direttamente da Github:
https://github.com/BabylonJS/Babylon.js
2. Parte Web
Prima di tutto bisogna creare una pagina base HTML5
alla quale verrà aggiunto:
• un Canvas, elemento base per il disegno della scena
• un po’ di CSS per estendere il Canvas alla massima dimensione.
2. Parte Web
Quindi, in definitiva la parte web complessiva è la seguente:
3. Parte JavaScript
Dopo aver definito la parte Web, passiamo alla parte grafica vera e propria.
Nell’ <head> della pagina html devono essere inseriti il file .js che contengono il
codice sorgente Babylon.
Dopo il </body>, devono essere inseriti gli elementi base di una scena Babylon.
• Babylon Engine
• Scene Object
• Camera
• Light
• Render Loop, per ottenere una scena in movimento
3.1. Babylon Engine
In BabylonJS tutto è controllato dall’engine: occorre quindi inizializzarlo all’interno
del canvas inserito nella pagina.
Il controllo ‘’if (!BABYLON.Engine.isSupported() )’’ , è utile per verificare eventuali
incompatibilità con il browser usato.
‘’Windows.alert’’ genera un messaggio di errore in caso di incompatibilità.
3.1. Babylon Engine
Occorre avviare il ciclo di rendering con engine.runRenderLoop() nel quale
verrà settata la funzione di rendering function () {scene.render();}
scene.render () si occupa del rendering della scena sulla quale sarà attivata
la camera.
Nella funzione assegnata a scene.beforeRender saranno inserite le istruzioni
eseguite prima dell’esecuzione del rendering della scena. In questo modo si
definise un Render Loop che sarà l’artefice del movimento degli oggetti inseriti
successivamente.
3.2. Creazione Scena
Dopo aver inizializzato l’Engine, è necessario creare una scena dove poter inserire
gli oggetti.
Il metodo BABYLON.Scene() prende come parametro l’oggetto engine e gli
associa una istanza della classe scene.
3.3. Oggetti
È arrivato il momento di inserire gli oggetti nella nostra scena.
Il primo oggetto ad essere inserito sarà una sfera.
La sfera inserita è definita con (‘’nome’’, segmenti, diametro, scena);
Viene anche assegnata una posizione con sfera1.position che nel nostro caso è
l’origine del sistema.
Analogamente possiamo definire un’altra sfera, posta ad una certa distanza dalla
prima e ‘collegata’ ad essa tramite un filo invisibile, tramite sfera2.parent = sfera1.
3.3. Oggetti
Infine inseriamo una terza sfera, collegata con sfera.position alla seconda sfera
creata.
Sfera3 è stata posizionata sull’ascissa 5 poiché sfera3.parent = sfera2 relaziona la
posizione di sfera3 rispetto a sfera2.
Ora le sfere sono create, ma per poterle vedere occorre inserire una camera.
3.4. Camera
Definiamo una BABYLON.ArcRotateCamera, adatta ad essere controllata con
mouse o tramite touch.
Questa camera ruota attorno ad un determinato perno.
Viene definita da (‘’nome’’, angolo lungo y, angolo lungo x, raggio, posizione, scena).
Per un migliore visualizzazione della scena, utilizziamo
scene.activeCamera.attachControl(canvas) che ci consente di selezionare la
camera attiva nella scena (visto che è possibile inserirne più di una) e di attaccarla
al canvas specificato. Questo consente di controllarla e visualizzarla.
3.5. Light
Per illuminare la scena Babylon mette a disposizione diversi tipi di luce.
Quella che sarà utilizzata in questo caso sarà la PointLight (luce a 360°).
Sono state inserite 4 PointLight definite da (‘’nome’’, posizione, scena).
Le coordinate della posizione sono state scelte in modo da posizionare le luce alle 4
coordinate di sfera1.
3.6. Render Loop
Inseriamo ora un movimento rotatorio lungo l’asse y di sfera1 e sfera2.
In scene.beforeRender abbiamo definito il movimento delle sfere che verrà
eseguito ad ogni ciclo di rendering.
Lo script completo della pagina
Scena ‘quasi’ completa
Adesso la nostra scena è completa e pronta per essere visualizzata sul browser.
La scena ottenuta è la seguente.
Guardalo QUI
3.7. Texture
Ma adesso, perché non abbellire e rendere più presentabile questa scena?
Si può fare mediante l’uso delle texture, immagini ‘’spalmate’’ sulle superfici degli oggetti.
Dichiariamo per ogni sfera un materiale tramite BABYLON.StandardMaterial indicato con
(‘’nome’’, scena).
Assegniamo ad ogni materiale una diffuseTexture tramite BABYLON.Texture definita da
(‘’nomefile.estensione’’, scena).
Il file della texture deve essere contenuto nella stessa cartella del file HTML.
Con specularPower viene definito l’intensità del riflesso della luce (più alto, meno riflesso).
3.7. Texture
La scena completa di texture è la seguente.
3.8.
Environment
Bvbcvbcvx<<x
L’ultima cosa che manca per avere un quadro completo della scena è un
environment, per ricreare lo spazio attorno agli oggetti creati.
Per prima cosa viene creato un cubo, che dovrà contenere gli oggetti, e
successivamente viene applicata una texture sul cubo stesso come fatto
precedentemente per gli altri oggetti, questa volta facendo attenzione a
disabilitare backFaceCulling.
La texture sarà formata da 6 immagini, poste in una apposita cartella denominata ‘skybox’ e
ogni immagine dovrà essere chiamata con il nome della rispettiva faccia del cubo:
“skybox_nx.png”,
“skybox_ny.png”,
“skybox_nz.png”,
“skybox_px.png”,
“skybox_py.png”,
“skybox_pz.png”.
4, Conclusione: Scena Completa
5. Note e Autori
Il tutorial completo di file può essere scaricato da
www.grafic3d.altervista.org
Nell’apposita sezione Tutorial
Maggio Jacopo
Tricarico Pasquale
Troisi Giovanni
Fine Presentazione
![Musica_e_immagine.pps [modalità compatibilità]](http://s1.studylibit.com/store/data/007566322_1-58d70b56b536a079f8882415348ab4fa-300x300.png)
