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))
Avvisi
Mercoledì 27 maggio 2026, ci sarà un preappello d'esame riservato agli studenti Inf. e Mat. in corso;
iscriversi su Almaesami.
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, 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.
Pipeline di rendering in WebGL: parte fissa della pipeline fra vertex e fragment shader e parte fissa detta 'Per-Fragment Operations', quest'ultima per gestire effetti grafici avanzati. (vedi slide: Primitive Setup and Rasterization e Per Fragment Operations). Visionati codici della cartella HTML5_webgl_4.
- Lu.20/04/26, ore 14:00-17:00, Aula LAB2, Lezione 16.
Primi passi di sviluppo di un progetto: progettazione, geometria cubo e controlli camera,
trasformazioni per il movimento, simulazione fisica (vedi slide: Progetto Car).
Esempio di un'applicazione Web di grafica 3D Real-Time basato sul progetto car presentato.
Rilevazione delle opinioni degli studenti.
Presentazione del progetto d'esame.
- Me.22/04/26, ore 14:30-17:00, Aula 3.6, Lezione 17.
Rappresentazione B-Rep (Boundary Representation) di oggetti 3D two-manifold e genere di un oggetto;
Introduzione alle mesh poligonali 3D: geometria e topologia, mesh two-manifold, normali, orientamento, chiuse e aperte,
memorizzazione. Ancora su formato .obj (Wavefront) e file .mtl; formati e conversione, modellatori,
editing di mesh, operatori di Eulero, adiacenze, strutture dati. Repository di mesh (vedi slide: Mesh 3D poligonali).
- Me.29/04/26, ore 14:30-17:00, Aula 3.6, Lezione 18.
Minicorso su Blender tenuto dal Dr. Paolo Zuzolo
Vedi le slide della lezione su virtuale.unibo.it ("Introduzione a Blender", "Modellazione")
- Lu.04/05/26, ore 14:00-17:00, Aula LAB2, Lezione 19.
Minicorso su Blender tenuto dal Dr. Paolo Zuzolo
Vedi le slide della lezione su virtuale.unibo.it (continua "Modellazione", "Shading, texturing and rendering")
- Me.20/05/26, ore 14:30-17:00, Aula 3.6
Minicorso su Blender tenuto dal Dr. Paolo Zuzolo
Vedi le slide della lezione su virtuale.unibo.it (continua "Animazione")
Fine delle Lezioni (modulo 1)
Download Slide
Download Software e Materiale
Download Documenti
Libri
Siti
Vedi
Torna alla
home page di Giulio Casciola