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 절로 표현 예 ) 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_POINTS GL_LINES GL_LINE_STRIP GL_LINE_LOOP GL_TRIANGLES GL_TRIANGLE_STRIP …… GL_POINTS GL_LINES GL_LINE_STRIP GL_LINE_LOOP GL_TRIANGLES GL_TRIANGLE_STRIP ……

Vertex ( 꼭지점, 절점, 점 ) Vertex 선언법 : 2 차원 점 선언의 예 : 3 차원 점 선언의 예 : glVertex* glVertex2i (50, 100)  참고 : 명령어 ( 함수 ) 의 이름 규칙 : float: C/C++ 타입, GLfloat: GL 타입 gl 명령이름 매개변수 개수 매개변수 형식 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

f f : L 1 => L 2  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 ( x 1, y 1 ) ( x 2, y 2 )

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x yy

Digital Differential Analyzer(DDA) Idea 1.Go to starting point 2.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 (x 0,y 0 ) to (x 1,y 1 ) that 0<slope<1 and x 0 <x 1 Suppose that we have just finished drawing a pixel P = (x p, y p ) 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 = (x p +1, y p ) else select NE = (x p +1, y p +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(x p +1, y p +½) 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(x p +1, y p +½) P = 2a(x p +1) + 2b(y p +½) + 2c = 2ax p + 2by p + (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, P new = F(x p + 2, y p + ½) = 2a(x p + 2) + 2b(y p + ½) + c = P + 2a = P + 2Δy –If we decide on going to NE next, P new = F(x p + 2, y p ½) = 2a(x p + 2) + 2b(y p ½) + c = P + 2(a + b) = P + 2(Δy - Δx).

Midpoint Line Algorithm (Bresenham's Line Algorithm) Since we start at (x 0,y 0 ), the initial value of P can be calculated by P init = F(x 0 + 1, y 0 + ½) = (2ax 0 + 2by 0 + 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: (x 0,y 0 ) = (5,8); (x 1,y 1 ) = (9,11) Δx = 4; Δy = 3 P init = 2Δy – Δx = 2 > 0   select NE P new = P + 2(Δy - Δx) = 0  Select E P new = P + 2Δy = = 6  Select NE Midpoint Line Algorithm- Example

Scan Converting Lines (issues) Endpoint order –S 01 is a set of pixels that lie on the line from P 0 to P 1 –S 10 is a set of pixels that lie on the line from P 1 to P 0  S 01 should be the same as S 10 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 cost memory bandwidth scan conversion time display device cost

Scan Converting Circles Equation of Circle?

Scan Converting Circles Equation of Circle? 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 (x p, y p ) and we are interested in figuring out which pixel to draw next.

Midpoint Circle Algorithm F(x,y) = x 2 + y 2 - R 2 = 0 on the circle > 0 outside the circle < 0 inside the circle If F(midpoint between E and SE) > 0 then select SE = (x p +1,y p -1) else select E = (x p +1, y p );

Midpoint Circle Algorithm Decision variable d old = F(x p +1, y p -½) = (x p +1) 2 + (y p -½) 2 - R 2 –If d old < 0, select E. d new = F(x p +2, y p -½) = d old + (2x p + 3) –If d old  0, select SE. d new = F(x p +2, y p -½-1) = d old + (2x p - 2y p + 5) We have to calculate new d based on the point of evaluation P=(x p, y p ), but this is not expensive computationally.

Midpoint Circle Algorithm Since we start at (0,R), the initial value of P can be calculated by P init = 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) = b 2 x 2 + a 2 y 2 -a 2 b 2 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

Homework #1 1. Bresenham's Line Algorithm 완성 –GL_POINTS 만 사용 – 모든 경우에 동작 할 수 있도록 –Test Image 만들어 제출 : 라인의 모든 경우를 다 사용하는 예제 그림이어야 함 (Test Image 의 예 )

Homework #1 원을 그리는 코드 완성 –2 가지 버전 : 삼각 함수 및 라인 그리기를 이용한 버전 Midpoint 알고리즘을 이용한 버젼 –Test Image 만들기 : 다양한 크기의 원과 다양한 파라메터 ( 위치, 크기, 시작 각, 끝각 ) 을 사용하여 아름다운 그림을 그려 제출

Homework #1 Code 제출 : 이메일 제출 라인과 원그리는 코드는 각각 만들지 말고 하나에 통합하 여 만들것 ( 시작시 메뉴로 선택 가능하게 할 것 ) : 예 ) 1 을 누르면 라인예제, 2 를 누르면 원 예제 – 이메일 제목 : [ 숙제제출 : 1/2 반 ] 학번, 이름 – 다음주 화요일 자정 (3 월 17 일 23:99) 까지 –Project file + source codes 를 zip 으로 압축하여 보낼 것 ( 디버그 폴더를 지우고 보낼 것 ) – 파일이름 : 학번 _ 이름.zip 예 ) _ 김철수.zip –Visual C++ 6.0, Visual Studio.NET 2003, 2005, 2008 – 압축 파일에 스크린샷 (line.jpg, circle.jpg) 첨부할 것