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. Modelli poligonali 3D, curve e superfici in forma parametrica, modellazione geometrica di curve e superfici spline e spline razionali (NURBS), strumenti per la modellazione geometrica. Il corso prevede una attivita' pratica in cui verra' utilizzato il linguaggio di programmazione C/C++ e le librerie grafiche OpenGL/GLSL (JavaScript e libreria 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).

• Le lezioni inizieranno il 3 marzo con il seguente orario:
  Ma. ore 9.00-12.00 Aula E1 e/o in streaming con Teams
  Me. ore 9.00-13.00 Aula Vitali/Lab Linux (Dip.Matematica) e/o in streaming con TEAMS
  

• Ma.3/03/20, ore 9.00-12:00, Streaming, Lezione 1.
  Introduzione al corso: grafica 3D Real Time = modellazione + resa, informazioni generali sugli obiettivi e sul corso dal punto di vista organizzativo. (vedi lucidi: Introduzione al Corso).
• Me.4/03/20, ore 9.00-11:00, Streaming, Lezione 2.
  Introduzione ad alcune applicazioni della grafica 3D. (vedi lucidi: La Grafica e le sue Applicazioni, parte 1).
  Hardware per un sistema grafico interattivo: architettura di un display raster scan, Monitor, Frame Buffer, DPU. Tipi di Frame Buffer, grafica con CPU e RAM e DPU, grafica con GPU; cenni su GPU e GPU programmabili, cenni su prestazioni delle GPU.
• Me.4/03/20, ore 11.00-13:00, Streaming, Lezione 3.
  Software per un sistema grafico interattivo: il problema dell'interattivita`, ciclo di polling, coda degli eventi, paradigma di programmazione ad eventi. (vedi lucidi: Hardware e Software per Grafica Interattiva)
• Ma.10/03/20, ore 9.00-12:00, Streaming, Lezione 4.
  Introduzione ad HTML5, elemento canvas e contesto grafico '2d' (vedi lucidi: HTML5+canvas+JavaScript). Elementi di programmazione in JavaScript per gestione grafica ed eventi. Messo a disposizione archivio di semplici programmi da provare e modificare (vedi archivio HTML5_canvas.zip).
• Me.11/03/20, ore 9.00-11:00, Streaming, Lezione 5.
  Disegno di linee: algoritmo di linea incrementale, algoritmo di linea di Bresenham (funzione draw_line e GC_draw_line1); algoritmo di disegno in coordinate floating point (Window e Viewport). Visionati programmi di esempio in HTML5+canvas, assegnati due Esercizi. (vedi lucidi: Programmazione Grafica: esempi)
• Me.11/03/20, ore 11.00-13:00, Streaming, Lezione 6 (LAB).
  Esaminati insieme i codici draw_on_cavas.html (su beginPath(), polygon_pixel (per il disegno a pixel), polygon_float (per il disegno su window) e bezier (per il disegno di curve di Bezier).
• Ma.17/03/20, ore 9.00-12:00
  Lezione annullata per le Lauree.
• Me.18/03/20, ore 9.00-11:00, Streaming, Lezione 7.
  X Window System: architettura del sistema, X Client, rete, X Server, X Protocol, Xlib.
  Introduzione alla libreria SDL 2.0 (vedi lucidi: Simple Directmedia Layer). Elementi di programmazione SDL: gestione grafica, eventi, gestione testo, gestione immagini, gestione tempo ed esempi in SDL2prg0. Messo a disposizione archivio di semplici programmi da provare e modificare (vedi archivio SDL2prg.zip).
• Me.18/03/20, ore 11.00-13:00, Streaming, Lezione 8.
  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 lucidi: Trasformazioni Geometriche)
• Ma.24/03/20, ore 9.00-12:00, Streaming, Lezione 9.
  Cambio di sistema di riferimento; due procedure alternative. Definizione dei parametri di vista. Sistema di coordinate cartesiano e sferico. Trasformazione di vista; trasformazioni prospettiche e parallele; Trasformazione di vista con View_Up vector; tronco di piramide di vista (frustum), window e necessita' di clipping 3D. Visionato programma di esempio (persp_cube) che implementa la trasformazione di vista. Assegnati Esercizi. (vedi lucidi: Trasformazioni di Vista)
• Me.25/03/20, ore 9.00-11:00, Streaming, Lezione 10. (LAB)
  Analizzato, modificato e sperimentato insieme il codice persp_cube.html/js; Visionato codice persp_cube_sdl.c in SDL e linguaggio C (archivio SDL2prg2.zip). analizzati alcuni possibili esercizi da realizzarsi con il codice visionato. Proposti alcuni esercizi a partire dai codici messi a disposizione nell'alrchivio HTML5_canvas2.zip; per esempio codice per caricare file mesh in formato Wavefront .obj file
