On to OpenGL Introduction to Computer Graphics and Animation (Principle of Computer Graphics)...

On to OpenGL

Introduction to Computer Graphics and Animation

(Principle of Computer Graphics)

Rattapoom Waranusast

Programmer’s Interface

• Programmer sees the graphics system through a software interface: the Application Programmer Interface (API)

SGI and GL

• Silicon Graphics (SGI) revolutionized the graphics workstation by implementing the pipeline in hardware (1982)

• To use the system, application programmers used a library called GL

• With GL, it was relatively simple to program three dimensional interactive applications

OpenGL

• The success of GL lead to OpenGL in 1992, a platform-independent API that was– Wide availability and hardware support.– Easy to use– Close enough to the hardware to get excellent performance– Device and language independence (portability)– Multiple programming language support– Stability

• Backward compatibility is mandated by the ARB.

– Scalability.• It can be implemented in PCs, workstations, supercomputers,

consumer electronics (games), and, recently, even mobile phones.

– Powerful 3D graphics.

OpenGL History

• Controlled by an Architectural Review Board (ARB) until 2006 (now Khronos Group)– Members include SGI, Microsoft (left in 2003), Nvidia,

AMD/ATI, Adobe, Apple, Intel, Google, IBM, Sony, Samsung, Nokia, Sun/Oracle, Mozilla, EA …

– Relatively stable (present version 4.1)• Evolution reflects new hardware capabilities

– Allows for platform specific features through extensions

• See http://www.opengl.org for up-to-date info

OpenGL Libraries

• OpenGL core library (GL, OpenGL32) – Lowest level: vertex, matrix manipulation

• glVertex3f(point.x, point.y, point.z)• OpenGL Utility Library (GLU)

– Provides functionality in OpenGL core but avoids having to rewrite code– Helper functions for shapes, transformations

• gluPerspective( fovy, aspect, near, far )• OpenGL Utility Toolkit (GLUT)

– Highest level: Window and interface management– Portable windowing API– Not officially part of OpenGL

• glutSwapBuffers()• Links with window system

– GLX for X window systems– WGL for Windows– AGL for Macintosh

OpenGL and Related API

GLUT

GLU

GL

GLX, AGLor WGL

X, Win32, Mac O/S

software and/or hardware

application program

OpenGL Motifwidget or similar

Windowing with OpenGL

• OpenGL is independent of any specific window systems

• OpenGL can be used with different window systems– X windows (GLX)– MFC– …

• GLUT provide a portable API for creating window and interacting with I/O devices

OpenGL State

• OpenGL is a state machine• OpenGL functions are of two types

– Primitive generating• Can cause output if primitive is visible• How vertices are processed and appearance of primitive are

controlled by the state

– State changing• Transformation functions• Attribute functions

OpenGL Conventions

• Functions in OpenGL start with gl– Most functions just gl (e.g., glColor()) – Functions starting with glu are utility functions (e.g., gluLookAt())

• Note that GLU functions can always be composed entirely from core GL functions

– Functions starting with glut are from the GLUT library, built on top of OpenGL and WGL (Windows) or X (Linux) for window management, mouse and keyboard events, etc.

• Created and distributed as an entirely different library

OpenGL Conventions

• Function names indicate argument type and number– Functions ending with f take floats– Functions ending with i take ints– Functions ending with b take bytes– Functions ending with ub take unsigned bytes– Functions that end with v take an array.

• Examples– glColor3f() takes 3 floats– glColor4fv() takes an array of 4 floats

OpenGL #defines

• Most constants are defined in the include files gl.h, glu.h and glut.h– Note #include <glut.h> should automatically

include the others– Examples– glBegin(GL_POLYGON)– glClear(GL_COLOR_BUFFER_BIT)

• include files also define OpenGL data types: Glfloat, Gldouble,…

Experiment 4.1

• Run square.cpp• The following 6 statements create the square

glBegin(GL_POLYGON);

glVertex3f(20.0, 20.0, 0.0);

glVertex3f(80.0, 20.0, 0.0);

glVertex3f(80.0, 80.0, 0.0);

glVertex3f(20.0, 80.0, 0.0);

glEnd();

Experiment 4.1

• Determine which way the x- and y-axes are oriented.

• One way to do that is by changing the vertex co-ordinates.

• The last co-ordinate is obviously the z co-ordinate.

OpenGL Co-ordinate system

