open graphics library (opengl) images were taken from the book: “interactive computer graphics”...
TRANSCRIPT
![Page 1: Open Graphics Library (OpenGL) Images were taken from the book: “Interactive Computer Graphics” by Angel and Shreiner](https://reader035.vdocument.in/reader035/viewer/2022062322/56649d9f5503460f94a89eff/html5/thumbnails/1.jpg)
Open Graphics Library(OpenGL)
Images were taken from the book: “Interactive Computer Graphics” by Angel and Shreiner
![Page 2: Open Graphics Library (OpenGL) Images were taken from the book: “Interactive Computer Graphics” by Angel and Shreiner](https://reader035.vdocument.in/reader035/viewer/2022062322/56649d9f5503460f94a89eff/html5/thumbnails/2.jpg)
OpenGL
• Application programming interface (API) for rendering 2D\3D graphics
• The API interacts with the graphics processing unit (GPU)
• Created in 1991 by Silicon Graphics. Now it is managed by the Khronos consortium
![Page 3: Open Graphics Library (OpenGL) Images were taken from the book: “Interactive Computer Graphics” by Angel and Shreiner](https://reader035.vdocument.in/reader035/viewer/2022062322/56649d9f5503460f94a89eff/html5/thumbnails/3.jpg)
OpenGL – Design
• A library of functions (e.g., glDrawArrays) and constants (e.g., GL_TRIANGLES)
• Language-independent: has many bindings, e.g., WebGL.
• Platform-independent: works on Win/Linux/..
![Page 4: Open Graphics Library (OpenGL) Images were taken from the book: “Interactive Computer Graphics” by Angel and Shreiner](https://reader035.vdocument.in/reader035/viewer/2022062322/56649d9f5503460f94a89eff/html5/thumbnails/4.jpg)
OpenGL – Documentation
The manuals are known by their cover’s color:
• The Red Book: OpenGL Programming Guide• The Orange Book: OpenGL Shading Language• The Blue Book: OpenGL Reference manual• The Green Book: OpenGL & X Window System• The Alpha Book: OpenGL & Windows
![Page 5: Open Graphics Library (OpenGL) Images were taken from the book: “Interactive Computer Graphics” by Angel and Shreiner](https://reader035.vdocument.in/reader035/viewer/2022062322/56649d9f5503460f94a89eff/html5/thumbnails/5.jpg)
OpenGL – Libraries
• OpenGL doesn’t support input or windowing
• GLUT (or freeglut) is used to create a context
• Platform-dependent extensions can be provided by vendors. Identified by ARB, EXT, ..
• GLEW wraps the extraction of functionality
![Page 6: Open Graphics Library (OpenGL) Images were taken from the book: “Interactive Computer Graphics” by Angel and Shreiner](https://reader035.vdocument.in/reader035/viewer/2022062322/56649d9f5503460f94a89eff/html5/thumbnails/6.jpg)
OpenGL – History
• OpenGL 1 (1992): Fixed pipeline• OpenGL 2 (2004): Programmable shaders• OpenGL 3: Deprecated the fixed functionality• OpenGL 3.1 (2009): Removed completely the
fixed pipeline• ..• OpenGL 4.5 (2014):
![Page 7: Open Graphics Library (OpenGL) Images were taken from the book: “Interactive Computer Graphics” by Angel and Shreiner](https://reader035.vdocument.in/reader035/viewer/2022062322/56649d9f5503460f94a89eff/html5/thumbnails/7.jpg)
OpenGL – History
• OpenGL 1 • OpenGL 2• OpenGL 3
• OpenGL 3.1• ..• OpenGL 4.5
State Machine
Data flow model
![Page 8: Open Graphics Library (OpenGL) Images were taken from the book: “Interactive Computer Graphics” by Angel and Shreiner](https://reader035.vdocument.in/reader035/viewer/2022062322/56649d9f5503460f94a89eff/html5/thumbnails/8.jpg)
OpenGL – Suggested Readings
• The internet is full of tutorials..
• Our course book has many examples– Check chapters 2, 3 and appendices A, D.
• Also, see here: – http://www.opengl-tutorial.org/
![Page 9: Open Graphics Library (OpenGL) Images were taken from the book: “Interactive Computer Graphics” by Angel and Shreiner](https://reader035.vdocument.in/reader035/viewer/2022062322/56649d9f5503460f94a89eff/html5/thumbnails/9.jpg)
OpenGL – Coding
• The API is obtained by including freeglut:
• Extensions are accessed through GLEW:
#include <GL/freeglut.h>
#include <GL/glew.h>
glewInit();
![Page 10: Open Graphics Library (OpenGL) Images were taken from the book: “Interactive Computer Graphics” by Angel and Shreiner](https://reader035.vdocument.in/reader035/viewer/2022062322/56649d9f5503460f94a89eff/html5/thumbnails/10.jpg)
OpenGL – Coding
• Data flow model: send data to the GPU
• Many functions in the form of
• , where and , and means we pass a pointer
glSomeFunction*();
![Page 11: Open Graphics Library (OpenGL) Images were taken from the book: “Interactive Computer Graphics” by Angel and Shreiner](https://reader035.vdocument.in/reader035/viewer/2022062322/56649d9f5503460f94a89eff/html5/thumbnails/11.jpg)
OpenGL – Coding
• Examples:
• Later, we will see how to transfer matrices
glUniform1f(..);
glUniform3iv(..);
![Page 12: Open Graphics Library (OpenGL) Images were taken from the book: “Interactive Computer Graphics” by Angel and Shreiner](https://reader035.vdocument.in/reader035/viewer/2022062322/56649d9f5503460f94a89eff/html5/thumbnails/12.jpg)
OpenGL – Coding
• Send the array points to the GPU
• Name and create a vertex array object (VAO)
GLuint abuffer;glGenVertexArrays(1, &abuffer);glBindVertexArray(abuffer);
![Page 13: Open Graphics Library (OpenGL) Images were taken from the book: “Interactive Computer Graphics” by Angel and Shreiner](https://reader035.vdocument.in/reader035/viewer/2022062322/56649d9f5503460f94a89eff/html5/thumbnails/13.jpg)
OpenGL – Coding
• Next, we create a vertex buffer object (VBO)
• This is how data is actually stored
GLuint buffer;glGenBuffers(1, &buffer);glBindBuffer(GL_ARRAY_BUFFER, buffer);glBufferData(GL_ARRAY_BUFFER,sizeof(points),
points, GL_STATIC_DRAW);
![Page 14: Open Graphics Library (OpenGL) Images were taken from the book: “Interactive Computer Graphics” by Angel and Shreiner](https://reader035.vdocument.in/reader035/viewer/2022062322/56649d9f5503460f94a89eff/html5/thumbnails/14.jpg)
OpenGL – Coding
• Rendering our data can be done simply by
• Thus, a simple display method is
glDrawArrays(GL_TRIANGLES,0,sizeof(points));
void display(void){
glClear(GL_COLOR_BUFFER_BIT);glDrawArrays(GL_TRIANGLES,0,sizeof(points));glFlush();
}
![Page 15: Open Graphics Library (OpenGL) Images were taken from the book: “Interactive Computer Graphics” by Angel and Shreiner](https://reader035.vdocument.in/reader035/viewer/2022062322/56649d9f5503460f94a89eff/html5/thumbnails/15.jpg)
OpenGL – Graphics Pipeline
• Similar to our software renderer
• Your program will consist of shaders– No default shaders– You must at least supply vertex and fragment
shaders
![Page 16: Open Graphics Library (OpenGL) Images were taken from the book: “Interactive Computer Graphics” by Angel and Shreiner](https://reader035.vdocument.in/reader035/viewer/2022062322/56649d9f5503460f94a89eff/html5/thumbnails/16.jpg)
OpenGL – Shaders
• Vertex shader:– Send a vertex location to the rasterizer– …
• Fragment shader:– Its input is a fragment inside the clipping volume– Output a color to the fragment– …
![Page 17: Open Graphics Library (OpenGL) Images were taken from the book: “Interactive Computer Graphics” by Angel and Shreiner](https://reader035.vdocument.in/reader035/viewer/2022062322/56649d9f5503460f94a89eff/html5/thumbnails/17.jpg)
GL Shading Language (GLSL)
• C-like language
• Need to compile and link in runtime
• Create a program object with shader objects
• Connect shader’s entities to our program
![Page 18: Open Graphics Library (OpenGL) Images were taken from the book: “Interactive Computer Graphics” by Angel and Shreiner](https://reader035.vdocument.in/reader035/viewer/2022062322/56649d9f5503460f94a89eff/html5/thumbnails/18.jpg)
OpenGL – Coding
• Create a program object with shader objects
• Connect shader’s entities to our program
GLuint program;program = InitShader("vsource.glsl",
"fsource.glsl");
GLuint loc;loc = glGetAttribLocation(program, "vPosition");glEnableVertexAttribArray(loc);glVertexAttribPointer(loc, 2, GL_FLOAT,
GL_FALSE, 0, 0);
![Page 19: Open Graphics Library (OpenGL) Images were taken from the book: “Interactive Computer Graphics” by Angel and Shreiner](https://reader035.vdocument.in/reader035/viewer/2022062322/56649d9f5503460f94a89eff/html5/thumbnails/19.jpg)
OpenGL – Example
static char* readShaderSource(const char* shaderFile) {
…}
Gluint InitShader(const char* vShaderFile, const char* fShaderFile) {
…}
![Page 20: Open Graphics Library (OpenGL) Images were taken from the book: “Interactive Computer Graphics” by Angel and Shreiner](https://reader035.vdocument.in/reader035/viewer/2022062322/56649d9f5503460f94a89eff/html5/thumbnails/20.jpg)
OpenGL – Example
void init(void) {…points = …;…GLuint program = InitShader( "vshader.glsl",
"fshader.glsl" );glUseProgram( program );
GLuint vao;glGenVertexArrays( 1, &vao );glBindVertexArray( vao );
![Page 21: Open Graphics Library (OpenGL) Images were taken from the book: “Interactive Computer Graphics” by Angel and Shreiner](https://reader035.vdocument.in/reader035/viewer/2022062322/56649d9f5503460f94a89eff/html5/thumbnails/21.jpg)
OpenGL – Example
GLuint buffer;glGenBuffers( 1, &buffer );glBindBuffer( GL_ARRAY_BUFFER, buffer );glBufferData( GL_ARRAY_BUFFER, sizeof(points),
points, GL_STATIC_DRAW );
GLuint loc = glGetAttribLocation( program,
"vPosition" );glEnableVertexAttribArray( loc );glVertexAttribPointer(loc,2,GL_FLOAT,GL_FALSE,0,0)glClearColor( 1.0, 1.0, 1.0, 1.0 );
}
![Page 22: Open Graphics Library (OpenGL) Images were taken from the book: “Interactive Computer Graphics” by Angel and Shreiner](https://reader035.vdocument.in/reader035/viewer/2022062322/56649d9f5503460f94a89eff/html5/thumbnails/22.jpg)
OpenGL – Example
void display(void) {glClear( GL_COLOR_BUFFER_BIT );glDrawArrays( GL_POINTS, 0, sizeof(points) );glFlush( void );
}
![Page 23: Open Graphics Library (OpenGL) Images were taken from the book: “Interactive Computer Graphics” by Angel and Shreiner](https://reader035.vdocument.in/reader035/viewer/2022062322/56649d9f5503460f94a89eff/html5/thumbnails/23.jpg)
OpenGL – Example
int main( int argc, char **argv ) {glutInit( &argc, argv );glutInitDisplayMode( GLUT_RGBA );glutInitWindowSize( 512, 512 );glutInitContextVersion( 3, 2 );glutInitContextProfile( GLUT_CORE_PROFILE );glutCreateWindow( “Example" );glewInit( void );init( void );glutDisplayFunc( display );glutMainLoop( void );return 0; }
![Page 24: Open Graphics Library (OpenGL) Images were taken from the book: “Interactive Computer Graphics” by Angel and Shreiner](https://reader035.vdocument.in/reader035/viewer/2022062322/56649d9f5503460f94a89eff/html5/thumbnails/24.jpg)
OpenGL – Example
#version 150 in vec4 vPosition;void main() {
gl_Position = vPosition;}
#version 150out vec4 fColor;void main() {
fColor = vec4( 1.0, 0.0, 0.0, 1.0 );}