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

• 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)
  

• 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, Lezione 11.
  
• Me.01/04/26, ore 14:30-17:00, Aula 3.6, Lezione 12.
  

• Slide: Introduzione al Corso (file.pdf)
• Slide: La Grafica 3D e le sue Applicazioni - parte 1 (file.pdf)
• Slide: La Grafica 3D e le sue Applicazioni - parte 2 (file.pdf)
• Slide: Hardware e Software per Grafica Interattiva (file.pdf)
• Slide: HTML5+canvas+JavaScript (file.pdf)
• Slide: Trasformazioni Geometriche 2D (file.pdf)
• Slide: Programmazione Grafica 2D (file.pdf)
• Slide: Libreria Grafica WebGL: Introduzione (file.pdf)
• Slide: API WebGL: un esempio in dettaglio (file.pdf)
• Slide: Clipping di linee (file.pdf)
• Slide: Clipping di poligoni (file.pdf)
• Slide: Rasterizzazione (file.pdf)
• Slide: Trasformazioni Geometriche (file.pdf)
• Slide: Trasformazione di vista (Viewing 3D) (file.pdf)
• Slide: Algoritmi di Real Time Rendering (file.pdf)
• Slide: ZBuffer e Proiezione Prospettica con Profondità (file.pdf)

• HTML5_2d_1.zip (semplici programmi HTML5+canvas+JavaScript)
  
• HTML5_webgl_1.zip (codici HTML5+canvas+JavaScript+WebGL+shaders)
  
• HTML5_webgl_2.zip (codici HTML5+canvas+JavaScript+WebGL+shaders)
  

• BWH5 (file.pdf)
• Basic Linear Algebra (file.pdf)
• FCG (file.pdf)
• CGGM (file.pdf)
• CGGM (file.pdf)
• OGLPG (file.pdf)
• 3DCG (file.pdf)
• HTML5_javascript.zip (cartella con file .pdf e codici di esempio HTML5+javaScript, per studenti MAT)
  

• Elenco Libri di Grafica disponibili presso la Biblioteca del Dipartimento di Matematica

• HTML5 tutorial
• HTML5 tutorialspoint
• W3C HTML Canvas 2D Context
• HTML Canvas Tutorial
• Canvas API
• Introduzione a JavaScript
• JavaScript
• Introduction to Computer Graphics, version 1.4, August 2023 (book)
• WebGL Khronos Group
• Learn Computer Graphics using WebGL, Interactive TextBook
• WebGL Fundamentals
• WebGL 2 Fundamentals
• WebGL2 is supported?
• WebGPU Fundamentals
• Benchmark scheda grafica (>3000)
• Benchmark scheda grafica (animazione fluida)
• Benchmark scheda grafica (5000 pesci ed fps>25)
• Wavefront .obj file
• obj file format by Paul Bourke
• OpenGL
• Siti OpenGL
  
• Altri Siti CG
  

• modalità d'esame