x

y

(0,0)

(20,20,0)

(80,80,0)

Experiment 4.2

• What exactly do the vertex coordinate value mean? mm.? cm.? pixels?

• Change the glutInitWindowSize() parameter values of square.cpp first to glutInitWindowSize(300,300) and then to glutInitWindowSize(500,250).

Projection Statement

glOrtho(0.0,100.0,0.0,100.0,-1.0, 1.0);

• In the resize() function, which determine an imaginary view box inside which the programmer draws.

• GenerallyglOrtho(left,right,bottom,top,near,far);

sets up a viewing box with corners at 8 points.

(left, bottom, -far)

glOrtho

glOrtho(left,right,bottom,top,near,far);

z

x

y

(left, top, -near)

(left, bottom, -near) (right, bottom, -near)

(right, bottom, -far)

(right, top, -far)

(right, top, -near)

(left, top, -far)

(0.0, 0.0, -1.0)

glOrtho

glOrtho(0.0, 100.0, 0.0, 100.0, -1.0, 1.0);

z

x

y

(0.0, 100.0, 1.0)

(0.0, 0.0, 1.0) (100.0, 0.0, 1.0)

(100.0, 0.0, -1.0)

(100.0, 100.0, -1.0)

(100.0, 100.0, 1.0)

(0.0, 100.0, -1.0)

Viewing Box

glOrtho(left, right, bottom, top, near, far);

Viewing Box of square.cpp

Rendering Process of glOrtho

• Shoot– Objects are projected perpendicularly onto the front

face of the viewing box.– The front face of the viewing box is called the viewing

face and the plane on which is lies the viewing plane.

• Print– The viewing face is proportionately scaled to fit the

rectangular OpenGL window.

Right and Left –Handed Systems

z

x

y

z

x

y

Right-handed system Left-handed system

Experiment 4.3

• Change only the viewing box of square.cpp by replacing – glOrtho(0.0, 100.0, 0.0, 100.0, -1.0, 1.0) with – glOrtho(-100.0, 100.0, -100.0, 100.0, -1.0, 1.0).

• The location of the square in the new viewing box is different and, so as well, the result of shoot-and-print.

Experiment 4.3

• Change the viewing box of square.cpp by replacing – glOrtho(0.0, 100.0, 0.0, 100.0, -1.0, 1.0)

successively with the following, in each case trying to predict the output before running:– glOrtho(0.0, 200.0, 0.0, 200.0, -1.0, 1.0)– glOrtho(20.0, 80.0, 20.0, 80.0, -1.0, 1.0)– glOrtho(0.0, 100.0, 0.0, 100.0, -2.0, 5.0)

Experiment 4.4

• Alter the z coordinates of each vertex of “square” as follows:

glBegin(GL_POLYGON);

glVertex3f(20.0, 20.0, 0.5);

glVertex3f(80.0, 20.0, -0.5);

glVertex3f(80.0, 80.0, 0.1);

glVertex3f(20.0, 80.0, 0.3);

glEnd();

• The rendering does not change, why?

Experiment 4.5

• Add another square by inserting the following right after the code for the original square in square.cpp:

glBegin(GL_POLYGON);

glVertex3f(120.0, 120.0, 0.0);

glVertex3f(180.0, 120.0, 0.0);

glVertex3f(180.0, 180.0, 0.0);

glVertex3f(120.0, 180.0, 0.0);

glEnd();

Clipping

• OpenGL clips the scene to within the viewing box before rendering, so that objects or parts of objects drawn outside are not rendered.

• In Experiment 4.5, can you redefine the viewing box by changing the parameters of the glOrtho() statement so that both squares are visible?

Experiment 4.6

• For a more dramatic illustration of clipping, first replace the square in the original square.cpp with a triangle; in particular, replace the polygon code with the following:

glBegin(GL_POLYGON);

glVertex3f(20.0, 20.0, 0.0);

glVertex3f(80.0, 20.0, 0.0);

glVertex3f(80.0, 80.0, 0.0);

glEnd();

Experiment 4.6

• Next, lift the first vertex up the z-axis by changing it to glVertex3f(20.0, 20.0, 0.5); lift it further by changing its z-value to 1.5, then 2.5 and, finally, 10.0. Make sure you believe that what you see in the last three cases is indeed a triangle clipped to within the viewing box.

ComputerScreen

Screen Co-ordinates

