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

• Le lezioni inizieranno il 21 febbraio con il seguente orario:
  Lu. ore 15:30-18:30 Aula E1 e in streaming con Teams
  Me. ore 9:00-11:00 Aula E1 e in streaming con Teams
  

• Lu.21/02/22, ore 15.30-18:30, Aula E1 e in 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 slide: Introduzione al Corso). Introduzione ad alcune applicazioni della grafica 3D. (vedi slide: La Grafica e le sue Applicazioni, parte 1 e parte 2).
• Me.23/02/22, ore 9:00-11:00, Aula E1 e in Streaming, 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)
• Lu.28/02/22, ore 15:30-18:30, Aula E1 e in Streaming, Lezione 3.
  X Window System: architettura del sistema, X Client, rete, X Server, X Protocol, Xlib; demo.
  Introduzione ad HTML5, elemento canvas e contesto grafico '2d' (vedi slide: 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_2d_1.zip).
• Me.2/03/22, ore 9.00-11:00, Aula E1 e in Streaming, Lezione 4.
  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). Visti alcuni esempi e assegnato un Esercizio su curve di Bézier. (vedi slide: Programmazione Grafica 2d)
• Lu.7/03/22, ore 15:30-18:30, Aula E1 e in Streaming, 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; due procedure alternative (vedi slide: Trasformazione di Vista)
• Me.9/03/22, ore 9.00-11:00, Aula E1 e in Streaming, Lezione 6.
  Ripreso il Cambio di sistema di riferimento. 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. Analizzato programma di esempio (persp_cube) che implementa la trasformazione di vista. Assegnato Esercizio 2 (vedi slide: Trasformazione di Vista) Visionato il codice persp_cube.html/js dell'archivio HTML5_2d_2.zip.
• Lu.14/03/22, ore 15:30-18:30, Aula E1 e in Streaming, Lezione 7.
  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).
  Ripreso Esercizio 2 assegnato la settimana scorsa 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
  Introduzione alla coordinate Baricentriche; Esempi di utilizzo delle coordinate baricentriche: rasterizzazione di triangoli. (vedi slide: Algoritmi di Rasterizzazione).
• Me.16/03/22, ore 9.00-11:00, Aula 4 Dip.Farmacia e in Streaming, Lezione 8.
  Riprese le coordinate baricentriche per la 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 generici; Visionato e provato codice scan_conv_trian.html Rasterizzazione con immagini/texture; mapping di immagini/texture su triangoli 3D; nearest neighbour, bilinear e bicubic interpolation. Visionato e provato il codice raster_draw_image.html (vedi slide: Algoritmi di Rasterizzazione).
• Lu.21/03/22, ore 15:30-18:30, Aula E1 e in Streaming, Lezione 9.
  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. 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. (vedi slide: Proiezione Prospettica con Profondita' e ZBuffer).
• Me.23/03/22, ore 9.00-11:00, Aula E1 e in Streaming, Lezione 10.
  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.28/03/22, ore 15:30-18:30, Aula E1 e in Streaming, Lezione 11.
  Ripreso un 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 ES SL, disegno in WebGL. (vedi slide: Libreria Grafica WebGL: Esempi)
  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.
• Me.30/03/22, ore 9.00-11:00, Aula E1 e in Streaming, Lezione 12.
  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.
• Lu.4/04/22, ore 15:30-18:30, Aula E1 e in Streaming, Lezione 13.
  Introduzione ad alcune librerie utili: m4.js, webgl-utils.js, ui_components.js e dat.gui.js; visionati tre semplici codici che le utilizzano. (vedi slide Webgl e Funzioni utili).
  Texture mapping 2D; magnification, minification (mip-mapping); two-part mapping, environment mapping; solid texture o 3D texture, texture procedurali, bump-mapping. (Vedi slide: Texture nella Computer Graphics).
• Me.6/04/22, ore 9.00-11:00, Aula E1 e in Streaming, Lezione 14.
  Si sono riprese le slide sulle texture ed in particolare su cosa mette a disposizione WebGL e cosa si deve fare nel codice Javascript e cosa nel vertex e fragment shader. (Vedi slide: Texture nella Computer Graphics). Si sono esaminati alcuni codice di esempio.
  Introduzione al modello di illuminazione di Phong: illuminazione ambiente, riflessione diffusa e speculare. (vedi slide: Modello di illuminazione di Phong).
• Lu.11/04/22, ore 15:30-18:30, Aula E1 e in Streaming, Lezione 15.
  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 slide: Modello di illuminazione di Phong).
  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. Visionati codici relativi in HTML5_webgl_2.
  Shadowing: ombre su piani (proiezione). (vedi slide: Shadowing). Visionato codice in HTML5_webgl_2.
• Me.13/04/22, ore 9.00-11:00, Aula E1 e in Streaming, Lezione 16.
  Shadow Buffer per ombre in un algoritmo Z-Buffer. (vedi slide: Shadowing). Esaminato codice nella cartella HTML5_webgl_2 che implementa uno shadow buffer.
  Rappresentazione B-Rep (Boundary Representation) di oggetti 3D two-manifold e genere diun oggetto; Introduzione alle mesh poligonali 3D: geometria e topologia, mesh two-manifold, normali, orientamento, chiuse e aperte, memorizzazione. (vedi slide: Mesh 3D poligonali).
