Panoramica
Questo script utilizza WebGL per creare una skybox. Nello specifico permette di creare un ambiente 3D che simula un cielo o uno scenario circostante. Il codice inizializza un contesto WebGL su un elemento <canvas>, configura un programma GLSL con shader per il rendering del skybox, e carica una serie di immagini che rappresentano le sei facce di un cubemap. Viene poi impostato un ciclo di rendering che aggiorna costantemente la visuale del skybox, permettendo alla telecamera di orbitare attorno al centro della scena. Il codice include inoltre funzioni per gestire la geometria del skybox e per calcolare matrici di proiezione e vista, fondamentali per il rendering 3D.
Funzioni
main()
Descrizione: Funzione principale che avvia il processo di rendering WebGL. Inizializza il contesto WebGL, carica le immagini della cubemap, configura il programma GLSL e avvia il ciclo di rendering.
Funzionamento: La funzione ottiene il contesto WebGL dal canvas, crea il programma GLSL utilizzando gli shader specificati, imposta i buffer e le texture necessarie per il rendering del skybox e avvia un ciclo di rendering che continua a richiamare la funzione drawScene per disegnare continuamente la scena.
Ritorna: Nessuno. Tuttavia, la funzione può interrompere l'esecuzione se il contesto WebGL non è disponibile.
drawScene(time)
Descrizione: Funzione di rendering che viene eseguita in un loop per aggiornare costantemente la scena disegnata sul canvas.
Funzionamento: Calcola la matrice di proiezione e la matrice di vista basate sulla posizione della telecamera. Imposta queste matrici nei relativi uniform della GPU e disegna la geometria del skybox. La funzione viene richiamata in loop per aggiornare continuamente la scena.
Parametri: time (Number): Il tempo corrente, passato automaticamente da requestAnimationFrame.
Ritorna: Nessuno. Tuttavia, richiama requestAnimationFrame per continuare il ciclo di rendering.
setGeometry(gl)
Descrizione: Funzione che carica i dati della geometria del skybox (un quad) nel buffer associato.
Funzionamento: Definisce un array di coordinate che rappresentano i vertici di un quadrato (quad) e carica questi dati nel buffer WebGL, in modo che possano essere utilizzati durante il rendering.
Parametri: gl (WebGLRenderingContext): Il contesto WebGL su cui operare.
degToRad(d)
Descrizione: Converte un valore in gradi in radianti.
Funzionamento: Moltiplica il valore in gradi per Math.PI/180 per ottenere il valore equivalente in radianti.
Parametri: d (Number): L'angolo in gradi da convertire.
Ritorna: Number: L'angolo convertito in radianti.
Gestione eventi
Caricamento delle Immagini del Cubemap
Descrizione: Il caricamento delle immagini del cubemap avviene in modo asincrono per ciascuna faccia del cubo.
Funzionamento: Per ogni faccia del cubemap, viene creato un elemento Image che carica un'immagine specifica. Una volta caricata l'immagine, la funzione texImage2D viene utilizzata per caricare i dati dell'immagine nella texture WebGL associata. Viene anche generato il mipmap della texture per migliorare la qualità della resa.
Parametri: Nessuno specifico a un evento; utilizza le immagini definite nella struttura faceInfos.
Note
-
Performance e Ottimizzazione: La funzione di rendering
drawSceneè ottimizzata per aggiornare continuamente la scena utilizzandorequestAnimationFrame, che sincronizza il rendering con il refresh rate del display per ottenere animazioni fluide e migliorare le prestazioni. -
Flessibilità della Camera: Il codice permette una rotazione flessibile della telecamera attorno al punto centrale della scena, offrendo una visione panoramica dell'ambiente 3D simulato. Il movimento della telecamera è controllato tramite l'uso delle matrici di proiezione e vista.