Basic of computer graphics with OpenGL Graphics Programming Basic of computer graphics with OpenGL

Handful graphics function OpenGL : by silicon graphics PHIGS : Programmer’s Hierarchical Graphics System GKS : Graphics Kernel System JAVA-3D/JOGL By Sun micro-system DirectX: Microsoft corp.

Target Coordinate Systems CG system is unable define exactly unit like cm, inch etc CG is a device independent system Current coordinate is user coordinate = world coordinate It should be match with Display coordinate system (Raster coordinate)

Graphics function properties 7 groups of function Primitive: What is object ? low level objects or atomic entities, ex. point, polygon etc, Attribute How the appear: fill, bold character Viewing How we saw the image Transformation Transform of object: rotate, move Input Deal with the devices: keyboard, mouse etc. Control function Multiwindow, multiprocessing environment handling. Inquiry function Information providing for different API

Pipeline and State Machine Entire graphics system thinking as a state machine There are 2 types of Graphics functions Things that define primitives Things that changes the state เรามีแนวคิดเกี่ยวกับระบบกราฟิกส์เป็นไปในลักษณะของเครื่องจักรที่มีการเปลี่ยนสถานะการทำงาน โดยที่มีฟังก์ชันการทำงานหลักอยู่ 2 แบบใหญ่ๆ กำหนดวัตถุพื้นฐาน กำหนดสถานะการทำงาน

The OpenGL Interface Begin with “gl” Stored in library and referred to as GL There are Graphics Utility Library (GLU) GLU Toolkit (GLUT) GLX or WGL : glue for GL to OS Defined in standard header folder “GL” filename “glut.h”

Primitives and Attributes API should contain small set of primitives that every hardware can be supported Ex. Line, polygons, text Variety of primitive such as circle, curves, surface and solids able to build sophisticated object but few hardware supported OpenGL takes an intermediate Support 2 classes of primitives Geometric primitives : pass through a geometric pipeline Raster primitives: pass through pixel pipeline General API system can generate only primitives. Compose of primitives can generate object

Geometric Able to manipulated Raster Lack of geometric properties

The 2D Modeling Special case of 3D Suppose z=0, every point refer to (x, y,0) Generally object created from set points In graphics system , the word “vertex” more preferred that “point” OpenGL function form glVertex*(); where *: nt or ntv , 2 or 3 characters form n : number of dimension ( 2, 3 or 4) t : data type (ingeter, float, double, v for pointer) Ex. glVertex2i(); /* vertex for 2D integer type*/ The data type may change to GL type instead of C Ex. GLfloat = float in C Note: All of them have already defined in header fine <GL\glut.h>

Difference type of object form OpenGL Object form Defined object in glBegin- glEnd loop 2 kinds of primitives that is used to defined object No interior, eg. points, line Have surface, eg. polygon glBegin(type); glVertex*(…); . glEnd(); C command for defining object Difference type of object form

Polygon Basics Close object that has interior Able to use as curve surface Number of generated polygons per time is used as graphics performance Display either only edges or fill Correct properties should be simple, convex, and flat 3D polygon is unnecessarily flat polygons displaying nonsimple polygon simple polygon convex property Filled objects

Convex object properties 3D convex object: 3 vertices are not collinear Safe for rendering if use triangle Hardware and software often support

Polygon display mode GL_POLYGONS Edges are perform line loop and close Edges has no with define either fill or edges using glPolygonMode If both, draw twice

Special types polygon Triangles and Quadrilaterals Strips and Fans (GL_TRIANGLES, GL_QUADS) Strips and Fans (GL_TRIANGLE_STRIP, GL_QUAD_STRIP, GL_TRIANGLE_FAN)

Sample object: Generating a Sphere assign to be polygons and used GL_QUAD_STRIP Use longitude and latitude schemes for the middle body For pole uses GL_TRIANGLE_FAN C=M_PI/180.0; //degrees to radians, M_PI = 3.14159… for (phi = -80.0; phi <= 80.0; phi += 20.0) { glBegin(GL_QUAD_STRIP); for (theta = -180.0; theta <= 180.0; theta += 20.0) { x=sin(c*theta)*cos(c*phi); y=cos(c*theta)*cos(c*phi); z=sin(c*phi); glVertex3d(x,y,z); x=sin(c*theta)*cos(c*(phi+20.0)); y=cos(c*theta)*cos(c*(phi+20.0)); z=sin(c*(phi+20.0)); } glEnd(); ใน