• Me.25/03/20, ore 11.00-13:00, Streaming, Lezione 11.
  Introduzione agli algoritmi di real-time rendering: hidden-line e hidden-surface. (vedi lucidi: Algoritmi di Real-Time Rendering).
• Ma.31/03/20, ore 9.00-12:00, Streaming, Lezione 12.
  Algoritmo Z-buffer per Hidden-Surface Removal di mesh poligonali; descrizione dell'algoritmo in termini di pseudocodice e significato del buffer Z.
  Introduzione alla coordinate Baricentriche; Esempi di utilizzo delle coordinate baricentriche: rasterizzazione di triangoli e interpolazione colore. Visionati e provati codici raster_draw_color.js e raster_draw_color.c Algoritmo di scan conversion per poligoni generici; specializzazione di scan-conversion per triangoli. Visionati e provati codici raster_triang_color.js e scan_conv_triang.c (vedi lucidi: Coordinate Baricentriche e Algoritmi di Rasterizzazione).
• Me.1/04/20, ore 9.00-11:00, Streaming, Lezione 13.
  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, ecc.. Esaminato codice persp_cube_zbuffer_color.html con gestione corretta o meno delle coordinate colore.
• Me.1/04/20, ore 11.00-13:00, Streaming, Lezione 14.
  Proiezione prospettica con profondita' e gestione coordinate texture. Cenni alla elaborazione di immagini per la rasterizzazione con texture. 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.
  (vedi lucidi: Proiezione Prospettica con Profondita' e ZBuffer).
  Alcune precisazioni, puntualizzazioni e suggerimenti sugli esercizi assegnati nelle lezioni passate.
• Ve.3/04/20, ore 16.00, Streaming
  Ricevimento di gruppo
• Ma.7/04/20, ore 9.00-12:00, Streaming, Lezione 15.
  Ripreso mapping di immagini/texture su triangoli 3D; nearest neighbour, bilinear e bicubic interpolation.
  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 lucidi: Libreria Grafica WebGL: Introduzione)
• Me.8/04/20, ore 9.00-11:00, Streaming, Lezione 16.
  Sono state riprese e completate le slide della volta precedente su WebGL; geometria, VBO e IBO, Vertex e Fragment shader, linguaggio ES SL, disegno in WebGL; sono stati esaminati insieme gli esempi nell'archivio messo a disposizione riguardanti il disegno di geometria 2D in WebGL.
• Me.8/04/20, ore 11.00-13:00, Streaming, Lezione 17.
  Trasformazioni di Vista e Proiezione Prospettica in WebGL; matrici relative di trasformazione e loro utilizzo da parte del Vetex Shader (vedi lucidi: Trasformazione di vista in WebGL); esaminati insieme i codici nell'archivio messo a disposizione riguardanti il disegno di geometria 3D in WebGL.
• Me.15/04/20, ore 9.00-11:00, Streaming, Lezione 18.
  Clipping 2D di linee: algoritmo di Cohen-Sutherland. Estensione dell'algoritmo di Clipping 2D di linee al caso 3D (vedi lucidi: Clipping di punti e linee).
  Clipping 2D di poligoni: algoritmo di Sutherland-Hodgman; estensione al caso 3D (vedi lucidi: Clipping di Poligoni).
  Ancora su WebGL e le trasformazioni (vedi lucidi: WebGL e funzioni utili).
• Me.15/04/20, ore 11.00-13:00, Streaming, Lezione 19.
  Texture mapping 2D; magnification, minification (mip-mapping); two-part mapping, environment mapping; solid texture o 3D texture, texture procedurali, bump-mapping. Texture in WebGL. (Vedi Lucidi: Texture nella Computer Graphics).
• Ma.21/04/20, ore 9.00-12:00, Streaming, Lezione 20.
  Introduzione al 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 (vedi lucidi: Modello di illuminazione di Phong).
  Alcuni dettagli sul linguaggio ES SL ed esempi di vertex-shader e fragment-shader che implementano il modello di Phong e le tecniche Gouraud e Phong shading. Visionati codici relativi in WebGL_codes2.
