DEV Community: Hadi

Make spinning 3D shapes in SDL2 and OpenGL

Hadi — Tue, 19 Dec 2023 05:54:52 +0000

Up to now, we've created a window in SDL2 using OpenGL, built a Mesh, and began writing shaders in GLSL to get a stretched-out square. In this final part, we will explain rendering in 3D, making things spin, and the Linear Algebra behind it!

DISCLAIMER: This walkthrough assumes knowledge from Part 1 and Part 2 and a working knowledge of C++ and how to compile it.

GitHub Repo: https://github.com/HadiCya/spinning_shapes

YouTube Version:

https://youtu.be/ac6mf05O_qw

Getting Mathematical!

We're going to be running these calculations in our main.cpp file, and we'll get started by updating our includes:

#include <iostream>#include <SDL.h>#include "mesh.h"#include "loadShader.h"#include <glm/glm.hpp>#include <glm/gtc/matrix_transform.hpp>#include <glm/gtc/type_ptr.hpp>

Here, we will include the necessary headers for linear algebra operations using the GLM library. This enables the main application to work with vectors and matrices required for 3D transformations.

We're going to now create and configure matrices for transforming the object in 3D space. We're going to write this code after we call glClear() in our while loop.

Model Matrix

glm::mat4 model = glm::mat4(1.0f);model = glm::rotate(model, glm::radians(50.0f), glm::vec3(0.5f, 1.0f, 0.0f));

This line of code creates a rotation matrix. In computer graphics, rotation matrices are used to rotate objects around a specified axis.

Let's get into the math behind the code:

Initially, we define model as an Identity matrix, which, in linear algebra, is practically 1.

\begin{bmatrix} 1 & 0 & 0 & 0 \ 0 & 1 & 0 & 0 \ 0 & 0 & 1 & 0 \ 0 & 0 & 0 & 1 \end{bmatrix}

glm::vec3(0.5f, 1.0f, 0.0f) defines the axis of rotation. Here, it's a vector pointing partially up and partially towards the x-axis:

u⃗=<0.5,1,0>\vec{u} = \left<0.5, 1, 0 \right>

We need to normalize the axis:

u′⃗=<0.50.52+12,10.52+12,0>\vec{u'} = \left< \frac{0.5}{\sqrt{0.5^2 + 1^2}}, \frac{1}{\sqrt{0.5^2 + 1^2}}, 0 \right>

glm::radians(50.0f) converts 50 degrees into radians, as trigonometric functions in GLM use radians:

θ=radians(50)=50π180\theta = \text{radians}(50) = \frac{50 \pi}{180}

The glm::rotate function creates a 4x4 matrix that rotates points in 3D space around the given axis by the specified angle. The rotation matrix is derived from Rodrigues' rotation formula, combining the components of the axis vector and the sine and cosine of the angle.

\begin{bmatrix} \cos(\theta) + u_x^2 (1 - \cos(\theta)) & u_xu_y(1 - \cos(\theta)) - u_z\sin(\theta) & u_xu_z(1 - \cos(\theta)) + u_y\sin(\theta) & 0 \ u_yu_x(1 - \cos(\theta)) + u_z\sin(\theta) & \cos(\theta) + u_y^2(1 - \cos(\theta)) & u_yu_z(1 - \cos(\theta)) - u_x\sin(\theta) & 0 \ u_zu_x(1 - \cos(\theta)) - u_y\sin(\theta) & u_zu_y(1 - \cos(\theta)) + u_x\sin(\theta) & \cos(\theta) + u_z^2(1 - \cos(\theta)) & 0 \ 0 & 0 & 0 & 1 \end{bmatrix}

When you plug in everything we've calculated thus far into Matrix R , the resulting matrix will be stored into model.

View Matrix

glm::mat4 view = glm::mat4(1.0f);view = glm::translate(view, glm::vec3(0.0f, 0.0f, -3.0f));

The view matrix is used to transform vertices from world space to camera (view) space. It's analogous to moving and orienting a camera within the scene.

glm::vec3(0.0f, 0.0f, -3.0f) indicates that the view is being translated along the z-axis.

t⃗=<0,0,−3>\vec{t} = \left<0, 0, -3 \right>

The glm::translate function constructs a 4x4 translation matrix. This matrix is an identity matrix with the translation vector added to the fourth column. It shifts the position of all points in the scene relative to the camera.

For a translation by a vector t, the translation matrix T is:

\begin{bmatrix} 1 & 0 & 0 & t_x \ 0 & 1 & 0 & t_y \ 0 & 0 & 1 & t_z \ 0 & 0 & 0 & 1 \end{bmatrix}

When you plug in vector t into Matrix T , the resulting matrix will be stored into view.

Projection Matrix

glm::mat4 projection = glm::perspective(glm::radians(60.0f), float(screen_width)/(float)screen_height, 0.1f, 100.0f);

The projection matrix maps a 3D world into a 2D view, akin to how a camera lens focuses light onto a film.

glm::perspective creates a frustum that defines the visible space. It scales the x and y coordinates of vertices based on their depth (z-value), causing more distant objects to appear smaller and creating a sense of depth.

The frustum in the context of the glm::perspective function is a crucial concept in 3D graphics, especially concerning the perspective projection matrix. Let's break down what a frustum is and how it works in the creation of a perspective projection:

What is a Frustum?

A frustum in 3D graphics is a geometric shape that resembles a pyramid with the top cut off. In the case of perspective projection, it's more specifically a truncated pyramid.
The frustum defines the portion of the 3D space that is visible through the camera. Only objects within this frustum will be rendered on the screen.

Components of the Frustum:

Near Plane : This is the closest plane to the viewer (camera). In your code, it's set to 0.1f units from the viewer. Objects closer than this plane are not visible or rendered.
Far Plane : This is the farthest plane from the viewer, set to 100.0f units in your code. Objects beyond this distance are also not visible or rendered.
Sides of the Frustum : The sides of the frustum are defined by the field of view (FOV). A wider FOV creates a wider frustum, capturing a broader view of the scene but potentially introducing more distortion (similar to a wide-angle lens in photography).
Top and Bottom : The aspect ratio (width divided by height) determines the relative heights of the top and bottom planes of the frustum.

Role in Perspective Projection:

The purpose of the frustum in perspective projection is to define how 3D coordinates are projected onto the 2D plane of the screen.
The projection matrix, P, maps coordinates from this 3D frustum to a normalized 2D coordinate system. It scales the x and y coordinates of the vertices based on their z-value (depth), which makes objects appear smaller as they get farther away, creating a realistic depth perception.

\begin{bmatrix} \frac{\cot{(\frac{fov_y}{2})}}{aspect} & 0 & 0 & 0 \ 0 & \cot{(\frac{fov_y}{2})} & 0 & 0 \ 0 & 0 & \frac{z_{\text{far}} + z_{\text{near}}}{z_{\text{near}} - z_{\text{far}}} & \frac{2 \times z_{\text{far}} \times z_{\text{near}}}{z_{\text{near}} - z_{\text{far}}} \ 0 & 0 & -1 & 0 \end{bmatrix}

When you plug in everything we've calculated thus far into Matrix P , the resulting matrix will be stored into projection.

Connecting it to the vertex shader

Now, we need a way to pass these matrices into the vertex shader.

        int modelLoc = glGetUniformLocation(programID, "model"); glUniformMatrix4fv(modelLoc, 1, GL_FALSE, glm::value_ptr(model)); int viewLoc = glGetUniformLocation(programID, "view"); glUniformMatrix4fv(viewLoc, 1, GL_FALSE, glm::value_ptr(view)); int projectionLoc = glGetUniformLocation(programID, "projection"); glUniformMatrix4fv(projectionLoc, 1, GL_FALSE, glm::value_ptr(projection));

We are going to pass the model, view, and projection matrices to the shaders. The glUniformMatrix4fv function is an OpenGL function that sets the value of a uniform matrix variable in the shaders. It takes the location of the uniform variable, the number of matrices (1 in this case), a flag for matrix transpose (set to GL_FALSE), and a pointer to the data.

In vertex.glsl, we're going to need to grab the variables that we've just defined:

#version 330 corelayout (location = 0) in vec3 aPos;uniform mat4 model;uniform mat4 view;uniform mat4 projection;void main() { gl_Position = projection * view * model * vec4(aPos, 1.0);}

When combining these matrices, the order of multiplication is crucial. The typical order in OpenGL for transforming a vertex v is:

Model transformation (rotation in this case)
View transformation (translation)
Projection transformation

So, the combined transformation matrix M is given by:

\times T \times R

The final transformed vertex v is obtained by multiplying the vertex's homogeneous coordinate vector v with M :

\times v

This process transforms the vertex from its local space (model transformation) to world space (view transformation), and finally to normalized device coordinates (projection transformation), ready for rasterization and rendering on the screen.

Before we do that, we're going to need to update our vertices and triangle arrays in mesh.cpp to be a 3D cube:

    GLfloat vertices[] = { 0.5f, -0.5f, 0.5f, -0.5f, -0.5f, 0.5f, 0.5f, 0.5f, 0.5f, -0.5f, 0.5f, 0.5f, 0.5f, -0.5f, -0.5f, -0.5f, -0.5f, -0.5f, 0.5f, 0.5f, -0.5f, -0.5f, 0.5f, -0.5f }; GLint triangles[] = {0, 2, 3, 0, 3, 1, 2, 6, 7, 2, 7, 3, 6, 4, 5, 6, 5, 7, 4, 0, 1, 4, 1, 5, 1, 3, 7, 1, 7, 5, 4, 6, 2, 4, 2, 0};

If you forgot how we did this last time, look at Part 2 for a more detailed explanation.

Let's go ahead and run this code! This is what my compilation command looks like now:

clang++ -std=c++20 main.cpp mesh.cpp loadShader.cpp ./glad/src/glad.c -o spinning_shapes -I/Library/Frameworks/SDL2.framework/Headers -I./glad/include -I./glm/ -F/Library/Frameworks -framework SDL2

If you see a 3D cube, congrats! We are close to making it spin.

Making it spin!

To make it spin, all we're going to need to do is update our model matrix to rotate with time instead of staying at 50 degrees.

In main.cpp update the code to:

Add Uint32 lastUpdate = SDL_GetTicks(); under the declaration of done

Add Uint32 current = SDL_GetTicks(); as soon as the while loop begins

Add float dT = (current lastUpdate) / 1000.0f; underneath the glClear() call

Add *dT to the rotate matrix in the model declaration so that it looks like:

model = glm::rotate(model, glm::radians(50.0f)*dT, glm::vec3(0.5f, 1.0f, 0.0f));

Simply, this code is going to calculate the difference in time between frames, and then multiply that difference by our rotation, so that it consistently rotates each frame.

Spinning cube. Speaks for itself.

BONUS: Spinning Rhombus

In mesh.cpp update the vertices and triangles to make a rhombus:

    GLfloat vertices[] = { 0.5f, 0.0f, 0.5f, -0.5f, 0.0f, 0.5f, -0.5f, 0.0f, -0.5f, 0.5f, 0.0f, -0.5f, 0.0f, 1.0f, 0.0f, 0.0f, -1.0f, 0.0f }; GLint triangles[] = { 0, 4, 1, 1, 4, 2, 2, 4, 3, 3, 4, 0, 0, 5, 1, 1, 5, 2, 2, 5, 3, 3, 5, 0};

Now when we run our code we get a Rhombus:

I suggest trying to make your mesh to get a better understanding of 3D spaces and how memory management works.

Wrapping Up

Throughout this series, we have embarked on an exciting journey into the world of 3D graphics programming. Starting from the basics of OpenGL and SDL initialization, we have explored fundamental concepts such as vertices, triangle arrays, and buffer management. Along the way, weve delved into the mathematical principles that make 3D rendering possible.

Key Takeaways

Understanding Vertices and Buffers: We understood the role that defining vertices and the order in which to draw them, and how buffers enable efficient storage and manipulation of these vertices on the GPU.
3D Transformations and Projection: Through matrix mathematics, weve seen how to translate, rotate, and scale objects in a 3D space. While OpenGL GLM handles this math for us, we took the opportunity to see what was happening behind the scenes. We also learned how perspective projection brings depth to our rendering.
Creating our Spinning Cube! By combining all of the elements we learned, we were able to render a spinning 3D cube, which is the first building block for creating far more complex 3D scenes.

Whats Next?

The door to 3D graphics programming is now wide open. With the foundation laid in this series, you can explore further topics such as:

Texture Mapping: Adding textures to give surfaces realistic appearances.
Lighting and Shading: Implementing various lighting models to create a more lifelike scene.
3D Modeling and Animation: Importing and manipulating complex 3D models, and creating intricate animations.

Whether youre looking to build a game, create a simulation, make a movie, or simply experiment with 3D graphics, the skills youve acquired here will be a valuable asset.

Thank you for joining me on this adventure into 3D graphics programming. Keep experimenting, learning, and most importantly, having fun! Build your castle in the skies, your creativity and intellect will be enough :)

Happy coding!

Building Pong with MonoGame: A Step-by-Step Guide

Hadi — Sun, 08 Oct 2023 19:58:05 +0000

In this tutorial, you will create the game Pong in MonoGame using C#. We will be able to play pong with a friend, and more importantly, learn how to build games in MonoGame.

MonoGame is an open-source, cross-platform game development framework capable of building 2D and 3D games. It is built from the now-expired Microsoft XNA framework, which was popular back in the Xbox 360 days for creating games on the Xbox and PC.