x=y=0; // North pole modeling z = 1; glBegin(GL_TRIANGLE_FAN); glVertex3d(x,y,z); c=M_Pi/180.0; z=sin(c*80.0); for(theta=-180.0; theta<=180.0;theta+=20.0){ x=sin(c*theta)*cos(c*80.0); y=cos(c*theta)*cos(c*80.0); } glEnd(); x=y=0,z=-1; // South pole modeling z = -sin(c*80.0); for(theta = -180.0; theta <= 180.0; theta=20.0){

Text 2 types of text Stroke Text Raster Text Constructed via using graphic primitives Able to transform like other primitives Raster Text Character are defined as rectangle of bits block

Stroke text Raster text Consume a lot of memories Postscript as an example Raster text Rapidly be placed in buffer by using bit-block-transfer (bitblt) operation Operate only character sizing Often store in ROM (hardware) Portability is limited by particular font GLUT provide 8x8 pixels function glutBitmapCharacter(GLUT_BITMAP_8_BY_13, C) C: ASCII character number Character is placed in the present position of screen

Curved Objects Create by using 2 approach Use the primitive except points n side polygon instead of circle Approximate sphere with polyhedron Curved surface by a mesh of convex polygon Use mathematical definition Quadric surfaces and parametric polynomial curved and surfaces example: Define sphere by center and a point on surface Cubic Polynomial is defined by 4 points OpenGL able to do both

Attributes About how primitive display Line : display color, type of line (dash, solid) Concern with immediate mode: display as soon as they are defined

Color Most interesting of perception and computer graphics Base on three color theory If using additive color model - c = T1R+T2G+T3B C: color that we trying to match T1, T2, T3: strength of intensity, the tristimulus value

Human Visual System Our visual system do a continuous perception Depends on 3 types of cone cell Visually indistinguishable if they have the same tristimulus value CRT is an example of additive color system Ai: brain perception value Si: cone cell sensitivity Viewing a point as a color solid cube

Subtractive color model The complementary of additive color model Start with white surface If white light hit the surface, color will be absorb except the object color which are reflect Ex. painting and printing Complementary color: cyan, magenta, yellow subtractive color model additive color model

RGB-color model Use separate buffer for each color Each pixel has 3 bytes (24 bits) for each color 16 Million shade of color OpenGL function glColor3f(r, g, b); ex. Red glColor3f(1.0, 0.0, 0.0);

RGBA, the 4 color model A: Alpha channel Store in frame buffer like RGB For creating effect ex. fog, combining images. OpenGL treat as opacity or transparency Ex. OpenGL command for 4 color model glClearColor(1.0, 1.0, 1.0, 1.0); White color and opaque

Indexed Color Difficult to support in hardware Higher memory requirements but now memory is cheaper Use color tray of artist as principle Infinite color can be produced from different quantity of primary colors

OpenGL indexed color function glIndex(element); Select color out of table glutSetcolor(int color, GLfloat red, GLfloat blue, GLfloat green); Set color entry to map the color table

Color Attributes For RGB mode Note: glClearColor(1.0, 1.0, 1.0); /* clear to white */ glColor3f(1.0, 0.0, 0.0); /* setting point to red */ glPointSize(2.0); /* 2 pixel wide */ Note: If 2 display differ in pixel size, rendered images may appear slightly different

Viewing Method for objects appear on screen Use synthetic camera concept Fix lens and fix location Picture would be distort like real world If we need to take an elephant picture, camera should far enough to take all information

2D Viewing Base on the 2D rectangular area Know as viewing rectangle or clipping rectangle Be a special case of 3D viewing ex. plane at z=0 Default in 2x2x2 volume, origin at the center and bottom-left corner is at (-1.0, -1.0)

Orthographic View 2D view the orthographic projection of 3D Function void glOrtho(GLdouble left, GLdouble right, GLdouble bottom, GLdouble top, GLdouble near, GLdouble far); // near, far: distance which are measured from camera /* orthographic projection from 3D */ void gluOrtho2D(GLdouble left, GLdouble right, GLdouble bottom, GLdouble top); /* 2D equivalent to glOrtho but near and far set to -1.0, 1.0 */ Unlike camera, it is able to view behind object

