Computer Graphics MTAT.03.015 Raimond Tunnel 2 / 47 Course - - PowerPoint PPT Presentation

▶
computer graphics
SMART_READER_LITE
LIVE PREVIEW

Computer Graphics MTAT.03.015 Raimond Tunnel 2 / 47 Course - - PowerPoint PPT Presentation

Jan 05, 2023 391 likes •872 views

Computer Graphics MTAT.03.015 Raimond Tunnel 2 / 47 Course Information Course Page https://courses.cs.ut.ee/2019/cg/fall Mailing List aine.ati.arvutigraafika@lists.ut.ee Learning Environment (CGLearn) https://cglearn.eu 3 / 47

slide-1
SLIDE 1

Computer Graphics

MTAT.03.015

Raimond Tunnel

slide-2
SLIDE 2

2 / 47

Course Information

  • Course Page https://courses.cs.ut.ee/2019/cg/fall
  • Mailing List

aine.ati.arvutigraafika@lists.ut.ee

  • Learning Environment (CGLearn)

https://cglearn.eu

slide-3
SLIDE 3

3 / 47

Instructors

  • Raimond Tunnel – jee7@ut.ee

Lectures, Basic I, Basic II, JavaScript, C++

  • Jaanus Jaggo – jjaggo@ut.ee

Blending, Procedural Generation, Noise, Game Engines, Blender

  • Ats Kurvet – akurvet@ut.ee

Game Engines, Unreal Engine 4

slide-4
SLIDE 4

4 / 47

Organization

  • 6 credit course
  • Lectures: 15 1.5h = 22.5h = ~0.9 credits

⋅

  • Practice Sessions: 16 1.5h = 24h = ~0.9 credits

⋅

  • Homework: 2.3 credits = ~60h = 15 4h

⋅

  • Project: 40h = 1.5 credits
  • Exam: 2h + 8h = ~0.4 credits
slide-5
SLIDE 5

5 / 47

Organization

  • Grade
  • Homework: 40p

Solve the tasks in CGLearn

  • Project: 30p

Do something fun in a 2-3 person team

  • Exam: 30p

General knowledge from the lectures and CGLearn

slide-6
SLIDE 6

6 / 47

Organization

  • Grade
  • Homework: 40p

Solve the tasks in CGLearn

  • Project: 30p

Do something fun in a 2-3 person team

  • Exam: 30p

General knowledge from the lectures and CGLearn

You can earn more when you solve more tasks.

slide-7
SLIDE 7

7 / 47

Organization

  • Grade
  • Homework: 40p

Solve the tasks in CGLearn

  • Project: 30p

Do something fun in a 2-3 person team

  • Exam: 30p

General knowledge from the lectures and CGLearn

  • Bonus Points – eg APT GG organized game jams
slide-8
SLIDE 8

8 / 47

Organization

  • Lectures – Tuesday, 16:15, r403
  • Practice Sessions
  • Basic I (JS), Basic II – Thursday, 12:15, r003
  • Basic I (C++), Game Engines – Thursday, 14:15, r003
  • Project Presentation – In the exam session. TBA.
  • Exam – In the exam session. TBA
slide-9
SLIDE 9

9 / 47

Organization

  • Lectures – Tuesday, 16:15, r403
  • Practice Sessions
  • Basic I (JS), Basic II – Thursday, 12:15, r003
  • Basic I (C++), Game Engines – Thursday, 14:15, r003
  • Project Presentation – In the exam session. TBA.
  • Exam – In the exam session. TBA

NB! The exam session is in January!

slide-10
SLIDE 10

10 / 47

Project

  • Deadlines and instructions are here:

https://courses.cs.ut.ee/2019/cg/fall/Main/Projects

  • Can be any graphical application, prototype or a research

project (e.g. replicating results from some paper).

  • Extra ideas & time in the Computer Graphics Seminar

(MTAT.03.305) and Computer Graphics Project (MTAT.03.328) courses.

For inspiration see: https://cgvr.cs.ut.ee/wp/index.php/cg-demo-reels/

