Interactive Computer Graphics

(1)

Interactive Computer Graphics

Ming Ouhyoung, 歐陽明 Professor,

Dept. of CSIE, and GINM NTU

(2)

Introduction

• 課號 : (50402) 526 U0340

• 課名 : 計算機圖學

• 英文課名 : Interactive Computer Graphics

• 授課 : 歐陽明

• Textbook

– Interactive Computer Graphics: A Top-Down Approach with WebGL, 作者 Edward Angel, Dave Shreiner, 7^th edition, Pearson 出版 , ( 開發代理 )

• Suggested readings

– Proceedings of ACM SIGGRAPH Computer Graphics/ACM Trans. On Graph ics

– IEEE Computer Graphics & Applications (CG&A) – IEEE Trans. on Visualization and Computer Graphics

(3)

ICG Syllabus 1. Introduction

1. What is interactive computer graphics, GUI?

2. What is virtual reality, and augmented reality?

3. What is OpenGL/WebGL and shading language?

2. Viewing in 3D and Graphics Programming

1. Parallel projection, Perspective projection etc.

2. First program: Sample codes in WebGL

3. Basic raster graphics algorithms for drawing 3D primitives 1. 3D primitives (Points and Vectors)

2. Geometrics Transformations, Viewing in 3D, 3D clipping 4. Visible-surface determination

1. Z-buffer algorithm

2. Binary space partition trees (BSP) 3. Visible-line determination

5. Illumination and Shading

1. The Phong Reflection Model

2.. Flat shading , Gouraud shading , Phong shading

3. Bilinear interpolation for color and vertex normal interpolation

(4)

Syllabus

6. Implementation of a Renderer

Graphics Pipeline: from modeling to display

Implementation by WebGL, Unity3D (game engine) 7. Global rendering--Photo-realistic graphics

1. Recursive ray tracing ( 光線追蹤法 )

2. Volume rendering: ( 體積顯像法 ) marching cubes method etc.

3. Radiosity method: ( 熱輻射法 ) progressive refinement approach 8. Curves and surfaces: Bezier curves, B-Splines, Spline surfaces

9. Graphics Hardware and Graphics Processing Unit (GPU), GPGPU, APU, De ep Learning Acceleration

10. Implementation and practice 1. Graphics data set

2. How to quickly construct the 3D model data of the world for 3D gra phics/AR/VR?

3. Modeling methods and tools

(5)

Learning experience

• Engage Students Immediately with 3D Material: A top-down, p rogramming-oriented approach allows for coverage of engaging 3D material early in the course so students immediately begin t o create their own graphics.

• Introduce Computer Graphics Programming with WebGL and J avaScript: WebGL is not only fully shader-based– each applicati on must provide at least a vertex shader and a fragment shader –but also a version that works within the latest web browsers.

• Create games by example: to modify an existing program in Uni ty3D, and then create an interesting game/animation of your o wn.

(6)

Grading

• Homework: 1/3

• Mid-term exam: 1/3

• Term project: (1/3) a team with one to three s tudents.

• Oral presentation of term project (3 to 5 minut es): a competition graded by all students, with top 1/5 selected as the extra points teams.

(7)

Interactive Computer Graphics 2017 TERM PROJECT LISTING

1. Animation of articulated figures (linked) 2. Rigid body animation (Newton’s laws)

3. A viewing system for curved surfaces with textures (curves and pa tches)

4. *Two pass or Radiosity method (source codes available)

5. Ray tracing method for a room / many teapots with different mat erials (source codes available)

6. *Volume rendering for a set of tomography slides ( 台大醫院 , 榮總資料 etc.)

7. Image morphing (2D)

(8)

Interactive Computer Graphics 2017 TERM PROJECT LISTING

8. Sketch system for animation (Teddy system) 9. Oil painting and water color effects for images

10.3D morphing and animation with skeleton mapping

11.Motion retargeting (motion of cats likes that of a human) 12.Hardware Cg acceleration research and applications

13.Beautifying Images (Color harmonization, face beautification)

14.360 Video, Omni-directional stereo video (360 VR video) 15.Others—Human Computer Interface, VR/AR Apps, Instal

lation Arts, Water Rendering etc.

Reference papers available.

*:considered difficult

(9)

Textbook Version Difference

• Old version (version 4.0 to 6.0 etc) vs. 7^th version (WebGL)

• 7^th version (WebGL): written in JavaScript, Compatible wit h OpenGL ES2.0 and HTML 5.0