As a game developer, using MonoGame might seem backward in the world of advanced game engines like Unity and Unreal Engine, which provide many tools and components for you that we'd otherwise have to program ourselves. However, building components of the engine that are specific to your game requires you to understand the code at a far deeper level, which will make you better at identifying programming patterns.

In this tutorial, you will learn how to create a Pong game using MonoGame and C#. This tutorial covers setting up the environment, creating the Paddle and Ball classes, handling collisions, and displaying the score. A basic knowledge of object-oriented programming languages such as C# or C++ is assumed. By the end of this tutorial, you will have a fully functional Pong game to play with a friend and a deeper understanding of MonoGame's framework.

Let's get started!

DISCLAIMER: This walkthrough assumes a basic knowledge of any OOP (Object Oriented Programming) Language, such as C# or C++.

GitHub Repo: https://github.com/HadiCya/Pong-MonoGame

YouTube Version:

What you'll need

Let's get set up. We'll need a couple of things to get started:

First things first, make sure .NET 6.0 SDK is installed on your computer matching your operating system (Windows, MacOS, or Linux).

The recommended way to install MonoGame is by using Visual Studio 2022, because there is already an extension you can use directly in the IDE. Creating a project is a lot more simplified in this way. Follow this guide by MonoGame to install it for your specific operating system. You will also be able to run it in the command line without an IDE, if you prefer Visual Studio Code, vim, or some other code editor.

Now that you have it installed, let's create a project.

If you're using Visual Studio 2022 , create a new project, select the MonoGame Cross Platform Desktop Application option, and name the project Pong.

If you're using the command line , navigate to where you'd like to create a project and type:

dotnet new mgdesktopgl -o Pong

This will create a new dotnet project called Pong.

Now that you've created a MonoGame project, you'll see that a lot of files have been generated where you created the project. If you're using Visual Studio 2022, go ahead and run the program with the debug button or by pressing F5. If you're using the command line, type dotnet run. When you run the project, a blue window should pop up.

If you see this, you're ready to get started with MonoGame!

Preparing the code

The project that is automatically generated has a lot of files in it, so it may be overwhelming to look at first glance. But, we'll go through the important ones right now and try to understand how the code is structured. This is the general file structure:

While there are ways we can reorganize that make sense for a project you'd be working on long term, right now we can use the default structure since we're just making Pong. That being said, the only file we will concern ourselves with (right now) is Game1.cs which is our game runs.

In Game1.cs we are defining the class Game1. Let's break it down:

Game1() is the constructor for our class. This is run when we create the instance of our game. The default code is just defining some basic things for the code to run.
Initialize() is where we will initialize objects inside our game. When we create our paddle class, we will initialize our players here.
LoadContent() is where we can load content, such as sprites, fonts, audio, and other content.
Update(GameTime gameTime) is called every frame, and it is where we will update our game logic.
Draw(GameTime gameTime) is where we will draw our objects to the screen.

As you can see, everything is broken up into clear functions, and we're going to try and keep things clean in this manner while we create our game.

We're going to try and avoid running too much game logic in the Game1 class, as we want to have clear roles for all the objects in the game. For this project, we can simplify the classes we will make as just Paddle and Ball. It may be more intelligent to organize more so there is more separation and more flexibility to change things about the game in the future, but for this tutorial, we're going to just worry about getting a working Pong.

Before we start coding, let's prepare the existing code for our game.

Create a file called Globals.cs so that we can store global variables for our game.

using Microsoft.Xna.Framework.Content;
using Microsoft.Xna.Framework.Graphics;

namespace Pong
{
    class Globals
    {
        public static SpriteBatch spriteBatch;
        public static int WIDTH = 640, HEIGHT = 480;
    }
}

In our Globals class, we want to store some public global variables, so that we can access them from anywhere in our game. For now, we're going to store the width and height of our screen, as well as SpriteBatch, which is going to make drawing things to the screen possible.

Because we've created a global variable spriteBatch, we can replace all instances of the local private one with the global version. Go into your Game1 class, and delete the _spriteBatch class variable that was automatically created.

Replace any mention of _spriteBatch in Game1 with our newly created Globals.spriteBatch

Let's also update our constructor to use the WIDTH and HEIGHT variables we defined earlier.

public Game1() {
    _graphics = new GraphicsDeviceManager(this);
    _graphics.PreferredBackBufferWidth = Globals.WIDTH;
    _graphics.PreferredBackBufferHeight = Globals.HEIGHT;
    Content.RootDirectory = "Content";
    IsMouseVisible = true;
}

The last thing we'll need to do is update our Draw() function:

protected override void Draw(GameTime gameTime) {
    GraphicsDevice.Clear(Color.Black);

    Globals.spriteBatch.Begin();
    // TODO: Add your drawing code here            
    Globals.spriteBatch.End();

    base.Draw(gameTime);
}

We need to change the Color from Color.CornflowerBlue to Color.Black (unless you want your background to be some other color).

To draw game objects on the screen, start the drawing process by using the Begin() method on the Globals.spriteBatch object. This sets up everything needed to show our game elements. After finishing all drawing tasks, end the process by using the End() method on the Globals.spriteBatch object. This makes sure all drawing operations are done and the elements show up on the screen.

Not much has changed, but now it will be easier to create objects and draw to the screen. Next, we're going to create the Paddle.

Creating the Paddle

Let's go ahead and create a file called Paddle.cs and define our Paddle class. In this class, create a constructor, a Update() and a Draw() function.

We're also going to want to define a Rectangle object, which will represent the paddle.

This is how our class should look:

using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Input;

namespace Pong {
    public class Paddle {
        public Rectangle rect;

        public Paddle() {}
        public void Update(GameTime gameTime) {}
        public void Draw() {}
    }
}

Now that we've set up the Paddle class, let's try just getting a rectangle on the screen.

In the constructor, let's define what rect is. The parameters for the MonoGame Rectangle class is: Rectangle(int x, int y, int width, int height)

As you can see, we need to fill in the position of the rectangle, x and y, as well as the width and height.

In computer graphics, we use a different coordinate system than the usual one from math class. The top-left corner of the screen is the starting point (0,0). The x-axis shows the horizontal position, and the y-axis shows the vertical position. This system makes it easier to work with graphics on screens and in programming.

So, let's go to the constructor, and define our rect variable:

rect = new Rectangle(0, 140, 40, 200)

Now we're going to want to draw the paddle onto the screen, but before we write anything in the Draw() function, we need to define a Texture2D for our rectangle.

In Globals.cs, add public static Texture2D pixel; to the instance variables.

In Game1.cs, update the LoadContent() function to this:

protected override void LoadContent() {
    Globals.spriteBatch = new SpriteBatch(GraphicsDevice);

    Globals.pixel = new Texture2D(GraphicsDevice, 1, 1);
    Globals.pixel.SetData<Color>(new Color[] { Color.White });
}