slide-11
SLIDE 11

11 / 47

Modules

  • Basic I

Geometry, transformations, projection, lighting, texturing

and blending.

  • Basic II

Environment mapping, curves, procedural generation, ray tracing, global illumination, shadows.

  • Game Engines

Graphics in Unreal Engine 4 and 3D modelling in Blender

slide-12
SLIDE 12

12 / 47

Modules

  • You should finish two of the modules to the end
  • You can also attend the other group and do their

tasks for extra points (earning ~60p total).

Week 1 Week 8 Week 16 Deadlines 27.10 In January

slide-13
SLIDE 13

13 / 47

Homework

  • Each week we will cover topics in the practice sessions.
  • Deadlines
  • Basic I – 27.10.2019
  • Basic II, Game Engines – Week before the exam
  • It is recommended, however, to do the homework

weekly, because:

  • You won't fall behind
  • You will get the points sooner
slide-14
SLIDE 14

14 / 47

Homework

  • We start doing the tasks together in the practice.
  • You can probably get more up to speed with the

tasks when attending the practice session.

  • If you miss the practice, then there are instructional

videos for the Basic I and Basic II tasks.

  • Instructional videos for Game Engines TBA.
slide-15
SLIDE 15

15 / 47

Material

  • CGLearn – https://cglearn.eu
  • Material with interactive examples
  • Tasks (homework)
  • In the lectures we will cover similar topics that are

in CGLearn (but not 100% overlapping)

  • In the practice sessions we will discuss the concepts

in tasks and start implementing them.

CGLearn is my Master thesis work. There might be bugs, let me know immediately if you find some. :)

slide-16
SLIDE 16

16 / 47

Material

  • Fundamentals of Computer Graphcis
  • P. Shirley, M. Ashikhmin, S. Marschner, 2009
  • Provides a good and

systematic approach to many topics we cover.

  • Explaines the math behind

the topics.

  • Who is interested in

borrowing it?

slide-17
SLIDE 17

17 / 47

Material

  • Literature page on the CGVR Lab's website:

https://cgvr.cs.ut.ee/wp/index.php/literature/

slide-18
SLIDE 18

18 / 47

Lectures

slide-19
SLIDE 19

19 / 47

Lectures

1) Me talking about the topics, Me answering questions (I do not ask you) 2) Me talking about the topics Class answering the questions (I ask the class) 3) Me talking about the topics You answering the questions (I ask people) 4) You talking about the topics (In small groups)

Each time groups prepare presentations

slide-20
SLIDE 20

20 / 47

Computer Graphics

  • So, what is computer graphics? Applications?
slide-21
SLIDE 21

21 / 47

Computer Graphics

  • Games and entertainment

Deus Ex, 2000 Deus Ex: Human Revolution, 2011

slide-22
SLIDE 22

22 / 47

Computer Graphics

  • Games and entertainment

Deus Ex: Mankind Divided, 2016 Cyberpunk 2077, 2019?

slide-23
SLIDE 23

23 / 47

Computer Graphics

  • Graphical user interfaces (GUI)

Microsoft Word WinDirStat Photoshop

slide-24
SLIDE 24

24 / 47

Computer Graphics

  • Computer Aided Design (CAD)

SolidEdge AutoCAD

slide-25
SLIDE 25

25 / 47

Computer Graphics

  • Scientific simulation visualization

HIV particle

http://www.scientificamerican.com/gallery/prize-winning-3-d-digital-simulation-of-an-hiv-particle/

Parker Solar Probe

https://www.nasa.gov/feature/jpl/jpl-roles-in-nasa-s-sun-bound-parker-solar-probe

slide-26
SLIDE 26

26 / 47

Computer Graphics

  • Data visualization

World ocean currents, NASA

http://deepbluehome.blogspot.com/2012/03/cool-cat-currents.html

World's Biggest Airlines

http://spatial.ly/2012/06/mapping-worlds-biggest-airlines/

slide-27
SLIDE 27

27 / 47

