46
Video Processing Lab 臺灣師範大學數位媒體中心視訊處理研究室 3D Viewing Chen Jing-Fung (2006/12/1) Assistant Research Fellow, Digital Media Center, National Taiwan Normal University Ch7: Computer Graphics with OpenGL 3th, Hearn Baker Ch5: Interactive Computer Graphics 3th, Addison Wesley

CG OpenGL 3D viewing-course 7

Embed Size (px)

DESCRIPTION

Computer GraphicOpenGL - 3D viewing

Citation preview

Page 1: CG OpenGL 3D viewing-course 7

Video Processing Lab 臺灣師範大學數位媒體中心視訊處理研究室

3D Viewing Chen Jing-Fung (2006/12/1) Assistant Research Fellow,

Digital Media Center, National Taiwan Normal University

Ch7: Computer Graphics with OpenGL 3th, Hearn Baker Ch5: Interactive Computer Graphics 3th, Addison Wesley

Page 2: CG OpenGL 3D viewing-course 7

Video Processing Lab

臺灣師範大學數位媒體中心視訊處理研究室

2

3D viewing framework

• How to view 3D

• Some kind types of 3D projections

• How to do 3D views

Page 3: CG OpenGL 3D viewing-course 7

Video Processing Lab

臺灣師範大學數位媒體中心視訊處理研究室

3

3D viewing device

• Virtual-Reality System-Amsterdam

R.G. Belleman, PhD, (application at the company of Sara) http://www.science.uva.nl/research/scs/projects/visualisation/index.php?page=hardware

Page 4: CG OpenGL 3D viewing-course 7

Video Processing Lab

臺灣師範大學數位媒體中心視訊處理研究室

4

How to make it ?

Page 5: CG OpenGL 3D viewing-course 7

Video Processing Lab

臺灣師範大學數位媒體中心視訊處理研究室

5

2D -> 3D

• 2D graphics application and viewing operations transfer positions – The world-coordinate plane -> pixel

positions output plane

– Rectangular boundaries for clipping window • Clip a scene and maps it to device coordinate

• 3D viewing (more choices than 2D) – How to construct a scene

– How to generate views it on output device

monitor

2D view no parallax

Page 6: CG OpenGL 3D viewing-course 7

Video Processing Lab

臺灣師範大學數位媒體中心視訊處理研究室

6

Two eyes game

• Two eyes = two separate vision angle – Close one eye

– Put your free finger to aim “bowling”

– Switch to close another eye

http://www.vision3d.com/stereo.html

Two eyes vision angle is same?

Page 7: CG OpenGL 3D viewing-course 7

Video Processing Lab

臺灣師範大學數位媒體中心視訊處理研究室

7

How to see 3D?

• Two eyes can see 3D – Two images be

captured by two eyes – Images arrive

simultaneously in the back of the brain

– They are united into one picture

http://www.vision3d.com/stereo.html

an object’s solid in three spatial dimensions: width, height and depth -- x, y and z.

A key point of 3D view is depth !!

brain

Page 8: CG OpenGL 3D viewing-course 7

Video Processing Lab

臺灣師範大學數位媒體中心視訊處理研究室

8

Overview 3D viewing concepts

• Object in 3D scene – A set of surfaces (object descriptions)

• Generate views of an object’s surface features

– Closed boundary around the object • Provide routines

– displaying internal components

– Cross-sectional views of a solid object

Page 9: CG OpenGL 3D viewing-course 7

Video Processing Lab

臺灣師範大學數位媒體中心視訊處理研究室

9

Viewing 3D scene

• Set up a coordinate reference for the viewing - “camera” parameters – The coordinate reference defines

• Position and orientation for a view plane or projection plane

– Object descriptions • Transferred to viewing coordinates • Projected onto the view plane

Page 10: CG OpenGL 3D viewing-course 7

Video Processing Lab

臺灣師範大學數位媒體中心視訊處理研究室

10

3D viewing process

Clipping process

Project to projection plane

Viewport transformation

Object (scene) - coordinate

Clipping (Camera) - coordinate

Output device - coordinate

Page 11: CG OpenGL 3D viewing-course 7

Video Processing Lab

臺灣師範大學數位媒體中心視訊處理研究室

11

Classical views

Front elevation Elevation oblique Plan oblique

isometric One-point perspective Three-point perspective

Page 12: CG OpenGL 3D viewing-course 7

Video Processing Lab

臺灣師範大學數位媒體中心視訊處理研究室

12

Three projections

• Introduction projection & views

• Axonometric projections

• Oblique projections

• Perspective projections

Page 13: CG OpenGL 3D viewing-course 7

Video Processing Lab

臺灣師範大學數位媒體中心視訊處理研究室

13

Parallel-projection views

