Graphics Output Primitives Sang Il Park Sejong University

Graphics Output Primitives

Sang Il Park

Sejong University

OpenGL

• 저수준 API– 장면을 묘사하는 것이 아니라 구체적 프러시져를 호출

cf. DirectX from Microsoft: 호환성 결여– 하드웨어와 거의 직접 연관 ( 하드웨어 성능을 최대한 발휘 )– Inventor, VRML, Java3D 등은 고수준 API 의 기반

An Example of Open GL

• Initialize OpenGL and GLUT• Initialize a drawing window• Draw a line segment

Two-Dimensional Graphics Output Primitives

Specifying 2-D World Coordinate frame

glMatrixMode (GL_PROJECTION)glLoadIdentity ( );gluOrtho2D (xmin, ymin, xmax, ymax);

glMatrixMode (GL_PROJECTION)glLoadIdentity ( );gluOrtho2D (xmin, ymin, xmax, ymax);

Drawing Graphics Primitives in OpenGL

• OpenGL 에서의 그림 그리기는 다음과 같은 Begin-End 절로 표현 http://www.opengl.org/sdk/docs/man/xhtml/glBegin.xml

• 예 )

glBegin (종류 );

………

glEnd ( );

glBegin (종류 );

………

glEnd ( );

void myDisplay (void){

glBegin (GL_LINES);glVertex2i (180, 15);glVertex2i (10, 145);

glEnd ( );}

void myDisplay (void){

glBegin (GL_LINES);glVertex2i (180, 15);glVertex2i (10, 145);

glEnd ( );}

GL_POINTSGL_LINESGL_LINE_STRIPGL_LINE_LOOPGL_TRIANGLESGL_TRIANGLE_STRIP……

GL_POINTSGL_LINESGL_LINE_STRIPGL_LINE_LOOPGL_TRIANGLESGL_TRIANGLE_STRIP……

Vertex ( 꼭지점 , 절점 , 점 )

• Vertex 선언법 :

• 2 차원 점 선언의 예 :

• 3 차원 점 선언의 예 :

glVertex*glVertex*

glVertex2i (50, 100) glVertex2i (50, 100)

참고 : 명령어 ( 함수 ) 의 이름 규칙 :

• float: C/C++ 타입 , GLfloat: GL 타입

glgl 명령이름명령이름 매개변수개수

매개변수개수

매개변수형식

매개변수형식

glVertex3f (50.0, 100.1, 35.3) glVertex3f (50.0, 100.1, 35.3)

Vertex

• 점 그리기 : glBegin – glEnd 절 사용

• 배열을 사용할 방법은 없을까 ? glVertex2iv 사용 !

glBegin (GL_POINTS);glVertex2i (50, 100);glVertex2i (75, 150);glVertex2i (100,200);

glEnd ();

glBegin (GL_POINTS);glVertex2i (50, 100);glVertex2i (75, 150);glVertex2i (100,200);

glEnd ();

Line Primitives ( 직선그리기 )

• 직선 그리기 : glBegin – glEnd 절 사용

• 직선의 종류 : GL_LINES, GL_LINE_STRIP, GL_LINE_LOOP

glBegin (GL_LINES);glVertex2iv (pt1);glVertex2iv (pt2);glVertex2iv (pt3);glVertex2iv (pt4);glVertex2iv (pt5);

glEnd ();

glBegin (GL_LINES);glVertex2iv (pt1);glVertex2iv (pt2);glVertex2iv (pt3);glVertex2iv (pt4);glVertex2iv (pt5);

glEnd ();

Output and Input Pipeline

• Scan conversion– converts primitives such as lines, circles, etc.

into pixel values– geometric description a finite scene area

• Clipping– the process of determining the portion of a

primitive lying within a region called clip region

Scan conversion and Clipping

• Clipping before scan conversion – Eg) Lines, rectangles, and polygons (scissoring)

• Clipping after scan converting the entire collection of primitives into a temporary canvas– Eg) Text

window

Text can be

clipped

Scan Converting Lines

A line from (x1,y1) to (x2,y2) a series of pixels

[Criteria]– uniform, user-selected density– straight lines should appear straight – line end-points should be constrained– line drawing algorithms should be fast

|L|

} 0cbyax

