Fondamenti di Computer Graphics (modulo 1) (C.d.S. Magistrale in Ingegneria Informatica) A.A.2025/26
Computer Graphics (C.d.S. Magistrale in Informatica) A.A.2025/26
Fondamenti di Computer Graphics (C.d.S. Magistrale in Matematica) A.A.2025/26
(2^ semestre, 2^ anno)
Esame progetto e orale
CFU 8
Docente Prof. Giulo Casciola (modulo 1 (6 CFU))
Docente Prof.ssa Serena Morigi (modulo 2 (2 CFU))
Avviso
Mercoledì 27 maggio 2026, ci sarà un preappello d'esame riservato agli studenti Inf. e Mat. in corso;
seguirà pubblicazione su Almaesami.
Mercoledì 29/4 inizierà il minicorso su Blender tenuto dal dr. Paolo Zuzolo
Installare sul proprio computer Blender 5.1 (su Windows installare la versione Portable)
dotarsi di mouse con rotella cliccabile (Blender fa uso del terzo bottone).
Scopo
Dare i fondamenti della grafica 3D al calcolatore, tra cui i concetti di modellazione poligonale e
resa in tempo reale. Modellazione e rappresentazione grafica di scene 3D mediante opportuni
software e librerie open source.
Contenuto
Sistemi raster-scan, dispositivi di I/O, librerie grafiche, programmazione event-driven. Mesh 3D e loro rappresentazione grafica. Trasformazioni geometriche 2D/3D, trasformazioni di vista, proiezioni prospettica e parallela, trasformazione window-viewport. Pipeline grafica. Algoritmi di real-time rendering, rimozione delle parti nascoste (hidden line e hidden surface), modelli di illuminazione e algoritmi di shading (Z-buffer), texture mapping, ombre e tecniche avanzate di rendering. Modellazione poligonale 3D. Il corso prevede una attivita' pratica in cui verra' utilizzato il linguaggio di programmazione HTML5 + JavaScript + GLSL e libreria grafica WebGL. (modulo1 (6 CFU)).
Il corso prevede un modulo 2 (2 CFU) tenuto dalla Prof.ssa Serena Morigi. Nel modulo 2 si studierà la Libreria JavaScript cross-browser Three.js, API utilizzata per realizzare applicazioni di Computer Graphics 3D interattive e animate su Web mediante WebGL. Tempo permettendo si affronterà la modellazione geometrica di curve e superfici NURBS con esempi in Three.js.
Testi Consigliati
- Peter Shirley, Fundamentals of Computer Graphics, AK Peters (2005);
- Samuel R. Buss, 3D Computer Graphics: A mathematical introduction with OpenGL, Cambridge University Press (2003);
- Max K. Agoston, Computer Graphics and Geometric Modeling: Implementation and Algorithms, Springer (2004).
- Max K. Agoston, Computer Graphics and Geometric Modeling: Mathematics, Springer (2005).
Iscrizione al Corso:
file txt da spedire per e-mail al docente con subject CG2526.
Orario delle Lezioni
- Le lezioni inizieranno il 16/02/2026 con il seguente orario:
Lu. ore 14:00-17:00 LAB 2 (Ingegneria)
Me. ore 14:30-17:00 Aula 3.6 (Ingegneria)
Progetto d'esame
Lezioni e Argomenti trattati
- Lu.16/02/26, ore 14:00-17:00, Aula LAB2, Lezione 1.
Introduzione al corso: grafica 3D Real Time = modellazione + resa,
informazioni generali sugli obiettivi e sul corso dal punto
di vista organizzativo. (vedi slide: Introduzione al Corso).
Applicazioni della grafica 3D, lasciate da finire di guardare in autonomia e di
visionare i vari siti web indicati sulle slide.
(vedi slide: La Grafica 3D e le sue Applicazioni, parte 1 e parte 2).
- Me.18/02/26, ore 14:30-17:00, Aula 3.6, Lezione 2.
Architetture grafiche (dagli anni '80 ad oggi): Monitor/Display, Frame Buffer e DPU.
Sistemi grafici, pipeline grafica, schede grafiche e GPU.
Dispositivi grafici interattivi: Mouse, Tastiera, ecc.. Il problema dell'interattività,
coda degli eventi, paradigma di programmazione ad eventi (vedi slide: Hardware e Software per Grafica Interattiva).
Introduzione ad HTML5, elemento canvas, contesto grafico '2d', primitive grafiche (vedi slide: HTML5+canvas+JavaScript).
Messo a disposizione archivio di semplici programmi da provare e modificare (vedi archivio HTML5_2d_1.zip).
- Lu.23/02/26, ore 14:00-17:00, Aula LAB2, Lezione 3.
Riprese le slide HTML5+canvas+JavaScriot, gestione eventi, gestione testo, gestione immagini, gestione animazioni. Elementi di programmazione JavaScript per disegnare nel contesto 2d ed eventi su canvas.
Visionati i codici di esempio dell'archivio HTML5_2d_1.zip
Sulle trasformazioni geometriche 2D: da spazio vettoriale a spazio affine per punti e vettori; sistema di riferimento; traslazione, scala e rotazione; trasformazioni composte (vedi slide Trasformazioni Geometriche 2D).
- Me.25/02/26, ore 14:30-17:00, Aula 3.6, Lezione 4.
Alcuni concetti ed esempi di programmazione grafica 2d (vedi slide: Programmazione Grafica 2D)
Disegno di linee: algoritmo di linea incrementale,
algoritmo di linea di Bresenham (vedi funzione draw_line);
algoritmo di disegno in coordinate floating point (Window e Viewport).
Visto un esercizio insieme (disegno di una curva in forma parametrica), cenno alle curve di Bézier (visto un codice interattivo per disegnare curve di grado 3), assegnato Esercizio 1.
- Lu.2/03/26, ore 14:00-17:00, Aula LAB2, Lezione 5.
Introduzione alla libreria Grafica WebGL: HTML5 e constesto webgl, sistema
di coordinate WebGL, API WebGL, Vertex e Fragment shader, codice di esempio, simulazione
con State Diagram. Pipeline Grafica di WebGL (vedi slide: Libreria Grafica WebGL: Introduzione).
Lasciato come compito di sfogliare le slide: API WebGL: un esempio in dettaglio.
Sull'algoritmo di clipping di linee 2D di Cohen-Sutherland e sua generalizzazione per linee 3D (vedi slide: Clipping di linee)
- Me.04/03/26, ore 14:30-17:00, Aula 3.6, Lezione 6.
Codice WebGL per il disegno di un triangolo; esaminati i passi per il suo disegno rivedendo
i seguenti concetti: geometria, VBO e IBO, Vertex e Fragment shader, linguaggio GLSL, disegno in WebGL.
(vedi slide: API WebGL: un esempio in dettaglio)
Sono stati esaminati insieme alcuni codici riguardanti il disegno di geometria 2D in WebGL
presenti nell'archivio HTML5_webgl_1.zip messo a disposzione.
Coordinate Baricentriche. Applicazione delle coordinate baricentriche: rasterizzazione di triangoli;
rasterizzazione di triangoli con interpolazione colore; rasterizzazione di triangoli con immagine/texture
(vedi slide: Rasterizzazione).
- Lu.9/03/26, ore 14:00-17:00, Aula LAB2, Lezione 7.
Ripresa e conclusa rasterizzazione di triangoli con immagine/texture (vedi slide: Rasterizzazione).
Algoritmo di clipping di poligoni (vedi slide Clipping di poligoni).
Ripresi e visionati i codici di esempio nella cartella HTML5_webgl_1.
Trasformazioni geometriche; richiami di algebra lineare. Spazio affine: punti, vettori, combinazioni affini, sistema di riferimento, trasformazioni affini, composizione di
trasformazioni mediante prodotto di matrici; trasformazioni elementari 3D in coordinate omogenee:
traslazione, scala, rotazione rispetto agli assi coordinati.
Composizione di trasformazioni, trasformazioni inverse.
Trasformazioni composte come rotazione e scala rispetto ad un punto, rotazione rispetto ad un asse, simmetrie, shear (vedi slide: Trasformazioni Geometriche).
- Me.11/03/26, ore 14:30-17:00, Aula 3.6, Lezione 8.
Parametri di vista e sistema di riferimento della Camera. Cambio di sistema di riferimento. Sistema di coordinate cartesiano e sferico. Trasformazione di vista con View-Up vector; trasformazioni geometriche: prospettiche e parallele. Esempio di proiezione prospettica ad 1, 2 e 3 punti di fugar. Scala e Proiezione (divisione prospettica). Piramide di vista, definizione window, frustum, clipping 3D. Codice di esempio in webgl per la visualizzazione di un cubo e utilizzo della libreria m4.js. Lasciati da fare alcuni esercizi e da vedere i primi codici della cartella HTML5_webgl_2 (vedi slide: Trasformazione di Vista).
- Lu.16/03/26, ore 14:00-17:00, Aula LAB2, Lezione 9.
Analizzati altri codici di esempio sulla trasformazione di vista; riprese e terminate slide su Trasformazioni di Vista ed in particolare sulla libreria webglutils, sul formato OBJ Wavefront e sul contesto WebGL2, proposti alcuni esercizi.
Introduzione agli algoritmi di real-time rendering: hidden-line e hidden-surface.
Algoritmo Z-buffer per Hidden-Surface Removal di mesh
poligonali; descrizione dell'algoritmo in termini di pseudocodice e significato del buffer Z.
(vedi slide: Algoritmi di Real-Time Rendering).
- Me.18/03/26, ore 14:30-17:00, Aula 3.6, Lezione 10.
Proiezione prospettica con profondità: relazione fra le coordinate baricentriche di un segmento 3D (triangolo) e del suo proiettato e "profondità di un pixel". Trasformazione prospettica con profondità:
verifica che la trasformazione manda rette in rette e piani in piani.
Trasformazione come deformazione dello spazio; parametri alpha e beta; profondità Z di un pixel.
Rivisitata pipeline di rendering. Rasterizzazione e interpolazione di attributi dei vertici (colori, coordinate texture, ecc.) (vedi slide: Zbuffer e Proiezione Prospettica con Profondità).
Mostrati alcuni codici della cartella HTML5_webgl_2 e lasciato un nuovo esercizio 4.
- Lu.30/03/26, ore 14:00-17:00, Aula LAB2 e Blended, Lezione 11.
Modello di illuminazione di Phong: illuminazione ambiente, riflessione diffusa e speculare.
Equazione di lighting (parametri legati al materiale e parametri legati alla luce),
posizione osservatore e geometria della scena (normali, angoli di incidenza, angoli di riflessione).
Tecniche di shading: Flat-shading, Gouraud-shading e Phong-shading;
determinazione del colore da assegnare ad ogni fragment in fase di rasterizzazione. Interpolazione colore e interpolazione delle normali.
Esempi di vertex-shader e fragment-shader che implementano il modello di illuminazione di Phong e le tecniche di shading di Gouraud e Phong. Visionato un codice di esempio in HTML5_webgl_3 (vedi slide: Modello di illuminazione di Phong) e un'applicazione demo sulle tecniche di Gouraud e Phong (vedi codice demo).
- Me.01/04/26, ore 14:30-17:00, Aula 3.6 e Blended, Lezione 12.
Richiami sulla sintassi del linguaggio GLSL (vedi slide GLSL OpenGL ES Shading Language).
Richiamate alcune librerie utili: m4.js, webgl-utils.js e vista la libreria dat.gui.js; esaminato insieme
il codice "cube_color_shading_GUI.html + .js" che utilizza queste librerie. (vedi slide Webgl e Funzioni utili).
Visionati alcuni codici ed in particolare i loro shader program che implementano il modello di illuminazione di Phong sia con tecnica di shading di Gouraud (vertex-shader) che di Phong (fragment-shader).
- Me.08/04/26, ore 14:30-17:00, Aula 3.6, Lezione 13.
Texture mapping 2D; magnification, minification (mip-mapping); two-part mapping,
environment mapping; bump-mapping; solid texture o 3D texture o texture procedurali.
Gestione delle texture in WebGL; codice Javascript e codici vertex e fragment shader.
Esaminati alcuni codici di esempio. (Vedi slide: Texture nella Computer Graphics).
- Lu.13/04/26, ore 14:00-17:00, Aula LAB2 e Blended, Lezione 14.
Introdotta la function glmReadOBJ della glm_utils.js per leggere file in formato OBJ Wavefront.
Wavefront .obj file
Shadowing: ombre su piani (proiezione).
Esaminato codice che implementa ombre su piani nella cartella HTML5_webgl_3.
Shadow Mapping per ombre in un algoritmo Z-Buffer.
Esaminato codice che implementa lo shadow buffer nella cartella HTML5_webgl_3. (vedi slide: Shadowing).
- Me.15/04/26, ore 14:30-17:00, Aula 3.6, Lezione 15.
Download Slide
Download Software e Materiale
Download Documenti
Libri
Siti
Vedi
Torna alla
home page di Giulio Casciola