Matrix Modes Between graphic pipeline states, any transformation 2 important matrices: model-view Projection glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluOrtho2D(0.0, 500.0, 0.0, 500.0); glMatrixMode(GL_MODELVIEW);

Control function Concern about software environment between software and platform Different platform will have different interfacing GLUT also provide the utility : see further

Windows interfacing Window : A rectangular area of our display, max = Screen Window default origin (0,0) at lower-left corner like Screen but mouse at top-left OpenGL function (GLUT function) for window glutInit (int *argcp, char **argv); glutCreateWindow(char *title); /* given the window title */

Display setup glutInitDisplayMode(GLUT_RGB| GLUT_DEPTH | GLUT_DOUBLE); GLUT_RGB: define RGB color mode GLUT_DEPTH: a depth buffer for hidden-surface removal GLUT_DOUBLE: number of buffer Double/Single default: RGB color, no hidden surface removal, single buffering glutInitWindowSize(480, 640); glutInitWindowPosition(0,0)

Aspect ratio Ratio of rectangle’s width to its height If glOrtho and glutInitWindowSize are not specified the same size, object are distort. เมื่อโปรแกรมเริ่มทำงาน OpenGL จะกำหนดให้ขนาดของพิกเซลของวินโดวส์ที่เรากำหนดมีขนาดเป็นจำนวนหน่วยที่กำหนดโดยคำสั่ง glOrtho หรือ gluOrtho2D เช่น เมื่อเรากำหนดขนาดของมุมมองแบบ Orthographic ด้วยคำสั่ง glOrtho2D(-2, 2, -2, 2); ขณะที่ขนาดของวินโดวส์เป็น 400x300 pixel จากการกำหนดด้วยคำสั่งดังกล่าว ขนาดของทางด้านกว้างของมุมมองวัตถุมีขนาดเป็น 4 หน่วย (-2 ถึง 2 ) เทียบได้กับขนาดของ 400 พิกเซลของหน้าต่าง ส่วนทางด้านสูงมีขนาด 300 พิกเซลสำหรับมุมมองขนาด 4 หน่วย ซึ่งทำให้การแสดงวัตถุมีขนาดที่ไม่เท่ากันในสัดส่วนของด้านกว้างและสูง ซึ่งภาพที่ได้จะผิดสัดส่วนไปจากความเป็นจริง ซึ่งเราจะต้องมีการปรับมุมมองดังกล่าวให้มีสัดส่วนที่ถูกต้องโดยการใช้คำสั่ง gluOrtho2D ดังนี้ if (w<= h) glOrtho2D(-2, 2, -2*h/w, 2*h/w); else glOrtho2D(-2*w/h, 2*w/h, -2, 2);

void glViewport(GLint x, GLint y, GLsizei w, GLsizei h); A rectangular area of the display window Setting a view port void glViewport(GLint x, GLint y, GLsizei w, GLsizei h);

Service function: main, display and myinit glutMainLoop(); /* begin an event-processing loop, let the window waiting for kill process */ void glutDisplayFunc(void *(func)(void)); /* call to the redisplay function name func */ #include <GL/glut.h> void main(int argc, char **argv){ glutInit(&argc, argv); glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB ); glutInitWindowSize(500, 500); glutInitWindowPosition(0, 0); glutCreateWindow("Simple OpenGL example"); glutDisplayFunc(display); myinit(); glutMainLoop(); } Program template

Program structure consisting myinit : setup user options to state variables dealing with viewing and attributes-parameters

Example program: Sierspinski Gasket Proceeding of Sierspinski Pick a random initial point in triangle Select vertex Finding the halfway point between initial point and random vertex Mark and display new point Replace the initial point with this new point Return to step 2