• JavaScript Syntax: http://www.w3schools.com/js/js_synta x.asp

Example codes: Index of /~angel/WebGL/7E/02 6^th Version:

• Use of C++ instead of C

• Introduction to Volume Rendering

• Compatible with OpenGL3.1

(10)

Computer Graphics: vs.

Image Processing

Computer Vision, Pattern Recognition

(11)

Linear vs. Spiral model in teaching

Chap 1 Chap 2

…

Chap N

(12)

The Advantage of Interactive Graphics

• One of the most natural means of communica ting with a computer.

• A picture is worth ten thousand words.

• A MOVING picture is worth ten thousand STAT IC ones.

eg. movie, motion dynamics (flight simulators)

• Graphics User Interfaces

(13)

What's wrong with this hand sketched teapot?

And a textbook?

A textbook?

(14)

The legendary Utah teapot

(UNC professor Henry Fuchs holds the first one)

(15)

What's wrong with this teapot?

• 曲面與塑形 (curved surfaces & modeling)

• 隱藏面 / 線 (hidden surfaces / lines)

• 著色與打光 (shading & lighting)

• 透視 (perspectives )

• 材質 (texture )

• 陶壺 (pottery) ，磁壺 (ceramic) ，塑膠壺 (plas tic) ，銅壺 (copper) ，紙壺 (paper)

• What's the solution? --> research areas in computer

graphics

(16)

Expected Capabilities

• Transformation & Clipping

• User Interface design & real time manipulation

• A New Car Design

• Shading & Lighting/ Curved surfaces

• Wire frame, depth cueing,

Raster graphics, hidden surface removal

• Advanced Illumination:

Ray Tracing, Radiosity, Volume Rendering

• GPU programming (OpenGL shading language), and WebGL

• Can do graphics animation, and design for Virtual Reality and Augm ented Reality applications

(17)

Unity3D: game engine with editors

(18)

Father of Computer Graphics:

Ivan E. Sutherland

(19)

2015/5 speech, at UNC CS 50^th celebration

(20)

Dr. Ivan E. Sutherland

Ivan Sutherland is considered by many to be the creator of Compute r Graphics. Starting with his Ph.D. thesis, Sketchpad, Sutherland ha s contributed numerous ideas to the study of Computer Graphics a nd Computer Interaction. Ivan introduced concepts such as 3-D co mputer modeling, visual simulations, computer aided design (CAD) and virtual reality.

Education

Ph.D., Massachusetts Institute of Technology, 1963;

M.S. EE, California Institute of Technology, 1960;

B.S. EE, Carnegie Institute of Technology (now Carnegie Mellon University), 1959;

Honorary MA, Harvard University, 1966;

(21)

Ivan Sutherland, II

Academia Experience

Professor, Harvard University, 1966;

Professor, University of Utah, 1968;

Chairman of Computer Science Department, California Institute of Technology, 19 74;

Professional Experience

Electrical Engineer and First Lieutenant, National Security Agency, 1963;

Researcher, Defense Department's Advanced Research Projects Agency, 1964;

Co-Founder, Evans and Sutherland, 1968;

Researcher, RAND Corporation, 1974

Vice-President and Technical Director, Sutherland, Sproull and Associate s, 1980;

Vice-President and Sun Fellow, Sun Microsystems, 1990;

(22)

James Foley (lower right, first textbook in CG),

Andries Van Dam (upper right, first textbook in CG),

Brian Barsky (the rest, line clipping)

(23)

Foley and Van Dam

: first popular CG textbook

(24)

Turner Whitted (upper middle, ray tracing), Donald Greenberg( lower right, radiosity)

(25)

Frederick P. Brooks, Jr. 2006/8 Siggraph

(Turing Award 1999, 工程院士 , 科學院士 , IBM 360/370 chief architect, molecular vi sualization, 照片右 1, 馬萬鈞 , Google/Weta Digital, 右二 , 林奕成 , 交

大 , 左一 , 葉正聖 , 銘傳 )

(26)

Fred Brooks Jr., 2015/5

(27)

Henry Fuchs, Pixel-Planes ^2015/5

Computer Graphics Achievement Award, 1992

member of National Academy of Engineering ^{( 美國工程院士 )}

(28)

Tomoyuki Nishita,

Rendering, 2011/11 Steven Coons Award 2005, major Asian CG researcher

(29)