• Orthographic projection: show accurate dimensions – Used in engineering and

architectural

top side front

Page 14: CG OpenGL 3D viewing-course 7

Video Processing Lab

臺灣師範大學數位媒體中心視訊處理研究室

14

multi-view orthographic

• projection plane is parallel to one of the object’s principal faces.

• display at least three views- such as the front, top and right

Plan view (top view)

front view

side view (right view)

Page 15: CG OpenGL 3D viewing-course 7

Video Processing Lab

臺灣師範大學數位媒體中心視訊處理研究室

15

Axonometric projections

• Preserve how many views direct by original object

• Foreshortening: an object appears compressed plane (projected) which extracted by a particular viewpoint

• Dimetric view • Two different foreshortening ratios

• Trimetric view (general case) • Three different foreshortening ratios

• Isometric view • Symmetrical projection of three principal directions

**projected lines is parallel but angles are not

Q: Symmetrical two principal faces?

Page 16: CG OpenGL 3D viewing-course 7

Video Processing Lab

臺灣師範大學數位媒體中心視訊處理研究室

16

Projected vs. original

• Lines are scaled and can find scale ratios

• Angles are not related

• View box-like object on projection plane

• Not look real: – No matter how objectproj is near or far, it has

the same projection

projected

axonometric views are used extensively in architectural and mechanical design

Page 17: CG OpenGL 3D viewing-course 7

Video Processing Lab

臺灣師範大學數位媒體中心視訊處理研究室

17

Clipping window projection

• Orthogonal-projection view volume (view plane) – 2D rectangular clipping

window -> 3D near-far clipping planes (box-like)

Clipping window

Near plane

Far plane

Project

xview zview

yview

(xwmin,ywmin,znear)

Orthogonal-projection view volume (xwmax,ywmax,zfar) ynorm

xnorm

znorm Normalized view volume

(-1,-1,-1)

(1,1,1)

glMatrixMode (GL_PROJECTION) glLoadIdentity() glOrtho(xwmin,xwmax,ywmin,ywmax,znear,zfar)

Page 18: CG OpenGL 3D viewing-course 7

Video Processing Lab

臺灣師範大學數位媒體中心視訊處理研究室

18

Real case about Axonometric projections

• Technically some games (strategy or simulation) use this projection to show object’s distance whether near or far

Page 19: CG OpenGL 3D viewing-course 7

Video Processing Lab

臺灣師範大學數位媒體中心視訊處理研究室

19

Oblique projections

• Oblique views are the most general views – Can make an arbitrary angle with

projection plane • Angles can be preserved

• The most difficult to construct by hand • Bellows camera is flexible to produce

approximations to parallel oblique views

projected

**Oblique view are somewhat unnatural.

Page 20: CG OpenGL 3D viewing-course 7

Video Processing Lab

臺灣師範大學數位媒體中心視訊處理研究室

20

Clipping – Oblique projections

• CG-Oblique projections – Objectworld -> objectrotate -> objectproj

View volume

Clipping window

Near plane

Far plane

Vp

View plane

Oblique-projection view volume

Shear transformation

Transformed Oblique view volume

Clipping window

Moblique,norm=Mortho,norm * Moblique

Page 21: CG OpenGL 3D viewing-course 7

Video Processing Lab

臺灣師範大學數位媒體中心視訊處理研究室

21

Orthogonal projection vectors

• DOP = -VPN

• Vector u & v in plane A – viewPN=uxv/det|uv|

http://www.cmlab.csie.ntu.edu.tw/~robin/courses/

DOP: projection’s direction

VPN: view-plane normal

VUP: view-up vector to this plane

View plane

Plane A v u

VPN: view-plane normal

Page 22: CG OpenGL 3D viewing-course 7

Video Processing Lab

臺灣師範大學數位媒體中心視訊處理研究室

22

Projection tunnel

DOP

VPN

Clipping window projection plane view plane

PRP

VRP

(umav,vmax)

(umin,vmin) CW

Any point ∞

Page 23: CG OpenGL 3D viewing-course 7

Video Processing Lab

臺灣師範大學數位媒體中心視訊處理研究室

23

Orthogonal projection - Oblique

• Translate the VRPclip to the origin • Rotate VRC to projected plane (PRP) • Shear that let the DOP become parallel to the

projected plane (PRPshear) • Translate and scale into the parallel-projection

normal view volume

http://www.cmlab.csie.ntu.edu.tw/~robin/courses/

Clipping window

Near

Far

Vp

View plane

Oblique-projection view volume

Shear

Transformed Oblique view volume

No =Sp_prp Tp_prp SHprp Rvrc T(VRP)

Page 24: CG OpenGL 3D viewing-course 7

Video Processing Lab

臺灣師範大學數位媒體中心視訊處理研究室

24

Perspective projections