• So, careful about this, especially when coding programs where data is read from one system and used in the other.

x

y

(0,0)

Experiment 4.7

• The color of the square in square.cpp is specified by the three parameters of the glColor3f(0.0, 0.0, 0.0) statement in the drawScene() routine, each of which gives the value of one of the three primary components, blue, green and red.

• Determine which parameters to glColor3f determine the blue, green, red components.

• Change parameters in glClearColor()

RGB Color Model

Experiment 4.8

• Add the additional color declaration statement glColor3f(1.0, 0.0, 0.0) just after the existing one glColor3f(0.0, 0.0,0.0) in the drawing routine of square.cpp so that the foreground color block becomes

// Set foreground (or drawing) color.

glColor3f(0.0, 0.0, 0.0);

glColor3f(1.0, 0.0, 0.0);

Experiment 4.8

• Replace the polygon declaration part of square.cpp with:glBegin(GL_POLYGON);

glColor3f(1.0, 0.0, 0.0);

glVertex3f(20.0, 20.0, 0.0);

glColor3f(0.0, 1.0, 0.0);

glVertex3f(80.0, 20.0, 0.0);

glColor3f(0.0, 0.0, 1.0);

glVertex3f(80.0, 80.0, 0.0);

glColor3f(1.0, 1.0, 0.0);

glVertex3f(20.0, 80.0, 0.0);

glEnd();

• Color is a state variable.

Interpolation

X = cP + (1-c)Q

x

y

(0,0)

Q (7,16)

P (1,4)

R

T

S

Exercise 4.1

1. Modify square.cpp to draw 6 squares (red, green, blue, cyan, magenta, and yellow) on the white background as: (in class)

Exercise 4.2

2. Modify square.cpp to draw one Equilateral, one Isosceles, one Scalene, and one Right triangles with different colors. (in class)

OpenGL Geometric Primitives

Experiment 4.9

• Replace glBegin(GL_POLYGON) with glBegin(GL_POINTS) in square.cpp and make the point size bigger by inserting

// Set point size

glPointSize(5.0);

just before glBegin(GL_POINTS) • Continue, replacing GL_POINTS with GL_LINES, GL_LINE_STRIP and, GL_LINE_LOOP.

• The thickness of lines can be set by a glLineWidth(width) call.

Experiment 4.10

• Replace the polygon declaration part of square.cpp with

glBegin(GL_TRIANGLES); glVertex3f(10.0, 90.0, 0.0); glVertex3f(10.0, 10.0, 0.0); glVertex3f(35.0, 75.0, 0.0); glVertex3f(30.0, 20.0, 0.0);

glVertex3f(90.0, 90.0, 0.0); glVertex3f(80.0, 40.0, 0.0);glEnd();

• Insert glPolygonMode(GL_BACK,GL_LINE); before glBegin(GL_TRIANGLES);

• Change GL_BACK to GL_FRONT and GL_FRONT_AND_BACK

Experiment 4.11

• Replace the polygon declaration part of square.cpp withglPolygonMode(GL_FRONT_AND_BACK, GL_LINE);

glBegin(GL_TRIANGLE_STRIP);

glColor3f(1.0, 0.0, 0.0);

glVertex3f(10.0, 90.0, 0.0);

glColor3f(0.0, 1.0, 0.0);

glVertex3f(10.0, 10.0, 0.0);

glColor3f(0.0, 0.0, 1.0);

glVertex3f(35.0, 75.0, 0.0);

glColor3f(1.0, 1.0, 0.0);

glVertex3f(30.0, 20.0, 0.0);

glColor3f(1.0, 0.0, 1.0);

glVertex3f(90.0, 90.0, 0.0);

glColor3f(0.0, 1.0, 1.0);

glVertex3f(80.0, 40.0, 0.0);

glEnd();

Experiment 4.12

• Replace GL_FRONT_AND_BACK in the previous experiment with GL_FRONT and GL_BACK

• Replace the polygon declaration part of square.cpp with

glBegin(GL_TRIANGLE_FAN);

glVertex3f(10.0, 10.0, 0.0);

glVertex3f(15.0, 90.0, 0.0);

glVertex3f(55.0, 75.0, 0.0);

glVertex3f(80.0, 30.0, 0.0);

glVertex3f(90.0, 10.0, 0.0);

glEnd();

• Apply both the filled and outlined drawing modes.

Experiment 4.13