CG Electronic Theater/Animation

^DEM

O

1. Luxo Jr. (1986 Siggraph, Pixar, The first Oscar 3D Animated short film Academy Award) : demo

2. The Centrifuge Brain Project (2012): demo 3. Siggraph Trailer 2017: demo

4. Siggraph 2016 (Accidents, Blunders and Calamities) : demo

5. Selected Sigraph Electronic Theater Titles: See my list of the interesting trailers/ titles

Selected Best of Taiwan

1. Early 2D animation: ^宏廣 demo (Oscar Academy award)

曾經是全世界最大的單一動畫影片代工廠

2. Cubic Tragedy : demo^{( 台科大 )}

3. Heavy Duty : demo ( 太極影音 DigiMax Inc.)

(30)

Technology DEMO

1. Mirror system (for dressing) : demo 2. Da Vinci Surgical System: demo

3. Realistic Human (Turing test): Emily_Final

4. Flight simulator : demo

5. Facial animation: Face_Shift_Ming,

6. Tracking: ANIM1_LIN_YI_C, TRACK_LIN_YI_C,

7. Motion capture: Mocap_skating (Tai-chi, Boxing) 太極拳

8. Animal cloning (Retargeting): ^demo

9. Eye surgery simulator: CatAR system: ^demo

(31)

GPU

• In the fourth quarter of 2008, 38.5 million desktops shipped, and 15.2 million dis crete GPUs were sold, meaning that almost 40 percent of desktops shipped with discrete GPUs.

• The GPU market has been doing very well despite the economic turmoil. “an annu al increase of 22.5 percent and a quarter to-quarter increase of almost 18 percent .” (2008)

• According to the report, this quarter, the three giant chipmakers are holding 97.8 percent of the market share, with Intel at 49.4 percent, Nvidia at 27.8 percent, an d AMD at 20.6 percent.

• Finally, both major CPU vendors plan to offer, well in advance of 2012, CPUs with onboard GPUs.

Reference sites: http://3dshaders.com

(32)

OpenGL history

• OpenGL 1.0

– (1993) fixed-function configurable pipeline

• OpenGL 2.0

– (9/2004) open up the processing pipeline for user contr ol by providing programmability for both vertex process ing and fragment processing.

• OpenGL 3.0

– (8/2008)portions of OpenGL were marked “deprecated”

, setting the stage for further streamlined specification s.

(33)

RenderMan Shading Language and OpenGL S hading Language

Pixar published RenderMan in 1988,

1. RenderMan shading language is similar to OpenGL S hading Language

2. RenderMan is similar to OpenGL

3. OpenGL shading language closely maps to today’s c ommercial graphics hardware

4. RenderMan have been typically software based.

5. OpenGL Shading Language can be thought of as a d escendant of the RenderMan shading language

(34)

Interface variables to a shader

• Uniform qualifiers:

– Uniform: changes less frequently, – Specified outside of a shader

• In qualifiers:

– In: input interface for a shader, – Frequently modified data

• Out qualifiers:

– Out: The vertex shader writes the per-vertex values to be interpolated to an OUT variable.

(35)

WebGL

See “WebGL and OpenGL” Powerpoint file from my course site.

And “Introduction to Computer Graphics with W ebGL”

(36)

GPU introduction

• See my document page103_UBC_GPU

(37)

DEMO: GPU shader and

SIGGRAPH animation from Taiwan

• See my speech slide

• IPO of Alibaba Inc., and its impact on Taiwan IT companies.

(38)

Definition

Pixel:

– a screen consists of N x M pixels

Image Frame Buffer:

– an array of data in memory mapped to screen

Color:

– RGB model:

– Indexed color, 8 bit/pixel: 256 colors

– Reduced color, 16 bit/pixel: R 5 bits, G 5 bits, B 5 bits, 1 bit overlay – True color, 24 bit/pixel: R,G,B each 8 bit - 32 bit/pixel, including trans

parency, light source etc.

Dithering ( 抖動著色 )

– (using 2⁸ colors to approximate 2¹⁶ colors) – halftone approximation: 網點著色

(39)

Dithering

(40)

Human Factors

• Visual acuity: eye’s ability to distinguish two points of light is limited to 1.5 – 2.0 mm at a distance of 10 me ters. (or 2 microns on the retina)

• Sound: at 0 degree Celsius, travels at 331 meters per second

• Hearing range for a young healthy person, 20Hz to 20 KHz

