CS 380 Introduction to Computer Graphics. LAB (1) : OpenGL Tutorial Reference : Foundations of 3D Computer Graphics, Steven J.

Size: px

Start display at page:

Download "CS 380 Introduction to Computer Graphics. LAB (1) : OpenGL Tutorial Reference : Foundations of 3D Computer Graphics, Steven J."

Coleen Madeleine Burke
6 years ago
Views:

1 CS 380 Introduction to Computer Graphics LAB (1) : OpenGL Tutorial Reference : Foundations of 3D Computer Graphics, Steven J. Gortler Goals Understand OpenGL pipeline Practice basic OpenGL programming Set up a project for OpenGL programs 2 1

2 OpenGL with GLSL OpenGL Open Graphics Library Cross-language and multi-platform API for rendering vector graphics GLSL OpenGL Shading Language Allow application programmers to express the processing that occurs at those programmable points of the OpenGL pipeline 3 GLUT, GLEW GLUT : The OpenGL Utility Toolkit To open windows and to allow our program to respond to mouse and keyboard events GLEW : The OpenGL Extension Wrangler Library To gain access to the latest features of OpenGL in Windows 4 2

3 OpenGL Installation (Windows) Download and install Visual Studio Download asst0.zip and extract it After compilation of the project, the debug or release folder would be created on the project folder Two files (glut32.dll, glew32.dll) in dll directory should be copied into directory which the exe file is in (debug or release folder) 5 OpenGL Installation (Mac) GLUT should be already installed in Mac Install GLEW Download GLEW, compile (by typing make), and install (by typing make install) When linking your code, use following options -framework OpenGL -framework GLUT 6 3

4 OpenGL Installation (Ubuntu) Install glut & glew sudo apt-get install freeglut3-dev sudo apt-get install libglew-dev Compile with following options -lgl -lglu -lglut lglew ex) g++ -o main main.cpp lgl -lglu -lglut -lglew 7 First Screen 8 4

5 OpenGL Pipeline Vertex Buffer Vertex Shader Assembler Frame Buffer Fragment Shader Rasterizer On your display 9 Basic OpenGL APIs 10 5

6 Basic OpenGL Main Program 11 Basic OpenGL Main Program 12 6

7 Basic OpenGL initglutstate() 13 Callback Functions Whenever some events occur, callback functions catch them and do some actions already defined 14 7

8 Callback Functions reshape(); 15 Vertex Buffer Determine the initial coordinates and colors of vertices Pass the program data to the OpenGL buffer 8

9 Callback Functions Whenever some events occur, callback functions catch them and do some actions already defined 17 Display 18 9

10 GLSL Shader language for OpenGL Different grammar along versions asst1-gl2 for version 1.2, asst1-gl3 for version 1.3 change g_g12compatible to false for activating 1.3 version 1.2 version 1.3 vertex shader fragment shader vertex shader fragment shader program attribute varying program in in varying out out version 1.2 uses built-in variables such as gl_fragcolor for fragment output 19 Vertex Shader Usually final positions of vertices on the screen are determined in the vertex shader When draw function is called, each vertex data in the vertex buffer passes through the vertex shader Uniform variables Vertex Buffer Attributes Vertex Shader gl_position, Assembler (in) Varying 20 variables (out) 10

11 Vertex Shader Uniform variables Vertex Buffer Attributes Vertex Shader gl_position, Assembler (in) Varying 21 variables (out) Fragment Shader Final pixel colors on the screen are determined in the fragment shader Uniform variables Varying variables (in) Fragment Shader gl_fragcolor, Screen color (out) Frame Buffer 22 11

12 Fragment Shader Uniform variables Varying variables (in) Fragment Shader gl_fragcolor, Screen color (out) Frame Buffer 23 Exercise: Draw the First Polygon Vertices are stored in a vertex buffer Positions, color and other attributes struct SquareGeometry { static GLfloat sqpos[6 * 2] = { }; -0.5, -0.5, 0.5, 0.5, 0.5, -0.5 Vertex positions (x, y) of the triangle } static GLfloat sqcol[6 * 3] = { 1, 1, 0, 1, 1, 0, 1, 1, 0 };.. Colors (R,G,B) of the triangle 24 12

13 Exercise: Draw Your Own Polygon e.g.) 25 Exercise: Keyboard Input Callback functions are provided Add the following code into the keyboard function void keyboard(unsigned char key, int x, int y) { switch (key) { case 'h': cout << "Welcome to OpenGL World!\n " << " Please enjoy your self!\n\n "; break; } glutpostredisplay(); } 26 13

$GLUT_LEFT_BUTTON) { if (state == GLUT_DOWN) { cout << "Mouse Left Button has been Clicked\n"; } else { cout << "Mouse Left Button has been Released\n"; } } glutpostredisplay();$

14 Keyboard Input 27 Mouse Input Callback function are provided Add the code into the mouse function static void mouse(int button, int state, int x, int y) { if (button == GLUT_LEFT_BUTTON) { if (state == GLUT_DOWN) { cout << "Mouse Left Button has been Clicked\n"; } else { cout << "Mouse Left Button has been Released\n"; } } glutpostredisplay(); } 28 14

15 Mouse Input 29 Exercise 1 If you press r, g or b, the color of the polygon changed to red, green or blue. Then, if you click p, the color returned to the original color. Hint: modify shader original r g b 30 15

31 Exercise 3 If you click the mouse left or right

16 Exercise 2 Change color over time Use utime in shader code Use periodic function such as sin and cos. 31 Exercise 3 If you click the mouse left or right button, then a polygon should move to left or right. original right 32 16

17 Exercise 3 (Hint) In vertex shader, we can determine the final positions of vertices In fragment shader, we can determine the final colors of vertices You should modify the uniform variables provided in the shader file static float g_vertextemp = 0.0; // for vertex moving static float g_colortemp = 0.0; // for changing color 33 17

Introduction to Computer Graphics. Hardware Acceleration Review

Introduction to Computer Graphics Hardware Acceleration Review OpenGL Project Setup Create a command-line style project in Xcode 4 Select the project file and click Build Phases tab Add OpenGL.framework