Computer Graphics

  • Simulations

http://en.wikipedia.org/wiki/Flight_simulator Road Planer Simulator (Maanteehöövli simulaator) Estonian Road Museum (Eesti Maanteemuuseum) http://muuseum.mnt.ee/

slide-28
SLIDE 28

28 / 47

Computer Graphics

  • Art

Blithe Certainty by Kerry Mitchell

http://www.fractalartcontests.com/2000/en/entry-052-3.htm

Buddhabrot

https://en.wikipedia.org/wiki/Buddhabrot

See also: http://flam3.com/flame.pdf And: https://screen.aptgg.ee/

slide-29
SLIDE 29

29 / 47

Technologies

  • What to use to make computer graphics?
  • 2D graphics? 3D graphics?
  • Any previous experience?
slide-30
SLIDE 30

30 / 47

Technologies

slide-31
SLIDE 31

31 / 47

Technologies

Lower level technologies and libraries

JavaScript

. Three js

slide-32
SLIDE 32

32 / 47

Technologies

Lower level technologies and libraries

JavaScript C++

. Three js

slide-33
SLIDE 33

33 / 47

Technologies

Lower level technologies and libraries

JavaScript C++

. Three js

High level software

slide-34
SLIDE 34

34 / 47

2D Technologies

< > canvas

Language HTML Element Browser Library Language Basic I, Practice Session Group 1 Basic I, Practice Session Group 2

slide-35
SLIDE 35

35 / 47

3D Technologies

Language API Language Basic I, Practice Session Group 1

, GLFW

Library

. Three js

Library API Basic I, Practice Session Group 2

slide-36
SLIDE 36

36 / 47

OpenGL, WebGL

  • API-s for communicating with the GPU drivers.
  • WebGL is based on OpenGL ES 2 (Embedded

Systems).

  • They have GLSL (Shader Language) which is used

to program code executed on the GPU. It is similar to the C language.

Different calls to GPU

GLSL code

Execute this code...

slide-37
SLIDE 37

37 / 47

OpenGL, WebGL

https://www.khronos.org/assets/uploads/events/Next-Generation-OpenGL-Dec14.pdf

2018 stable

slide-38
SLIDE 38

38 / 47

Standard Graphics Pipeline

slide-39
SLIDE 39

39 / 47

Standard Graphics Pipeline

slide-40
SLIDE 40

40 / 47

Geometry

  • Everything starts with the geometry
  • Geometry defines the 3D objects in the scene

What is depicted here?

slide-41
SLIDE 41

41 / 47

Geometry

  • Although a cube has only 6 faces, we define it as a

set of 12 triangles (12 faces).

  • Why triangles?
slide-42
SLIDE 42

42 / 47

Geometry

  • Triangle very useful scientific facts:
  • Triangle vertices always form a plane
  • Every polygon can be converted to triangles
  • Triangles are easy to rasterize
  • Triangles are convex and simple
  • Three vertices always form a convex and simple triangle

T h i s i s a s c i e n t i f i c t e r m .

slide-43
SLIDE 43

43 / 47

Geometry

  • Convex polygon (kumer hulknurk) –

1) All convex combinations of the vertices are inside the polygon 2) Straight paths to all vertices from any point inside the polygon, are also inside the polygon 3) The polygon is equal to its convex hull 4) All interior angles are ≤ 180°

slide-44
SLIDE 44

44 / 47

Geometry

  • Simple polygon (lihtne hulknurk) – no intersecting edges
  • What is the difference between those triangles?
slide-45
SLIDE 45

45 / 47

Geometry

  • Coordinate system can be left- or right-handed.
  • We usually use the right-handed system.
slide-46
SLIDE 46

46 / 47

Geometry

  • In a right-handed coordinate system, the positive

direction of an angle is counter-clockwise.

This means that the order of polygon vertices will define a front face and a back face.

slide-47
SLIDE 47

47 / 47

What did you learn today? What more would you like to know?

Next time: Geometry (points, vectors, coordinate systems, ...)