Lecture 2: Digital Drawing · CS184/284A Ren Ng OpenGL/Direct3D Edge Rules When sample point falls...
Transcript of Lecture 2: Digital Drawing · CS184/284A Ren Ng OpenGL/Direct3D Edge Rules When sample point falls...
![Page 1: Lecture 2: Digital Drawing · CS184/284A Ren Ng OpenGL/Direct3D Edge Rules When sample point falls on an edge, the sample is classified as within triangle if the edge is a “top](https://reader033.fdocuments.us/reader033/viewer/2022041918/5e6ac04145c99756985e9122/html5/thumbnails/1.jpg)
Computer Graphics and Imaging UC Berkeley CS184/284
Lecture 2:
Digital Drawing
![Page 2: Lecture 2: Digital Drawing · CS184/284A Ren Ng OpenGL/Direct3D Edge Rules When sample point falls on an edge, the sample is classified as within triangle if the edge is a “top](https://reader033.fdocuments.us/reader033/viewer/2022041918/5e6ac04145c99756985e9122/html5/thumbnails/2.jpg)
Ren NgCS184/284A
Today: Rasterizing Triangles into Pixels
Life of Pi (2012)
![Page 3: Lecture 2: Digital Drawing · CS184/284A Ren Ng OpenGL/Direct3D Edge Rules When sample point falls on an edge, the sample is classified as within triangle if the edge is a “top](https://reader033.fdocuments.us/reader033/viewer/2022041918/5e6ac04145c99756985e9122/html5/thumbnails/3.jpg)
Drawing Machines
![Page 4: Lecture 2: Digital Drawing · CS184/284A Ren Ng OpenGL/Direct3D Edge Rules When sample point falls on an edge, the sample is classified as within triangle if the edge is a “top](https://reader033.fdocuments.us/reader033/viewer/2022041918/5e6ac04145c99756985e9122/html5/thumbnails/4.jpg)
CNC Sharpie Drawing Machine
Aaron Panone with Matt W. Moorehttp://44rn.com/projects/numerically-controlled-poster-series-with-matt-w-moore/
![Page 5: Lecture 2: Digital Drawing · CS184/284A Ren Ng OpenGL/Direct3D Edge Rules When sample point falls on an edge, the sample is classified as within triangle if the edge is a “top](https://reader033.fdocuments.us/reader033/viewer/2022041918/5e6ac04145c99756985e9122/html5/thumbnails/5.jpg)
Laser Cutters
![Page 6: Lecture 2: Digital Drawing · CS184/284A Ren Ng OpenGL/Direct3D Edge Rules When sample point falls on an edge, the sample is classified as within triangle if the edge is a “top](https://reader033.fdocuments.us/reader033/viewer/2022041918/5e6ac04145c99756985e9122/html5/thumbnails/6.jpg)
Oscilloscope
![Page 7: Lecture 2: Digital Drawing · CS184/284A Ren Ng OpenGL/Direct3D Edge Rules When sample point falls on an edge, the sample is classified as within triangle if the edge is a “top](https://reader033.fdocuments.us/reader033/viewer/2022041918/5e6ac04145c99756985e9122/html5/thumbnails/7.jpg)
Ren NgCS184/284A
Cathode Ray Tube
![Page 8: Lecture 2: Digital Drawing · CS184/284A Ren Ng OpenGL/Direct3D Edge Rules When sample point falls on an edge, the sample is classified as within triangle if the edge is a “top](https://reader033.fdocuments.us/reader033/viewer/2022041918/5e6ac04145c99756985e9122/html5/thumbnails/8.jpg)
Oscilloscope Art
Jerobeam Fendersonhttps://www.youtube.com/watch?v=rtR63-ecUNo
![Page 9: Lecture 2: Digital Drawing · CS184/284A Ren Ng OpenGL/Direct3D Edge Rules When sample point falls on an edge, the sample is classified as within triangle if the edge is a “top](https://reader033.fdocuments.us/reader033/viewer/2022041918/5e6ac04145c99756985e9122/html5/thumbnails/9.jpg)
Ren NgCS184/284A
Television - Raster Display CRT
Cathode Ray Tube Raster Scan(modulate intensity)
![Page 10: Lecture 2: Digital Drawing · CS184/284A Ren Ng OpenGL/Direct3D Edge Rules When sample point falls on an edge, the sample is classified as within triangle if the edge is a “top](https://reader033.fdocuments.us/reader033/viewer/2022041918/5e6ac04145c99756985e9122/html5/thumbnails/10.jpg)
Ren NgCS184/284A
Frame Buffer: Memory for a Raster Display
![Page 11: Lecture 2: Digital Drawing · CS184/284A Ren Ng OpenGL/Direct3D Edge Rules When sample point falls on an edge, the sample is classified as within triangle if the edge is a “top](https://reader033.fdocuments.us/reader033/viewer/2022041918/5e6ac04145c99756985e9122/html5/thumbnails/11.jpg)
A Sampling of Different Raster Displays
![Page 12: Lecture 2: Digital Drawing · CS184/284A Ren Ng OpenGL/Direct3D Edge Rules When sample point falls on an edge, the sample is classified as within triangle if the edge is a “top](https://reader033.fdocuments.us/reader033/viewer/2022041918/5e6ac04145c99756985e9122/html5/thumbnails/12.jpg)
Ren NgCS184/284A
Flat Panel Displays
B.Woods, Android Pit
Low-Res LCD Display
Color LCD, OLED, …
![Page 13: Lecture 2: Digital Drawing · CS184/284A Ren Ng OpenGL/Direct3D Edge Rules When sample point falls on an edge, the sample is classified as within triangle if the edge is a “top](https://reader033.fdocuments.us/reader033/viewer/2022041918/5e6ac04145c99756985e9122/html5/thumbnails/13.jpg)
Ren NgCS184/284A
LCD (Liquid Crystal Display) Pixel
Principle: block or transmit light by twisting polarization Illumination from backlight(e.g. fluorescent or LED) Intermediate intensitylevels by partial twist
[H&
B fig
. 2-1
6]
![Page 14: Lecture 2: Digital Drawing · CS184/284A Ren Ng OpenGL/Direct3D Edge Rules When sample point falls on an edge, the sample is classified as within triangle if the edge is a “top](https://reader033.fdocuments.us/reader033/viewer/2022041918/5e6ac04145c99756985e9122/html5/thumbnails/14.jpg)
Ren NgCS184/284A
LED Array Display
Light emitting diode array
![Page 15: Lecture 2: Digital Drawing · CS184/284A Ren Ng OpenGL/Direct3D Edge Rules When sample point falls on an edge, the sample is classified as within triangle if the edge is a “top](https://reader033.fdocuments.us/reader033/viewer/2022041918/5e6ac04145c99756985e9122/html5/thumbnails/15.jpg)
Ren NgCS184/284A
DMD Projection Display
[Y.K
. Rab
inow
itz; E
KB
Tec
hnol
ogie
s
![Page 16: Lecture 2: Digital Drawing · CS184/284A Ren Ng OpenGL/Direct3D Edge Rules When sample point falls on an edge, the sample is classified as within triangle if the edge is a “top](https://reader033.fdocuments.us/reader033/viewer/2022041918/5e6ac04145c99756985e9122/html5/thumbnails/16.jpg)
Ren NgCS184/284A
DMD Projection Display
[Tex
as In
stru
men
ts]
Array of micro-mirror pixels DMD = Digital Micromirror Device
![Page 17: Lecture 2: Digital Drawing · CS184/284A Ren Ng OpenGL/Direct3D Edge Rules When sample point falls on an edge, the sample is classified as within triangle if the edge is a “top](https://reader033.fdocuments.us/reader033/viewer/2022041918/5e6ac04145c99756985e9122/html5/thumbnails/17.jpg)
Ren NgCS184/284A
Electrophoretic (Electronic Ink) Display
[Wik
imed
ia C
omm
ons
—Se
narc
lens
]
![Page 18: Lecture 2: Digital Drawing · CS184/284A Ren Ng OpenGL/Direct3D Edge Rules When sample point falls on an edge, the sample is classified as within triangle if the edge is a “top](https://reader033.fdocuments.us/reader033/viewer/2022041918/5e6ac04145c99756985e9122/html5/thumbnails/18.jpg)
Drawing to Raster Displays
![Page 19: Lecture 2: Digital Drawing · CS184/284A Ren Ng OpenGL/Direct3D Edge Rules When sample point falls on an edge, the sample is classified as within triangle if the edge is a “top](https://reader033.fdocuments.us/reader033/viewer/2022041918/5e6ac04145c99756985e9122/html5/thumbnails/19.jpg)
Ren NgCS184/284A
Polygon Meshes
Life of Pi (2012)
![Page 20: Lecture 2: Digital Drawing · CS184/284A Ren Ng OpenGL/Direct3D Edge Rules When sample point falls on an edge, the sample is classified as within triangle if the edge is a “top](https://reader033.fdocuments.us/reader033/viewer/2022041918/5e6ac04145c99756985e9122/html5/thumbnails/20.jpg)
Ren NgCS184/284A
Triangle Meshes
![Page 21: Lecture 2: Digital Drawing · CS184/284A Ren Ng OpenGL/Direct3D Edge Rules When sample point falls on an edge, the sample is classified as within triangle if the edge is a “top](https://reader033.fdocuments.us/reader033/viewer/2022041918/5e6ac04145c99756985e9122/html5/thumbnails/21.jpg)
Ren NgCS184/284A
Triangle Meshes
![Page 22: Lecture 2: Digital Drawing · CS184/284A Ren Ng OpenGL/Direct3D Edge Rules When sample point falls on an edge, the sample is classified as within triangle if the edge is a “top](https://reader033.fdocuments.us/reader033/viewer/2022041918/5e6ac04145c99756985e9122/html5/thumbnails/22.jpg)
Shape Primitives
Example shape primitives (OpenGL)
3dgep.com
![Page 23: Lecture 2: Digital Drawing · CS184/284A Ren Ng OpenGL/Direct3D Edge Rules When sample point falls on an edge, the sample is classified as within triangle if the edge is a “top](https://reader033.fdocuments.us/reader033/viewer/2022041918/5e6ac04145c99756985e9122/html5/thumbnails/23.jpg)
Ren NgCS184/284A
Graphics Pipeline = Abstract Drawing Machine
![Page 24: Lecture 2: Digital Drawing · CS184/284A Ren Ng OpenGL/Direct3D Edge Rules When sample point falls on an edge, the sample is classified as within triangle if the edge is a “top](https://reader033.fdocuments.us/reader033/viewer/2022041918/5e6ac04145c99756985e9122/html5/thumbnails/24.jpg)
Ren NgCS184/284A
Triangles - Fundamental Area Primitive
Why triangles?
• Most basic polygon
• Break up other polygons
• Optimize one implementation
• Triangles have unique properties
• Guaranteed to be planar
• Well-defined interior
• Well-defined method for interpolating values at vertices over triangle (barycentric interpolation)
![Page 25: Lecture 2: Digital Drawing · CS184/284A Ren Ng OpenGL/Direct3D Edge Rules When sample point falls on an edge, the sample is classified as within triangle if the edge is a “top](https://reader033.fdocuments.us/reader033/viewer/2022041918/5e6ac04145c99756985e9122/html5/thumbnails/25.jpg)
Drawing a Triangle To The Framebuffer
(“Rasterization”)
![Page 26: Lecture 2: Digital Drawing · CS184/284A Ren Ng OpenGL/Direct3D Edge Rules When sample point falls on an edge, the sample is classified as within triangle if the edge is a “top](https://reader033.fdocuments.us/reader033/viewer/2022041918/5e6ac04145c99756985e9122/html5/thumbnails/26.jpg)
Ren NgCS184/284A
What Pixel Values Approximate a Triangle?
Input: position of triangle vertices projected on screen
Output: set of pixel valuesapproximating triangle
?(2.2, 1.3)
(4.4, 11.0)(15.3, 8.6)
![Page 27: Lecture 2: Digital Drawing · CS184/284A Ren Ng OpenGL/Direct3D Edge Rules When sample point falls on an edge, the sample is classified as within triangle if the edge is a “top](https://reader033.fdocuments.us/reader033/viewer/2022041918/5e6ac04145c99756985e9122/html5/thumbnails/27.jpg)
Today, Let’s Start With A Simple Approach: Sampling
![Page 28: Lecture 2: Digital Drawing · CS184/284A Ren Ng OpenGL/Direct3D Edge Rules When sample point falls on an edge, the sample is classified as within triangle if the edge is a “top](https://reader033.fdocuments.us/reader033/viewer/2022041918/5e6ac04145c99756985e9122/html5/thumbnails/28.jpg)
Ren NgCS184/284A
Sampling a Function
Evaluating a function at a point is sampling. We can discretize a function by periodic sampling. for( int x = 0; x < xmax; x++ ) output[x] = f(x);
Sampling is a core idea in graphics. We’ll sample time (1D), area (2D), angle (2D), volume (3D) … We’ll sample N-dimensional functions, even infinite dimensional functions.
![Page 29: Lecture 2: Digital Drawing · CS184/284A Ren Ng OpenGL/Direct3D Edge Rules When sample point falls on an edge, the sample is classified as within triangle if the edge is a “top](https://reader033.fdocuments.us/reader033/viewer/2022041918/5e6ac04145c99756985e9122/html5/thumbnails/29.jpg)
Ren NgCS184/284A
Let’s Try Rasterization As 2D Sampling
![Page 30: Lecture 2: Digital Drawing · CS184/284A Ren Ng OpenGL/Direct3D Edge Rules When sample point falls on an edge, the sample is classified as within triangle if the edge is a “top](https://reader033.fdocuments.us/reader033/viewer/2022041918/5e6ac04145c99756985e9122/html5/thumbnails/30.jpg)
Ren NgCS184/284A
Sample If Each Pixel Center Is Inside Triangle
![Page 31: Lecture 2: Digital Drawing · CS184/284A Ren Ng OpenGL/Direct3D Edge Rules When sample point falls on an edge, the sample is classified as within triangle if the edge is a “top](https://reader033.fdocuments.us/reader033/viewer/2022041918/5e6ac04145c99756985e9122/html5/thumbnails/31.jpg)
Ren NgCS184/284A
Sample If Each Pixel Center Is Inside Triangle
![Page 32: Lecture 2: Digital Drawing · CS184/284A Ren Ng OpenGL/Direct3D Edge Rules When sample point falls on an edge, the sample is classified as within triangle if the edge is a “top](https://reader033.fdocuments.us/reader033/viewer/2022041918/5e6ac04145c99756985e9122/html5/thumbnails/32.jpg)
Define Binary Function: inside(tri,x,y)
inside(t,x,y) = 1
0
(x,y) in triangle t
otherwise
![Page 33: Lecture 2: Digital Drawing · CS184/284A Ren Ng OpenGL/Direct3D Edge Rules When sample point falls on an edge, the sample is classified as within triangle if the edge is a “top](https://reader033.fdocuments.us/reader033/viewer/2022041918/5e6ac04145c99756985e9122/html5/thumbnails/33.jpg)
Ren NgCS184/284A
Rasterization = Sampling A 2D Indicator Function
for( int x = 0; x < xmax; x++ ) for( int y = 0; y < ymax; y++ ) Image[x][y] = f(x + 0.5, y + 0.5);
Rasterize triangle tri by sampling the function f(x,y) = inside(tri,x,y)
![Page 34: Lecture 2: Digital Drawing · CS184/284A Ren Ng OpenGL/Direct3D Edge Rules When sample point falls on an edge, the sample is classified as within triangle if the edge is a “top](https://reader033.fdocuments.us/reader033/viewer/2022041918/5e6ac04145c99756985e9122/html5/thumbnails/34.jpg)
Ren NgCS184/284A
Implementation Detail: Sample Locations
(0,0) (w,0)
(0,h) (w,h)
Sample location for pixel (x,y)
(x+1/2,y+1/2)
![Page 35: Lecture 2: Digital Drawing · CS184/284A Ren Ng OpenGL/Direct3D Edge Rules When sample point falls on an edge, the sample is classified as within triangle if the edge is a “top](https://reader033.fdocuments.us/reader033/viewer/2022041918/5e6ac04145c99756985e9122/html5/thumbnails/35.jpg)
Evaluating inside(tri,x,y)
![Page 36: Lecture 2: Digital Drawing · CS184/284A Ren Ng OpenGL/Direct3D Edge Rules When sample point falls on an edge, the sample is classified as within triangle if the edge is a “top](https://reader033.fdocuments.us/reader033/viewer/2022041918/5e6ac04145c99756985e9122/html5/thumbnails/36.jpg)
Ren NgCS184/284A
Triangle = Intersection of Three Half Planes
P0
P1
P2
![Page 37: Lecture 2: Digital Drawing · CS184/284A Ren Ng OpenGL/Direct3D Edge Rules When sample point falls on an edge, the sample is classified as within triangle if the edge is a “top](https://reader033.fdocuments.us/reader033/viewer/2022041918/5e6ac04145c99756985e9122/html5/thumbnails/37.jpg)
Ren NgCS184/284A
Each Line Defines Two Half-Planes
Implicit line equation • L(x,y) = Ax + By + C
• On line: L(x,y) = 0 • Above line: L(x,y) > 0 • Below line: L(x,y) < 0
> 0
< 0
= 0
![Page 38: Lecture 2: Digital Drawing · CS184/284A Ren Ng OpenGL/Direct3D Edge Rules When sample point falls on an edge, the sample is classified as within triangle if the edge is a “top](https://reader033.fdocuments.us/reader033/viewer/2022041918/5e6ac04145c99756985e9122/html5/thumbnails/38.jpg)
Ren NgCS184/284A
Line Equation Derivation
P0
P1T
T = P1 � P0 = (x1 � x0, y1 � y0)
Line Tangent Vector
![Page 39: Lecture 2: Digital Drawing · CS184/284A Ren Ng OpenGL/Direct3D Edge Rules When sample point falls on an edge, the sample is classified as within triangle if the edge is a “top](https://reader033.fdocuments.us/reader033/viewer/2022041918/5e6ac04145c99756985e9122/html5/thumbnails/39.jpg)
Ren NgCS184/284A
Line Equation Derivation
(x,y)
(-y,x)
Perp(x, y) = (�y, x)
General Perpendicular Vector in 2D
![Page 40: Lecture 2: Digital Drawing · CS184/284A Ren Ng OpenGL/Direct3D Edge Rules When sample point falls on an edge, the sample is classified as within triangle if the edge is a “top](https://reader033.fdocuments.us/reader033/viewer/2022041918/5e6ac04145c99756985e9122/html5/thumbnails/40.jpg)
Ren NgCS184/284A
Line Equation Derivation
P0
P1T
N
N = Perp(T ) = (�(y1 � y0), x1 � x0)
Line Normal Vector
![Page 41: Lecture 2: Digital Drawing · CS184/284A Ren Ng OpenGL/Direct3D Edge Rules When sample point falls on an edge, the sample is classified as within triangle if the edge is a “top](https://reader033.fdocuments.us/reader033/viewer/2022041918/5e6ac04145c99756985e9122/html5/thumbnails/41.jpg)
Ren NgCS184/284A
Line Equation Derivation
P0
P1
N
P = (x, y)
V
V = P � P0 = (x� x0, y � y0)
L(x, y) = V ·N = �(x� x0)(y1 � y0) + (y � y0)(x1 � x0)
![Page 42: Lecture 2: Digital Drawing · CS184/284A Ren Ng OpenGL/Direct3D Edge Rules When sample point falls on an edge, the sample is classified as within triangle if the edge is a “top](https://reader033.fdocuments.us/reader033/viewer/2022041918/5e6ac04145c99756985e9122/html5/thumbnails/42.jpg)
Ren NgCS184/284A
Line Equation
P0
P1
N
P = (x, y)
V
V = P � P0 = (x� x0, y � y0)
L(x, y) = V ·N = �(x� x0)(y1 � y0) + (y � y0)(x1 � x0)
![Page 43: Lecture 2: Digital Drawing · CS184/284A Ren Ng OpenGL/Direct3D Edge Rules When sample point falls on an edge, the sample is classified as within triangle if the edge is a “top](https://reader033.fdocuments.us/reader033/viewer/2022041918/5e6ac04145c99756985e9122/html5/thumbnails/43.jpg)
Ren NgCS184/284A
Line Equation Tests
P0
P1
N
P
V
L(x, y) = V ·N > 0
![Page 44: Lecture 2: Digital Drawing · CS184/284A Ren Ng OpenGL/Direct3D Edge Rules When sample point falls on an edge, the sample is classified as within triangle if the edge is a “top](https://reader033.fdocuments.us/reader033/viewer/2022041918/5e6ac04145c99756985e9122/html5/thumbnails/44.jpg)
Ren NgCS184/284A
L(x, y) = V ·N = 0
Line Equation Tests
P0
P1
N
PV
![Page 45: Lecture 2: Digital Drawing · CS184/284A Ren Ng OpenGL/Direct3D Edge Rules When sample point falls on an edge, the sample is classified as within triangle if the edge is a “top](https://reader033.fdocuments.us/reader033/viewer/2022041918/5e6ac04145c99756985e9122/html5/thumbnails/45.jpg)
Ren NgCS184/284A
L(x, y) = V ·N < 0
Line Equation Tests
P0
P1
N
PV
![Page 46: Lecture 2: Digital Drawing · CS184/284A Ren Ng OpenGL/Direct3D Edge Rules When sample point falls on an edge, the sample is classified as within triangle if the edge is a “top](https://reader033.fdocuments.us/reader033/viewer/2022041918/5e6ac04145c99756985e9122/html5/thumbnails/46.jpg)
Ren NgCS184/284A
Point-in-Triangle Test: Three Line Tests
P0
P1
P2
Compute line equations from pairs of vertices
Pi = (Xi, Yi)
dXi = Xi+1 - Xi
dYi = Yi+1 - Yi
Li (x, y) = –(x - Xi) dYi + (y - Yi) dXi
= Ai x + Bi y + Ci
Li (x, y) = 0 : point on edge < 0 : outside edge > 0 : inside edge
![Page 47: Lecture 2: Digital Drawing · CS184/284A Ren Ng OpenGL/Direct3D Edge Rules When sample point falls on an edge, the sample is classified as within triangle if the edge is a “top](https://reader033.fdocuments.us/reader033/viewer/2022041918/5e6ac04145c99756985e9122/html5/thumbnails/47.jpg)
Ren NgCS184/284A
Point-in-Triangle Test: Three Line Tests
P0
P1
P2
L0(x, y) > 0
Pi = (Xi, Yi)
dXi = Xi+1 - Xi
dYi = Yi+1 - Yi
Li (x, y) = –(x - Xi) dYi + (y - Yi) dXi
= Ai x + Bi y + Ci
Li (x, y) = 0 : point on edge < 0 : outside edge > 0 : inside edge
![Page 48: Lecture 2: Digital Drawing · CS184/284A Ren Ng OpenGL/Direct3D Edge Rules When sample point falls on an edge, the sample is classified as within triangle if the edge is a “top](https://reader033.fdocuments.us/reader033/viewer/2022041918/5e6ac04145c99756985e9122/html5/thumbnails/48.jpg)
Ren NgCS184/284A
Point-in-Triangle Test: Three Line Tests
P0
P1
P2
L1(x, y) > 0
Pi = (Xi, Yi)
dXi = Xi+1 - Xi
dYi = Yi+1 - Yi
Li (x, y) = –(x - Xi) dYi + (y - Yi) dXi
= Ai x + Bi y + Ci
Li (x, y) = 0 : point on edge < 0 : outside edge > 0 : inside edge
![Page 49: Lecture 2: Digital Drawing · CS184/284A Ren Ng OpenGL/Direct3D Edge Rules When sample point falls on an edge, the sample is classified as within triangle if the edge is a “top](https://reader033.fdocuments.us/reader033/viewer/2022041918/5e6ac04145c99756985e9122/html5/thumbnails/49.jpg)
Ren NgCS184/284A
Point-in-Triangle Test: Three Line Tests
P0
P1
P2
L2(x, y) > 0
Pi = (Xi, Yi)
dXi = Xi+1 - Xi
dYi = Yi+1 - Yi
Li (x, y) = –(x - Xi) dYi + (y - Yi) dXi
= Ai x + Bi y + Ci
Li (x, y) = 0 : point on edge < 0 : outside edge > 0 : inside edge
![Page 50: Lecture 2: Digital Drawing · CS184/284A Ren Ng OpenGL/Direct3D Edge Rules When sample point falls on an edge, the sample is classified as within triangle if the edge is a “top](https://reader033.fdocuments.us/reader033/viewer/2022041918/5e6ac04145c99756985e9122/html5/thumbnails/50.jpg)
Ren NgCS184/284A
Point-in-Triangle Test: Three Line Tests
Sample point s = (sx, sy) is inside the triangle if it is inside all three lines.
inside(sx, sy) =L0 (sx, sy) > 0 &&L1 (sx, sy) > 0 &&L2 (sx, sy) > 0;
P0
P1
P2
Note: actual implementation of inside(sx,sy) involves ≤ checks based on edge rules
![Page 51: Lecture 2: Digital Drawing · CS184/284A Ren Ng OpenGL/Direct3D Edge Rules When sample point falls on an edge, the sample is classified as within triangle if the edge is a “top](https://reader033.fdocuments.us/reader033/viewer/2022041918/5e6ac04145c99756985e9122/html5/thumbnails/51.jpg)
Ren NgCS184/284A
Edge Cases (Literally)
Is this sample point covered by triangle 1, triangle 2, or both?
1
2
![Page 52: Lecture 2: Digital Drawing · CS184/284A Ren Ng OpenGL/Direct3D Edge Rules When sample point falls on an edge, the sample is classified as within triangle if the edge is a “top](https://reader033.fdocuments.us/reader033/viewer/2022041918/5e6ac04145c99756985e9122/html5/thumbnails/52.jpg)
Ren NgCS184/284A
OpenGL/Direct3D Edge Rules
When sample point falls on an edge, the sample is classified as within triangle if the edge is a “top edge” or “left edge”
Source: Direct3D Programming Guide, Microsoft
Top edge: horizontal edge that is above all other edges
Left edge: an edge that is not exactly horizontal and is on the left side of the triangle. (triangle can have one or two left edges)
![Page 53: Lecture 2: Digital Drawing · CS184/284A Ren Ng OpenGL/Direct3D Edge Rules When sample point falls on an edge, the sample is classified as within triangle if the edge is a “top](https://reader033.fdocuments.us/reader033/viewer/2022041918/5e6ac04145c99756985e9122/html5/thumbnails/53.jpg)
Ren NgCS184/284A
Incremental Triangle Traversal (Faster?)
P0
P1
P2
![Page 54: Lecture 2: Digital Drawing · CS184/284A Ren Ng OpenGL/Direct3D Edge Rules When sample point falls on an edge, the sample is classified as within triangle if the edge is a “top](https://reader033.fdocuments.us/reader033/viewer/2022041918/5e6ac04145c99756985e9122/html5/thumbnails/54.jpg)
Ren NgCS184/284A
Modern Approach: Tiled Triangle Traversal
P0
P1
P2Traverse triangle in blocks
Test all samples in block in parallel
All modern GPUs have special-purpose hardware for efficient point-in-triangle tests
Advantages: - Simplicity of wide parallel
execution overcomes cost of extra point-in-triangle tests (most triangles cover many samples, especially when super-sampling)
- Can skip sample testing work: entire block not in triangle (“early out”), entire block entirely within triangle (“early in”)
![Page 55: Lecture 2: Digital Drawing · CS184/284A Ren Ng OpenGL/Direct3D Edge Rules When sample point falls on an edge, the sample is classified as within triangle if the edge is a “top](https://reader033.fdocuments.us/reader033/viewer/2022041918/5e6ac04145c99756985e9122/html5/thumbnails/55.jpg)
Signal Reconstruction on Real Displays
![Page 56: Lecture 2: Digital Drawing · CS184/284A Ren Ng OpenGL/Direct3D Edge Rules When sample point falls on an edge, the sample is classified as within triangle if the edge is a “top](https://reader033.fdocuments.us/reader033/viewer/2022041918/5e6ac04145c99756985e9122/html5/thumbnails/56.jpg)
Ren NgCS184/284A
Real LCD Screen Pixels (Closeup)
iPhone 6S Galaxy S5iphonearena.com iphonearena.com
Notice R,G,B pixel geometry! But in this class, we will assume a colored square full-color pixel.
![Page 57: Lecture 2: Digital Drawing · CS184/284A Ren Ng OpenGL/Direct3D Edge Rules When sample point falls on an edge, the sample is classified as within triangle if the edge is a “top](https://reader033.fdocuments.us/reader033/viewer/2022041918/5e6ac04145c99756985e9122/html5/thumbnails/57.jpg)
Ren NgCS184/284A
Aside: What About Other Display Methods?
Color print: observe half-tone pattern
![Page 58: Lecture 2: Digital Drawing · CS184/284A Ren Ng OpenGL/Direct3D Edge Rules When sample point falls on an edge, the sample is classified as within triangle if the edge is a “top](https://reader033.fdocuments.us/reader033/viewer/2022041918/5e6ac04145c99756985e9122/html5/thumbnails/58.jpg)
Assume Display Pixels Emit Square of Light
LCD pixelon laptop
Each image sample sent to the display is converted into a little square of light of the appropriate color: (a pixel = picture element)
* LCD pixels do not actually emit light in a square of uniform color, but this approximation suffices for our current discussion
![Page 59: Lecture 2: Digital Drawing · CS184/284A Ren Ng OpenGL/Direct3D Edge Rules When sample point falls on an edge, the sample is classified as within triangle if the edge is a “top](https://reader033.fdocuments.us/reader033/viewer/2022041918/5e6ac04145c99756985e9122/html5/thumbnails/59.jpg)
Ren NgCS184/284A
So, If We Send The Display This Sampled Signal
![Page 60: Lecture 2: Digital Drawing · CS184/284A Ren Ng OpenGL/Direct3D Edge Rules When sample point falls on an edge, the sample is classified as within triangle if the edge is a “top](https://reader033.fdocuments.us/reader033/viewer/2022041918/5e6ac04145c99756985e9122/html5/thumbnails/60.jpg)
Ren NgCS184/284A
The Display Physically Emits This Signal
![Page 61: Lecture 2: Digital Drawing · CS184/284A Ren Ng OpenGL/Direct3D Edge Rules When sample point falls on an edge, the sample is classified as within triangle if the edge is a “top](https://reader033.fdocuments.us/reader033/viewer/2022041918/5e6ac04145c99756985e9122/html5/thumbnails/61.jpg)
Ren NgCS184/284A
Compare: The Continuous Triangle Function
![Page 62: Lecture 2: Digital Drawing · CS184/284A Ren Ng OpenGL/Direct3D Edge Rules When sample point falls on an edge, the sample is classified as within triangle if the edge is a “top](https://reader033.fdocuments.us/reader033/viewer/2022041918/5e6ac04145c99756985e9122/html5/thumbnails/62.jpg)
Ren NgCS184/284A
What’s Wrong With This Picture?
Jaggies!
![Page 63: Lecture 2: Digital Drawing · CS184/284A Ren Ng OpenGL/Direct3D Edge Rules When sample point falls on an edge, the sample is classified as within triangle if the edge is a “top](https://reader033.fdocuments.us/reader033/viewer/2022041918/5e6ac04145c99756985e9122/html5/thumbnails/63.jpg)
Ren NgCS184/284A
Jaggies (Staircase Pattern)
Is this the best we can do?
![Page 64: Lecture 2: Digital Drawing · CS184/284A Ren Ng OpenGL/Direct3D Edge Rules When sample point falls on an edge, the sample is classified as within triangle if the edge is a “top](https://reader033.fdocuments.us/reader033/viewer/2022041918/5e6ac04145c99756985e9122/html5/thumbnails/64.jpg)
Ren NgCS184/284A
Discussion: What Value Should a Pixel Have?
Potential topics for your pair discussion:
• Ideas for “higher quality” pixel formula?
• What are all the relevant factors?
• What’s right/wrong about point sampling?
• Why do jaggies look “wrong”?
![Page 65: Lecture 2: Digital Drawing · CS184/284A Ren Ng OpenGL/Direct3D Edge Rules When sample point falls on an edge, the sample is classified as within triangle if the edge is a “top](https://reader033.fdocuments.us/reader033/viewer/2022041918/5e6ac04145c99756985e9122/html5/thumbnails/65.jpg)
Ren NgCS184/284A
Things to Remember
Drawing machines
• Many possibilities
• Why framebuffers and raster displays?
• Why triangles? We posed rasterization as a 2D sampling process
• Test a binary function inside(triangle,x,y)
• Evaluate triangle coverage by 3 point-in-edge tests
• Finite sampling rate causes “jaggies” artifact(next time we will analyze in more detail)
![Page 66: Lecture 2: Digital Drawing · CS184/284A Ren Ng OpenGL/Direct3D Edge Rules When sample point falls on an edge, the sample is classified as within triangle if the edge is a “top](https://reader033.fdocuments.us/reader033/viewer/2022041918/5e6ac04145c99756985e9122/html5/thumbnails/66.jpg)
Ren NgCS184/284A
Acknowledgments
Thanks to Kayvon Fatahalian, Pat Hanrahan, Mark Pauly and Steve Marschner for slide resources.