monitor

http://groups.csail.mit.edu/graphics/classes/6.837/F04/calendar.html

Page 25: CG OpenGL 3D viewing-course 7

Video Processing Lab

臺灣師範大學數位媒體中心視訊處理研究室

25

Projection tunnel

COP

VPN

Clipping window

projection plane view plane

PRP

VRP

COP

Page 26: CG OpenGL 3D viewing-course 7

Video Processing Lab

臺灣師範大學數位媒體中心視訊處理研究室

26

Depth cueing

• Depth information is important in 3D scene – Easy identify the particular viewing

direction • The front and back of each displayed object

No depth information Downward from above vertex

Upward from below base

Page 27: CG OpenGL 3D viewing-course 7

Video Processing Lab

臺灣師範大學數位媒體中心視訊處理研究室

27

Perspective-projection view volume

Projection reference point

view window

Rectangular Frustum view volume

Near clipping plane

Far clipping plane

θ

(xprp,yprp,zprp)

(xprp,yprp,zvp)

Page 28: CG OpenGL 3D viewing-course 7

Video Processing Lab

臺灣師範大學數位媒體中心視訊處理研究室

28

OpenGL Perspective-Projection (p.p) Function

• Symmetric p.p function

• Four parameters: double or float point • Theta (field-of-view angle): angle between

top and bottom • Aspect ratio: (width/height) • dnear & dfar: negative, because clipping plane

must always be somehow along the –zview axis (behind the view position)

θ/2

zprp-zvp

View plane

gluPerspective(theta, aspect, dnear, dfar)

Page 29: CG OpenGL 3D viewing-course 7

Video Processing Lab

臺灣師範大學數位媒體中心視訊處理研究室

29

Aspect ratio

Sony PSP 4.3”

80mmx15mm

ST-International 19”

(width)x (height)

500mmx485mm ~ 1 : 1

Panasonic 42 ”

16:9

Page 30: CG OpenGL 3D viewing-course 7

Video Processing Lab

臺灣師範大學數位媒體中心視訊處理研究室

30

OpenGL p.p function (2)

• General p.p function

• All parameters: double or float point numbers

• zwnear & zwfar : negative (behind the view position) as tha same as dnear & dfar

• Clipping window can be specified anywhere on the near plane. – Xwmin = -xwmax & ywmin = -ywmax

gluFrustum(xwmin, xwmax, ywmin, ywmax, zwnear, zwfar)

Frustum view volume

Near plane Far plane

Page 31: CG OpenGL 3D viewing-course 7

Video Processing Lab

臺灣師範大學數位媒體中心視訊處理研究室

31

3D viewing process

Clipping process

Project to projection plane

Viewport transformation

Object (scene) - coordinate

Clipping (Camera) - coordinate

Output device - coordinate

Viewport transformation

Page 32: CG OpenGL 3D viewing-course 7

Video Processing Lab

臺灣師範大學數位媒體中心視訊處理研究室

32

3D scene process by CG

• Choose a viewing position (camera) – Point to where camera

(camera position)

• Choose a viewing position (object) – Display a front, back, side,

top, or bottom view

Page 33: CG OpenGL 3D viewing-course 7

Video Processing Lab

臺灣師範大學數位媒體中心視訊處理研究室

33

Synthetic camera

• First, pick a position (object fixed) – Middle of a group of objects – Inside a single object

• Camera located in COP – Focus on camera’s motion – Rotate it – Choose a parallel or

perspective projection • Eliminate parts of a scene along

the line of sight

COP

Page 34: CG OpenGL 3D viewing-course 7

Video Processing Lab

臺灣師範大學數位媒體中心視訊處理研究室

34

Projections (views)

object object projector

Projection plane

Projection plane

projector

Parallel projection (views): •Direction of projection (DOP)

Perspective projection (views): •center of projection (COP) •More realistic like our eyes and camera lens •View space: near & far

finite COP infinite COP

**depth!!

Page 35: CG OpenGL 3D viewing-course 7

Video Processing Lab

臺灣師範大學數位媒體中心視訊處理研究室

35

One-point perspective view

http://www.richardmurphyarchitects.com/projects/images

Page 36: CG OpenGL 3D viewing-course 7

Video Processing Lab

臺灣師範大學數位媒體中心視訊處理研究室

36

Two-point perspective views

http://www.cityofmoorhead.com/whats_new/downtown/Perspective.jpg

Page 37: CG OpenGL 3D viewing-course 7

Video Processing Lab

臺灣師範大學數位媒體中心視訊處理研究室

37

Three-points views

The Music Lesson, c.1662-1665

Page 38: CG OpenGL 3D viewing-course 7

Video Processing Lab

臺灣師範大學數位媒體中心視訊處理研究室

38

Multi-perspective views

