Scribd
Upload
4 views28 pages

Tutorial1

This document provides an introduction to OpenGL, detailing its functionalities for rendering 2D and 3D graphics, and explains the differences between immediate mode and core-profile. It also covers how to create a window using the GLFW library, including setup instructions for Windows and MacOS/Linux, and includes example code for initializing OpenGL and handling rendering. Additionally, it discusses the importance of managing OpenGL function pointers with GLAD and outlines the render loop and callback functions for event handling.

Uploaded by

Guillermo Garrido Torres
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
4 views28 pages

Tutorial1

This document provides an introduction to OpenGL, detailing its functionalities for rendering 2D and 3D graphics, and explains the differences between immediate mode and core-profile. It also covers how to create a window using the GLFW library, including setup instructions for Windows and MacOS/Linux, and includes example code for initializing OpenGL and handling rendering. Additionally, it discusses the importance of managing OpenGL function pointers with GLAD and outlines the render loop and callback functions for event handling.

Uploaded by

Guillermo Garrido Torres
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 28

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!

You might also like