What we're doing here is defining the pixel variable we just created in our Globals class. Through our code, we're basically just creating a white texture.

Now, we can go back to our Paddle.cs class, and update our Draw() function to this:

public void Draw() {
    Globals.spriteBatch.Draw(Globals.pixel, rect, Color.White);
}

Here, we are accessing the global spriteBatch variable, and drawing our rectangle to it with our essentially empty texture, with the color white. Because our pixel variable is white, we can set our Color to any color we want, but in this case, we'll just keep it white to stay true to the original Pong.

To get things onto the screen, we need to initialize, update, and draw our Paddle in the Game1 class. For every matching function, we need to call it in Game1.

In Game1:

In the class variables, add Paddle paddle;
In Initialize(), add paddle = new Paddle(); right before base.Initialize();
In Update(), add paddle.update(gameTime); right before base.Update(gameTime);
In Draw(), add paddle.Draw(); right before Globals.spriteBatch.End();

Go ahead and run the project now

If you did everything correctly, we should be seeing our paddle on the screen! The code is now ready to add movement.

Back in the Paddle.cs file, add a new class variable float moveSpeed = 500f;

Now, let's fill in the Update() function so we can move the Paddle:

public void Update(GameTime gameTime) {
    KeyboardState kstate = Keyboard.GetState();
    if (kstate.IsKeyDown(Keys.W) && rect.Y > 0) {
        rect.Y -= (int)(moveSpeed * (float)gameTime.ElapsedGameTime.TotalSeconds);
    }
    if (kstate.IsKeyDown(Keys.S) && rect.Y < Globals.HEIGHT - rect.Height) {
        rect.Y += (int)(moveSpeed * (float)gameTime.ElapsedGameTime.TotalSeconds);
    }
}

Let's go through this line by line:

KeyboardState kstate = Keyboard.GetState(); is getting the current state of the Keyboard, which will give us information on what keys are being pressed.

