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

Division of Electrical and Computer Engineering, Hanyang University

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 …

Division of Electrical and Computer Engineering, Hanyang University

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

Division of Electrical and Computer Engineering, Hanyang University

Viewer = Virtual CameraViewer = Virtual Camera

Necessary specifications Position Orientation Focal length Film plane

Division of Electrical and Computer Engineering, Hanyang University

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

Division of Electrical and Computer Engineering, Hanyang University

Perspective vs. OrthographicPerspective vs. Orthographic

Perspective projection

Orthographic projection

Division of Electrical and Computer Engineering, Hanyang University

ViewportViewport

glViewport(x,y,w,h)

Division of Electrical and Computer Engineering, Hanyang University

Modeling-Rendering ParadigmModeling-Rendering Paradigm

Modeling software Animation software Rendering software

M+A+R3D StudioSOFTIMAGEMAYA …

M+RRhinocerossolidThinking …

A+RArcRender …

Division of Electrical and Computer Engineering, Hanyang University

Graphics ArchitectureGraphics Architecture

Early graphics systems

Display processors

Division of Electrical and Computer Engineering, Hanyang University

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

Division of Electrical and Computer Engineering, Hanyang University

Geometric PipelineGeometric Pipeline

Geometric processing Transformation

Concatenating Clipping Projection

Rasterization = scan-conversion

Division of Electrical and Computer Engineering, Hanyang University

OpenGL APIOpenGL API

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

Division of Electrical and Computer Engineering, Hanyang University

OpenGL PipelineOpenGL Pipeline

Division of Electrical and Computer Engineering, Hanyang University

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

Division of Electrical and Computer Engineering, Hanyang University

Primitives and AttributesPrimitives and Attributes Points and line-segment types

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

glEnd();

Division of Electrical and Computer Engineering, Hanyang University

• Polygon types

Division of Electrical and Computer Engineering, Hanyang University

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

render resize input: keyboard, mouse, etc.

Enter event processing loop

Division of Electrical and Computer Engineering, Hanyang University

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

Division of Electrical and Computer Engineering, Hanyang University

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

Division of Electrical and Computer Engineering, Hanyang University

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

#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; }

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

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

• Clear color (white) and Set the viewer

* GL_MODELVIEW

Division of Electrical and Computer Engineering, Hanyang University

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

#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; }

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(display); glutMainLoop();

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

• Display call-back function

Division of Electrical and Computer Engineering, Hanyang University

Run and you getRun and you get

Division of Electrical and Computer Engineering, Hanyang University

SummarySummary

Essential ComponentsEssential Components

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

Mouse callback function Keyboard callback function Reshape callback function

Division of Electrical and Computer Engineering, Hanyang University

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

Division of Electrical and Computer Engineering, Hanyang University

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

Division of Electrical and Computer Engineering, Hanyang University

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…

Division of Electrical and Computer Engineering, Hanyang University

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