• Me.27/04/22, ore 9.00-11:00, Aula E1 e in Streaming, Lezione 17.
  Ripreso l'argomento/slide su mesh poligonali 3D: 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). Rilevazione della didattica. Breve presentazione del progetto d'esame.
• Lu.2/05/22, ore 15:30-18:00, Aula E1 e in Streaming, Lezione 18.
  Ripreso in dettaglo il testo del progetto d'esame.
  Primi passi di sviluppo: progettazione, geometria cubo e controlli camera, trasformazioni per il movimento, simulazione fisica. (vedi slide: Progetto Car)
  Esempio di progettazione di un codice di grafica 3D Real-Time: (vedi archivio HTML5_webgl_3.zip); mostrati alcuni progetti realizzati negli anni precedenti.
• Me.4/05/22, ore 9.00-11:00, Aula E1 e in Streaming, Lezione 19.
  Minicorso su Blender (dr. Daniele De Luca, CINECA) (vedi slide: Introduzione a Blender) (vedi slide: Modellazione in Blender)
• Lu.9/05/22, ore 15:30-18:30, Aula E1 e in Streaming, Lezione 20.
  Minicorso su Blender (dr. Daniele De Luca, CINECA) (vedi slide: Shading e Texturing in Blender)
• Me.11/05/22, ore 9.00-11:00, Aula E1 e in Streaming, Lezione 21.
  WebGL e Per-Fragment Operations per gestire effetti grafici particolari (vedi slide: Rendering Avanzato in WebGL).
  
  Fine delle Lezioni di Computer Graphhics
  (modulo 1 di Fondamenti di Computer Graphics).
  vai a: modulo 2

• 3D-WebApp con WebGL Assegnato il 27/04/2022
• FAQ sul progetto d'esame

• Slide: Introduzione al Corso (file.pdf)
• Slide: La Grafica e le sue Applicazioni - parte 1 (file.pdf)
• Slide: La Grafica e le sue Applicazioni - parte 2 (file.pdf)
• Slide: Hardware e Software per Grafica Interattiva (file.pdf)
• Slide: X Window System (file.pdf)
• Slide: HTML5+canvas+JavaScript (file.pdf)
• Slide: Programmazione Grafica 2D (file.pdf)
• Slide: Trasformazioni Geometriche (file.pdf)
• Slide: Trasformazione di vista (Viewing 3D) (file.pdf)
• Slide: Algoritmi di Real Time Rendering (file.pdf)
• Slide: Algoritmi di Rasterizzazione (file.pdf)
• Slide: Proiezione Prospettica con Profondita' e ZBuffer (file.pdf)
• Slide: Libreria Grafica WebGL: Introduzione (file.pdf)
• Slide: Libreria Grafica WebGL: Esempi (file.pdf)
• Slide: Trasformazione di vista in WebGL (file.pdf)
• Slide: WebGL e Funzioni utili (file.pdf)
• Slide: Texture nella Computer Graphics (file.pdf)
• Slide: Modello di Illuminazione di Phong (file.pdf)
• Slide: Shadowing (file.pdf)
• Slide: Mesh 3D Poligonali (file.pdf)
• Slide: Progetto Car (WebGL+OpenGL ES SL) (file.pdf)
• Slide: Clipping di linee (file.pdf)
• Slide: Clipping di poligoni (file.pdf)
• Slide: Introduzione a Blender dr. Daniele De Luca (file.pdf)
• Slide: Modellazione in Blender dr. Daniele De Luca (file.pdf)
• Slide: Shading e Texturing in Blender dr. Daniele De Luca (file.pdf)
• Slide: Rendering Avanzato in WebGL (file.pdf)

• FCG (file.pdf)
• CGGM (file.pdf)
• CGGM (file.pdf)
• BWH5 (file.pdf)
• OGLPG (file.pdf)
• Basic Linear Algebra (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)
• Libreria User Interface (file.pdf)

• HTML5_2d_1.zip (semplici programmi HTML5+canvas+JavaScript)
  
• HTML5_2d_2.zip (codici HTML5+canvas+JavaScript)
  
• esercizio1_bezier.zip (codice di esempio per l'Esercizio 1 assegnato)
  
• HTML5_2d_3.zip (codici HTML5+canvas+JavaScript)
  
• HTML5_webgl_1.zip (codici HTML5+canvas+JavaSvript+WebGL+shaders)
  
• HTML5_webgl_2.zip (codici HTML5+canvas+JavaSvript+WebGL+shaders)
  
• HTML5_webgl_3.zip (codici HTML5+canvas+JavaSvript+WebGL+shaders)
  
• shading_texturing_310.zip (Modello per Blender + textures)
  

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

• HTML5 tutorial
• W3C HTML Canvas 2D Context
• Introduzione a JavaScript
• JavaScript
• WebGL Khronos Group
• WebGL2 is supported?
• WebGL Fundamentals
• WebGL 2 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
  

• Studenti

• modalità d'esame