CG2324L

Computer Graphics (C.d.S. Magistrale in Informatica) A.A.2023/24
Fondamenti di Computer Graphics (modulo 1)(C.d.S. Magistrale in Ingegneria Informatica) A.A.2023/24
Fondamenti di Computer Graphics (C.d.S. Magistrale in Matematica) A.A.2023/24

(2^ semestre, 2^ anno)
Esame progetto e orale
CFU 6
Docente Prof. Giulo Casciola

Avvisi

su Virtuale ci sono le registrazioni delle lezioni
16/4 Seminario su Realtà Virtuale tenuto dal dr. Paolo Zuzolo (Dottorando Dip. Matematica)
23/4 e 24/4 minicorso su Blender tenuto dal dr. Daniele De Luca (CG Generalist CINECA)
installare sul proprio computer Blender 4.1 (su Windows la versione Portable)
dotarsi di mouse con rotellina 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.

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.

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 CG2324.

Orario delle Lezioni

Le lezioni inizieranno il 20 febbraio con il seguente orario:
Lu. ore 15:30-18:30 Aula Tonelli (Dip. Matematica)
Ma. ore 16:00-19:00 Aula E2 (Scuole Ercolani)
Me. ore 9:00-11:00 Aula E2 (Scuole Ercolani)

Progetto d'esame

3D-WebApp con WebGL Assegnato il 26/03/2024
FAQ sul progetto d'esame

Lezioni e Argomenti trattati

