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


(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


• 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.


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


• 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.


• 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.


• 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


• 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).


• 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?


• Equation of Circle?

222 )()( ryyxx cc

sin

cos

ry

rx

OR


• 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.


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


• 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.


• 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 제출 : 이메일 제출 ([email protected])• 라인과 원그리는 코드는 각각 만들지 말고 하나에

통합하여 만들것 ( 시작시 메뉴로 선택 가능하게 할 것 ): 예 ) 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) 첨부할 것

graphics output primitives sang il park sejong university

Documents