Interactive Graphics - Piazza
Transcript of Interactive Graphics - Piazza
![Page 1: Interactive Graphics - Piazza](https://reader035.fdocuments.in/reader035/viewer/2022070820/62c6ae57f058a071c57f0cc3/html5/thumbnails/1.jpg)
Interactive Graphics
Prof. Marco Schaerf Dept. of Computer, Systems and Management Science (DIAG)
Sapienza University of Rome
10/2/2014 Interactive Graphics: Introduction Pagina 1
![Page 2: Interactive Graphics - Piazza](https://reader035.fdocuments.in/reader035/viewer/2022070820/62c6ae57f058a071c57f0cc3/html5/thumbnails/2.jpg)
Plan for today
• Syllabus
• Logistics
• Computer graphics
10/2/2014 Interactive Graphics: Introduction Pagina 2
![Page 3: Interactive Graphics - Piazza](https://reader035.fdocuments.in/reader035/viewer/2022070820/62c6ae57f058a071c57f0cc3/html5/thumbnails/3.jpg)
Syllabus (Core)
• Introduction, Color, Graphics pipeline
• WebGL, 3D modeling, Transformation
• Rasterization, Clipping
• Lighting and shading
• Texture mapping
• Advanced Techniques, Global Illumination
10/2/2014 Interactive Graphics: Introduction Pagina 3
![Page 4: Interactive Graphics - Piazza](https://reader035.fdocuments.in/reader035/viewer/2022070820/62c6ae57f058a071c57f0cc3/html5/thumbnails/4.jpg)
Syllabus (Optional)
• Graphics hardware, intro to GPGPU
• Animation introduction, particle systems,
rigid bodies simulation
• Topics in animation and modeling
• Research topics
10/2/2014 Interactive Graphics: Introduction Pagina 4
![Page 5: Interactive Graphics - Piazza](https://reader035.fdocuments.in/reader035/viewer/2022070820/62c6ae57f058a071c57f0cc3/html5/thumbnails/5.jpg)
Contents
• you will • understand image synthesis principles
• learn math to make images
• implement key algorithms
• write cool apps
• learn graphics Javascript APIs (WebGL)
• you will not • implement large systems
10/2/2014 Interactive Graphics: Introduction Pagina 5
![Page 6: Interactive Graphics - Piazza](https://reader035.fdocuments.in/reader035/viewer/2022070820/62c6ae57f058a071c57f0cc3/html5/thumbnails/6.jpg)
Website, email, office hours
• Website:
https://piazza.com/uniroma1.it/fall2014/1044398/home
• Email: [email protected]
• Office hours:
after each lesson or by appointment in
room B220
10/2/2014 Interactive Graphics: Introduction Pagina 6
![Page 7: Interactive Graphics - Piazza](https://reader035.fdocuments.in/reader035/viewer/2022070820/62c6ae57f058a071c57f0cc3/html5/thumbnails/7.jpg)
Recommended Books
• Fabio Ganovelli, Massimiliano Corsini, Sumanta
Pattanaik, Marco Di Benedetto, Introduction to
Computer Graphics: A Practical Learning Approach
CRC Press (also available in e-book format)
• Angel and Shreiner, Interactive Computer Graphics (6th
ed.) - optional
• Alan Watt, 3D Computer Graphics (3rd ed.) - optional
• Wright et al., OpenGL SuperBible (5th ed.) – optional
• T. Akenine-Moller et al., Real-Time Rendering (3rd ed.) -
optional
10/2/2014 Interactive Graphics: Introduction Pagina 7
![Page 8: Interactive Graphics - Piazza](https://reader035.fdocuments.in/reader035/viewer/2022070820/62c6ae57f058a071c57f0cc3/html5/thumbnails/8.jpg)
Grading
• Two ways to pass the exam 1. Homeworks + Project
2. Project + Oral exam
• Homeworks • Three small individual projects
• They must be delivered in two weeks
• During the discussion: » Questions about the theory behind the homeworks
» Questions about the code you wrote
10/2/2014 Interactive Graphics: Introduction Pagina 8
![Page 9: Interactive Graphics - Piazza](https://reader035.fdocuments.in/reader035/viewer/2022070820/62c6ae57f058a071c57f0cc3/html5/thumbnails/9.jpg)
Projects
• Delivered when you have it ready (no fixed deadline)
• Individually or in small groups (up to 4)
• You choose the topic, I must approve it before starting
to work in the project
• Guidelines available before the end of the course
10/2/2014 Interactive Graphics: Introduction Pagina 9
![Page 10: Interactive Graphics - Piazza](https://reader035.fdocuments.in/reader035/viewer/2022070820/62c6ae57f058a071c57f0cc3/html5/thumbnails/10.jpg)
COMPUTER GRAPHICS
10/2/2014 Interactive Graphics: Introduction Pagina 10
![Page 11: Interactive Graphics - Piazza](https://reader035.fdocuments.in/reader035/viewer/2022070820/62c6ae57f058a071c57f0cc3/html5/thumbnails/11.jpg)
Visual representation of
digital data
• Modeling: definition of a shape
• Animation: how the shape moves
• Rendering: interaction with the light
10/2/2014 Interactive Graphics: Introduction Pagina 11
![Page 12: Interactive Graphics - Piazza](https://reader035.fdocuments.in/reader035/viewer/2022070820/62c6ae57f058a071c57f0cc3/html5/thumbnails/12.jpg)
3D Modeling
• How to synthesize digital shapes?
[Nealenv et al. 2005]
10/2/2014 Interactive Graphics: Introduction Pagina 12
![Page 13: Interactive Graphics - Piazza](https://reader035.fdocuments.in/reader035/viewer/2022070820/62c6ae57f058a071c57f0cc3/html5/thumbnails/13.jpg)
Example: digital sculpting
10/2/2014 Interactive Graphics: Introduction Pagina 13
![Page 14: Interactive Graphics - Piazza](https://reader035.fdocuments.in/reader035/viewer/2022070820/62c6ae57f058a071c57f0cc3/html5/thumbnails/14.jpg)
Animation
• How to synthesize motion?
[Ess
a et
al. 2
005]
10/2/2014 Interactive Graphics: Introduction Pagina 14
![Page 15: Interactive Graphics - Piazza](https://reader035.fdocuments.in/reader035/viewer/2022070820/62c6ae57f058a071c57f0cc3/html5/thumbnails/15.jpg)
Physics-based animation
Realistic animation as a simulation
=
Numerically solve the underlying
differential equations of motions
10/2/2014 Interactive Graphics: Introduction Pagina 15
![Page 16: Interactive Graphics - Piazza](https://reader035.fdocuments.in/reader035/viewer/2022070820/62c6ae57f058a071c57f0cc3/html5/thumbnails/16.jpg)
Application – Cloth simulation
[Choi and Ko, 2003] 10/2/2014 Interactive Graphics: Introduction Pagina 16
![Page 17: Interactive Graphics - Piazza](https://reader035.fdocuments.in/reader035/viewer/2022070820/62c6ae57f058a071c57f0cc3/html5/thumbnails/17.jpg)
Application
Muscles and face
[Teran et al., 2005] [Fratarcangeli, 2012] 10/2/2014 Interactive Graphics: Introduction Pagina 17
![Page 18: Interactive Graphics - Piazza](https://reader035.fdocuments.in/reader035/viewer/2022070820/62c6ae57f058a071c57f0cc3/html5/thumbnails/18.jpg)
Application
Flesh deformation
[Capell et al. 2002] 10/2/2014 Interactive Graphics: Introduction Pagina 18
![Page 19: Interactive Graphics - Piazza](https://reader035.fdocuments.in/reader035/viewer/2022070820/62c6ae57f058a071c57f0cc3/html5/thumbnails/19.jpg)
Application - Fracture
[O’Brien and Hodgins. 1999]
10/2/2014 Interactive Graphics: Introduction Pagina 19
![Page 20: Interactive Graphics - Piazza](https://reader035.fdocuments.in/reader035/viewer/2022070820/62c6ae57f058a071c57f0cc3/html5/thumbnails/20.jpg)
Application - Entertainment
Movies
Games
10/2/2014 Interactive Graphics: Introduction Pagina 20
![Page 21: Interactive Graphics - Piazza](https://reader035.fdocuments.in/reader035/viewer/2022070820/62c6ae57f058a071c57f0cc3/html5/thumbnails/21.jpg)
Applications - virtual avatars
Cultural heritage: [lifeplus: virtual pompei]
Social networks
10/2/2014 Interactive Graphics: Introduction Pagina 21
![Page 22: Interactive Graphics - Piazza](https://reader035.fdocuments.in/reader035/viewer/2022070820/62c6ae57f058a071c57f0cc3/html5/thumbnails/22.jpg)
Applications - Computer-aided
Surgery
10/2/2014 Interactive Graphics: Introduction Pagina 22
![Page 23: Interactive Graphics - Piazza](https://reader035.fdocuments.in/reader035/viewer/2022070820/62c6ae57f058a071c57f0cc3/html5/thumbnails/23.jpg)
Features of the Simulation
• Accuracy
numerical results from the virtual simulation
are nearly equal to the real expected ones
• Efficiency
computation time scaled to time
requirements • hard real-time, 60 frame per second (fps) 16.67 ms
10/2/2014 Interactive Graphics: Introduction Pagina 23
![Page 24: Interactive Graphics - Piazza](https://reader035.fdocuments.in/reader035/viewer/2022070820/62c6ae57f058a071c57f0cc3/html5/thumbnails/24.jpg)
Rendering
•Lighting simulation
•Material simulation
•Visibility estimation
10/2/2014 Interactive Graphics: Introduction Pagina 24
![Page 25: Interactive Graphics - Piazza](https://reader035.fdocuments.in/reader035/viewer/2022070820/62c6ae57f058a071c57f0cc3/html5/thumbnails/25.jpg)
Offline ray tracing of a sphere
Shallow depth of field, area light sources and diffuse inter-reflections
10/2/2014 Interactive Graphics: Introduction Pagina 25
![Page 26: Interactive Graphics - Piazza](https://reader035.fdocuments.in/reader035/viewer/2022070820/62c6ae57f058a071c57f0cc3/html5/thumbnails/26.jpg)
Ray tracing can achieve a very high degree of
visual realism.
10/2/2014 Interactive Graphics: Introduction Pagina 26
![Page 27: Interactive Graphics - Piazza](https://reader035.fdocuments.in/reader035/viewer/2022070820/62c6ae57f058a071c57f0cc3/html5/thumbnails/27.jpg)
Interactive rendering [Crysis 2 - Crytek]
10/2/2014 Interactive Graphics: Introduction Pagina 27
![Page 28: Interactive Graphics - Piazza](https://reader035.fdocuments.in/reader035/viewer/2022070820/62c6ae57f058a071c57f0cc3/html5/thumbnails/28.jpg)
Non-photorealistic Rendering
Scientific Visualization, Cartoon rendering, ...
[Praun et al. 2001] [Tarini et al. 2005]
10/2/2014 Interactive Graphics: Introduction Pagina 28
![Page 29: Interactive Graphics - Piazza](https://reader035.fdocuments.in/reader035/viewer/2022070820/62c6ae57f058a071c57f0cc3/html5/thumbnails/29.jpg)
Interaction with the user
• 2D/3D user interfaces
• haptics
• augmented reality
10/2/2014 Interactive Graphics: Introduction Pagina 29
![Page 30: Interactive Graphics - Piazza](https://reader035.fdocuments.in/reader035/viewer/2022070820/62c6ae57f058a071c57f0cc3/html5/thumbnails/30.jpg)
Visual representation of
digital data • Entertainment
• Social life
• Education
• Art and creative expression
• Design and architecture
• Training and simulation
• Medicine
• Augmented reality
10/2/2014 Interactive Graphics: Introduction Pagina 30
![Page 31: Interactive Graphics - Piazza](https://reader035.fdocuments.in/reader035/viewer/2022070820/62c6ae57f058a071c57f0cc3/html5/thumbnails/31.jpg)
applications
• entertainment
– movies
– games
[King Kong – © Universal Studios]
[NBA Live 07 – © EA Games]
10/2/2014 Interactive Graphics: Introduction Pagina 31
![Page 32: Interactive Graphics - Piazza](https://reader035.fdocuments.in/reader035/viewer/2022070820/62c6ae57f058a071c57f0cc3/html5/thumbnails/32.jpg)
applications
• entertainment
– movies
– games
[Lord of the Rings – © New Line Cinema]
[Lord of the Rings II – © EA Games]
10/2/2014 Interactive Graphics: Introduction Pagina 32
![Page 33: Interactive Graphics - Piazza](https://reader035.fdocuments.in/reader035/viewer/2022070820/62c6ae57f058a071c57f0cc3/html5/thumbnails/33.jpg)
applications
• entertainment
• science and engineering
– computer-aided design
– scientific/medical visualization
[Go
och
et
al. 1
998]
10/2/2014 Interactive Graphics: Introduction Pagina 33
![Page 34: Interactive Graphics - Piazza](https://reader035.fdocuments.in/reader035/viewer/2022070820/62c6ae57f058a071c57f0cc3/html5/thumbnails/34.jpg)
applications
• entertainment
• science and engineering
• visualization
– information visualization
[Chen e
t al
. 2005]
10/2/2014 Interactive Graphics: Introduction Pagina 34
![Page 35: Interactive Graphics - Piazza](https://reader035.fdocuments.in/reader035/viewer/2022070820/62c6ae57f058a071c57f0cc3/html5/thumbnails/35.jpg)
applications
• entertainment
• science and engineering
• visualization
• graphic arts
– digital photography
– graphic design
[Adobe Photoshop] 10/2/2014 Interactive Graphics: Introduction Pagina 35
![Page 36: Interactive Graphics - Piazza](https://reader035.fdocuments.in/reader035/viewer/2022070820/62c6ae57f058a071c57f0cc3/html5/thumbnails/36.jpg)
applications
• entertainment
• science and engineering
• visualization
• graphic arts
• fine arts
[Wooden Mirror – Daniel Rozin]
10/2/2014 Interactive Graphics: Introduction Pagina 36
![Page 37: Interactive Graphics - Piazza](https://reader035.fdocuments.in/reader035/viewer/2022070820/62c6ae57f058a071c57f0cc3/html5/thumbnails/37.jpg)
applications
• entertainment
• science and engineering
• visualization
• graphic arts
• fine arts
• medicine
Animations of muscles constructed from the NIH visible human data set
Teran, Sifakis and Lau
10/2/2014 Interactive Graphics: Introduction Pagina 37
![Page 38: Interactive Graphics - Piazza](https://reader035.fdocuments.in/reader035/viewer/2022070820/62c6ae57f058a071c57f0cc3/html5/thumbnails/38.jpg)
applications
• entertainment
• science and engineering
• visualization
• graphic arts
• fine arts
• medicine
• augmented reality
[Project Arthur – AR Penn]
10/2/2014 Interactive Graphics: Introduction Pagina 38