• Tactile: (receptors, Pacinian corpuscles) respond to fr equencies 30-700Hz

PS: Pacinian corpuscles( 感覺神經末梢一種層狀囊包 )

(41)

1000 元鈔票背面動物

台灣帝雉、黑長尾雉

(42)

(Floyd-Steinberg) Error Diffusion Dithering

• Error diffusion pattern:

(43)

Error Diffusion Dithering: example

• How to approximate such an array if we have elements of the form 2xN only?

(i.e. 0,2,4,6,8,10, etc.) (initial approximation

• by lower bound)

























































x x

x

x x

x 3 3/8 1 82/ 64

64 / 33 5

8 / 3 7 6

1 1

1 2

2

4 6

6

















7 8

5

3 1

3

5 7

7

(44)

Modification of dithering

(initial approximation by lower bound)

















7 8

5

3 1

3

5 7

7

































 



















x x

x

x x

x 3 3/8 1 82/ 64

64 / 33 5

8 / 3 7 6

1 1

1 0

2

4 6

6

(45)

Impressionism

• Impressionist painting characteristics include r elatively small, thin, yet visible brush strokes,

(46)

Geometrical Transformation

Why homogeneous coordinate system?

Translation

–P'=T + P ... (I) Scaling

–P'=S x P ... (II) Rotation

–P'=R x P ...(III)

T : translation matrix S : scaling matrix

R : rotation matrix

(II) & (III) are multiplications

(47)

3D Rotation & Translation

(48)

Rotation axis: X, Y, Z

(49)

Geometrical Transformation

• To be able to compose transformations, each point (x,y,z) is represented by (x,y,z,w) where w is usually 1. So, translation becomes

 





 





 





 







 





 





1 1

0 0

0 1 0

0 0 1

0 0 0

1 1 '

' '

z y x dz

dy dx z

y x

dx x

x '  

(50)

3D rotation











 



1 0

0 0

0 1

0 0

cos sin

0 0

sin cos

)

( T T

T T

T R_z













 

1 0

0 0

0 cos

sin 0

0 sin

cos 0

0 0

0 1

)

( T T

T T T

R_X













 

1 0

0 0

0 cos

0 sin

0 0

1 0

0 sin

0 cos

)

( T T

T T

T R_Y

(51)

3D Translation & Scaling

• Translation

• Scaling



























1 1

0 0

0

1 0

0

0 1

0

0 0

1 )

, ,

( z

y x

d d d d

d d

T

z y x

z y

x



























1 1

0 0

0

0 0

0

0 0

0

0 0

0 )

, ,

( z

y x

S S

S

z y

x

z y

x

(52)

Scaling

S = S(s_x, s_y, s_z) =

x’=s_xx y’=s_yy z’=s_zz p’=Sp

Expand or contract along each axis (fixed point of origin)

Angel and Shreiner: Interactive













1 0

0 0

0

0 0

0

0 0

0

z y

x

s s

s

(53)

53

Reflection

corresponds to negative scale factors

original s_x = -1 s_y = 1

s_x = -1 s_y = -1 s_x = 1 s_y = -1

Angel and Shreiner: Interactive Computer Graphics 7E © Addison-

(54)

More on Geometrical Transformations

• Affine transformation

– preserving parallelism of lines, but not lengths and angles.

– Rotation, translation, scaling and shear transformations ar e affine.

• Shear ( 剪力 )















 



































1 1

1 0

0

0 1

0

0 1

y ay x

y x a

(55)

3D shear

 





 







1 0

0 0

0 1

0 0

0 1

0 0 0

1 )

,