if (kstate.IsKeyDown(Keys.W) && rect.Y > 0) { is checking to see if the player is pressing W to go up and that the paddle is not being clipped off the top of the screen.

rect.Y -= (int)(moveSpeed * (float)gameTime.ElapsedGameTime.TotalSeconds); is changing the Y position of the paddle, so that it can go up based on the moveSpeed multiplied by the time between the last frame and the current frame. We call this delta time (the difference between the previous and current frame).

Delta time helps make smooth movement and animations in games, no matter the frame rate or device performance.

if (kstate.IsKeyDown(Keys.S) && rect.Y < Globals.HEIGHT - rect.Height) { is checking to see if the player is pressing S to go down and that the paddle is not being clipped off the bottom of the screen.

rect.Y += (int)(moveSpeed * (float)gameTime.ElapsedGameTime.TotalSeconds); is changing the Y position of the paddle, so that it can go down, just as we did earlier with up.

If you've done everything correctly, we should have movement! All we have to do now is add a second player, which should be super easy now that we've made our Paddle class! We just need to allow the constructor to take in a parameter, if it's the second player or not, and then make modifications accordingly.

In the Paddle class, let's add a class variable bool isSecondPlayer;

In the constructor, we're going to need to take a boolean parameter so we can make changes based on if the instance of the Paddle class is the second player or not.

public Paddle(bool isSecondPlayer) {
    this.isSecondPlayer = isSecondPlayer;
    rect = new Rectangle((this.isSecondPlayer ? Globals.WIDTH - 40 : 0), 140, 40, 200);
}

Here, we're telling the computer to change the X variable, so that the paddle is on the right side if there is a second player.

Now, we need to change the Update() class to support a second player.

public void Update(GameTime gameTime) {
    KeyboardState kstate = Keyboard.GetState();
    if ((this.isSecondPlayer ? kstate.IsKeyDown(Keys.Up) : kstate.IsKeyDown(Keys.W)) && rect.Y > 0) {
        rect.Y -= (int)(moveSpeed * (float)gameTime.ElapsedGameTime.TotalSeconds);
    }
    if ((this.isSecondPlayer ? kstate.IsKeyDown(Keys.Down) : kstate.IsKeyDown(Keys.S)) && rect.Y < Globals.HEIGHT - rect.Height) {
        rect.Y += (int)(moveSpeed * (float)gameTime.ElapsedGameTime.TotalSeconds);
    }
}

We're adding a ternary expression again to change the movement key based on if the paddle is the second player or not.

Finally, we need to go into Game1 and add a second instance of Paddle, as well as updating the first Paddle instance to work with our new constructor.

In Game1:

In the class variables, add Paddle paddle2;
In Initialize(), update paddle = new Paddle(); to paddle = new Paddle(false);
In Initialize(), add paddle2 = new Paddle(true); right before base.Initialize();
In Update(), add paddle2.update(gameTime); right before base.Update(gameTime);
In Draw(), add paddle2.Draw(); right before Globals.spriteBatch.End();

Now, let's run the code!

Wonderful! We now have 2 players on the screen. Now, we need to create the Ball class and then make the final touches!

Creating the Ball

Before we create the Ball class, we need to create a way to store the score. In the Globals class, create two new integer variables:

public static int player1_score, player2_score;

Create a file Ball.cs for the Ball class

A lot of the things we are going to do in terms of drawing the rectangle on the screen are extremely similar to how we did it for the Paddle, so we can use this as our starting point:

using Microsoft.Xna.Framework;

namespace Pong {
    public class Ball {
        Rectangle rect;
        int right = 1, top = 1, moveSpeed = 200;

        public Ball() {
            rect = new Rectangle(Globals.WIDTH / 2 - 20, Globals.HEIGHT / 2 - 20, 40, 40);
        }
        public void Update(Gametime gameTime, Paddle player1, Paddle player2) {}
        public void Draw() {
            Globals.spriteBatch.Draw(Globals.pixel, rect, Color.White);
        }
    }
}

We're using the Global WIDTH and HEIGHT variables to put the ball at the center of the screen.

Also, we are going to take in both Paddle instances, since we want to use the Ball for all game calculations. This isn't necessarily the best practice, but since it's a simple game like Pong, it's alright.

We also created three new integer class variables right = 1, top = 1, and moveSpeed = 200.

We will use right and top to store either 1 or -1 so that we can create conditionals for when the ball collides with something. We're going to want to keep it simple, so the ball will always move at a 45 angle. By adding the same values to the X and the Y of the ball, it will always bounce at the same 45 angle.

In the Update() function, we're going to add a bunch of if statements back to back to control the ball:

Before any if statements, we're just going to move the ball based on its current trajectory. For every frame, we're multiplying the moveSpeed with the delta time, and then making it negative or positive based on the modifiers right and top.

int deltaSpeed = (int)(moveSpeed * (float)gameTime.ElapsedGameTime.TotalSeconds);
rect.X += right * deltaSpeed;
rect.Y += top * deltaSpeed;

Our first conditional is going to be for the left paddle, the first player. Each value in this if statement is checking each side of the ball and paddle to make sure that if the ball hits the paddle at a valid position, the direction is reversed.

if (player1.rect.Right > rect.Left && rect.Top > player1.rect.Top && rect.Bottom < player1.rect.Bottom) {
    right = 1;
}

The same thing is happening for the right paddle, except the right and left values are flipped so collisions make sense for it.

if (player2.rect.Left < rect.Right && rect.Top > player2.rect.Top && rect.Bottom < player2.rect.Bottom) {
    right = -1;
}

We check to see if the ball hits the top of the window, and if it does we reverse the top direction so that it can bounce down.

if (rect.Y < 0) {
    top *= -1;
}

Then we check to see if the ball hits the bottom of the screen and reverse the top direction, just like before.

if (rect.Y > Globals.HEIGHT - rect.Height) {
    top *= -1;
}

For the X values, that means the ball went off the screen. This means we need to award a point to the opposite and reset the game. For this specific if statement, we're checking to see if the ball hits the left side of the screen.

if(rect.X < 0) {
    Globals.player2_score += 1;
    resetGame();
}

And for this one, we're checking to see if the ball hits the right side of the screen, awarding a point to the first player.

if (rect.X > Globals.WIDTH - rect.Width) {
    Globals.player1_score += 1;
    resetGame();
}

We're calling a function resetGame() that we haven't made yet! We want this to put the ball back at the center of the game, which should be easy for us. Go ahead and create it as part of the Ball class.

public void resetGame() {
    rect.X = Globals.WIDTH / 2 - 20;
    rect.Y = Globals.HEIGHT / 2 - 20;
}

Now, just like we did for the paddles, we need to add an instance of Ball to the Game1 class.

In Game1:

In the class variables, add Ball ball;
In Initialize(), add ball = new Ball(); right before base.Initialize();
In Update(), add ball.update(gameTime, paddle, paddle2); right before base.Update(gameTime);
In Draw(), add ball.Draw(); right before Globals.spriteBatch.End();

Let's run it and see our progress!

We now have a working Pong! The only thing missing now is a score.

Showing the Score

In MonoGame, displaying text on the screen requires loading a font resource, typically in the form of a SpriteFont. This allows you to present information such as scores, game instructions, and other textual elements in your MonoGame project.

For our project, we're going to use it to show the scores on the top.

If you're using Visual Studio 2022, go to your files, open the Content folder, right click the Content.mgcb file, and open it with the MGCB Editor.

If you're using the command line, type dotnet mgcb-editor to open up the editor.

Whichever way, it should open the MGCB editor, which is the UI interface for content management.

If your Content file isn't already there, go to the top, click File > Open..., and navigate to your Content.mgcb file.

After you add it, right-click the Content add click Add > New Item...

Create a SpriteFont Description called Score. This will generate a .spritefont file that we can use to apply settings for rendering to the screen.

Let's save and exit out of the MGCB Editor.

The Score.spritefont file we created is just a standard XML file, that defines properties of the font. By default, the font selected is Arial, which is fine, but you can go in there and make it any font you want, just make sure that you add the .ttf file to the Content folder if you don't already have it installed on your machine.

For me, I downloaded the Press Start Font , and put the file in the Content folder, then opened the Score.sprintefont file and changed it from Arial to the name of the .ttf file, in my case prstart. I chose this font because it has a nice 8-bit style.

To add our font to the game, open Game1.cs and:

In the class variables, add SpriteFont font;
In LoadContent(), add font = Content.Load<SpriteFont>("Score"); at the bottom of the function.

Add two DrawString calls to our Draw() function, underneath Globals.spriteBatch.Begin():

Globals.spriteBatch.DrawString(font, Globals.player1_score.ToString(), new Vector2(100, 50), Color.White);
Globals.spriteBatch.DrawString(font, Globals.player2_score.ToString(), new Vector2(Globals.WIDTH - 112, 50), Color.White);

Let's save the file and run our project!

There we go! We now have a fully working version of Pong!

Great job on completing the Pong game tutorial using MonoGame and C#! This achievement has not only helped you build a classic game but also allowed you to gain hands-on experience in game development concepts. As you continue exploring new projects and honing your skills, you will become more proficient in game development.

Explore more advanced MonoGame features or other Game Engines/Frameworks, experiment with different game mechanics, learn about game design principles, and create a portfolio of game projects.

Keep up the good work and happy coding!

Make spinning 3D shapes in SDL2 and OpenGL

Hadi — Fri, 25 Aug 2023 03:42:01 +0000

Last part, we successfully created a window in SDL2 using OpenGL. Now that we understand how that works, we're going to learn how to render things on the screen by building a mesh class and creating shaders in GLSL, a shader programming language.

DISCLAIMER: This walkthrough assumes knowledge from Part 1 and a working knowledge of C++ and how to compile it.

GitHub Repo: https://github.com/HadiCya/spinning_shapes

YouTube Version:

https://youtu.be/ac6mf05O_qw

To start us off, were going to need to create a Mesh class for us to create Mesh objects, as eventually were going to make this 3D.

Go ahead and create a mesh.h header file:

#ifndef MESH_H
#define MESH_H

#include <glad/glad.h>

class Mesh {
    public:
        Mesh();
        void draw();
    private:
        GLuint VertexArrayID, vertexbuffer, elementbuffer, vertex_size;
};

#endif

We will construct a class called Mesh, which will set us up with the mesh information such as the vertices and what order to draw them in, along with setting up the vertices and triangle points.

Before we write code, let's take a deep dive into understanding how drawing vertices on the screen works. In computer graphics, a polygon mesh is used to render by drawing triangles. If you see an advanced character in a movie or video game, they are made up of thousands of tiny triangles. Triangles are used because of their ease of manipulation and require less storage, something that becomes important as projects grow in size and complexity.

Photo courtesy of https://realtimerendering.com

The way a polygon mesh stores its data is by utilizing a triangle and vertex array. The triangle array is responsible for storing which vertices to access in the vertex array. For example, if we have the triangle array [0, 2, 3, 0, 3, 1] the first triangle we draw accesses the vertices at positions 0, 2, 3 and then connecting them on the screen, creating a triangle.

In OpenGL, we manage this data with buffers, which are responsible for storing triangle and vertex data to be drawn on the screen.

Let's create our mesh.cpp file, and we'll see how we can implement this, and how it all works.

#include <vector>
#include "mesh.h"
#include <SDL.h>
#include <iostream>

Mesh::Mesh() {
    glGenVertexArrays(1, &VertexArrayID);
    glBindVertexArray(VertexArrayID);

    GLfloat vertices[] = {
        0.5f, -0.5f, 0.5f,
        -0.5f, -0.5f, 0.5f,
        0.5f, 0.5f, 0.5f,
        -0.5f, 0.5f, 0.5f
    };

    GLint triangles[] = {0, 2, 3, 0, 3, 1};

    glGenBuffers(1, &vertexbuffer);
    glBindBuffer(GL_ARRAY_BUFFER, vertexbuffer);
    glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);

    glGenBuffers(1, &elementbuffer);
    glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, elementbuffer);
    glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(triangles), triangles, GL_STATIC_DRAW);

    vertex_size = sizeof(triangles) / sizeof(GLint);
}

