00:00:01.599
Now we're back. Welcome back everybody! Before we get started with our next talk, I've got another developer dilemma for you. The link is about to go into the YouTube chat, and the question is: should developers do design, or should designers do development? Feel free to jump in and cast your votes.
00:00:07.759
Raita, why don't you tell us what we've got next in store?
00:00:20.720
Well, our next speaker is Tatiana. Welcome Tatiana!
00:00:36.399
Let's see if we can get Tatiana in our studio. Hey Tatiana, welcome!
00:00:43.360
So, Tatiana is a Backend Engineer at GitLab, where she works on security analysis. In her spare time, she enjoys drawing or painting with any materials available.
00:00:55.360
In this talk, Tatiana will explore what we can create using Ruby and OpenGL. We'll learn about the basics of OpenGL and eventually how we can build our own game engine. So, Tatiana, the mic is yours.
00:01:11.200
Thanks! Today, I wanted to talk about graphic programming. As you know, my daytime job involves working on a security analysis feature, which is a completely different field.
00:01:18.159
We usually tend to think about Ruby as a back-end language that is used for server-client applications, but it can do much more. Personally, I love to draw and paint with any materials I have, and I was really interested in how I can do this using Ruby. I would like to share my findings with you today.
00:01:42.079
I'll share my screen so I can show you what I've got. Let's get started with a disclaimer: I’ll be discussing some super low-level concepts today. This is not a production way to create level animations or modern video games. We will be operating at the vertex level, meaning we will create points one by one to form our scene.
00:02:03.680
However, it's super fun to understand how it works under the hood. The code that I'm sharing now is a script to create a scene in Ruby.
00:02:17.840
Let's take a look. The first picture for today is just a black screen, but we can resize and close the window.
00:02:30.480
To make this work, we need two things: first, 'ruby-opengl', which is a binding for the OpenGL API, and second, 'GLFW', a simple controller for window handling and keyboard/mouse callbacks.
00:02:46.000
So, what exactly is the OpenGL API? It allows us to communicate with graphic processing units (GPUs). It helps us assemble arrays of vertices, shade and rasterize them, and then render them onto our screens. We’re talking about the core level of the OpenGL standard, which has changed over time.
00:04:32.960
In the future, this may be replaced with the Vulkan API, which is more modern and utilizes the advanced functionalities of today's GPUs. OpenGL operates at a very low level; it does not provide functions for creating complex shapes, which makes it more difficult to draw spheres, circles, or curves, since we need the coordinates of all those points.
00:05:05.199
Nonetheless, with plain OpenGL, we can quickly create nice scenes. Let's take a look at how such graphic programming looks. First, we create our window, and I’ll make it a bit bigger. When we set up this OpenGL window, we can define a callback from the keyboard to listen to all the events happening with the keyboard, mice, and gamepads.
00:06:14.000
In our case, we’re interested in detecting when the Escape key is pressed, allowing us to close the window. After setting up the window, we begin entering the main loop of our application, where everything is drawn. The loop processes continuously on every frame change.
00:07:12.240
OpenGL typically operates in two buffers. In the first buffer, we draw our scenes, and once finished, we swap to the second buffer which gets displayed on the screen.
00:08:02.639
During the rendering loop, we want to handle changes in the window size by adjusting the frame buffer, which holds the scene being rendered.
00:08:10.720
We set up the viewport to define the projection point through which we observe the scene, clear any previous drawings, and then draw something new.
00:08:27.440
To draw something, we begin by calling the 'glBegin' function with an argument that specifies what we want to draw, like lines or triangles. We'll use 'glEnd' to finish this process.
00:09:14.160
After defining the drawing type, we use 'glVertex3' to define our points. However, I’ll copy some code that I have prepared to speed up the process.
00:09:54.880
Now I’ll explain it: I want to color the axes using a predefined color library I created, which uses the 'glColor' function with RGB channel coordinates. We can then apply this color to the vertices we want.
00:10:34.000
I'm using a rotation function so we can see the scene from different angles, which allows us to have a dynamic view. Let's see how that works. You can see the viewport is rotating, showcasing our entire scene.
00:11:49.760
Next, I wanted to draw more complex shapes, like a pyramid. Though it's more challenging within OpenGL, it is necessary to create custom functions.
00:12:10.720
Creating a pyramid involves calculating four critical points. Once I figured out the geometric parameters, it turned out to be easier than I had anticipated.
00:12:51.200
The apex point and base coordinates can be determined fairly easily once you understand the side measurements of the pyramid.
00:13:26.080
Now, let's draw this pyramid using the coordinates and colors needed.
00:13:55.200
After rendering it, I realized I could enhance interactivity. Right now, there’s a simple animation, but allowing the user to control scene rotation would be more engaging.
00:14:52.800
To achieve this, we require callback handlers for keypress events, allowing the user to manipulate rotation while exploring the scene.
00:15:24.840
OpenGL applies geometric transformations which lets users navigate through the environment.
00:16:16.960
Next, we can add more objects to our scene, enabling the user to increase the complexity of what they see by pressing a designated key.
00:17:36.480
Once we press a designated key, we will add more objects, with random colors and shapes, allowing for diverse experiences.
00:18:58.000
Next, we could experiment with the number of objects drawn onto the scene to see how it affects performance.
00:20:40.000
This exploration may lead to different results based on how complex the scene has become.
00:21:09.760
Ultimately, I wanted to share that creating interactive applications with Ruby and OpenGL is an enriching experience that encourages creativity!
00:21:35.440
I hope you all enjoyed this presentation, and I'm looking forward to answering your questions!
00:22:54.720
Thank you Tatiana, that was wonderful!
00:23:03.000
I love these types of talks taking shape—what a great presentation!
00:23:16.640
Let's jump into some questions. So, Tatiana, one of the questions is: What made you want to try OpenGL?
00:23:26.480
Basically, I wanted to draw something, and there weren't many options available to do that easily. OpenGL is a cross-platform API used across various devices, and I wanted to understand the low-level details of graphic rendering.
00:24:14.560
Even though there are graphic engines and libraries, I found it exciting to dig into how OpenGL works under the hood. It makes it fun and interesting—it's more about math processing at that point!
00:25:05.120
Thank you! I'm curious to know if you have looked into WebGL as well.
00:25:21.760
I haven't tried WebGL with Ruby yet, but I have some experience using OpenGL for games and game engines. It made it easier for me to start coding with OpenGL, which uses similar techniques to WebGL.
00:26:48.360
Thank you, Tatiana! I'm ready to bring on the next guest for our panel.
