CG OpenGL line & area-course 3

Video Processing Lab 臺灣師範大學數位媒體中心視訊處理研究室

National Taiwan Normal University

Line & Area Chen Jing-Fung (2006/10/24)

Assistant Research Fellow, Digital Media Center,

Video Processing Lab

臺灣師範大學數位媒體中心視訊處理研究室

Coordinate representations

Plotter

Other Output

Device Coordinates

Video Monitor Modeling (local or master)

Coordinates World

(Cartesian) Coordinates

Normalized Coordinates

Viewing & Projection Coordinates

Reshape function

Monitor

http://groups.csail.mit.edu/graphics/classes/6.837/F04/calendar.html

monitor

2D graph

• Plot figure in 2D coordinate – X-coordinate indicated horizontal

– Y-coordinate indicated vertical

– Z-coordinate indicated depth

simple

nonsimple

Coordinate Reference • A set of coordinate extents

– Bounding box (3D), bounding rectangle (2D) – Max & Min (x, y, z), (x, y)

• Screen coordinates – Scan line number: y – Column number: x

• A low-level procedure of the pixel position – setPixel(x, y);

• Retrieve the current frame-buffer setting for a pixel location – getPixel(x, y, color);

0 1 2 3 4 5

Combine RGB bit codes

Coordinate specifications

• Absolute coordinate & Relative coordinate – Last position (current position): (3, 8)

– => Some graph packages is used relative coordinate: (2, -1) -> Absolute position: (5, 7)

2D world-coordinate in OpenGL

• An orthogonal projection function – gluOrtho2D

Display window

ymin xmin

glMatrixMode (GL_PROJECTION);

glLoadIdentity ();

gluOrtho2D (xmin, xmax, ymin, ymax); World coordinate range

Assign the identity matrix

How to a parameter drawing line?

Bresenham’s line algorithm

• Bresenham’s line is an accurate and efficient raster line-generating algorithm

• Use only incremental integer calculations.

• Determine at next sample point whether to plot. – The positive-slope line:

if start point (50, 50), next point? • (51, 50) or (51, 51)

Parallel Bresenham line algorithm

• Drawing parallel processing – Two different line on the same plane and

along a line path simultaneously.

P. 99-101

How to buffer value by the structure?

Setting frame-buffer values • Since scan-conversion algorithms generate

pixel positions which are labeled from (0, 0) to (xmax, ymax), the frame-buffer bit address is calculated as – (x, y)

• addr(x, y) = addr(0, 0) + y(xmax + 1)+x

– (x+1, y) • addr(x+1, y) = addr(x, y) + 1

– (x+1, y+1) • addr(x+1, y+1) = addr(x, y) + xmax + 2

(0, 0) (1, 0) (2, 0)

(xmax, 0)

(0, 1) (x, y)

(xmax, ymax) addr(0, 0) addr(x, y)

Frame buffer:

Screen

x0 xend

(x, y)

Another drawing line method

Use Midpoint

Circle-generating algorithms

• A circle is defined as the set of points – Radius = r, center position (xc, yc)

(x-xc)2+(y-yc)2=r2

– X axis in unit steps from xc- r to xc+ r and calculating the corresponding y values at each position as

– using polar coordinates r and θ