Pseudo code main() { Initialize_the_system(); for(some_number_of_points) { pt = generate_a_point(); display_the_point(pt); } cleanup(); Sierpinski gasket

Array with OpenGL // For 3D vertex, 2D is a special case GLfloat vertex[3]; /* define array */ // Then we can use glVertex3fv(vertex); /* pass by reference */ // Defining geometric object in Begin and End fn. statement glBegin(GL_LINES); glVertex2f(x1, y1); glVertex2f(x2, y2); glEnd();

The same data able to define another object // define a pair of points glBegin(GL_POINTS); glVertex2f(x1, y1); glVertex2f(x2, y2); geEnd();

Using a 2 elements array to carry a point // By defining new data type with 2 element array typedef GLfloat point2[2]; // point2[0] carry x data // point2[1] carry y data when use point2 vertices[3] ; // that means vertices[0][0], vertices[1][0], vertices[2][0] // carry x value vertices[0][1], vertices[1][1], vertices[2][1] // carry y value point2 vertices[3] = {{0.0, 0.0}, {250.0, 500.0}, {500,0}}

Graphics Example Sierspinski Thing need to do Coloring Locate the image Define size Window creating Image clipping Image duration 5000 random point 2D Sierspinski

Triangular gasket There is no point in the middle triangle The same observation can be applied to the other 3 triangles and so on Another method to fill the area is use triangle polygon instead of point Strategy Start with a triangle which subdivide the area to 4 triangles Remove the middle one Repeat to other triangles until the size of the removing triangle is small enough. Let say 1 pixel This is the recursive program See program

typedef float point2[2]; /* initial triangle */ point2 v[]={{-1.0, -0.58}, {1.0, -0.58}, {0.0, 1.15}}; void triangle( point2 a, point2 b, point2 c) { /* display one triangle */ glBegin(GL_TRIANGLES); glVertex2fv(a); glVertex2fv(b); glVertex2fv(c); glEnd(); } void divide_triangle(point2 a, point2 b, point2 c, int m) { /* triangle subdivision using vertex numbers */ point2 v0, v1, v2; int j; if (m>0) { for(j=0; j<2; j++) v0[j]=(a[j]+b[j])/2; for(j=0; j<2; j++) v1[j]=(a[j]+c[j])/2; for(j=0; j<2; j++) v2[j]=(b[j]+c[j])/2; divide_triangle(a, v0, v1, m-1); divide_triangle(c, v1, v2, m-1); divide_triangle(b, v2, v0, m-1); } else /* draw triangle at end of recursion */ triangle(a,b,c);

with 4 level recursion with 5 level recursion void display(void) { glClear(GL_COLOR_BUFFER_BIT); divide_triangle(v[0], v[1], v[2], n); glFlush(); } with 4 level recursion with 5 level recursion

3D Sierspinski gasket Begin with tetrahedron instead triangle Use 3D point point v[]={ { 0.0, 0.0, 1.0}, { 0.0, 0.942809, -0.33333}, {-0.816497, -0.471405, -0.333333}, { 0.816497, -0.471405, -0.333333} }; ถ้าเราแทนการเริ่มต้นจากสามเหลี่ยมมาเป็นปิรามิดฐานสามเหลี่ยม (tetrahedron) ซึ่งเป็นวัตถุสามมิติ แล้วใช้วิธีการแบบเดิมจะทำให้เราได้รูปในลักษณะสามมิติดังที่แสดง

The hidden surface removal Problem may happen if there is no relation between surface Close opaque object should mask the far object The part of far object which overlap with close object should remove Z-buffer algorithm is a method to manipulate. บางครั้งปัญหาอาจเกิดขึ้นได้อ้นเนื่องมาจากไม่มีความสัมพันธ์ระหว่างแต่ละผิวที่สร้างขึ้น โดยลักษณะที่เกิดขึ้นตามความเป็นจริง วัตถุที่ทึบแสงควรที่จะบังวัตถุที่อยู่ไกล ดังนั้นส่วนที่ถูกบังควรที่จะเป็นส่วนที่มองไม่เห็นและควรที่จะนำมันออกไปจากภาพ มีหลายๆอัลกอริธืมที่ใช้ในการจัดการลักษณะของปัญหาดังกล่าว z-buffer เป็นอัลกอริธ์มหนึ่งที่ใช้ในการจัดการปัญหาดังกล่าว เราจะได้ทำการศึกษาถึงวิธีการต่างๆในโอกาสต่อไป

Exercises Write a part of C program to define a unit circle object at position (1,1) using OpenGL command Explain the algorithm that you use to draw Hint: you may use primitive such as TRIANGLE_FANS, or others Write 2 unit circles, one at (1,1) and the other at (-1,-1). The (1,1) circle use full surface shaded with red color and the other display in wire frame. Space-filling curves have interested mathematicians for centuries. In the limit, these curves have infinite length, but they are confined to a finite rectangle and never cross themselves. Many of these curves can be generated iteratively. Consider the “rule” pictured in shown below that replaces a single line segment with four shorter segments. Write a program that starts with a triangle and iteratively applies the replacement rule to all the line segments. The object that you generate is called the Koch snowflake.