,yyy,xxx|y){(x,L

1

21211

|L|

}n 1,2,...,i|)y,{(xL

2

ii2

f

f : L1 => L2 quality degradation!!

Line drawing is at the heart of many graphics programs.

Smooth, even, and continuous as much as possible !!!

Simple and fast !!!

Scan Converting Lines

(x1, y1)

(x2, y2)

Continuity

8-connectivity(king – continuity)

4-connectivity(rook – continuity)

Why Study Scan Conversion Algorithms?

Every high-end graphics card support this. You will never have to write these routines

yourself, unless you become a graphics hardware designer.

So why do we learn this stuff? Maybe you will become a graphics hardware designer But seriously, the same basic tricks underlie lots of

algorithms: 3-D shaded polygons, texture mapping

Scan Converting Lines

• Digital Differential Analyzer(DDA)– Basic incremental algorithm – Each point is generated from the previous point

in a simple fashion– Slope of a line m = Δy/Δx

x

y

Digital Differential Analyzer(DDA)

• Idea 1. Go to starting point2. Increment x and y values by constants

proportional to x and y such that one of them is 1.

3. Round to the closest raster position

• Drawbacks– rounding to an integer takes time– floating-point operations

Digital Differential Analyzer(DDA)

Bresenham’s Line Drawing Algorithm

additions / subtractions only integer arithmetic not a programmers’ point of view but a system developers’ point of view

Midpoint Line Algorithm (Bresenham's Line Algorithm)

• Assume a line from (x0,y0) to (x1,y1) that 0<slope<1 and x0<x1

• Suppose that we have just finished drawing a pixel P = (xp, yp) and we are interested in figuring out which pixel to draw next.

Midpoint Line Algorithm (Bresenham's Line Algorithm)

If distance(NE,Q) > distance(E,Q)

then select E = (xp+1, yp)

else select NE = (xp+1, yp+1)

NE

E

M

P

Q

Midpoint Line Algorithm (Bresenham's Line Algorithm)

• A line eq. in the implicit form

F(x, y) = ax + by + c = 0

• Using y = (Δy/Δx)x + B,

where a = Δy, b = -Δx, c = B·Δx.

F(x,y) = Δy·x - Δx·y + B·Δx = 0

• Let's use an equivalent representation

F(x,y) = 2ax + 2by + 2c = 0.

Midpoint Line Algorithm (Bresenham's Line Algorithm)

• Making slope assumptions, observe that b < 0, and this implies:– F(x,y) < 0 for points above the line – F(x,y) > 0 for points below the line

• To apply the midpoint criterion, we need only to compute F(M) = F(xp+1, yp+½) and to test its sign.

Midpoint Line Algorithm (Bresenham's Line Algorithm)

• To determine which one to pick up, we define a decision variable

P = F(xp+1, yp+½)

P = 2a(xp+1) + 2b(yp+½) + 2c

= 2axp + 2byp + (2a + b + c)

• If P > 0 then M is below the line, so select NE, otherwise select E.

NE

E

M

P

Q

Midpoint Line Algorithm (Bresenham's Line Algorithm)

• How to compute P incrementally?– Suppose we know the current P value, and we want to

determine the next P.

– If we decide on going to E next, • Pnew = F(xp + 2, yp + ½)

= 2a(xp + 2) + 2b(yp + ½) + c = P + 2a = P + 2Δy

– If we decide on going to NE next, • Pnew = F(xp + 2, yp + 1 + ½)

= 2a(xp + 2) + 2b(yp + 1 + ½) + c = P + 2(a + b) = P + 2(Δy - Δx).

Midpoint Line Algorithm (Bresenham's Line Algorithm)

• Since we start at (x0,y0), the initial value of P can be calculated byPinit = F(x0 + 1, y0 + ½)

= (2ax0 + 2by0 + c) + (2a + b) = 0 + 2a + b = 2Δy - Δx

• Advantages– need to add integers and multiply by 2

(which can be done by shift operations)– incremental algorithm

Line end points: (x0,y0) = (5,8);

(x1,y1) = (9,11) • Δx = 4; Δy = 3• Pinit = 2Δy – Δx = 2 > 0

select NE• Pnew = P + 2(Δy - Δx) = 0

Select E• Pnew = P + 2Δy = 0 + 6 = 6

Select NE

Midpoint Line Algorithm- Example

4 5 6 7 8 9 10 11

13 1

2 1

1 1

0 9

8 7

6

Scan Converting Lines (issues)

• Endpoint order– S01 is a set of pixels that lie on the line from P0 to P1

– S10 is a set of pixels that lie on the line from P1 to P0

S01 should be the same as S10

• Varying intensity of a line as a function of slope– For the diagonal line, it is longer than the horizontal

line but has the same number of pixels as the latter needs antialiasing

• Outline primitives composed of lines – Care must be taken to draw shared vertices of

polylines only once

Aliasing Effects

staircases (or jaggies)

intensity variation

line drawing

animation

texturing

popping-up

Aliasing Effects

Anti-aliasing Lines

• Removing the staircase appearance of a line

– Why staircases?

raster effect !!!

need some compensation in line-drawing algorithms for this raster effect?

How to anti-alias?

well, …

increasing resolution.

However, ...

Increasing resolution

memory costmemory bandwidthscan conversion timedisplay device cost

Scan Converting Circles

• Equation of Circle?

Scan Converting Circles

• Equation of Circle?

222 )()( ryyxx cc

sin

cos

ry

rx

OR

Scan Converting Circles

• Eight-way symmetry

We only consider 45° of a circle

Midpoint Circle Algorithm

• Suppose that we have just finished drawing a pixel (xp, yp) and we are interested in figuring out which pixel to draw next.

Midpoint Circle Algorithm

• F(x,y) = x2 + y2 - R2 = 0 on the circle > 0 outside the circle < 0 inside the circle

• If F(midpoint between E and SE) > 0 then

select SE = (xp+1,yp-1)

else select E = (xp+1, yp);

Midpoint Circle Algorithm

• Decision variable dold = F(xp+1, yp-½)

= (xp+1)2 + (yp-½)2 - R2

– If dold < 0, select E.

dnew = F(xp+2, yp-½) = dold + (2xp + 3)

– If dold 0, select SE.

dnew = F(xp+2, yp-½-1) = dold + (2xp - 2yp + 5)

• We have to calculate new d based on the point of evaluation P=(xp, yp), but this is not expensive

computationally.

Midpoint Circle Algorithm

• Since we start at (0,R), the initial value of P can be calculated byPinit = F(1, R - ½)

= 5/4 – R

• By substituting P - 1/4 by h, we can get the integer midpoint circle scan-conversion algorithm.

Scan Converting Ellipses

• F(x,y) = b2x2 + a2y2 -a2b2 • Divide the quadrant into two regions; the

boundary of two regions is the point at which the curve has a slope of -1.

• And then apply any midpoint algorithm.

Curve Drawing

parametric equation

discrete data set

− curve fitting

− piecewise linear

f(x)y

h(t)x

g(t)y

Homework #1

• 1. Bresenham's Line Algorithm 완성 – GL_POINTS 만 사용– 모든 경우에 동작 할 수 있도록

– Test Image 만들어 제출 :라인의 모든 경우를 다 사용하는예제 그림이어야 함

(Test Image 의 예 )

Homework #1

• 원을 그리는 코드 완성

– 2 가지 버전 :• 삼각 함수 및 라인 그리기를 이용한 버전• Midpoint 알고리즘을 이용한 버젼

– Test Image 만들기 :다양한 크기의 원과 다양한 파라메터 ( 위치 , 크기 , 시작각 , 끝각 ) 을 사용하여 아름다운 그림을 그려 제출

Homework #1

• Code 제출 : 이메일 제출 (sipark@sejong.ac.kr)• 라인과 원그리는 코드는 각각 만들지 말고 하나에

통합하여 만들것 ( 시작시 메뉴로 선택 가능하게 할 것 ): 예 ) 1 을 누르면 라인예제 , 2 를 누르면 원 예제

– 이메일 제목 : [ 숙제제출 : 1/2 반 ] 학번 , 이름– 다음주 화요일 자정 (3 월 17 일 23:99) 까지– Project file + source codes 를 zip 으로 압축하여 보낼 것

( 디버그 폴더를 지우고 보낼 것 )– 파일이름 : 학번 _ 이름 .zip 예 ) 081000_ 김철수 .zip– Visual C++ 6.0, Visual Studio .NET 2003, 2005, 2008

– 압축 파일에 스크린샷 (line.jpg, circle.jpg) 첨부할 것