<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: yuv</title>
    <description>The latest articles on DEV Community by yuv (@yuvsouce).</description>
    <link>https://dev.to/yuvsouce</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1775600%2F50c96b60-4329-4694-95c0-304da8712d9c.jpg</url>
      <title>DEV Community: yuv</title>
      <link>https://dev.to/yuvsouce</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/yuvsouce"/>
    <language>en</language>
    <item>
      <title>Building an Efficient Game Engine with OpenGL: The Power of ECS</title>
      <dc:creator>yuv</dc:creator>
      <pubDate>Mon, 15 Jul 2024 00:42:00 +0000</pubDate>
      <link>https://dev.to/yuvsouce/building-an-efficient-game-engine-with-opengl-the-power-of-ecs-17fc</link>
      <guid>https://dev.to/yuvsouce/building-an-efficient-game-engine-with-opengl-the-power-of-ecs-17fc</guid>
      <description>&lt;p&gt;I've continued developing my engine and added:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;A physics engine&lt;/li&gt;
&lt;li&gt;An improved interface&lt;/li&gt;
&lt;li&gt;The ability to add objects to the scene dynamically&lt;/li&gt;
&lt;li&gt;The ability to change the transformation (position, size, and rotation) of objects in the scene dynamically&lt;/li&gt;
&lt;li&gt;An Entity Component System (ECS)&lt;/li&gt;
&lt;li&gt;Local lighting and multiple lights&lt;/li&gt;
&lt;li&gt;Shadows&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Each of these features is interesting and could have its own dedicated post. However, in this post, I'll primarily discuss ECS, which stands for Entity Component System.&lt;/p&gt;

&lt;h2&gt;
  
  
  ECS
&lt;/h2&gt;

&lt;p&gt;An ECS is a system for managing entities that allows you to create entities composed of individual components.&lt;/p&gt;

&lt;p&gt;In the simplest and most practical terms, let's assume we have a computer game. Instead of creating a class for a character in the game that represents the character, we do not create a class. Instead, we take each component that belongs to the character and add it to the entity. This way, the entity is composed of its smaller parts and is not definitively defined, allowing us to add or remove components as needed.&lt;/p&gt;

&lt;p&gt;The system allows users to create entities, destroy entities, save them, and get all entities with a specific attribute, such as all entities that can be drawn on the screen.&lt;/p&gt;

&lt;h2&gt;
  
  
  The problem this system aims to solve
&lt;/h2&gt;

&lt;p&gt;this system aims to solve multiple inheritance. Let's say we have a game with a character and a character class in the code that describes many details about it. Within the class, there are relevant fields such as the 3D model of the character, speed, weight, and any other parameter we want the class to contain.&lt;/p&gt;

&lt;p&gt;So far, everything is fine. Now, let's assume we want to create a character with a parameter that doesn't exist in the original class, and we want to keep the original character class (without changing it) and also add new attributes to the class. We would use inheritance and inherit the fields and functions from the original character class to the new character class, or we might even create a parent class from which every character with different parameters inherits.&lt;/p&gt;

&lt;p&gt;Theoretically, this solution is correct (it works), but it's not scalable. In a situation where we have two characters with different parameters, we would need to maintain two different classes. But what happens if we have 20 different characters? It's the same code in all those classes (which is why we used inheritance to avoid code repetition), but each has slightly different attributes. If we think of these attributes as components, it would be nicer if, instead of inheriting, we assembled an entity from all those components that differ between the classes.&lt;/p&gt;

&lt;p&gt;That's essentially what such a system does. It allows us to group components and treat them as an entity. Based on the different components that the entity has, we know how to interact with it (we don't have a class or an instance for the entity, we don't know what this entity is, but we know what components it contains and interact with it accordingly).&lt;/p&gt;

&lt;p&gt;Such a system implements the composition design pattern. I attached a video for those interested, showing concrete code examples of how switching to composition makes the code more readable, maintainable, and workable.&lt;/p&gt;

&lt;p&gt;&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/hxGOiiR9ZKg"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;h3&gt;
  
  
  What you can see in the video:
&lt;/h3&gt;

&lt;p&gt;At the beginning, you can see me moving the red cube using the widgets that appear next to it when it is selected. In this scene, you can also see the shadows moving with the cube. When I press play, the scene starts running, and the physics engine kicks in, causing objects to fall to the ground.&lt;/p&gt;

&lt;p&gt;Around the objects with physical properties, like the floor and the cubes, green lines appear when play is pressed. These are for debugging purposes.&lt;/p&gt;

&lt;p&gt;Later, you can see me playing with local lighting, changing its colors and position. A few frames later, you can see what happens when a bunch of cubes are dropped and how their interaction looks, with some falling off the platform.&lt;/p&gt;