22 )( xxryy cc

p.103-104

Symmetry of a circle

• Eight octants – Calculation if a circle point (x, y) in one octant

yields the circle points shown for the other seven octants

• More efficient circle algorithm are based on incremental calculation of decision parameters, which involves only simple integer operations. (as in the Bresenham line algorithm)

Midpoint circle algorithm (1)

• The basic idea is to test the halfway position between two pixels – Determine inside or outside the circle

boundary.

• Midpoint method = Bresenham line algorithm – Integer circle radius

– A straight-line segment

Midpoint circle algorithm (2) • To apply the midpoint method, we define a

circle function as: – fcirc(x, y) = x2+y2-r2

– Decision parameter (each xk, k=0 & pk<0) • pk= fcirc(xk+1, yk-1/2)

• pk+1=pk+2(xk+1) + (yk+12-yk

2) - (yk+1-yk)+1

– Increment?

Midpoint

xk+1 xk+2

x2 + y2 - r2 = 0

fcirc(x,y)

<0, if (x,y) is inside the circle boundary

=0, if (x,y) is on the circle boundary

>0, if (x,y) is outside the circle boundary

What is different between midpoint and line- based?

p.105-109

Other curves • Various curve functions are useful in object

modeling, animation path specification and other graphics applications.

• Commonly encountered curves include conics, general polynomials and spline functions. – Conic sections: Ax2+ By2+Cxy+Dx+Ey+F=0 – Parabolic

• trajectory: y=y0+a(x-x0)2+b(x-x0)

• Projection point: x=x0+vx0t; y=y0+vy0t-1/2gt2

– Hyperbola: (x/rx)2-(y/ry)2=1 x0

ry Spline curve formed with individual cubic polynomial sections between specified coordinate positions

Fill-Area

Fill-Area Primitives

• Polygon area (solid-color, patterned) – scan-line to fill polygon

• Intersection points located and sorted

• Consecutive pairs define interior span

• Attention with vertex intersections

• Exploit coherence (incremental calculations)

– flood fill algorithm

Fill-area primitives

• Describing components of a picture is an area that is filled with some solid color – Polygon is a plane figure specified by

• Vertices: three or more coordinate positions

• Edges or sides: straight-line segments

• Area….

concave convey

Concave polygons

• The direction of surface is “z’’ axle

• Given two consecutive vertex (V) positions, Vk and Vk+1, we define the edge vector (E) as Ek = Vk+1 - Vk

V5 V6 (E1 x E2)z > 0

(E2 x E3)z > 0

(E3 x E4)z < 0

Where is “z”

(Cross product)

convex

concave

Test!!

Splitting concave polygons

• Vector method – All vector cross products have the same

sign => convex

• Rotational method – rotate polygon-edges onto x-axis, always

same direction => convex – Each vertex vk

• Origin: translate Vk • Rotate clockwise Vk+1 on x-axis • If vertex below x-axis => split

Area 2

Area 1

Inside-Outside Tests

• Testing interior vs. exterior object boundaries – Odd-even (parity) rule or nonzero winding

parity rule • Odd-even rule

– number of segments crossed by the line drawn from P to distant point outside the coordinate extents

• bounding rectangle or box is odd it is interior point • else it is exterior point

– use the rule for color filling of rings, 2 concentric polygons

Nonzero winding parity rule

• Nonzero winding parity rule may yield different interior and exterior regions – Setup vectors along object edges and the

reference line. – Compute cross product of vector u along the

line from P to a distant point, with object vector E for each edge that crosses the line.

– With 2 D object in XY plane direction of cross product will be + z direction or –z direction.

• if z component for a crossing is +ve that segment crosses from left to right, add 1 to winding number

• else if it is left to right subtract 1 from winding number simpler

3D inside-outside • Consider a sphere, x2 + y2 + z2 = 1.

– Interior: the set of all points that satisfy x2 + y2 + z2 < 1

– The solid's surface: x2 + y2 + z2 <= 1. – Exterior: x2 + y2 + z2 > 1.

http://www.cs.mtu.edu/~shene/COURSES/cs3621/NOTES/model/closure.html

Interior point A

Exterior point B

boundary

Boundary point C

Polygon Surfaces (1)

• Set of surface polygons enclose object interior = Boundary Representation (“B-rep”)

wireframe representation of a cylinder with back (hidden) lines removed

Polygon Surfaces (2)

• Polygon tables (B-rep lists) – Geometric and attribute tables

– Vertex, edge, polygon tables

– Consistency, completeness checks

Two polygon surfaces

• Geometric data-table representation for two adjacent polygon surface facets, formed with six edges and five vertices

V1: x1, y1, z1

V2: x2, y2, z2

VERTEX TABLE

E1: V1, V2

E2: V2, V3

EDGE TABLE

S1: E1, E2,E3

S2: E3, E4, E5, E6

SURFACE-FACET TABLE

http://www.icg.tu-graz.ac.at/courses/bacgvis/slides

Plane equations

• Ax+By+Cz+D=0 – Plane parameter: A, B, C and D

• Normal vector (N) the plane equation: x − 1 = 0.

The normal vector: N=( A, B, C ) Plane equation Ax + By + Cz + D = 0

3D cartesian coordinate

x axis

y axis

z axis

Right-handed cartesian

x axis

y axis

Left-handed cartesian

z axis

Front and Back Polygon Faces (1)

• Back face = polygon side that faces into the object interior

• Front face = polygon side that faces outward

• Behind a polygon plane = visible to the polygon back face

• In front of a polygon plane = visible to the polygon front face

Front and Back Polygon Faces (2)

• Ax + By + Cz + D = 0 for points on the surface

< 0 for points behind > 0 for points in front

– right-handed coordinate system – polygon points in counterclockwise order

• V1, V2, V3 counterclockwise => normal vector N = (V2 - V1) x (V3 - V1)

What is Cross product (x) ?

• A mathematical joke asks, – "What do you get when you cross a

mountain-climber with a mosquito? "

• On the television sitcom, Head of the Class asks, – "What do you get when you cross an

elephant and a grape?"

http://mathworld.wolfram.com/CrossProduct.html

Cross product (x)

• The orientation determined by the right-hand rule

http://mathworld.wolfram.com/CrossProduct.html

OpenGL polygon fill-area functions

• OpenGL provides a special rectangle function – glRect*(x1, y1, x2, y2);

• *: i (integer), s (short), f (float), d (double) and v (vector) • plRectiv(vertex1, vertex2);

• Fill rectangle use “glVertex” • glBegin (GL_POLYGON);

– glVertex2iv (p1); – glVertex2iv (p2); – glVertex2iv (p3); – glVertex2iv (p4); – glVertex2iv (p5); – glVertex2iv (p6);

• glEnd ();

How to design “font”?

A complete set of type of one size and face.

South China Morning Post, 13 Sep., 2005

Texture

• Graphics displays often include textural information : – labels on graphs and charts

– signs on buildings or vehicles

– General identifying information for simulation and visualization applications.

Typeface (1)

• Letters, numbers and other characters can be displayed in a variety of sizes and styles. – The overall design style for a set of characters – Routines for generating character primitives

• 20-point Courier Italic or 28-point Palatino Bold

• font : – 14 points, a total character height is about 0.5 cm. A

– 72 points is about 2.54 cm (1 inch) B

Typeface (2)

the letter B represented with an 8x8 bilevel bitmap pattern and with an outline shape defined with straight line and curve segments

Homework (1) • Select 6 points and try to draw primitive

constant – (a) GL_POLYGON (b) GL_TRIANGLES (c)

GL_TRIANGLE_STRIP (d) GL_TRIANGLE_FAN

• Select 8 points and try to draw primitive constant – (a) GL_QUADS (b) GL_QUAD_STRIP

• Draw

Homework (2)

• Draw switch – (1) parabolic

• x = y2

(-10≦y ≦10)

– (2) 2D curve path • 2D : Set (x0, y0) & step (relate to θ),

m:integer – r=sin (mθ)

r=A+Bcos(mθ) r=e-mθ

Reference

• http://www.icg.tu-graz.ac.at/courses/bacgvis/slides

• South China Morning Post, 13 Sep., 2005

• Computer Graphics with OpenGL 3/e, Hearn Baker, Third edition, ISBN：0131202383

CG OpenGL line & area-course 3

Design

Transcript of CG OpenGL line & area-course 3

OPenGL.ppt [Modo de Compatibilidade]smusse/CG/PDF2013_2/OpenGL.pdf · OpenGL –Máquina de Estados OpenGL é uma máquina de estados É possível colocá-la em vários estados, ou

CG com OpenGL - Departamento de Engenharia Informáticapsousa/aulas/SGRAI/SGRAI-2006... · Instituto Superior de Engenharia do Porto Paulo Gandra de Sousa psousa@dei.isep.ipp.pt.

บทที่ 1 แนะนำ OpenGL ( Introduction to OpenGL )

OpenGL Programming Course OpenGL Programming …iwahori/Ogl/OpenGL-text-091.pdf · との混合プログラミング (2) 応用編 B{1 B.1 ... 入門 1{7 Op enGL プログラミング

Interação (OpenGL)

คอมพิวเตอร์กราฟิกส์ใช้ OpenGL (Computer Graphics using OpenGL)

OpenGL 2.0 -- GLSLdindinx.net/OpenGL/cours/opengl2_GLSL.pdf · 2010. 7. 17. · FONCTIONS OPENGL 2.0 Pour supporter les shaders, OpenGL introduit quelques fonctions : glCreateShader()

Introdução à Opengl com Java - lcad.icmc.usp.brpaulovic/aulas/CG/slides_novos/...Java_GLSL.pdf · Introdução à Opengl com Java OpenGL OpenGL Ambientep/escrevereexecutarprogramasgráﬁcos

Tutorial OpenGL

OpenGL (+3.2) OpenTK Shaders Introducción: Laboratorio 0 ...cs.uns.edu.ar/cg/practicos/Labo0 2015.ShadersBuffers.pdf · En OpenGL, los shaders y programas se manejan (al igual que

Advances in OpenGL and OpenGL ES - 开放文档 - Free and ...docs.huihoo.com/.../2012/session_513__advances_in_opengl_and_op… · Advances in OpenGL and OpenGL ES Chris Niederauer

OpenGL Programming (2)graphics.hallym.ac.kr/teach/2008/cg/src/15prac.pdf · 2008. 9. 16. · OpenGL Programming (2) 11th Week, 2008 2 Computer Graphics Adding the Source Code. 3 Computer

Vježbe Nela Bosner OpenGL Završni Vježbe - Naslovnicanela/rgpredavanja/RG_vjezbe.pdf · Sintaksa OpenGL naredbi OpenGL zaglavlja GLUT naredbe Neke osnovne OpenGL naredbe Transformacije

CG Course Research Paper (Rachid ZAIR)

OpenGL (2º Parte)mercedes/disciplinas/2019/CG/CG-OpenGL2... · 2019. 4. 5. · 9 OpenGL - Mouse Botões do mouse podem ser programados para responder a cliques e ao movimento do

OpenGL Programming - 计算机图形学 OpenGL Programming.pdf · OpenGL (Open Graphics Library) •OpenGL is a cross-language, multi-platform application programming interface (API)

コンピュータグラフィックス特論Ⅱ · – 他にもOpenGLの入門書は多数ある – OpenGLでつくる3次元CG & アニメーション（3600円） • 酒井幸市著

OpenGL 그래픽스 라이브러리3map.snu.ac.kr/courses/2011/cg/IntroOpenGL.pdf · 2011-09-14 · OpenGL APIs •OpenGL core library •gl.h opengl32.lib opengl32.dll •GLU(OpenGL

OpenGL 프로젝트

OpenGL - cg/2008/PDF/kap-21.pdf · OpenGL 21.1 Grundlagen ... • Per Vertex operations transformieren 3D-Welt-Koordinaten nach Vorgabe der syntetischen Ka-mera.