(

^y

x

y x

xy

SH SH SH

SH

(56)

Shear

• Helpful to add one more basic transformation

• Equivalent to pulling faces in opposite directions

(57)

Rotation by shearing,

a 2D example

(58)

Transformation Matrix

Any number of rotating, scaling, and transition c an be multiplied together!

Post-multiplication vs. pre-multiplication

A

T

z y

z x y x

A [ 1 ]

1 

 





 





(59)

Concatenation of transformations

Let

• In OpenGL, the syntax are

• The Rule in OpenGL/WebGL:

• The transformation specified most recently is the one applied first

Transformation OpenGL Syntax Examples

Rotation glRotatef(angle, vx, vy, vz) glRotatef(45.0, 1.0, 0.0, 0.0)

Translation glTranslatef(dx, dy, dz) glTranslatef(-4.0, -5.0, -6.0) Scaling glScalef(sx, sy, sz) glScalef(2.0, 1.0, 1.0)

p CBA q



))) (

(

C B A p q



MP q

CBA

M  , 

(60)

Transformations: the syntax in WebGL are

• Var a = rotate (angle, direction)

• Var b = rotateX(angle) angle: in degrees

• Var e = scale(scaleVector)

• Var f = translate(translateVector) a, b, e, f: matrix type

Rotations are around a fixed point at the origin.

(61)

61

Concatenation

• We can form arbitrary affine transformation matrices b y multiplying together rotation, translation, and scaling matrices

• Because the same transformation is applied to many ve rtices, the cost of forming a matrix M=ABCD is signific ant compared to the cost of computing Mp for many v ertices p

• The difficult part is how to form a desired transformati on from the specifications in the application

(62)

Objectives

• Learn how to carry out transformations in We bGL

– Rotation

– Translation – Scaling

• Introduce MV.js transformations

– Model-view – Projection

(63)

63

Current Transformation Matrix (CTM)

• Conceptually there is a 4 x 4 homogeneous coordinate matrix, the current transformation matrix (CTM) that is part of the state and is applied to all vertices that pass down the pipeline

• The CTM is defined in the user program and loaded int o a transformation unit

CTM

vertices vertices

p C p’=Cp

(64)

CTM operations

• The CTM can be altered either by loading a new CTM o r by postmutiplication

Load an identity matrix: C  I Load an arbitrary matrix: C  M Load a translation matrix: C  T Load a rotation matrix: C  R Load a scaling matrix: C  S

Postmultiply by an arbitrary matrix: C  CM Postmultiply by a translation matrix: C  CT Postmultiply by a rotation matrix: C  C R Postmultiply by a scaling matrix: C  C SAngel and Shreiner: Interactive

(65)

65

Rotation About a Fixed Point other than the Origin

Move fixed point to origin Rotate

Move fixed point back M = T(p_f) R(q) T(-p_f)

(66)

Reversing the Order

We want C = T ^–1 R T

so we must do the operations in the following order C  I

C  CT ^-1 C  CR C  CT

Each operation corresponds to one function call in the program.

Note that the last operation specified is the first executed in the program

(67)

67

CTM in WebGL

• OpenGL had a model-view and a projection matrix in the pipeline which were concatenat ed together to form the CTM

• We will emulate this process

(68)

Using the ModelView Matrix

• In WebGL, the model-view matrix is used to – Position the camera

• Can be done by rotations and translations but is often ea sier to use the lookAt function in MV.js

– Build models of objects

• The projection matrix is used to define the view volum e and to select a camera lens

• Although these matrices are no longer part of the Ope nGL state, it is usually a good strategy to create them i n our own applications

q = P*MV*pAngel and Shreiner: Interactive

(69)

69

Rotation, Translation, Scaling

var r = rotate(theta, vx, vy, vz) m = mult(m, r);

var s = scale( sx, sy, sz)

var t = translate(dx, dy, dz);

m = mult(s, t);

var m = mat4();

Create an identity matrix:

Multiply on right by rotation matrix of theta in degrees where (vx, vy, vz) define axis of rotation

Also have rotateX, rotateY, rotateZ Do same with translation and scaling:

(70)

Example

• Rotation about z axis by 30 degrees with a fixed point o f (1.0, 2.0, 3.0)

• Remember that last matrix specified in the program is t he first applied

var m = mult(translate(1.0, 2.0, 3.0), rotate(30.0, 0.0, 0.0, 1.0));

m = mult(m, translate(-1.0, -2.0, -3.0));

(71)

71

Rotation About a Fixed Point other than the Origin

Move fixed point to origin Rotate

Move fixed point back M = T(p_f) R(q) T(-p_f)

(72)

Execution in Browser

(73)

Home demo: WebGL

• Homework demo provided by our TA DEMO

• Homework demo by previous students DEMO1

DEMO2

(74)

The Window-to-Viewport transformation

• World coordinate v.s. Screen coordinate

(75)

Viewing in 3D

• CW:

– Center of the window

• VRP:

– View Reference Point

• VPN:

– View-Plane Normal

• DOP:

– Direction of Projection

(76)

Viewing in 3D (eye at 0,0,-d)

0 ,

, ,











 

p p

p

p p

z Z Y y

z X x

d z

y d

Y d

z x d

X

(77)

Viewing in 3D: in matrix form

   

.

1 1

) ,

0 , ,

( )

, ,

(

1 1 1 1

0 0

1 0

0 0

0 1

'' '' ''

' '

' ''

'' '

' '

' ' '

ely perspectiv

Z Y

X to

d transforme is

z y

x So

w w w

y w

Z x Y

X Let

Z Y X z

y x

w d z y x

p p

p































































(78)

Clipping Lines

(see building walkthrough video)

Why clipping? inside building, closer view Cohen-Sutherland Line - Clipping algorithm

• Trivial rejection:

if logical AND of the codes of the endpoints is not zero

• New segments created:

replacement by intersection

(79)

Clipping Lines, line U = (A, B) to (C,D)

• Conditions to set a bit to 1, when input value A is:

Larger than Xmax

Smaller than X^min, when input value B is Larger than Ymax

Smaller than Y^min,

(80)

Clipping line: calculate intersection points

(81)

Clipping of 3D polygons

(see 3D clipping powerpoint)

• Scissoring ----> draw only those lying within th e rasterized clip region

• Practical: If we are within a building with many rooms, how to reduce the polygons to be proc essed? (video)

(82)

Animation: double buffer

• If left ready, then show left, draw right buffer n ow therefore, no flickering

(83)

One Point Perspective VS. Two Point Perspective VS. Three Point Perspective

Perspective projections are categorized by their number of principal vanishing points.

--> Number of axes the projection plane cuts

(84)

Two Point Perspective

(85)

Two-point perspective

(86)

Moving Point Perspective( 北宋 , 張擇端 ,

見 DEMO)

(87)

• Aseem Agarwala. Maneesh Agrawala, Michael Cohen, David Salesin, Richard Szeliski, “Photo graphing Long Scenes with Multi-Viewpoint Pa noramas”, SIGGRAPH 2006

(88)

One example

(89)

• Ordinary pictures are 3 point perspectives.

(90)

New graphics programming:

WebGL self-learning

• How?

(91)

WebGL demo and codes

• Using Google to search for the key words: “WebGL experimen ts”

• Chrome WebGL experiments

• Run on your Android/iOS phones, iPad, Windows NB etc. usin g native browser, or Chrome.

• Try “newest” selections  Jelly fish

• Try “oldest” selection -> Field (1000 grass blades blowing by wind). Speed measurements: iPad Air plus, is running at 30 fr ames while my Android smartphone HTC M8x is running at 20 frames per second.

(92)

Source codes

• Learning WebGL (WebGL lessons, Tony Parisi editor in chief )

• It also has Chinese version!

• DEMO of WebGL codes for homework 1

https://www.csie.ntu.edu.tw/~ming/courses/icg/WebGL_DEM O/DEMO1

/

https://www.csie.ntu.edu.tw/~

ming/courses/icg/WebGL_DEMO/DEMO2/

https://www.csie.ntu.edu.tw/~

(93)

Starting point: Simple triangles

• Triangle

vertex1_X vertex1_Y vertex1_Z normal1_X n ormal1_Y normal1_Z

(94)

• COLOR

• Triangle

frontcolor_R frontcolor_G frontcolor_B backcolor_

R backcolor_G backcolor_B

vertex1_X vertex1_Y vertex1_Z normal1_X normal 1_Y normal1_Z

(95)

One real example

Triangle

255 255 255 250 0 0

595.000000 453.000000 40.000000 0.000000 1.000000 0.000000

482.000000 453.000000 0.000000 0.000000 1.000000 0.000000

482.000000 453.000000 40.000000 0.000000 1.000000 0.000000

COLOR 　

(96)

To save space, Winged Edge Representation

• In computer graphics, the winged edge data structure is a way to represent

polygon meshes in computer memory. It is a ty pe of boundary representation and describes both the geometry and topology of a model. T hree types of records are used: vertex records, edge records, and face records.

(97)

Representation

(98)

How to draw (render) triangles

(99)

(100)

(101)

(102)

(103)

(104)

Standard Graphics Pipeline

(105)

Advanced rendering methods that usually cannot b e easily implemented by standard graphics pipeline

• Ray Tracing ( 光線追蹤法 )

• Volume Rendering

• Radiosity ( 熱輻射法 )

• Photon Mapping

(106)

Volume Rendering: result images

(107)

(108)

What is still missing in ray-traced images?

• Diffuse to diffuse reflection?

(109)

Interactive Computer Graphics