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

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

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

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

5. 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 แบบใหญ่ๆ
กำหนดวัตถุพื้นฐาน
กำหนดสถานะการทำงาน

6. 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”

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

8. Geometric
Able to manipulated
Raster
Lack of geometric properties

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

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

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

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

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

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

15. 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 = …
for (phi = -80.0; phi <= 80.0; phi += 20.0) {
glBegin(GL_QUAD_STRIP);
for (theta = ; 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(); ใน

16. 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 = ; theta <= 180.0; theta=20.0){

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

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

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

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

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

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

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

24. 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);

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

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

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

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

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

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

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

32. 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);

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

34. 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 */

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

36. 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);

37. 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);

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

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

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

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

42. 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();

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

44. 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}}

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

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

47. 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);

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

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

50. 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 เป็นอัลกอริธ์มหนึ่งที่ใช้ในการจัดการปัญหาดังกล่าว
เราจะได้ทำการศึกษาถึงวิธีการต่างๆในโอกาสต่อไป

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