• Me.22/04/20, ore 9.00-11:00, Streaming, Lezione 21.
  Esempio di progettazione di un codice di grafica 3D Real-Time: (vedi archivio WebGL_codes3.zip), (vedi lucidi: Progetto Car (WebGL + OpenGL ES).
  Primi passi di sviluppo: progettazione, geometria cubo e controlli camera, trasformazioni per il movimento, simulazione fisica.
• Me.22/04/20, ore 11.00-13:00, Streaming, Lezione 22.
  Rappresentazione B-Rep (Boundary Representation) di oggetti 3D; Introduzione alle mesh poligonali 3D; mesh 3D: formati .obj (wavefront) e OFF; conversione formati e convertitori. Elementi di una mesh, strutture dati, editing di mesh. Repository di mesh (vedi lucidi: Mesh 3D poligonali).
• Ma.28/04/20, ore 9.00-12:00, Streaming, Lezione 23.
  Demo di utilizzo di Blender per editing di Mesh 3D (vedi lucidi: Blender: Introduzione al Mesh Editing).
  Shadowing: ombre su piani (proiezione), Shadow Buffer per ombre in un algoritmo Z-Buffer. (vedi lucidi: Shadowing).
• Me.29/04/20, ore 9.00-11:00, Streaming, Lezione 24.
  WebGL e Per-Fragment Operations per gestire effetti grafici particolari (vedi lucidi: Rendering Avanzato in WebGL).
  
  Fine delle Lezioni.

• 3D-WebApp con WebGL Assegnato il 22/04/20

FAQ sul progetto d'esame

• Lucidi: Introduzione al Corso (file.pdf)
• Lucidi: La Grafica e le sue Applicazioni - parte 1 (file.pdf)
• Lucidi: Hardware e Software per Grafica Interattiva (file.pdf)
• Lucidi: La Grafica e le sue Applicazioni - parte 2 (file.pdf)
• Lucidi: X Window System (file.pdf)
• Lucidi: HTML5+canvas+JavaScript (file.pdf)
• Lucidi: Simple Directmedia Layer (file.pdf)
• Lucidi: Programmazione Grafica: esempi (file.pdf)
• Lucidi: Trasformazioni Geometriche (file.pdf)
• Lucidi: Trasformazioni di vista (Viewing 3D) (file.pdf)
• Lucidi: persp_cube (file.pdf)
• Lucidi: Algoritmi di Real Time Rendering (file.pdf)
• Lucidi: Coordinate Baricentriche e Algoritmi di Rasterizzazione (file.pdf)
• Lucidi: Proiezione Prospettica con Profondita' e ZBuffer (file.pdf)
• Lucidi: Libreria Grafica WebGL: Introduzione
• Lucidi: Trasformazione di vista in WebGL
• Lucidi: Clipping di linee
• Lucidi: Clipping di poligoni
• Lucidi: WebGL e funzioni utili
• Lucidi: Texture nella Computer Graphics
• Lucidi: Modello di Illuminazione di Phong
• Lucidi: Progetto Car (WebGL+OpenGL ES)
• Lucidi: Mesh 3D Poligonali
• Lucidi: Blender: Introduzione al Mesh Editing
• Lucidi: Shadowing (file.pdf)
• Lucidi: Rendering Avanzato in WebGL (file.pdf)

• FCG (file.pdf)
• 3DCG (file.pdf)
• CGGM (file.pdf)
• CGGM (file.pdf)
• OGLPG (file.pdf)
• BWH5 (file.pdf)
• Basic Linear Algebra (file.pdf)
• Argomenti dalla rete (file.pdf)
• Introduzione Ambiente Linux (file.pdf)
• WebGL 1.0 Reference card (file.pdf)
• WebGL 2.0 Reference card (file.pdf)
• OpenGL ES 2.0 Reference card (file.pdf)
• OpenGL 4.5 Reference card (file.pdf)

• HTML5_canvas.zip (archivio di programmi HTML5+canvas+JavaScript)
  
• SDL2prg.zip (archivio di programmi SDL2.0+C)
  
• draw_on_canvas.html (Esempio da provare)
  
• HTML5_canvas2.zip (archivio di programmi HTML5+canvas+JavaScript)
  
• SDL2prg2.zip (archivio di programmi SDL2.0+C)
  
• HTML5_canvas3.zip (archivio di programmi HTML5+canvas+JavaScript)
  
• SDL2prg3.zip (archivio di programmi SDL2.0+C)
  
• WebGL_codes.zip (archivio di programmi HTML5+canvas+JavaSvript+WebGL)
  
• WebGL_codes2.zip (archivio di programmi WebGL+shaders)
  
• WebGL_codes3.zip (archivio di programmi WebGL)
  

• XWindow Programming
• Elenco Libri di Grafica disponibili presso la Biblioteca del Dipartimento di Matematica
• The GNU C Reference Manual

• GCC Online Documentation
• SDL 2.0 (Simple Directmedia Layer) library
• SDL_ttf 2.0 library
• SDL_image 2.0 library
• OpenGL
• Siti OpenGL
  
• Siti CG
  
• Wavefront .obj file
• WebGL Khronos Group
• WebGL2 is supported?
• HTML5 tutorial
• W3C HTML Canvas 2D Context
• JavaScript
• WebGL Fundamentals
• WebGL 2 Fundamentals
• Benchmark scheda grafica (>3000)
• Benchmark scheda grafica (animazione fluida)
• Benchmark scheda grafica (5000 pesci ed fps>25)

• Studenti