• Replace the polygon declaration part of square.cpp withglBegin(GL_QUAD_STRIP);

glColor3f(1.0, 0.0, 0.0);glVertex3f(10.0, 90.0, 0.0);glColor3f(0.0, 1.0, 0.0);

glVertex3f(10.0, 10.0, 0.0);glColor3f(0.0, 0.0, 1.0);

glVertex3f(30.0, 80.0, 0.0);glColor3f(1.0, 1.0, 0.0);glVertex3f(40.0, 15.0, 0.0);glColor3f(1.0, 0.0, 1.0);

glVertex3f(60.0, 75.0, 0.0);glColor3f(0.0, 1.0, 1.0);

glVertex3f(60.0, 25.0, 0.0);glColor3f(1.0, 0.0, 1.0);glVertex3f(90.0, 90.0, 0.0);glColor3f(1.0, 1.0, 1.0);

glVertex3f(85.0, 20.0, 0.0);glEnd();

• Apply both the filled and outlined drawing modes.

Experiment 4.14

• Replace GL_QUAD_STRIP in the previous experiment with GL_QUADS and GL_POLYGON

• Try to change some vertices, to make the polygon lines not cross to each other.

• Apply both the filled and outlined drawing modes.

(Extremely) Important Note

• When specifying triangles in OpenGL, ensure that contiguous triangles are consistently oriented.

• Also ensure when using GL_QUADS, GL_QUAD_STRIP or GL_POLYGON that each polygon is a plane convex figure.

Convex 2D Shape

Convex

Not Convex

Experiment 4.15

• Replace the polygon declaration part of square.cpp with

glBegin(GL_POLYGON);

glVertex3f(20.0, 20.0, 0.0);

glVertex3f(50.0, 20.0, 0.0);

glVertex3f(80.0, 50.0, 0.0);

glVertex3f(80.0, 80.0, 0.0);

glVertex3f(20.0, 80.0, 0.0);

glEnd();

• Apply both the filled and outlined drawing modes.

Experiment 4.16

• Replace the polygon declaration part of square.cpp with

glBegin(GL_POLYGON);

glVertex3f(20.0, 20.0, 0.0);

glVertex3f(80.0, 20.0, 0.0);

glVertex3f(40.0, 40.0, 0.0);

glVertex3f(20.0, 80.0, 0.0);

glEnd();

• Apply both the filled and outlined drawing modes.

Experiment 4.16

• Draw the same shape, but change the sequence, move the first vertex to the last vertex as.

glBegin(GL_POLYGON);

glVertex3f(80.0, 20.0, 0.0);

glVertex3f(40.0, 40.0, 0.0);

glVertex3f(20.0, 80.0, 0.0);

glVertex3f(20.0, 20.0, 0.0);

glEnd();

• Apply both the filled and outlined drawing modes.

• What happened? Why?

Approximating Curved Objects

• There is no OpenGL primitive objects for curves, or circles.

• Sincerity is a very important human quality. If you don’t have it, you gotta fake it!!”

x

y

(h,k)

rt

p

p = (h + rcos(t), k + rsin(t))

Experiment 4.17

• Run circle.cpp. Increase the number of vertices on the line loop by pressing ‘+’ till it “becomes” a circle. Press ‘-’ to decrease the number of vertices.

• Draw a disc (a filled circle) by way of– A polygon– A triangle fan.

Experiment 4.18

• Run parabola.cpp. Increase the number of vertices on the line strip by pressing ‘+’ and decrease the number of vertices by pressing ‘-’.

• The parametric equations implemented arex = 50 + 50t, y = 100t2, -1 <= t <= 1

• Try to modify the equation.

Assignment 1

1. Modify square.cpp to draw a Pythagoras diagram (the diagram must be accurate).

Assignment 1

2. Create a square annulus (a) using a single triangular strip (in class).

3. Create a shape (b) using a single triangular strip.

4. Create a square annulus (a) using two triangle fans.

(a) (b)

Assignment 1

5. Draw a sine curve between x = - and x = .

6. Draw an ellipse. Recall the parametric equations for an ellipse with semi-major axis of length A and semi-minor of length B.

x

y

(h,k)

r

t

p = (h + Acos(t), k + Bsin(t)), 0 t

(h + A, k)

(h, k + B)

Assignment 1

7. Modify square.cpp or circle.cpp to draw a house. Please feel free to use your imagination.