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

Video Processing Lab

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

3D viewing framework

• How to view 3D

• Some kind types of 3D projections

• How to do 3D views

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

How to make it ?

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

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?

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 !!

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

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

3D viewing process

Clipping process

Project to projection plane

Viewport transformation

Object (scene) - coordinate

Clipping (Camera) - coordinate

Output device - coordinate

Classical views

Front elevation Elevation oblique Plan oblique

isometric One-point perspective Three-point perspective

Three projections

• Introduction projection & views

• Axonometric projections

• Oblique projections

• Perspective projections

Parallel-projection views

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

architectural

top side front

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)

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?

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

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

(xwmin,ywmin,znear)

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

znorm Normalized view volume

(-1,-1,-1)

(1,1,1)

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

Real case about Axonometric projections

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

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.

Clipping – Oblique projections

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

View volume

Clipping window

Near plane

Far plane

View plane

Oblique-projection view volume

Shear transformation

Transformed Oblique view volume

Clipping window

Moblique,norm=Mortho,norm * Moblique

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

Projection tunnel

Clipping window projection plane view plane

(umav,vmax)

(umin,vmin) CW

Any point ∞

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

View plane

Oblique-projection view volume

Transformed Oblique view volume

No =Sp_prp Tp_prp SHprp Rvrc T(VRP)

Perspective projections

monitor

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

Projection tunnel

Clipping window

projection plane view plane

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

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)

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)

zprp-zvp

View plane

gluPerspective(theta, aspect, dnear, dfar)

Aspect ratio

Sony PSP 4.3”

80mmx15mm

ST-International 19”

(width)x (height)

500mmx485mm ~ 1 : 1

Panasonic 42 ”

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

3D viewing process

Clipping process

Project to projection plane

Object (scene) - coordinate

Clipping (Camera) - coordinate

Output device - coordinate

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

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

Projections (views)

object object projector

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!!

One-point perspective view

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

Two-point perspective views

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

Three-points views

The Music Lesson, c.1662-1665

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)

Positioning of the camera frame

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

• glMatrixMode(GL_MODELVIEW)

• glLoadIdentity()

• glTranslatef()

• glRotatef()

• ….

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

VPN VUP

Camera frame

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)

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

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

What does gluLookAt() do?

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

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

gluLookAt() matrix

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

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

Modelview matrix will copy to mat[]

mat: T mat = V

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

reference

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

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

CG OpenGL 3D viewing-course 7

Design

Advances in OpenGL and OpenGL ES - 开放文档 - Free and ...docs.huihoo.com/.../2012/session_513__advances_in_opengl_and_op… · Advances in OpenGL and OpenGL ES Chris Niederauer

ComputaçãoGráfica - UBIagomes/cg/teoricas/05-projections.pdf · – Projection window. Window-viewport transformation: revisited. Aspect ratio revisited. – OpenGL examples. Title:

Praktikum BKSPP: [2ex] Blatt 2 - ki.informatik.uni ... · OpenGL & GLUT2D-Turtle3D-Turtle OpenGL & GLUT in Haskell OpenGL = Open Graphics Library GLUT = OpenGL Utility Toolkit Auf

CG com OpenGL - Departamento de Engenharia Informáticapsousa/aulas/SGRAI/SGRAI-2006... · Instituto Superior de Engenharia do Porto Paulo Gandra de Sousa psousa@dei.isep.ipp.pt

Cg 9 Opengl Basico

OpenGL 2.0 -- GLSLdindinx.net/OpenGL/cours/opengl2_GLSL.pdf · 2010. 7. 17. · FONCTIONS OPENGL 2.0 Pour supporter les shaders, OpenGL introduit quelques fonctions : glCreateShader()

OpenGL - cg/2008/PDF/kap-21.pdf · OpenGL 21.1 Grundlagen ... • Per Vertex operations transformieren 3D-Welt-Koordinaten nach Vorgabe der syntetischen Ka-mera

OpenGL (2º Parte)mercedes/disciplinas/2019/CG/CG-OpenGL2... · 2019. 4. 5. · 9 OpenGL - Mouse Botões do mouse podem ser programados para responder a cliques e ao movimento do

OPenGL.ppt [Modo de Compatibilidade]smusse/CG/PDF2013_2/OpenGL.pdf · OpenGL –Máquina de Estados OpenGL é uma máquina de estados É possível colocá-la em vários estados, ou

CUDA + OpenGL - Laboratorio de Computación Distribuida ... · 2D y 3D Provee ... 18 OpenGL: ejemplo 4 ... The Cg Tutorial

CG OpneGL 2D viewing & simple animation-course 6

Introdução à Opengl com Java - lcad.icmc.usp.brpaulovic/aulas/CG/slides_novos/...Java_GLSL.pdf · Introdução à Opengl com Java OpenGL OpenGL Ambientep/escrevereexecutarprogramasgráﬁcos

OpenGL - alexander-penev.info · OpenGL - Въведение 2/28 Интернет ... Java – JOGL, OpenGL for Java (GL4Java),

OpenGL: Transforma˘c~oes Geom etricas e Viewing

CG OpenGL polar curves & input display color-course 4

Viewing Pipeline 2D Viewing Pipeline 2D/3Drosane/CG/Viewing.pdf · Uma forma de gerar a matriz composta que ... Queremos obter a matriz de rotação R que alinha os 2 ... Suponha

Viewing & Shading III

コンピュータグラフィックス特論Ⅱ · – 他にもOpenGLの入門書は多数ある – OpenGLでつくる3次元CG & アニメーション（3600円） • 酒井幸市著

OpenGL 시작하기

CG OpenGL line & area-course 3