Upload
others
View
6
Download
0
Embed Size (px)
Citation preview
3/4/18
1
LAB (1) : OpenGL Tutorial
2018. 03. 05
CS 380
Introduction to Computer Graphics
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
3/4/18
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
3/4/18
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)– http://glew.sourceforge.net/
• When linking your code, use following options-framework OpenGL -framework GLUT
6
3/4/18
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 –lGLEWex) g++ -o main main.cpp –lGL -lGLU -lglut -lGLEW
7
First Screen
8
3/4/18
5
OpenGL Pipeline
9
Vertex Buffer Vertex Shader Assembler
RasterizerFragment ShaderFrame Buffer
On your display
Basic OpenGL• APIs
10
3/4/18
6
Basic OpenGL• Main Program
11
Basic OpenGL• Main Program
12
3/4/18
7
Basic OpenGL• initGlutState()
13
Callback Functions
• Whenever some events occur, callback functions
catch them and do some actions already defined
14
3/4/18
8
Callback Functions• reshape();
15
Vertex Buffer
Pass the program data to the OpenGL buffer
Determine the initial coordinates and colors of vertices
3/4/18
9
Callback Functions
• Whenever some events occur, callback functions
catch them and do some actions already defined
17
Display
18
3/4/18
10
GLSL• Shader language for OpenGL• Different grammar along versions– asst1-gl2 for version 1.2, asst1-gl3 for version 1.3
19
version 1.2
attribute
varying
vertex shader fragment shader
varyingprogram
version 1.3
in
out
vertex shader fragment shader
in
out
program
• version 1.2 uses built-in variables such as gl_FragColor for fragment output
change g_G12Compatible to false for activating 1.3
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
20
Vertex Buffer Vertex Shader AssemblerAttributes
(in)
Uniform variables
gl_Position,Varying
variables(out)
3/4/18
11
Vertex Shader
21
Vertex Buffer Vertex Shader AssemblerAttributes
(in)
Uniform variables
gl_Position,Varying
variables(out)
Fragment Shader
• Final pixel colors on the screen are determined
in the fragment shader
22
Fragment Shader Frame BufferVarying variables
(in)
Uniform variables
gl_FragColor, Screen color
(out)
3/4/18
12
Fragment Shader
23
Fragment Shader Frame BufferVarying variables
(in)
Uniform variables
gl_FragColor, Screen color
(out)
Exercise: Draw the First Polygon
• Vertices are stored in a vertex buffer
• Positions, color and other attributes
24
struct SquareGeometry {static GLfloat sqPos[6 * 2] = {
-0.5, -0.5,0.5, 0.5,0.5, -0.5
};
static GLfloat sqCol[6 * 3] = {1, 1, 0,1, 1, 0,1, 1, 0
};..
}
Vertex positions (x, y) of the triangle
Colors (R,G,B) of the triangle
3/4/18
13
Exercise: Draw Your Own Polygon
25
e.g.)
Exercise: Keyboard Input
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
• Callback functions are provided
• Add the following code into the ‘keyboard’ function
3/4/18
14
Keyboard Input
27
Mouse Input
28
• 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();
}
3/4/18
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
30
r g boriginal
3/4/18
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.
32
original right
3/4/18
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 movingstatic float g_colorTemp = 0.0; // for changing color
33