Computer Graphics - Graphics Programming - Hanyang University Jong-Il Park

Computer GraphicsComputer Graphics- Graphics Programming- Graphics Programming - -

Hanyang University

Jong-Il Park

Division of Electrical and Computer Engineering, Hanyang University

Essential Functions in APIEssential Functions in API

Objects Viewer Light sources Material properties


ObjectsObjects Defined by

Sets of vertices Relationship between a list of vertices and the object

Relationship Simple relationship

Line segments, rectangles, polygons, … Complex relationship

Circle defined by 3 points or center and one point

Primitive Points, line segments, polygons, text …


Eg. Triangle in OpenGLEg. Triangle in OpenGL

glBegin(GL_POLYGON);glVertex3f(0.0, 0.0, 0.0);glVertex3f(0.0, 1.0, 0.0);glVertex3f(0.0, 0.0, 1.0);

glEnd();


Viewer = Virtual CameraViewer = Virtual Camera

Necessary specifications Position Orientation Focal length Film plane


Eg. Viewer in OpenGLEg. Viewer in OpenGL

Independence

Viewer Objects

cf. Classical viewing techniques in architecture

gluLookAt(cop_x, cop_y, cop_z, at_x, at_y, at_z, …);// position and orientation

gluPerspective(field_of_view, aspect_ratio …);// lens, field of view..


Perspective vs. OrthographicPerspective vs. Orthographic

Perspective projection

Orthographic projection


ViewportViewport

glViewport(x,y,w,h)


Modeling-Rendering ParadigmModeling-Rendering Paradigm

Modeling software Animation software Rendering software

M+A+R3D StudioSOFTIMAGEMAYA …

M+RRhinocerossolidThinking …

A+RArcRender …


Graphics ArchitectureGraphics Architecture

Early graphics systems

Display processors


Pipeline ArchitecturesPipeline Architectures

Principle

Throughput The rate at which the data flows through the system

Latency The time for a datum to pass through the system


Geometric PipelineGeometric Pipeline

Geometric processing Transformation

Concatenating Clipping Projection

Rasterization = scan-conversion


OpenGL APIOpenGL API

Graphics functions Primitive functions Attribute functions Viewing functions Transformation functions Input functions Control functions


OpenGL PipelineOpenGL Pipeline


OpenGL Data TypesOpenGL Data Types

For portability Eg. glVertex2f() f: suffix standing for GLfloat

Suffix Typical C/C++ OpenGL type name

b signed char GLbyte

s short GLshort

i int or long GLint, GLsizei

f float GLfloat

d double GLdouble

ub unsigned char GLubyte

us unsigned short GLushort

ui unsigned int or long GLuint, GLenum


Primitives and AttributesPrimitives and Attributes Points and line-segment types

glBegin(type);glVertex*(…);…glVertex*(…);

glEnd();


• Polygon types


Application StructureApplication Structure Configure and open window Initialize OpenGL state Register input callback functions

render resize input: keyboard, mouse, etc.

Enter event processing loop


““Hello World” ExampleHello World” Example

#include <stdio.h> #include <GL/glut.h> void display(void) {

glClear( GL_COLOR_BUFFER_BIT); glColor3f(0.0, 1.0, 0.0); glBegin(GL_POLYGON); glVertex3f(2.0, 4.0, 0.0); glVertex3f(8.0, 4.0, 0.0); glVertex3f(8.0, 6.0, 0.0); glVertex3f(2.0, 6.0, 0.0); glEnd(); glFlush();

} int main(int argc, char **argv) {

printf("hello world\n"); glutInit(&argc, argv); glutInitDisplayMode ( GLUT_SINGLE | GLUT_RGB | GLUT_DEPTH);

glutInitWindowPosition(100,100); glutInitWindowSize(300,300); glutCreateWindow ("square");

glClearColor(0.0, 0.0, 0.0, 0.0); glMatrixMode(GL_PROJECTION); glLoadIdentity(); glOrtho(0.0, 10.0, 0.0, 10.0, -1.0, 1.0);

glutDisplayFunc(display); glutMainLoop();

return 0; }

#include <stdio.h>

#include <GL/glut.h>

int main(int argc, char **argv)

{ printf("hello world\n");

glutInit(&argc, argv);

glutInitDisplayMode (GLUT_SINGLE |

GLUT_RGB | GLUT_DEPTH);

Initialize GLUT and processes command

line options


RGB red, green, and blue, typically 8 bits per pixel GLUT_RGB

Aalpha or accumulation buffer; used for compositing images

GLUT_RGBA

Z depth value, used for Z-buffer visibility testsGLUT_DEPTH

double buffer

extra copy of all buffers, used for smooth animationGLUT_DOUBLE

stencil buffer

several extra bits, useful in compositing imagesGLUT_STENCIL

glutInitDisplayMode();


““Hello World” Example (2)Hello World” Example (2)








return 0; }



• Set window position, size, and name And create a window

• Clear color (white) and Set the viewer

* GL_MODELVIEW


““Hello World” Example (3)Hello World” Example (3)








return 0; }

glClear( GL_COLOR_BUFFER_BIT); // screen clear glColor3f(0.0, 1.0, 0.0); // set the color to G glBegin(GL_POLYGON); // draw glVertex3f(2.0, 4.0, 0.0); glVertex3f(8.0, 4.0, 0.0); glVertex3f(8.0, 6.0, 0.0); glVertex3f(2.0, 6.0, 0.0); glEnd(); glFlush(); // send all output to display


• glutDisplayFunc() registers the call-back function.• glutMainLoop() hands execution control over to the glut library

• Display call-back function


Run and you getRun and you get


SummarySummary

Essential ComponentsEssential Components

Main program main() function Display callback function Optionally, interaction function

Mouse callback function Keyboard callback function Reshape callback function


Interaction Interaction

glutMouseFunc(myMouse)registers myMouse() with the event that occurs when the

mouse button is pressed or released glutMotionFunc(myMovedMouse)

registers myMovedMouse() with the event that occurs when the mouse is moved while one of the buttons is pressed

glutKeyboardFunc(myKeyboard)Registers myKeyboard() with the event that occurs when

a keyboard key is pressed


Eg. Placing Dots with MouseEg. Placing Dots with Mouse

void myMouse(int button, int state, int x, int y){

if(button == GLUT_LEFT_BUTTON && state == GLUT_DOWN)

drawDot(x,screenHeight –y);else if(button == GLUT_RIGHT_BUTTON && state == GLUT_DOWN)

exit(-1);}

void drawDot(GLint x, GLint y){

glBegin(GL_POINTS); glVertex2i(x,y);glEnd();

}

Leftbutton draw a dotRightbutton terminate


Pen-Plotter ModelPen-Plotter Model

moveto(0,0);

lineto(1,0);

lineto(1,1);

lineto(0,1);

lineto(0,0);

•Used in early graphics systems•LOGO, GKS, PostScript…


Homework #3Homework #3

2D Graphics Programming [OpenGL] Open a window with 480 lines x 640 pixels Build your own paint program capable of drawing dots,

lines, line strips, line loop, … Interaction: Use the mouse and the keyboard Hint: Follow the methods in Chap.3 of the textbook

Read Chap.4

[Due: 12 Oct.]

Documents

Computer Graphics - Graphics Programming - Hanyang University Jong-Il Park