Me.21/02/24, ore 9:00-11:00, Aula E2, 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). Lasciate da guardare in autonomia due slide su applicazioni della grafica 3D. (vedi slide: La Grafica e le sue Applicazioni, parte 1 e parte 2).
Ma.27/02/24, ore 16:00-18:45, Aula E2, Lezione 2.
Hardware per un sistema grafico interattivo: architettura di un display raster scan, Monitor, Frame Buffer, DPU. Schede grafiche e pipeline grafica, GPU e GPU programmabili, cenni su prestazioni delle GPU. Software per un sistema grafico interattivo: il problema dell'interattivita`, ciclo di polling, coda degli eventi, paradigma di programmazione ad eventi. (vedi slide: Hardware e Software per Grafica Interattiva)
X Window System: architettura del sistema, X Client, rete, X Server, X Protocol, Xlib; demo. (vedi slide: X Window System)
Introduzione ad HTML5, elemento canvas e contesto grafico '2d' (vedi slide: HTML5+canvas+JavaScript). Messo a disposizione archivio di semplici programmi da provare e modificare (vedi archivio HTML5_2d_1.zip).
Me.28/02/24, ore 9:00-11:00, Aula E2, Lezione 3.
Introduzione al contesto '2d': primitive grafiche, gestione eventi, gestione testo, gestione immagini, gestione animazioni. Elementi di programmazione JavaScript per grafica ed eventi su canvas.
Lu.4/03/24, ore 16.00-19:00, Aula Tonelli, Lezione 4.
Ripresi alcuni punti presentati la lezione scorsa e visionati i relativi semplici codici della cartella HTML5_2d_1.
Alcuni concetti ed esempi di 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.
Ma.5/03/24, ore 16:00-18:45, Aula E2, Lezione 5.
Trasformazioni geometriche; richiami, trasformazioni elementari: traslazione, scala, rotazione. Spazio affine: punti, vettori, combinazioni affini, sistema di riferimento, trasformazioni affini, composizione di trasformazioni mediante prodotto di matrici; trasformazioni elementari 3D in coord. omogenee: traslazione, scala, rotazione rispetto agli assi coordinati. Composizione di trasformazioni, trasformazioni inverse. Trasformazioni composte come rotazione e scala rispetto ad un punto (vedi slide: Trasformazioni Geometriche).
Cambio di sistema di riferimento, definizione dei parametri di vista. Sistema di coordinate cartesiano e sferico. Trasformazione di vista con View-Up vector; trasformazioni prospettiche e parallele (vedi slide: Trasformazione di Vista)
Me.6/03/24, ore 9.00-11:00, Aula E2, Lezione 6.
Ripresa trasformazione di vista; esempio nel caso di proiezione prospettica ad 1 punto di fuga; tronco di piramide di vista (frustum), window e necessita' di clipping 3D. (vedi slide: Trasformazione di Vista)
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).
Lu.11/03/24, ore 15:30-18:30, Aula Tonelli, Lezione 7.
Analizzato codice di esempio che implementa la trasformazione di vista. Visionato e provato il codice persp_cube.html/js dell'archivio HTML5_2d_2. Assegnato Esercizio 2 e introdotto il codice persp_obj_file_face.html che utilizza la function glmReadOBJ della glm_utils.js per leggere file in formato OBJ Wavefront. Wavefront .obj file (vedi slide: Trasformazione di Vista)
Introduzione alla coordinate Baricentriche; Esempi di utilizzo delle coordinate baricentriche: rasterizzazione di triangoli. Applicazione per l' interpolazione colore. Visionato e provato il codice raster_draw_color.html. Algoritmo di scan conversion per triangoli e generalizzazione per poligoni; Visionato e provato codice scan_conv_triang.html/js. Rasterizzazione con immagini/texture; mapping di immagini/texture su triangoli 3D; (vedi slide: Algoritmi di Rasterizzazione).
Ma.12/03/24, ore 16:00-18:45, Aula E2, Lezione 8.
Ripresa rasterizzazione con immagini/texture: nearest neighbour, bilinear e bicubic interpolation. Visionato e provato il codice raster_draw_image.html (vedi slide: Algoritmi di Rasterizzazione).
Relazione fra le coordinate baricentriche di un segmento 3D (triangolo) e del suo proiettato e "profondita' di un pixel". Trasformazione prospettica con profondita': verifica che la trasformazione manda rette in rette e piani in piani. Trasformazione come deformazione dello spazio; parametri alpha e beta; profondita' Z di un pixel. Rivisitata pipeline di vista per Z-buffer. Estensione rasterizzazione con altri parametri quali profondita' Z, coordinate colori e coordinate texture. Provati i codici persp_cube_zbuffer_color.html e persp_cube_zbuffer_texture.html della cartella HTML5_2d_3. (vedi slide: Proiezione Prospettica con Profondita' e ZBuffer).
Algoritmo di clipping di linea (vedi slide: Clipping di linee)
Algoritmo di clipping di poligoni (vedi slide: Clipping di poligoni)
Me.13/03/24, ore 9:00-11:00, Aula Cremona (Dip.Matematica), Lezione 9.
Introduzione alle librerie OpenGL e WebGL, HTML5 e constesto webgl, sistema di coordinate, grafica WebGL, Vertex e Fragment shader, pipeline grafica di WebGL, esempio 2D/3D, simulazione di un codice con State Diagram. (vedi slide: Libreria Grafica WebGL: Introduzione)
Lu.18/03/24, ore 15:30-19:00, Aula Tonelli, Lezione 10.
Esaminato codice persp_cube_zbuffer_color.html con gestione corretta o meno delle coordinate colore. Esaminato codice persp_cube_zbuffer_texture.html con gestione corretta o meno delle coordinate texture. Proposti alcuni esercizi da realizzare modificando i codici messi a disposizione.
Ripreso codice WebGL per il disegno di un triangolo e sono stati 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: Libreria Grafica WebGL: Esempio)
Sono stati affrontati e risolti insieme piccoli esercizi riguardanti il disegno di geometria 2D in WebGL; le soluzioni sono nell'archivio HTML5_webgl_1.zip messo a disposzione.
Ma.19/03/24, ore 16:00-18:45, Aula E2, Lezione 11.
Trasformazioni di Vista e Proiezione Prospettica in WebGL; matrici relative di trasformazione e loro utilizzo da parte del Vetex Shader (vedi slide: Trasformazione di vista in WebGL); esaminati insieme i codici nell'archivio messo a disposizione riguardanti il disegno di geometria 3D in WebGL.
Introduzione ad alcune librerie utili: m4.js, webgl-utils.js e dat.gui.js; visionati due semplici codici che le utilizzano. (vedi slide Webgl e Funzioni utili).
Me.20/03/24, ore 9:00-11:00, Aula E2, Lezione 12.
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 pixel dell'immagine. Interpolazione colore e interpolazione delle normali.
Alcuni dettagli sul linguaggio GLSL ed esempi di vertex-shader e fragment-shader che implementano il modello di Phong e le tecniche Gouraud e Phong shading. Visionato un codice di esempio in HTML5_webgl_2. (vedi slide: Modello di illuminazione di Phong).
Lu.25/03/24, ore 15:30-19:00, Aula Tonelli, Lezione 13.
Riprese e completate slide su Modello di Illuminazione di Phong. Visionati alcuni codici relativi.
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 codice di esempio. (Vedi slide: Texture nella Computer Graphics).
Shadowing: ombre su piani (proiezione). (vedi slide: Shadowing).
Ma.26/03/24, ore 16:00-18:45, Aula E2, Lezione 14.
Shadow Buffer per ombre in un algoritmo Z-Buffer. Esaminato codice che implementa lo shadow buffer nella cartella HTML5_webgl_2. (vedi slide: Shadowing).
Rilevazione della didattica.
Breve presentazione del progetto d'esame. Mostrati alcuni progetti realizzati negli anni precedenti.
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. Formato .obj (wavefront) e file .mtl; convertitori, modellatori, editing di mesh, operatori di Eulero, adiacenze, strutture dati. Visionato codice in HTML5_webgl_3. (vedi slide: Mesh 3D poligonali).
Me.27/03/24, ore 9:00-11:00, Aula E2, Lezione 15.
WebGL e Per-Fragment Operations per gestire effetti grafici avanzati. (vedi slide: Rendering Avanzato in WebGL).
Ma.16/04/24, ore 16:00-18:45, Aula E2,
Seminario su Realtà Virtuale tenuto dal Dr. Paolo Zuzolo (Dip.Matematica)
Ma.23/04/24, ore 16:00-18:45, Aula E2,
Minicorso su Blender tenuto dal Dr. Daniele DeLuca (CINECA)
Me.24/04/24, ore 9:00-11:00, Aula E2,
Minicorso su Blender tenuto dal Dr. Daniele DeLuca (CINECA)