glGenVertexArrays(1, &VertexArrayID) and glBindVertexArray(VertexArrayID) creates and binds a vertex array object and its ID so that subsequent vertex buffer operations can be stored in the new object.

We then define our vertices and triangles arrays, like we did earlier in the diagram.

Now, we have to generate buffers to store our data.

The vertex buffer is a mechanism that sends the vertex data to the GPU, we are:

Generating a unique ID for the buffer.
Binding the buffer, setting it as active for OpenGL to operate with.
Allocating the appropriate amount of memory, and copying the data to the GPU. GL_STATIC_DRAW specifies that we are giving it the same unchanging data, that will be drawn many times.

The element buffer, also known as an index buffer, sends the triangle index data to the GPU.

This series of calls does the same as for the vertex buffer but for the index data. GL_ELEMENT_ARRAY_BUFFER tells OpenGL that this buffer contains index data.

Lastly, we'll store vertex_size data for when we call the draw() function.

Now, we need to make our draw() function:

void Mesh::draw(){
    glEnableVertexAttribArray(0);
    glBindBuffer(GL_ARRAY_BUFFER, vertexbuffer);
    glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 0, (void*)0);

    glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, elementbuffer);
    glDrawElements(GL_TRIANGLES, vertex_size, GL_UNSIGNED_INT, 0);

    glDisableVertexAttribArray(0);
}

Let's go through this function line by line:

glEnableVertexAttribArray(0): Enable the first attribute array at position 0. We're simply allowing ourselves to start the drawing process.
glBindBuffer(GL_ARRAY_BUFFER, vertexbuffer): Bind the vertex buffer.
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 0, (void*)0): Describe how the data for the vertices is stored in the vertex buffer.
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, elementbuffer): Bind the element buffer.
glDrawElements(GL_TRIANGLES, vertex_size, GL_UNSIGNED_INT, 0): Draw the triangles using the vertex and element buffers, according to the total size.
glDisableVertexAttribArray(0): Disable the first attribute array after drawing.

Before we can start drawing things on the screen, OpenGL requires us to have at minimum a fragment and vertex shader. We're going to be making these in the Graphics Library Shader Language (GLSL) which is a shader language based on the C programming language. Shaders aren't our primary focus for this series, so we're going to be covering the basics.

First, well create a file called vertex.glsl to store our Vertex Shader:

#version 330 core

layout (location = 0) in vec3 aPos;

void main() {
    gl_Position = vec4(aPos, 1.0);
}

The vertex shader is responsible for telling the GPU where every point is to be drawn, by transforming its position and other attributes using mathematic calculations. In this case, we're not going to be doing much.

#version 330 core: This sets the GLSL version to 3.30 and specifies the core profile. (In the last part we talked about using core over compatibility)
layout (location = 0) in vec3 aPos: This declares a 3-component vector input variable aPos, which represents the position of the vertex. The layout (location = 0) part explicitly sets the location of this attribute to 0.
void main() { ... }: The main function of the shader. It's executed once for every vertex.
gl_Position = vec4(aPos, 1.0): This converts the input 3D position into a 4D vector by adding a fourth component with a value of 1.0. This is common in graphics to represent homogeneous coordinates.

Now we want to create a file called fragment.glsl for our Fragment Shader

#version 330 core

out vec3 color;

void main() {
    color = vec3(1,1,1);
}

The fragment shader is responsible for telling the GPU what color information needs to be drawn, for every pixel that our geometry covers. This will also be simple, especially since later we will just be using the wireframe setting.

out vec3 color: This declares a 3-component vector output variable color, which will store the output color of the fragment.
void main() { ... }: The main function of the shader, executed once for every fragment (potential pixel on the screen).
color = vec3(1,1,1): This sets the output color to white (1,1,1), meaning every fragment processed by this shader will have this color.

Were also going to use an existing shader loader and header. This isnt necessary to understand OpenGL completely, go ahead and just copy the code directly.

Create the file loadShader.h and populate it with this code:

#ifndef LOAD_SHADER_H
#define LOAD_SHADER_H

#include <glad/glad.h>

GLuint LoadShaders(const char * vertex_file_path, const char * fragment_file_path);

#endif // LOAD_SHADER_H

Create the file loadShader.cpp and populate it with this code:

#include "loadShader.h"
#include <SDL.h>
#include <fstream>
#include <sstream>
#include <iostream>

