GRAPHICS PROGRAMMING
Basic of computer graphics with OpenGL
Handful graphics function
 OpenGL :
 by silicon graphics
 PHIGS :
 Programmer’s Hierarchical Graphics System
 GKS :
 Graphic Kernel System
 JAVA-3D
 By Sun micro-system
 DirectX: Microsoft corp.
WHY 3D
Former graphic model
 Pen plotter model
 Useful for drawing 2D
large diagram
moveto(0,0);
 API ex. LOGO, GKS, and
PostScript
lineto(1,0);
 Unsuitable for 3D model
: need sophisticated
lineto(0,0);
math to user
lineto(1,1);
lineto(0,1);
moveto(0,1);
lineto(0.5,1.866);
lineto(1.5,1.866);
lineto(1.5, 0.866);
lineto(1,0);
moveto(1,1);
lineto(1.5, 1.866);
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 CRT coordinate system (Raster
coordinate)
Graphic 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 graphic system thinking as a state
machine
 There are 2 types of Graphic functions
 thing that define primitives
 thing that changes the state
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
 Geometric
 Able to manipulated
 Raster
 Lack of geometric properties
Let’s have a look at
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>
OpenGL Object form
 Defined object in glBeginglEnd loop
 2 kinds of primitives that is
used to defined object
 No interior, eg. points, line
glBegin(type);
glVertex*(…);
.
.
.
glEnd();
C command for defining object
 have surface, eg. polygon
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 graphic
performance
 Display either only edges or fill
 Correct properties should be simple, convex, and flat
 3D polygon is unnecessarily flat
Filled objects
polygons displaying
simple polygon
nonsimple polygon
convex property
Convex object properties
 3D convex object: 3 vertices are not collinear
 Safe for rendering if use triangle
 Hardware and software often support
Types of Polygon
 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
(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
float C= PI/180.0; //degrees to radians, M_PI = 3.14159…
for (float phi = -80.0; phi <= 80.0; phi += 20.0) {
glBegin(GL_QUAD_STRIP);
for (float theta = -180.0; theta <= 180.0; theta += 20.0) {
float x=sin(c*theta)*cos(c*phi);
float y=cos(c*theta)*cos(c*phi);
float 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));
glVertex3d(x,y,z);
}
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);
glVertex3d(x,y,z);
}
glEnd();
x=y=0; // South pole modeling
z=-1:
glBegin(GL_TRIANGLE_FAN);
glVertex3d(x,y,z);
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);
glVertex3d(x,y,z);
}
glEnd();
Today topic
 fonts
 attributes
 color system
 drawing a graphic with OpenGL
Text
2 types of text
 Stroke Text
 Constructed via using
graphic primitives
 Able to transform like other
primitives
 Raster Text
 Character are defined as
rectangle of bits block
 Stroke 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   Si ( )C ( )d 
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
additive color model
subtractive 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
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 in 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 state, 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
= CRT screen
 Window default origin: (0,0) at lower-left corner
like CRT but mouse at top-left
 OpenGL function (GLUT function) for window
glutInit (int *argcp, char **argv);
glutCreateWindow(char *title); /* given the window title */
Change the 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.
View port
 A rectangular area of the display window
 Setting a view port
void glViewport(GLint x, GLint y, GLsizei w, GLsizei h);
The 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
1.
2.
3.
4.
5.
6.
Pick an 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
}
Using 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 element array to carry
point
a
// 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] ; // the members are
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}}
 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);
}
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}
};
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.
Exercises
 Write a part of C program to define a unit
circle object at position (1,1) using OpenGL
command
Hint: you may use primitive such as
TRIANGLE_FANS, or others