About this guide
This guide will be using OpenGL with C++, GLFW, GLAD and GLM. If you don’t know any of the stuff it’s fine as we will be learning about each of them separately. This guide will help you go from knowing absolutely nothing to making your own 3D spinning cube
If you are planning to use C++ you should follow the setup guide to create your project
If you ever need additional resources for learning OpenGL learnopengl.com is a great place to start
During this guide you may see canvas elements such as this one:
These canvas elements provide you with a live visual feedback of what is being showcased. These canvas elements use WebGL context which is really similar to OpenGLDo I need to use C++?
No! OpenGL has been ported over to so many languages that there is a very big chance that it will work even on your preferred language. If you do not see your preferred language in the following examples it does not mean it does not have an OpenGL port. Look up if your language allows using the OpenGL API!
Differences
Here is a little script for creating a vertex array buffer in different languages so you can see the similarities
Notice how all OpenGL functions keep the same name across all the programming languages
C++
GLfloat vertices[] = {
-0.5f, -0.5f, 0.0f,
0.5f, -0.5f, 0.0f,
0.0f, 0.5f, 0.0f
};
GLuint VBO;
glGenBuffers(1, &VBO);
glBindBuffer(GL_ARRAY_BUFFER, VBO);
glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);Javascript
const vertices = new Float32Array([
-0.5, -0.5, 0.0,
0.5, -0.5, 0.0,
0.0, 0.5, 0.0
]);
const vbo = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);Javascript works a bit differently on the web as it uses WebGL, which runs on older OpenGL version and works with a HTML canvas instead of a window. Same principles still do apply
Java
float[] vertices = {
-0.5f, -0.5f, 0.0f,
0.5f, -0.5f, 0.0f,
0.0f, 0.5f, 0.0f
};
int vbo = GL15.glGenBuffers();
GL15.glBindBuffer(GL15.GL_ARRAY_BUFFER, vbo);
GL15.glBufferData(GL15.GL_ARRAY_BUFFER,
BufferUtils.createFloatBuffer(vertices.length).put(vertices).flip(),
GL15.GL_STATIC_DRAW);GLFW
GLFW is a C library (that also works in C++) but most languages have their own re-implementation like Rust’s glfw-rs or it’s built-in like in Java’s LWJGL
This library allows us to create an OS window with an OpenGL context, handle input, timing, multiple monitors and events. We need it to talk to the OS about our window
It helps us for example create a window like:
GLFWwindow* window = glfwCreateWindow(800, 600, "My Window", nullptr, nullptr);
// Main game/app loop...
glfwDestroyWindow(window);
window = nullptr;GLAD
GLAD is a loader generator for C/C++ that generates us OpenGL function pointers at runtime which allows us to actually call the OpenGL API
Each language has their own implementation or has it loaded internally by the main OpenGL library
GLM
OpenGL Mathematics is a C++ only library that allows us to mirror GLSL types like vec3, mat4 etc. directly in C++. Other languages have their own math libraries that fill the same role such as Java’s JOML or Javascript’s gl-matrix
It allows us to do things like:
glm::vec3 up = glm::vec3(0.0f, 1.0f, 0.0f);
glm::vec3 position = glm::vec3(0.0f, 0.0f, 3.0f);
// moved up by 5
position = position + (up * 5.0f);
// get distance between position and (3.0, 2.0, -2.0)
float distance = glm::distance(position, glm::vec3(3.0f, 2.0f, -2.0f));