GLuint LoadShaders(const char * vertex_file_path,const char * fragment_file_path){

 // Create the shaders
 GLuint VertexShaderID = glCreateShader(GL_VERTEX_SHADER);
 GLuint FragmentShaderID = glCreateShader(GL_FRAGMENT_SHADER);

 // Read the Vertex Shader code from the file
 std::string VertexShaderCode;
 std::ifstream VertexShaderStream(vertex_file_path, std::ios::in);
 if(VertexShaderStream.is_open()){
  std::stringstream sstr;
  sstr << VertexShaderStream.rdbuf();
  VertexShaderCode = sstr.str();
  VertexShaderStream.close();
 }else{
  printf("Impossible to open %s. Are you in the right directory ? Don't forget to read the FAQ !\n", vertex_file_path);
  getchar();
  return 0;
 }

 // Read the Fragment Shader code from the file
 std::string FragmentShaderCode;
 std::ifstream FragmentShaderStream(fragment_file_path, std::ios::in);
 if(FragmentShaderStream.is_open()){
  std::stringstream sstr;
  sstr << FragmentShaderStream.rdbuf();
  FragmentShaderCode = sstr.str();
  FragmentShaderStream.close();
 }

 GLint Result = GL_FALSE;
 int InfoLogLength;

 // Compile Vertex Shader
 printf("Compiling shader : %s\n", vertex_file_path);
 char const * VertexSourcePointer = VertexShaderCode.c_str();
 glShaderSource(VertexShaderID, 1, &VertexSourcePointer , NULL);
 glCompileShader(VertexShaderID);

 // Check Vertex Shader
 glGetShaderiv(VertexShaderID, GL_COMPILE_STATUS, &Result);
 glGetShaderiv(VertexShaderID, GL_INFO_LOG_LENGTH, &InfoLogLength);
 if ( InfoLogLength > 0 ){
  std::vector<char> VertexShaderErrorMessage(InfoLogLength+1);
  glGetShaderInfoLog(VertexShaderID, InfoLogLength, NULL, &VertexShaderErrorMessage[0]);
  printf("%s\n", &VertexShaderErrorMessage[0]);
 }

 // Compile Fragment Shader
 printf("Compiling shader : %s\n", fragment_file_path);
 char const * FragmentSourcePointer = FragmentShaderCode.c_str();
 glShaderSource(FragmentShaderID, 1, &FragmentSourcePointer , NULL);
 glCompileShader(FragmentShaderID);

 // Check Fragment Shader
 glGetShaderiv(FragmentShaderID, GL_COMPILE_STATUS, &Result);
 glGetShaderiv(FragmentShaderID, GL_INFO_LOG_LENGTH, &InfoLogLength);
 if ( InfoLogLength > 0 ){
  std::vector<char> FragmentShaderErrorMessage(InfoLogLength+1);
  glGetShaderInfoLog(FragmentShaderID, InfoLogLength, NULL, &FragmentShaderErrorMessage[0]);
  printf("%s\n", &FragmentShaderErrorMessage[0]);
 }

 // Link the program
 printf("Linking program\n");
 GLuint ProgramID = glCreateProgram();
 glAttachShader(ProgramID, VertexShaderID);
 glAttachShader(ProgramID, FragmentShaderID);
 glLinkProgram(ProgramID);

 // Check the program
 glGetProgramiv(ProgramID, GL_LINK_STATUS, &Result);
 glGetProgramiv(ProgramID, GL_INFO_LOG_LENGTH, &InfoLogLength);
 if ( InfoLogLength > 0 ){
  std::vector<char> ProgramErrorMessage(InfoLogLength+1);
  glGetProgramInfoLog(ProgramID, InfoLogLength, NULL, &ProgramErrorMessage[0]);
  printf("%s\n", &ProgramErrorMessage[0]);
 }

 glDetachShader(ProgramID, VertexShaderID);
 glDetachShader(ProgramID, FragmentShaderID);

 glDeleteShader(VertexShaderID);
 glDeleteShader(FragmentShaderID);

 return ProgramID;
}

Credit to: https://www.opengl-tutorial.org/ for creating the shaders loader.

Now that we have our Mesh class completed, and our shaders set up, all we have to do now is make it work in our main.cpp

Lets update our includes in main.cpp to:

#include <iostream>
#include <SDL.h>
#include "mesh.h"
#include "loadShader.h"

After we call gladLoadGLLoader(SDL_GL_GetProcAddress) were going to want to initialize our Mesh and load our shaders:

    SDL_GLContext context;
    context = SDL_GL_CreateContext(window);

    gladLoadGLLoader(SDL_GL_GetProcAddress);

    Mesh cube;

    GLuint programID = LoadShaders("vertex.glsl", "fragment.glsl");

    bool done = false;

Lastly, in our while loop, were going to want to actually draw our Mesh but not before we tell OpenGL to use the shaders we loaded earlier into programID