&lt;p&gt;&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/ULBIqWQrD1c"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;you can follow me for more at&lt;br&gt;
&lt;/p&gt;
&lt;div class="crayons-card c-embed text-styles text-styles--secondary"&gt;
    &lt;a href="https://x.com/yuvSouce" rel="noopener noreferrer"&gt;
      x.com
    &lt;/a&gt;
&lt;/div&gt;


</description>
      <category>cpp</category>
      <category>gamedev</category>
      <category>graphics</category>
      <category>designpatterns</category>
    </item>
    <item>
      <title>Real-Time 3D: My Journey in Building a C++ OpenGL Rendering Engine</title>
      <dc:creator>yuv</dc:creator>
      <pubDate>Sat, 13 Jul 2024 20:02:33 +0000</pubDate>
      <link>https://dev.to/yuvsouce/real-time-3d-my-journey-in-building-a-c-opengl-rendering-engine-2bj4</link>
      <guid>https://dev.to/yuvsouce/real-time-3d-my-journey-in-building-a-c-opengl-rendering-engine-2bj4</guid>
      <description>&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6iwc3ikzrkfvvt09bu1u.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6iwc3ikzrkfvvt09bu1u.png" alt="Showcase of Real-Time Rendering Capabilities: Dynamic Lighting in Engine" width="800" height="603"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  What is a Rendering Engine?
&lt;/h2&gt;

&lt;p&gt;A rendering engine abstracts the process of drawing objects on the screen. It uses the GPU to convert logic (e.g., a 3D model) into a 2D image displayed on a screen.&lt;/p&gt;

&lt;h3&gt;
  
  
  Motivation:
&lt;/h3&gt;

&lt;p&gt;I've always loved graphics, especially in video games. As a child, I was fascinated by how future graphics would look and how realistic they could become. Besides my personal love for graphics, it's a challenging field. The development of graphics involves interesting mathematical challenges (linear algebra) and requires efficient, optimized coding, often in fast "low-level" languages like C++.&lt;/p&gt;

&lt;h2&gt;
  
  
  Game Development:
&lt;/h2&gt;

&lt;p&gt;Beyond the engine and its basic supported capabilities, I developed a scene/game - a kind of maze in a 3D world with impassable objects. I implemented the A* algorithm to find the shortest path between two points. The algorithm is an extension of Dijkstra's algorithm and is widely used in video games, such as finding a path between a player character and a target.&lt;/p&gt;

&lt;h4&gt;
  
  
  Challenges:
&lt;/h4&gt;

&lt;p&gt;Implementing the algorithm was slightly challenging despite its simplicity. The algorithm searches a graph, but I didn't have nodes; I had a 3D world with infinite points. Therefore, I had to convert the world into nodes by defining squares on a map, with each point belonging to a specific square.&lt;/p&gt;

&lt;h4&gt;
  
  
  Optimization:
&lt;/h4&gt;

&lt;p&gt;Deciding the size of the squares was critical. If a blocking object partially occupies a square, should the whole square be considered blocked? Reducing the size of each square increases accuracy but slows down the algorithm. For example, with a 64x64 grid (4,096 squares), reducing the square size by half increases the grid to 128x128 (16,000 squares), significantly impacting algorithm speed and data structure choice.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzvu0boh76ibsofobqed8.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzvu0boh76ibsofobqed8.jpg" alt="an image from my engine" width="800" height="616"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  Debugging Tools:
&lt;/h4&gt;

&lt;p&gt;OpenGL is a state machine, making it hard to debug or understand its current state. While it provides basic output for incorrect input, understanding why things don't appear on the screen as expected is challenging. Hence, I decided to develop visual debugging tools to display each square on the map, mark objects and their occupied squares, and visualize algorithm paths. This decision saved time by providing visual confirmation of what was happening on the screen.&lt;/p&gt;

&lt;h2&gt;
  
  
  Video Demonstration:
&lt;/h2&gt;

&lt;p&gt;The attached video demonstrates dynamic lighting, various backgrounds and textures, model loading, and a scene with a sofa, computer, and other elements. Towards the end, a penguin aims to reach a bench along the shortest path. The A* algorithm is visually represented, with red nodes indicating closed nodes and green nodes representing the shortest path. The algorithm operates instantly, but the animation is intentionally slowed down for clarity.&lt;/p&gt;

&lt;p&gt;Note: I later updated the interface, so the video is from before the change. Therefore, the images of the engine are different.&lt;/p&gt;

&lt;p&gt;&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/4DB4dDj0CCI"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;I will be publishing more of my journey, so you are welcome to follow me at &lt;a href="https://x.com/yuvSouce" rel="noopener noreferrer"&gt;https://x.com/yuvSouce&lt;/a&gt;.&lt;/p&gt;

</description>
      <category>gamedev</category>
      <category>cpp</category>
      <category>programming</category>
      <category>devjournal</category>
    </item>
  </channel>
</rss>
