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.7/03/26, ore 14:00-17:00, Aula LAB2, Lezione 5.
  

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

• HTML5_2d_1.zip (semplici programmi HTML5+canvas+JavaScript)
  
• HTML5_webgl_1.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