Were also going to call glPolygonMode(GL_FRONT_AND_BACK, GL_LINE) which is going to render everything on the screen in wireframe mode. This is going to show how the triangles are being drawn, as we described earlier. And also, wireframe looks cool.

    while(!done) {
        glViewport(0, 0, screen_width, screen_height);

        SDL_Event event;
        while(SDL_PollEvent(&event)){
            if(event.type == SDL_QUIT) {
                done = true;
            }
        }
        glClear(GL_DEPTH_BUFFER_BIT | GL_COLOR_BUFFER_BIT);

        glUseProgram(programID);
        glPolygonMode(GL_FRONT_AND_BACK, GL_LINE);

        cube.draw();    

        SDL_GL_SwapWindow(window);

Thats all the changes we need! Go ahead and compile your code yet again, this time adding mesh.cpp and loadShaders.cpp to your compilation list. This is how my compilation command looks now:

clang++ -std=c++20 main.cpp mesh.cpp loadShader.cpp ./glad/src/glad.c -o spinning_shapes -I/Library/Frameworks/SDL2.framework/Headers -I./glad/include -F/Library/Frameworks -framework SDL2

If you see a slightly stretched-out square, congrats! Youve successfully rendered a square onto the screen.

You might be asking if our vertices are uniform, why is it stretched like that?

That, and how we're going to make this a spinning cube, will be answered in our next and final part!

Thanks for reading!

Make spinning 3D shapes in SDL2 and OpenGL

Hadi — Thu, 17 Aug 2023 09:26:35 +0000

In this miniseries, you will be creating a program in C++ that will be able to render 3D shapes in SDL2 and OpenGL, and more importantly, learn about what is happening in depth while you write your program.

As a game developer, using SDL2 and OpenGL in a world of advanced game engines such as Unity and Unreal Engine may seem like a waste of time. And youd probably be right. While programming at a low level may have benefits such as program speed, reliability, and smaller sizes, many games youd be able to produce with a low-level framework (in a timely manner) can be made in a game engine much faster, and itd run fine on low-spec machines, and great on average machines.

So, why bother?

By learning the components of rendering in a low-level setting, you gain a deeper understanding of how a game engine works under the hood, which in turn will teach you how to optimize your game better, making you a better game developer. And more importantly, because it is cool. Thats why I do it at least. There are many other technical reasons that could be argued, but we neednt dwell, and just begin.

Lets get started!

DISCLAIMER: This walkthrough assumes a working knowledge of C++ and how to compile it.

YouTube version:

https://youtu.be/ac6mf05O_qw

What you'll need

First things first, lets get set up. The tools well need for this are (continue reading for more detailed instructions):

OpenGL (OpenGL is most likely installed by default on your machine, but you must ensure the latest version is installed)
A C++ compiler (I use clang++ and compile C++20)
SDL 2.0
GLAD
GLM

Before we get started, create a directory to store this project in, I named mine spinning_shapes

SDL2 is a development library built in C, that provides low-level interfaces to computer graphics hardware (with graphics libraries such as OpenGL), audio, video, peripherals, etc. We will be using it to actually display a window capable of rendering visuals.

Download SDL2 from the released tab on the SDL2 website. Follow this installation guide for more specifics about your operating system.

Whenever you want to access OpenGL, youll need some kind of loading library. Many of them have minor differences and accomplish exceedingly similar things. We will be using GLAD, a multi-language loader-generator for OpenGL. The GLAD web tool we will be using will be able to generate a header file for us.

Go to the official GLAD loader-generator website, here you will select C/C++ under Language and OpenGL under Specification.

Under the API tab, were going to be selecting gl Version 4.1, and none for the rest. For Profile, we will be using Core instead of Compatibility. The Extensions column on the left is going to be populated, and were going to go ahead and click ADD ALL, and click the GENERATE button on the bottom.

After you generate your GLAD zip, download it, and extract the glad folder into your project folder.

Were going to need to be capable of making vector and matrix calculations that we wouldnt otherwise be able to in OpenGL. This is where GLM comes in, a mathematics library for OpenGL and the OpenGL Shading Language (GLSL). Go ahead and download the latest release from the GLM Github. Extract it and put it in the project directory.

Thats all the downloads/installations well need!

As Im sure youve already discovered, installing and configuring these C++ libraries can prove to be difficult from machine to machine, and youre going to probably have to do your own research to get things working especially if youre a beginner. Its all part of the learning. You can see what exactly works for me on my YouTube video.

Let's make a window

Lets begin by creating a file called main.cpp , this will be what will run our main C++ code

#include <iostream>
#include <glad/glad.h>
#include <SDL.h>

int main(int argc, char* argv[]){
    SDL_Window* window = nullptr;

    int screen_width = 1000;
    int screen_height = 800;

    if (SDL_Init(SDL_INIT_VIDEO) < 0) {
        std::cout << "SDL failed initialization. " << SDL_GetError();
        return -1;
    } else {
        std::cout << "SDL successfully initialized.";
    }

Well need to start the program off by including <iostream> along with <glad/glad.h> and <SDL.h>

In our main() function, we want to initialize a SDL_Window which we will point to an empty pointer. We will be assigning this later, once weve set up some OpenGL attributes.

We will define our screen height and width, and then check to see if SDL successfully initializes, returning an error if it doesnt.

    SDL_GL_SetAttribute(SDL_GL_CONTEXT_MAJOR_VERSION, 4);
    SDL_GL_SetAttribute(SDL_GL_CONTEXT_MINOR_VERSION, 1);
    SDL_GL_SetAttribute(SDL_GL_CONTEXT_PROFILE_MASK, SDL_GL_CONTEXT_PROFILE_CORE);
    SDL_GL_SetAttribute(SDL_GL_DOUBLEBUFFER, 1);
    SDL_GL_SetAttribute(SDL_GL_DEPTH_SIZE, 24);

    window = SDL_CreateWindow("C++ SDL2 Window | OpenGL", 
            0, 
            0, 
            screen_width, 
            screen_height, 
            SDL_WINDOW_SHOWN | SDL_WINDOW_OPENGL);
    SDL_GLContext context;
    context = SDL_GL_CreateContext(window);

    gladLoadGLLoader(SDL_GL_GetProcAddress);

This is a lot of SDL and OpenGL! It is daunting at first glance, but we will be breaking it down to see what exactly is happening, in a digestible way.

SDL_GL_SetAttribute() is a function in SDL2 for setting window attributes in OpenGL before the window is created. Lets go through this line by line:

SDL_GL_CONTEXT_MAJOR_VERSION By setting this attribute to 4, we are telling SDL we intend to use version 4.x.
SDL_GL_CONTEXT_MINOR_VERSION This is completed when you set the minor version, and SDL now knows we intend to use version 4.1, when we set this attribute to 1.
SDL_GL_CONTEXT_PROFILE_MASK is a way to define OpenGL context, which just means which features we want available. When setting up GLAD earlier, we chose Core over Compatibility. Compatibility supports a Legacy and an entirely different format of rendering objects on the screen, which isnt necessary for us. Thats why its important to specify what is available to SDL and set our mask to SDL_GL_CONTEXT_PROFILE_CORE
SDL_GL_DOUBLEBUFFER Double buffer is a rendering technique which stores two separate buffers, hence the name. While one frame is being displayed on the screen, a secondary buffer is generated in the background, so that the render can swap to the other one quickly. This is used to reduce flickering and smoother rendering.
SDL_GL_DEPTH_SIZE Depth size stores an integer value representing bits that should be allocated for the depth buffer (or z-buffer). These values are responsible for deciding whether or not a pixel should be rendered, based on its depth to previously rendered pixels. In essence, the depth buffer makes objects clearly behind each other, or far away objects not being rendered directly in front of the camera. 24 balances well between precision and memory usage, and is the most common value.

Now that weve set the attributes for our window, we can create the window!

SDL_CreateWindow() takes 6 different parameters, a title, the x and y positions of the top left pixel (relative to the computer screen), the window width and height, and FLAGS

We use two flags: SDL_WINDOW_SHOWN and SDL_WINDOW_OPENGL the former indicating that the window should be shown immediately, the latter preparing your window for use with OpenGL. For more info, see SDL2 Window_Flags values.

Now, you can create an OpenGL context, which is an environment responsible for the state and resources. This manages OpenGLs rendering operations and interactions with the graphics system. In this context, we will be managing the OpenGL state, frame buffer, functions, shaders, textures, buffers, and viewport.

Last thing in this block of setting up the window, well need to call gladLoadGLLoader() which will just initialize the GLAD library to load up function pointers with SDL_GL_Get_Proc_Address

That wasnt so bad, right? There are a lot of abstractions in OpenGL, and its just a matter of taking the time to slowly learn them and try new things. This block of code is crucial to preparing our window for OpenGL rendering. Now, lets finish this window creation by making our main loop!

    bool done = false;

    while(!done) {
        glViewport(0, 0, screen_width, screen_height);

        SDL_Event event;
        while(SDL_PollEvent(&event)){
            if(event.type == SDL_QUIT) {
                done = true;
            }
        }
        glClear(GL_DEPTH_BUFFER_BIT | GL_COLOR_BUFFER_BIT);
        SDL_GL_SwapWindow(window);
    }
    SDL_DestroyWindow(window);
    SDL_Quit();
    return 0;
}

Were going to create a boolean done that will control our while loop, which will handle the updating of our window.

We will define a glViewport() which, similar to SDL_CreateWindow(), takes the x and y pixels of the top left of our window, and how big we want to window width and height.

With SDL_Event we are checking to see if any events have happened, such as the user quitting out of the application, or clicking the keyboard. After that, we want to call glClear(GL_DEPTH_BUFFER_BIT | GL_COLOR_BUFFER_BIT)

While this function call isnt exactly necessary for us now, it is responsible for clearing the depth and color information in between every call in the while loop, essentially resetting the frame for us to write the next one. Finally, we are swapping the secondary buffer that was being generated in place of the current buffer that is being rendered.

Go ahead and compile your code, keep in mind youll have to also compile the GLAD file and include the SDL2 and GLAD frameworks. This is the terminal command I used when compiling (I use MacOS):

clang++ -std=c++20 main.cpp ./glad/src/glad.c -o spinning_shapes -I/Library/Frameworks/SDL2.framework/Headers -I./glad/include -F/Library/Frameworks -framework SDL2

Go ahead and run your program, I named mine spinning_shapes and ran it with the command ./spinning_shapes

If you did everything right, an empty window is what youll see! How exciting.

In the next post, we will be integrating shaders into our program so that we are able to start drawing onto the screen, and we will create a square mesh to render.

Thanks for reading!