Lesson 1

The introduction of OpenGL &

how to create a window

Kevin Pruvost & Shaocong Wang

{pkw23, wangsc23}@mails.tsinghua.edu.cn
The introduction of OpenGL
OpenGL

lOpen Graphics Library, provides functions for rendering 2D and

3D graphics.
lCross-language, cross-platform
lA specification: only specifies the result/output of each function
and how it should perform; the implementation is up to
developers (graphics card manufacturers)
lYour graphics card drivers include the newest versions of OpenGL
that your card supports
OpenGL

l Immediate mode vs Core-profile

l Immediate mode (Referred to as the fixed function pipeline)
Ø Most of the functionality was hidden in the library
Ø Developers did not have much freedom at how OpenGL does
its calculations
Ø Easy to use and understand, but inefficient
l Core-profile (Referred to as the programmable pipeline)
Ø Flexible and efficient, but difficult to learn
Ø In this class, we use OpenGL version 3.3
OpenGL

l OpenGL is by itself a large state machine

Ø A collection of variables that define how OpenGL should operate
l The state of OpenGL is referred to as the OpenGL context
l State-changing function
Ø Change the context
l State-using function
Ø Perform operations based on the current context
OpenGL

lThe OpenGL libraries are written in C

Ø Allows for many derivations in other languages
Ø Its core remains a C-library

lObjects
Ø A collection of options represents a subset of OpenGL's state
Ø How to use
lCreate an object and store a reference to it as an id
lBind the object to the target location of the context
lSet the window options
lUn-bind the object
How to create a window
GLFW (Graphics Library Framework)

lOpenGL doesn’t provide some functionalities like creating a

window, defining a context and handling user input
lThere are other libraries providing these functionalities.
lWe use GLFW library for our tutorials

lGLFW is an Open Source, multi-platform library for OpenGL,

OpenGL ES and Vulkan development on the desktop.
lIt provides a simple API for creating windows, contexts and
surfaces, receiving input and events.
Downloading GLFW

l Download GLFW https://www.glfw.org/download.html

Ø Use pre-compiled binaries and header files
Ø or Compile from the source code
l We need glfw3.lib and header files in ‘Include’ folder
GLAD

lGLAD simplifies the process of managing OpenGL function

pointers.
lIt generates platform-specific code for loading OpenGL
functions, making it easier to use OpenGL in a cross-platform
manner.
lWith GLAD, you can dynamically load the required OpenGL
functions at runtime, ensuring compatibility across different
platforms and OpenGL versions.
Downloading GLAD

l Download GLAD https://glad.dav1d.de/

Ø Choose gl: version 4.6 [core]

Ø Click ‘Generate’ and download the zip file

Setting up for Windows

lDeployment
Ø Create a new project using Visual Studio
Ø Link GLFW library with the project
l Project properties -> Configuration properties -> VC++
Directories
l Add your own directories to Include Directories
and Library Directories
Setting up for Windows

lDeployment
Ø Create a new project using Visual Studio
Ø Link GLFW library with the project
l Project properties -> Configuration properties -> Linker ->
Input
l Add glfw3.lib in Additional Dependencies
Setting up for Windows

l Download GLAD https://glad.dav1d.de/

Ø Choose gl: version 4.6 [core]
Ø Use zip file
lAdd include folders (glad and KHR) into your include(s)
directory
lAdd the glad.c file to your project.
Setting up for MacOS/Linux

l Modify the paths according to your file locations.

Setting up for MacOS/Linux

lBuild the binary executable file.

lCreate CMakeLists.txt.
lRun the following commands.
cmake ./

make

./main
Code

l Add the following include directive above your file

Ø #include <glad/glad.h>
Ø #include <GLFW/glfw3.h>
lCreate the main function
int main() {
glfwInit(); //initialize GLFW
glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3); //configure GLFW
glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);
glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE);
return 0;
}
glfwWindowHint
The first argument: what option to be configured
The second argument: an integer that sets the value of option
 Code

l Create a window object

GLFWwindow* window = glfwCreateWindow(800, 600, “LearnOpenGL”,
NULL, NULL);
if (window == NULL) {
std::cout << “Failed to create GLFW window” << std::endl;
glfwTerminate();
return -1; }
glfwMakeContextCurrent(window);
glfwCreateWindow:
Parameters: the window width, height and name for the window. Ignore the last 2 parameters.
Return: a GLFWwindow object that we'll later need for other GLFW operations.
glfwMakeContextCurrent
tell GLFW to make the context of our window the main context on the current thread
Code

l Initialize GLAD
if(!gladLoadGLLoader((GLADloadproc)glfwGetProcAddress)) {
std::cout << “Failed to initialize GLAD” << std::endl;
return -1;
}

We pass GLAD the function to load the address of the OpenGL function
pointers which is OS-specific.

glfwGetProcAddress:
Defines the correct function based on which OS we're compiling for.
Code

lViewport
Ø Tell OpenGL the size of the rendering window via glViewport
glViewport(0, 0, 800, 600);

p The first two parameters set the location of the lower left corner of the window.
p The third and fourth parameters set the width and height of the rendering window
in pixels, which we set equal to GLFW's window size.
p If values of viewport dimensions are smaller than GLFW‘s dimensions, the OpenGL
rendering will be in a smaller window. This could be used for displaying multiple
viewports in a GLFW’s window
Code

lRender loop
Ø Keep drawing images and handling user input until the program is told to
stop
while(!glfwWindowShouldClose(window)){
glfwPollEvents();
glfwSwapBuffers(window);
}
glfwWindowShouldClose:
Checks at the start of each loop iteration if GLFW has been instructed to close
glfwPollEvents: Checks if any events are triggered, updates the window state, and calls the
corresponding functions (Set via callback methods)
glfwSwapBuffers:
Swap the color buffer that is used to draw during this iteration and display it on the screen as
output
Code

lCallback function
Ø Respond to events
Ø Window resizing, keyboard input, mouse movement and so on
lExample: window resizing callback function
lDefine the callback function: If the window is resized, the viewport should
be adjusted.
void framebuffer_size_callback(GLFWwindow* window, int width, int height){
glViewport(0, 0, width, height);
}
lRegister the callback function, tell GLFW to call this function each time the
window is resized:
glfwSetFramebufferSizeCallback(window, framebuffer_size_callback);
Code

lBuffer
p Single buffer
Ø Output image not drawn in an instant, but drawn pixel by pixel
Ø Displayed while still being rendered, may contain artifacts, display
flickering issues

p Double buffer
Ø front buffer: contains the final output image shown at the screen
Ø back buffer: all the rendering commands are drawn on the back buffer
Ø When all the rendering commands are finished, swap the back buffer
to the front buffer
Code

l After render loop, we need to clean/delete all of GLFW's

resources that were allocated
Ø Use glfwTerminate() at the end of the main function
glfwTerminate();
return 0;
Code

l Render
Ø Place all the rendering commands in the render loop

while(!glfwWindowShouldClose(window)) {
glfwPollEvents(); // trigger event
... // rendering commands
glfwSwapBuffers(window); // swap buffers
}
Code

l Render
Ø Example
Ø Clear the screen with a color
glClearColor(0.2f, 0.3f, 0.3f, 1.0f);
glClear(GL_COLOR_BUFFER_BIT);

glClearColor: Set a color to clear the screen

glClear: Clear the color buffer, use color configured by glClearColor
Output
Thanks!