• Advantage – Objects can display multi-view and show

the relation about near and far • Look realistic

• Disadvantage – Object has not parallel lines – Difficult by hand ( easy by computer

design)

Page 39: CG OpenGL 3D viewing-course 7

Video Processing Lab

臺灣師範大學數位媒體中心視訊處理研究室

39

Positioning of the camera frame

• Camera can be move by designer – Follow the rotation steps

• glMatrixMode(GL_MODELVIEW)

• glLoadIdentity()

• glTranslatef()

• glRotatef()

• ….

COP

Page 40: CG OpenGL 3D viewing-course 7

Video Processing Lab

臺灣師範大學數位媒體中心視訊處理研究室

40

Two viewing APIs

• Only one view direction is a little unsatisfying – Starting points in the world frame

• Describe the camera’s position and orientation in this

• glLoadIdentity() -> set_view_reference_point(x,y,z)

• The orientation of the camera divide two parts – VPN: set_view_plane_normal (xn, yn, zn)

– VUP: set_view_up(xvup, yvup,zvup)

• Do transformation operators

VRP

u

v

VPN VUP

Camera frame

Page 41: CG OpenGL 3D viewing-course 7

Video Processing Lab

臺灣師範大學數位媒體中心視訊處理研究室

41

Look-at function

• A more direct method is appropriate the camera

• (xeye, yeye, zeye) = world-

coordinate position P0 Ex: (0,0,0)

• VUP= (xup, yup, zup) Ex: y-axis (0,1,0)

• VRP=(xref, yref, zref) = projection position Pref Ex: (0,0,-1)

• VPN=P0-Pref

camera

monitor

(xeye, yeye, zeye)

(xup, yup, zup) (xref, yref, zref) gluLookAt(xeye, yeye, zeye, xref, yref, zref, xup, yup, zup)

**viewing direction is along to any axis (maybe z-axis or –z-axis)

Page 42: CG OpenGL 3D viewing-course 7

Video Processing Lab

臺灣師範大學數位媒體中心視訊處理研究室

42

Set up a typical camera

• Cameras are often set to “look down” on a scene from some nearby position

• Ex: eye=(4,4,4), look=(0,1,0), upward up=(0,1,0), view volume width=6.4 & height=4.8 (aspect ratio = 640/480), near =1 & far =50

look at

y

z

x

glMatixMode(GL_PROJECTION);//set the view volume

glLoadIdentity();

glOrtho(-3.2,3.2,-2.4,2.4, 1,50);//or use Frustumview volume

glMatrixMode(GL_MODELVIEW);//place and aim the camera

glLoadIdentity();

gluLookAt(4,4,4,0,1,0,0,1,0);

Page 43: CG OpenGL 3D viewing-course 7

Video Processing Lab

臺灣師範大學數位媒體中心視訊處理研究室

43

What does gluLookAt() do?

• gluLookAt() builds a matrix (V) that converts world coordinates into eye coordinates (eyeu,v,n).

look

v up

n

u eye

n = eye-look u = upxn v = nxu

0 0 0 1

x y z x

x y z y

x y z z

u u u d

v v v d

n n n d

V

gluLookAt() matrix

(dx,dy,dz)=(-eye·unor, -eye·vnor, -eye·nnor)

Page 44: CG OpenGL 3D viewing-course 7

Video Processing Lab

臺灣師範大學數位媒體中心視訊處理研究室

44

Inquiring about values in a matrix in OpenGL

• gluLookAt(4,4,4,0,1,0,0,1,0); – Eye: (4,4,4), look: (0,1,0), up: (0,1,0)

– To see what is stored in the modelview matrix • Define an array GLFloat mat[16]

• Use glGetFloatv(GL_MODELVIEW_MATRIX,mat)

n = eye-look u = upxn v = nxu

(dx,dy,dz)=(-eye·unor, -eye·vnor, -eye·nnor)

0 0 0 1

x y z x

x y z y

x y z z

u u u d

v v v d

n n n d

V

Modelview matrix will copy to mat[]

mat: T mat = V

Page 45: CG OpenGL 3D viewing-course 7

Video Processing Lab

臺灣師範大學數位媒體中心視訊處理研究室

45

Homework & next class

• Homework – A. Multi-points views, B. 3D projection

• create one polyhedron such as cube or others • A. multi-points views and observe what happen

– Perspective and Axonometric projections

• B. 3D projection – Change x, y, z (axis) projection and observe what

happen

• Next class will introduce how to construct 3D object

Page 46: CG OpenGL 3D viewing-course 7

Video Processing Lab

臺灣師範大學數位媒體中心視訊處理研究室

46

reference

• http://graphics.im.ntu.edu.tw/~robin/courses/

• http://www.cs.brown.edu/courses/cs123/lectures.shtml