<?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: vinish kumar</title>
    <description>The latest articles on DEV Community by vinish kumar (@vinishkumar_).</description>
    <link>https://dev.to/vinishkumar_</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%2F2757379%2Fe993ea62-9ffe-4132-8c2c-2b3cc3464747.jpg</url>
      <title>DEV Community: vinish kumar</title>
      <link>https://dev.to/vinishkumar_</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/vinishkumar_"/>
    <language>en</language>
    <item>
      <title>Understanding OpenGL Rendering Pipeline Stages</title>
      <dc:creator>vinish kumar</dc:creator>
      <pubDate>Sun, 26 Jan 2025 02:17:00 +0000</pubDate>
      <link>https://dev.to/vinishkumar_/understanding-opengl-rendering-pipeline-stages-5ajo</link>
      <guid>https://dev.to/vinishkumar_/understanding-opengl-rendering-pipeline-stages-5ajo</guid>
      <description>&lt;p&gt;As we discussed before about How GPU works and the processes involved when playing a game, what are the process goes through to render. In this article lets dive into OpenGL Rendering pipeline stages that goes through to rendering an object in a 3D/2D space.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5uzcwd6auos53mmmz4hp.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5uzcwd6auos53mmmz4hp.jpg" alt="Image description" width="275" height="142"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;First let's understand what is OpenGL?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;OpenGL is a cross-platform API that allows developers to create 2D and 3D graphic applications. It's used to interact with a graphics processing unit (GPU) to achieve hardware-accelerated rendering. And what it basically is that it's a bunch of functions that developers can call to handle graphics rendering. Specifically, OpenGL enables us to access the GPU and instruct it to perform rendering tasks.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What OpenGL Is (and isn't):&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Let's clear up some common misconceptions about OpenGL. A lot of people refer to OpenGL as a library, an engine, or a framework - but it's none of those things. At its core, OpenGL is a specification, similar to how the C++ language is defined. It does not include any code or implementation itself but outlines functions, parameters, and expected outputs.&lt;br&gt;
For instance, the specification defines that a function should exist, accept certain parameters, and return specific values. The actual implementation of OpenGL comes from GPU manufacturers, such as NVIDIA, AMD, or Intel. If you're wondering where to download OpenGL, it's included in your GPU drivers provided by the manufacturer. Each vendor creates its own implementation of OpenGL based on the specification.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Why Use OpenGL?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;OpenGL has been a popular choice for rendering graphics due to its cross-platform support and extensive functionality. While newer APIs like Vulkan and DirectX exist, OpenGL remains relevant for many applications, especially those that prioritize simplicity and widespread support.&lt;/p&gt;

&lt;p&gt;The Stages:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8xgiu066qjd4mgnwhuz7.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8xgiu066qjd4mgnwhuz7.png" alt="Image description" width="271" height="602"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Vertex Specification&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The vertex specification stage is the first step in the OpenGL rendering pipeline, where vertex data is defined and sent to the GPU for processing. This stage is crucial because it lays the foundation for all subsequent steps in the rendering pipeline. It involves preparing and organizing the data that represents the geometric structure of the objects you want to render.&lt;br&gt;
Technically, each vertex retrieved from the vertex arrays (defined as VAO, VBO, and IBO) is acted upon by a vertex shader. The vertex data is stored in arrays, often structured as matrices, and contains all the necessary information for rendering. Each vertex may include:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;· Position&lt;br&gt;
· Color&lt;br&gt;
· Normal&lt;br&gt;
· Texture Coordinates&lt;br&gt;
· Custom Attributes&lt;/p&gt;

&lt;p&gt;Note: Attributes are small data sets that describe an object to be rendered.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F994vbxvv648r6982wcie.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F994vbxvv648r6982wcie.png" alt="Image description" width="800" height="271"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Buffers and Their Roles:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Vertex Buffer Objects (VBOs):&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;VBOs store vertex data in GPU memory, allowing efficient data transfer and access during rendering. They ensure that the data is readily available for the GPU.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Vertex Array Objects (VAOs):&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;VAOs act as containers that store the state of vertex attribute configurations. In simple terms, they act as a container for VBOs (attributes). This organization simplifies switching between different sets of vertex data without reconfiguring attributes.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Element Buffer Objects (EBOs) / Index Buffer Objects (IBOs):&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;EBOs or IBOs store indices for indexed drawing. They allow the reuse of vertex data for multiple primitives, reducing memory usage and improving performance. For example, when defining a 3D triangle with multiple sides, instead of redefining vertices for each side, IBOs can reference existing vertex data efficiently.&lt;/p&gt;

&lt;p&gt;Practical Example:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fukytd7m96sipzob3be9v.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fukytd7m96sipzob3be9v.png" alt="Image description" width="800" height="339"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fma93h6i6kef2gtzgvi1q.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fma93h6i6kef2gtzgvi1q.png" alt="Image description" width="800" height="238"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Vertex Processing:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Vertex processing is the stage of the graphics pipeline where individual vertices of a 3D/2D model are transformed and prepared for rendering. As explained in vertex specification, each vertex retrieved from the vertex arrays (VAOs) is processed by a vertex shader. Vertex processing includes multiple stages, some fixed functions and other programmable, depending on the graphics API, (e.g. OpenGL, DirectX, Vulkan). In OpenGL there are &lt;strong&gt;vertex shader, tessellation, &amp;amp; geometry shader&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Vertex Shader:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The vertex shader performs basic processing of each individual vertex. It's a programmable stage in the graphics rendering pipeline. Vertex shaders receive attribute inputs from vertex specification and process each incoming vertex to produce a single outgoing vertex.&lt;br&gt;
In simple terms, the vertex shader's primary role is:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Transformation:&lt;/strong&gt; Transforming a vertex's position from the object's local space to clip space.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Attribute Handling:&lt;/strong&gt; Passing vertex-specific attributes (e.g., color, texture coordinates, normals) to subsequent pipeline stages.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Example:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftiigbeqxqqbmmvq67k4a.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftiigbeqxqqbmmvq67k4a.png" alt="Image description" width="700" height="293"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Vertex shaders can have user-defined outputs, but they must also output a special value representing the final position of the vertex. This clip-space position is crucial for rendering and is mandatory, as vertex shaders are not optional in the pipeline.&lt;/p&gt;

&lt;p&gt;Key Features of Vertex Shaders:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;** Programmability:**&lt;br&gt;
Developers can write custom vertex shaders to implement specific transformations or effects.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Parallel Processing:&lt;/strong&gt;&lt;br&gt;
Each vertex is processed independently, making vertex shaders highly parallelizable on modern GPUs.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Flexible Outputs:&lt;/strong&gt;&lt;br&gt;
Apart from clip-space positions, vertex shaders can output other interpolated data, such as texture coordinates or lighting calculations, for use in later stages.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;strong&gt;Tessellation:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Tessellation is a process in the graphics pipeline that subdivides polygons into smaller, finer primitives, such as triangles. This allows for the creation of smoother surfaces, detailed geometry, or adaptive level-of-detail rendering without requiring high-detail models directly from artists.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fcty2vrwm53gz7mffves2.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fcty2vrwm53gz7mffves2.gif" alt="Image description" width="500" height="327"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fsplxzdca4yfy2zw8iz2w.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fsplxzdca4yfy2zw8iz2w.png" alt="Image description" width="692" height="552"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Tessellation in OpenGL consists of two programmable shader stages and a fixed-function tessellator:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Tessellation Control Shader (TCS):&lt;/strong&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;· Determines the amount of tessellation to apply to a primitive.&lt;br&gt;
· Ensures connectivity between adjacent tessellated primitives.&lt;br&gt;
· Dynamically adjusts the level of detail based on factors like distance from the camera or application-specific criteria.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;strong&gt;Tessellation Evaluation Shader (TES):&lt;/strong&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;· Computes the final positions and attributes of the subdivided primitives.&lt;br&gt;
· Applies interpolation and other user-defined operations to generate smooth and detailed geometry.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Applications of Tessellation:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Terrain Rendering:&lt;/strong&gt;&lt;br&gt;
· Generate highly detailed terrains from a coarse height map&lt;br&gt;
&lt;strong&gt;Character Models:&lt;/strong&gt;&lt;br&gt;
· Adding fine details to character models, like wrinkles or muscle definition&lt;br&gt;
** Adaptive Detail:**&lt;br&gt;
· Automatically adjusting the level of detail based on camera proximity to optimize performance&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;strong&gt;Geometry Shader:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The geometry shader is a programmable and optional stage in the graphics pipeline that processes entire primitives (points, lines, or triangles) as input. Unlike vertex shaders, which operate on individual vertices, the geometry shader works on entire primitives and can:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Generate New Primitives:&lt;/strong&gt;&lt;br&gt;
· For example, creating additional triangles for tessellation or adding detail.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Modify Existing Primitives:&lt;/strong&gt;&lt;br&gt;
· Changing the shape or attributes of input primitives.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Discard Primitives Entirely:&lt;/strong&gt;&lt;br&gt;
· Eliminating unnecessary primitives to optimize rendering.&lt;/p&gt;

&lt;p&gt;The input primitives for geometry shaders are the output primitives from a subset of the Primitive Assembly process. So, if you send a triangle strip as a single primitive, what the geometry shaders will see is a series of triangles.&lt;/p&gt;

&lt;p&gt;However, there are a number of input primitive types that are defined specifically for geometry shaders. These adjacency primitives give geometry shaders a larger view of the primitives, they provide access to vertices of primitives adjacent to the current one.&lt;/p&gt;

&lt;p&gt;The output of a geometry shader is zero or more simple primitives, much like the output of the primitive assembly. The geometry shader is able to remove primitives, or tessellate them by outputting many primitives for a single input. The geometry shader can also tinker with the vertex values themselves, either doing some of the work for the vertex shader, or just to interpolate the value when tessellating them. Geometry shaders can even convert primitives to different types: input point primitives can become triangles, or line can become points.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Vertex post-processing:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The vertex post-processing step is primarily responsible for preparing the processed vertex data for the rasterization process. The key operations in vertex post-processing are:&lt;/p&gt;

&lt;p&gt;Perspective Division:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;· After the vertex shader processes a vertex, it outputs the position in clip space, represented in homogeneous coordinates (x, y, z, w).&lt;br&gt;
· To transform clip space coordinates into normalized device coordinates (NDC), the GPU performs perspective division&lt;br&gt;
· This ensures that vertices closer to the camera appear larger, creating the effect of perspective.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;strong&gt;Viewport Transformation:&lt;/strong&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;· NDC ranges from [-1, 1] along all axes. These coordinates need to be mapped to window space or screen space (pixel coordinates) based on the viewport settings.&lt;br&gt;
· This transformation involves scaling and translating the coordinates to fit the current viewport.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;strong&gt;Clipping:&lt;/strong&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;· Clipping removes vertices or primitives that fall outside the view frustum (the visible region of the 3D scene defined by the camera's perspective or orthographic projection).&lt;/p&gt;

&lt;p&gt;· Clipping ensures that only the visible portions of the geometry are processed further. If a primitive partially intersects the view frustum, the GPU may generate new vertices at the intersection points (clipping the primitives).&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;strong&gt;Face Culling:&lt;/strong&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;· Triangle primitives can be culled (i.e., discarded without rendering) based on the triangle's orientation in window space. Back-face culling is an optional operation that removes faces of geometry not visible to the camera (e.g., the back sides of triangles).&lt;br&gt;
· This helps improve performance by not rendering unnecessary geometry.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;strong&gt;Depth Range Mapping:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Depth range mapping in OpenGL is a crucial concept that deals with how depth values are mapped from normalized device coordinates (NDC) to the depth buffer. It ensures proper depth testing and determines visibility within a 3D scene.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;· In NDC, after vertex processing and perspective division, the depth values range between -1 (near clip plane) and 1 (far clip plane).&lt;br&gt;
· OpenGL requires depth values to be clamped between 0 and 1 for storage in the depth buffer.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;strong&gt;Primitive Assembly:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Primitive assembly is a critical stage in the graphics pipeline that occurs just before rasterization. During this stage, the GPU takes the processed vertices and assembles them into primitives, such as points, lines, or triangles, based on the rendering mode specified in the drawing command.&lt;/p&gt;

&lt;p&gt;Why Primitive Assembly is Important:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Defines Shape Connectivity:&lt;/strong&gt;&lt;br&gt;
· Determines how vertices are grouped into meaningful shapes.&lt;br&gt;
** Handles Optimizations:**&lt;br&gt;
· Reuses vertices with indexed drawing, reducing redundant calculations.&lt;br&gt;
· Eliminates unnecessary primitives through clipping and culling.&lt;br&gt;
&lt;strong&gt;Prepares for Rasterization:&lt;/strong&gt;&lt;br&gt;
· Outputs fully assembled and valid primitives, ready for fragment generation.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Primitive assembly ensures the integrity and connectivity of geometry before it moves to the rasterization stage, where it's converted into fragments for pixel shading.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Rasterization:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Rasterization is responsible for converting geometric primitives into fragments that can be processed further to produce the final image on the screen. A fragment is a set of state that is used to compute the final data for a pixel in the output framebuffer. The state for a fragment includes its position in screen-space, the sample coverage if multisampling is enabled, and a list of arbitrary data that was output from the previous vertex or geometry shader.&lt;/p&gt;

&lt;p&gt;In basic, it bridges the gap between the vector-based representation of objects in 3D space and the grid of pixels in 2D screen space.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Fragment Shader:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The fragment shader is a programmable stage in the rendering pipeline and the Fragments are the data elements produced during the rasterization stage when primitives are converted into pixel-sized chunks.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fv618bacqhn7xe0u3zsaa.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fv618bacqhn7xe0u3zsaa.png" alt="Image description" width="451" height="217"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyqpemcvac0t2p50dmdg5.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyqpemcvac0t2p50dmdg5.png" alt="Image description" width="800" height="340"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Each fragment corresponds to a pixel on the screen but includes additional data such as:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;· Interpolated attributes (e.g. colors, texture coordinates, normals) from the vertices of the primitives.&lt;br&gt;
· Depth (z-coordinates in window space).&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Fragment Shaders are not able to set the stencil data for fragment, but they do have control over the color and depth values.&lt;/p&gt;

&lt;p&gt;This shader is an optional. If you render without a fragment shader, the depth values of the fragment get their usual values. But the values of all the colors that a fragment could have been undefined. Rendering without a fragment shader is useful when rendering only a primitive's default depth information to the depth buffer.&lt;/p&gt;




&lt;p&gt;&lt;strong&gt;Per-Sample Operations:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Per-sample operations are the final set of stages in the graphics pipeline that occur after the fragment shader has executed and before the rendered results are written to the framebuffer. These operations are essential for refining the final appearance of the image and ensuring it adheres to rendering requirements like depth, stencil, blending and anti-aliasing.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What are Samples:&lt;/strong&gt;&lt;br&gt;
A sample represents a point within a pixel that is used to calculate the final color of that pixel.&lt;/p&gt;

&lt;p&gt;For multi-sampling anti-aliasing (MSAA), each pixel can have multiple samples to capture more detail about overlapping primitives. Each sample may have its own depth, stencil, and color data.&lt;/p&gt;

&lt;p&gt;Steps in Per-Sample Operations:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Pixel Ownership Test:&lt;/strong&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;· Determines whether a pixel belongs to the current window or render target.&lt;br&gt;
· If the pixels fail this test (e.g. due to being outside the window or overlapping an obscured area), it is discarded. Always passes when using a Framebuffer Object. Failure means that the pixel contains undefined values.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;strong&gt;Scissor Test:&lt;/strong&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;· When enabled, the test fails if the fragment's pixel lies outside of a specified rectangle of the screen (the scissor box).&lt;br&gt;
· Only fragments inside the scissor box are processed further.&lt;br&gt;
Stencil Test:&lt;br&gt;
· When enabled, Compares the fragments stencil value with a reference value using a stencil function.&lt;br&gt;
· Depending on the result, the fragment can be discarded, or the stencil buffer can be updated.&lt;br&gt;
· Useful for making areas of the screen or implementing effects like outlining or decals.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;strong&gt;Depth Test (Z-Test):&lt;/strong&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;· When enabled, compares the fragment's depth value (output by the fragment shader on modified during rasterization) with the existing value in the depth buffer.&lt;br&gt;
· If the test fails, the fragment is discarded.&lt;br&gt;
· Ensures correct occlusion and depth-based ordering of primitives.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;After this color blending happens. For each fragment color value, there is a specific blending operation between it and the color already in the framebuffer at that location.&lt;br&gt;
Logical Operations may also take place in lieu of blending, which perform bitwise operations between the fragment colors and framebuffer colors.&lt;/p&gt;




&lt;p&gt;This article provides an overview of the OpenGL Rendering Pipeline. It emphasizes the importance of each stage, the flexibility of OpenGL as a specification, and its relevance in graphics programming.&lt;/p&gt;




&lt;p&gt;For more detailed look at the code, I've created GitHub repository where you can access and explore the entire basic project. You can find the repository here: &lt;a href="https://github.com/vinishkumar101/Understanding-OpenGL-Rendering-Pipeline-Stages.git" rel="noopener noreferrer"&gt;Github&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;You can further explore on OpenGL here: &lt;a href="https://www.khronos.org/opengl/wiki/Rendering_Pipeline_Overview" rel="noopener noreferrer"&gt;OpenGL&lt;/a&gt;&lt;/p&gt;




&lt;p&gt;Finally, I thank whoever reading, for spending your valuable time on my article.&lt;/p&gt;

</description>
      <category>beginners</category>
      <category>gamedev</category>
      <category>opengl</category>
    </item>
    <item>
      <title>Understanding and Exploring GPUs: Architecture, Stages to Render a Game, and Rendering Pipeline Stages.</title>
      <dc:creator>vinish kumar</dc:creator>
      <pubDate>Fri, 24 Jan 2025 16:33:00 +0000</pubDate>
      <link>https://dev.to/vinishkumar_/understanding-and-exploring-gpus-architecture-stages-to-render-a-game-and-rendering-pipeline-4i2a</link>
      <guid>https://dev.to/vinishkumar_/understanding-and-exploring-gpus-architecture-stages-to-render-a-game-and-rendering-pipeline-4i2a</guid>
      <description>&lt;p&gt;In this article, we’ll cover the architecture of an GPU and how it works, the stages that works parallelly to render a game, and we’ll be seeing, the stages in the Rendering Pipeline, and difference between Integrated and Dedicated Graphics cards.&lt;/p&gt;

&lt;p&gt;Table of Contents:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;GPU Chip Architecture Overview&lt;br&gt;
Overview on how GPU Chip performs&lt;br&gt;
Stages of Rendering a Game&lt;br&gt;
GPU vs CPU Comparison&lt;br&gt;
Rendering Pipeline Stages (OpenGL)&lt;br&gt;
Integrated Vs Dedicated Graphics card&lt;/p&gt;
&lt;/blockquote&gt;




&lt;p&gt;Let’s see how Graphics Cards works (GPU chip):&lt;/p&gt;

&lt;p&gt;Let’s explore the computational architecture and see how the GPU process mountains of data, and why they are ideal for running video game graphics, Bitcoin mining, neural network and AI.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;GPU-GA102 Architecture (RTX-3090TI):&lt;/strong&gt;&lt;br&gt;
Center of the graphics card contains the Printed Circuit Board or PCB, with all the various components mounted on it.&lt;/p&gt;

&lt;p&gt;When we open GPU, we find large chip or die named GA102 built from 28.3 billion transistors, the majority of the area of the chip is taken up by the Processing cores which have a hierarchical organization.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fetuiqp2ldolfwvdtzvpt.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fetuiqp2ldolfwvdtzvpt.png" alt="Image description" width="800" height="965"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This chip is divided into 7 Graphic processing clusters or GPC’s and within each processing clusters are 12 Streaming multiprocessors or SM’s&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fi3tzpx3shtd8gmao6emd.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fi3tzpx3shtd8gmao6emd.png" alt="Image description" width="800" height="637"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;And next, inside each of these Streaming Multiprocessors (SM’s) has 4 Wraps and 1 Ray tracing core&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhkdtt93i5w64mlw1b5ht.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhkdtt93i5w64mlw1b5ht.png" alt="Image description" width="800" height="512"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;And then inside each warp contains 32 CUDA cores or Shading cores and 1 Tensor core.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ft5tbxo4zdyv62m3z9drb.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ft5tbxo4zdyv62m3z9drb.png" alt="Image description" width="800" height="424"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;So, across the entire GPU there are 10,752 CUDA cores, 336 Tensor cores, 84 Ray tracing cores.&lt;/p&gt;

&lt;p&gt;These three types of cores execute all the calculations of the GPU and each has a different function.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;CUDA Cores:&lt;/strong&gt;&lt;br&gt;
These CUDA core can be thought of a simple binary calculator with an addition button, a multiply button and a few others and are used the most when running a video game.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Tensor Cores:&lt;/strong&gt;&lt;br&gt;
These are the Matrix multiplication and addition calculators and are used for geometric transformation and working with neural and AI.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Ray-tracing Cores:&lt;/strong&gt;&lt;br&gt;
These are the largest but the fewest and are used to execute ray tracing algorithms.&lt;/p&gt;

&lt;p&gt;A fact is that the 3080, 3090, 3080ti, and 3090ti graphic cards all use the same GA102 chip design.&lt;/p&gt;

&lt;p&gt;They have different prices and releases on different time, why this?&lt;/p&gt;

&lt;p&gt;During the manufacturing process sometimes patterning errors, dust particles or other manufacturing error cause damage in the circuit. The engineer finds the defective region that is damaged in the chip and permanently isolate and deactivate the nearby circuitry.&lt;/p&gt;

&lt;p&gt;These chips are tested and categorized according to the number of defects, the 3090ti Graphic card has flawless GA102 chip with having 0 defective streaming processor, with all 10752 CUDA cores working properly.&lt;/p&gt;

&lt;p&gt;The NVIDIA RTX series GPUs do not all use the same chips. NVIDIA uses different chips across the lineups to cater to different performance levels. Here’s a breakdown of the primary chips:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Example on 40 series:&lt;/p&gt;

&lt;p&gt;-AD107: Used in entry-level models like the RTX 4050 and some versions of the RTX 4060. This chip is designed for low-power and efficiency-oriented performance.&lt;/p&gt;

&lt;p&gt;-AD106: Typically found in mid-range models like the RTX 4060Ti and some configurations of the RTX 4060, providing a step up in power.&lt;/p&gt;

&lt;p&gt;-AD104: Found in upper mid-range models like the RTX 4070 and RTX 4070Ti, designed to offer a balance between performance and efficiency.&lt;/p&gt;

&lt;p&gt;-AD103: Used in higher-end models like the RTX 4080, offering substantial improvements in power and features.&lt;/p&gt;

&lt;p&gt;-AD102: NVIDIA’s top-end chip in the RTX 40 series, powering the flagship RTX 4090, which is designed for the highest performance tier in gaming and productivity.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;The other sections of the GPU chip around the edges we find 12 Graphic memory controllers, the NVLink controllers and the PCIe interface.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;NVLink:&lt;/strong&gt; Is a high-speed communications protocol that allow graphics cards to connect directly to each other, enabling faster data transfer and improved system performance.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;PCIe interface:&lt;/strong&gt; Is a standardized interface that enables high speed data transfer between electronic components, such as computers motherboard and expansion cards.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Note: All the example is provided on GA102 chip that used in RTX 30 series, the performance of the chip will be changing as per the chip used and also the architecture will also be changing.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;All those calculations that are done in the background while playing a video game, in that most of the essential calculations in a game focus on the Rendering pipeline stages, where they are processed to visually represent the game’s world to the audience.&lt;/p&gt;

&lt;p&gt;This pipeline systematically transforms 3D models, Textures, Lighting and effects through sequential stages, ultimately creating the dynamic, immersive visuals.&lt;/p&gt;




&lt;p&gt;While we are playing a game in our computer, in the background the graphics card performs numerous complex calculations to render everything in the game visuals in real time.&lt;/p&gt;

&lt;p&gt;The Stages it goes through to render a game:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Vertex Processing:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Vertex processing is the first stage in the Rendering pipeline of computer graphics, where vertices are processed by a series of shaders. Lets say a 3D model consists of vertices (points in 3D space). Each vertex has attributes like position, color, and texture coordinates. So the GPU processes these vertices using Vertex Shaders, transforming their positions in 3D space to a 2D space (screen space) via matrix operations (like model, view, and projection matrices). This also includes lighting calculations like Phong Shading.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8uqdn6i7rqlhr122iilu.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8uqdn6i7rqlhr122iilu.png" alt="Image description" width="600" height="338"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;(Phong Shading refers to an alternative lighting model used in computer graphics, which combine gradient shading and edge outlining to create visually stunning results. It describes the way a surface reflects light as a combination of the diffuse reflection of rough surface with the specular reflection of shiny surface).&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fftkg3wo99ryrptkv6fuh.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fftkg3wo99ryrptkv6fuh.png" alt="Image description" width="786" height="442"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;What exactly are Shaders?&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;-Shaders are small programs that tells your graphics card how to draw a thing or model on your screen.&lt;/p&gt;

&lt;p&gt;-Think of it as an artist for each pixel or part of a 3D model, it decides things like color, light, shadow and texture.&lt;/p&gt;

&lt;p&gt;-This article covers only the basic concepts of shaders. Advanced topics will be explored in upcoming articles.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;For example, a Shader can make a ball look shiny , rough, or transparent by controlling how light interacts with it, shaders work behind the scene in games and animations to make objects look more realistic or give them cool effects like going or blurring.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fv8lly7uyxa6y9s1ygzlk.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fv8lly7uyxa6y9s1ygzlk.jpg" alt="Image description" width="800" height="293"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;And there are Vertex shader, Geometry shader, Fragment shader these are different types of shaders that work together in stages to help build and color what you see on the screen.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Rasterization:&lt;/strong&gt;&lt;br&gt;
In a simple way to explain what is Rasterization is that the process of converting a vector-based image or object into a raster or bitmap format.&lt;/p&gt;

&lt;p&gt;Transformed vertices(Let’s say that the vertices that have been moved to their final position in clip space i.e. Camera space, so that the object can be rendered on the screen). Now the GPU converts the 3D primitives(like triangles formed by vertices) into 2D pixels (or Fragments) on the screen. This process determines which pixels on the screen correspond to which part of the triangle.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fe6fo8ym124d77chvmpc9.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fe6fo8ym124d77chvmpc9.png" alt="Image description" width="513" height="363"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4uw02irfqzj5wz7uqlc7.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4uw02irfqzj5wz7uqlc7.png" alt="Image description" width="400" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;For example, in simple terms let’s say that we have created an 3D triangle in the view space (screen space) so that it is visible to see. The process of taking and figuring out which pixels it covers is called Rasterization.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Fragment (Pixel) Shading:&lt;/strong&gt;&lt;br&gt;
Pixels from Rasterization, where the vector data is converted into a raster image (made up of pixels). The GPU calculates the color of each pixels using Fragment Shaders. These shaders take into account textures, lighting, shadows, reflections, and other effects.&lt;/p&gt;

&lt;p&gt;Operations like texture sampling (getting color from a texture) and applying lighting models are performed here.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F47w3ymy4fi74tc3sc7ze.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F47w3ymy4fi74tc3sc7ze.png" alt="Image description" width="800" height="155"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Texture Mapping:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Texture data (image that wrap around 3D objects). The GPU retrieves texture coordinates for each pixel and uses them to fetch the corresponding color from the texture map. It applies filtering (like Bilinear or Trilinear filtering) to smooth out the textures at different distances.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F55a99w1moud0ppp2qll8.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F55a99w1moud0ppp2qll8.jpg" alt="Image description" width="800" height="386"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Bilinear filtering: is a process that smooths out a texture by calculating the average color of the four closest texels (i.e. pixels on the texture) to a given pixel on the screen, and also reduces the blockiness.&lt;/p&gt;

&lt;p&gt;Trilinear filtering: is a process that takes this step further by also averaging the color values from the two closest mipmap levels (different resolutions of the same textures), resulting in a smoother transition between different texture scales, especially when viewing an object at different distance.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Lighting and Shading:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Scene lighting information and material properties are the important factors in how light interacts with a scene, and how that light is perceived.&lt;/p&gt;

&lt;p&gt;The GPU performs lighting calculations, such as determining how light interacts with surfaces (diffuse, specular, ambient lighting). This may include advanced effects like Dump mapping (for roughness), Normal mapping (to simulate surface detail), and Global illumination (for realistic light behavior).&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Lighting:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Lighting refers to the simulation of light source and how they illuminate objects in a scene. It plays an important role in creating depth, mood, and realism. The GPU performs lighting calculations, such as determining how light interacts with everything in a space.&lt;/p&gt;

&lt;p&gt;There are different types of lights are these:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;-Ambient light (Simulates indirect light that fills the environment uniformly),&lt;/p&gt;

&lt;p&gt;-Directional light (Represents a distant light source like the sun),&lt;/p&gt;

&lt;p&gt;-Point light (Emits light in all direction from a single point like a bulb),&lt;/p&gt;

&lt;p&gt;-Spot light (Emits light in a cone shape, often used for focused illumination),&lt;/p&gt;

&lt;p&gt;-Area light (Emits light from a surface area, producing softer shadows).&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fafdt3rdx6qs1yitndu51.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fafdt3rdx6qs1yitndu51.png" alt="Image description" width="750" height="454"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;And also, there are different type of lighting Models we can use:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;-Phong Lighting Model: Includes ambient, diffuse and specular components.&lt;/p&gt;

&lt;p&gt;-Blinn-Phong Model: An optimized version of Phong with better specular highlights.&lt;/p&gt;

&lt;p&gt;-PBR (Physically Based Rendering): Simulates real-world lighting behavior for greater realism.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;strong&gt;Shading:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Shading is the process of determining the surface color and appearance of an object based on lighting material properties and viewer position.&lt;/p&gt;

&lt;p&gt;As same lighting there are different types of shading techniques are there:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Flat Shading, Gouraud Shading, Phong Shading, Physically Based Shading.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;These Shading techniques determine how the interaction between light and surface is computed and visualized. These techniques work with along with the different types of light to produce the final appearance of a surface in a scene.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Z-Buffering (Depth Testing):&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;A Z-Buffer is a type of data buffer used in computer graphics to represent depth information of objects in 3D space from a particular perspective. The depth is stored as a height map of the scene, where each value represents the distance from the camera, with 0 being the closest.&lt;/p&gt;

&lt;p&gt;The GPU uses the Z-Buffer to ensure that closer objects are rendered in front of farther ones. It compares the depth of each new pixels with the value already stored in the Z-buffer and determines whether to overwrite the pixel.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fe4ilaobtl3gqqh1h0085.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fe4ilaobtl3gqqh1h0085.png" alt="Image description" width="660" height="209"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Anti-Aliasing:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Anti-Aliasing is used to remove the aliasing effect. The aliasing effect refers to the appearance of jagged edges or “jaggies” after the rasterization process.&lt;/p&gt;

&lt;p&gt;The GPU smooths out the jagged edges (aliasing) of objects using Anti-Aliasing techniques like MSAA (Multi-Sample Anti-Aliasing). This involves sampling multiple points in each pixel and averaging the results to produce a smoother image.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2k4fo3ya34y3rvac882o.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2k4fo3ya34y3rvac882o.jpg" alt="Image description" width="800" height="400"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Blending and Transparency:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Multiple layers or transparent objects, the GPU blends different objects or pixels together. For transparent objects, it calculates how much of the background should show through by combining the colors of overlapping pixels.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3a07cgg2b6b5h57h6dr9.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3a07cgg2b6b5h57h6dr9.png" alt="Image description" width="600" height="314"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;In simple terms it combines pixel colors from different objects to create a single color. For example, a colored glass window is transparent because the glass has its own color, but the resulting color also contains the colors of the objects behind it.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Shadow Mapping:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Light source positions and scene geometry, The GPU calculates shadows by determining which parts of the scene are blocked from a light source. It does this by rendering the scene from the perspective of the light and using a shadow map to test whether each pixel is in a shadow.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fkbri4f69g7o783j5crh8.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fkbri4f69g7o783j5crh8.png" alt="Image description" width="800" height="249"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Post-Processing:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;A final image before display, the GPU applies post-processing effects like motion-blur, bloom, color grading, and depth of field to enhance the visual appearance of the final frame. These are additional pixel calculations done after the main rendering pipeline.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Physics and Geometry Calculations:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;In modern games, GPU can also handle physics simulations (like fluid dynamics, collisions, and cloth simulations) using frameworks like NVIDIA PhysX, leveraging the parallel processing capabilities of the GPU.&lt;/p&gt;

&lt;p&gt;Some advanced techniques include tessellation, where the GPU dynamically increases the geometric detail of the model (e.g. Subdividing polygons for smoother surfaces)&lt;/p&gt;

&lt;p&gt;(**Tessellation: **This is a Vertex Processing stage in the OpenGL rendering pipeline where patches of vertex data are subdivided into smaller primitives. We will explore this in more detail in an upcoming article.)&lt;/p&gt;

&lt;p&gt;So, all these calculations are performed parallelly, and the todays GPU, which is optimized for handling millions and trillions of calculations simultaneously. This parallelism allows for real-time rendering of high-quality graphics at high frame rates.&lt;/p&gt;

&lt;p&gt;How many calculations do you think that your graphic card performs every second while running a video game?&lt;/p&gt;

&lt;p&gt;Maybe 100 million, it’s what required to run a Super Mario 64 from 1996.&lt;/p&gt;

&lt;p&gt;And 540 million calculations are done to run Half-life from 1998.&lt;/p&gt;

&lt;p&gt;And 2.25 billion calculations to run World of Warcraft from 2004 and 100 billion calculations to run Minecraft from 2011.&lt;/p&gt;

&lt;p&gt;And now to render most realistic video games such as Call of Duty: Modern Warfare III from 2023 it does 30–40 trillion calculations in the background to render the game.&lt;/p&gt;




&lt;p&gt;Let’s see the Difference between GPU and CPU:&lt;/p&gt;

&lt;p&gt;GPU: The GPU has over 10,000 cores, however when we look at the integrated chip Central Processing Unit (CPU)has only 24 cores.&lt;/p&gt;

&lt;p&gt;We might think that GPU is more powerful than CPU, however its more complicated than you think.&lt;/p&gt;

&lt;p&gt;For example:&lt;/p&gt;

&lt;p&gt;Let’s think GPU as a Cargo ship, The amount of cargo capacity is the number of calculations and data that can be processed, and the speed of the ship is the rate at which how quickly those calculations and data are being processed.&lt;/p&gt;

&lt;p&gt;It’s a trade off as a massive number of calculations that are being executed at a shorter rate.&lt;/p&gt;

&lt;p&gt;A giant cargo ship only contains with bulk contents inside and are limited to travelling between ports (like from port A to port B). Similarly, GPU are a lot less flexible than CPU’s and can only run simple instructions like basic arithmetic.&lt;/p&gt;

&lt;p&gt;GPU can’t run Operating system or interface with input devices or networks.&lt;/p&gt;

&lt;p&gt;CPU: Let’s think CPU as a jumbo jet airplane, the speed of the airplane is the rate at which how quickly those calculations and data are being processed.&lt;/p&gt;

&lt;p&gt;A few calculations that can be performed at a much faster rate. The key difference from a Cargo ship is that airplanes are lot more flexible since they can carry passengers, packages, or containers and take off and land at any one of tens of thousands of airports, like wise CPU’s are flexible in that they can run a variety of programs and instructions (multi-processing).&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Note: Although technically CPU’s do have a faster clock speed, it’s more accurate to focus on the CPU’s shorter latency. Specifically, CPU’s uses more complicated memory hierarchy and branch prediction to reduce this latency.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;If you have a lot less data that needs to be evaluated quickly then a CPU will be faster furthermore if you need to run an operating system or support network connections and a wide range of different applications and hardware, then you’ll need a CPU.&lt;/p&gt;




&lt;p&gt;&lt;strong&gt;The Rendering Pipeline Stages:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The rendering pipeline is a sequence of steps that transforms 3D data, like models and textures, into 2D images displayed on the screen.&lt;/p&gt;

&lt;p&gt;The specific stages and their implementation may vary depending on the graphics API used, such as OpenGL, Vulkan, or DirectX, but the overall process follows the same basic principles to render visuals efficiently.&lt;/p&gt;

&lt;p&gt;There are 9 stages, they are:&lt;/p&gt;

&lt;blockquote&gt;
&lt;ul&gt;
&lt;li&gt;Vertex Specification&lt;/li&gt;
&lt;li&gt;Vertex Shader&lt;/li&gt;
&lt;li&gt;Tessellation&lt;/li&gt;
&lt;li&gt;Geometry Shader&lt;/li&gt;
&lt;li&gt;Vertex Post processing&lt;/li&gt;
&lt;li&gt;Primitive Assembly&lt;/li&gt;
&lt;li&gt;Rasterization&lt;/li&gt;
&lt;li&gt;Fragment Shader&lt;/li&gt;
&lt;li&gt;Per Sample Operations&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Note:In this article, we have covered the basics of how GPUs work, including the rendering pipeline and its stages. In later articles, we will delve deeper into the concepts of the rendering pipeline, exploring its stages.&lt;/p&gt;
&lt;/blockquote&gt;




&lt;p&gt;And finally let’s discuss about the difference between Integrated and Dedicated graphics card:&lt;/p&gt;

&lt;p&gt;We all know that Dedicated graphics card is more powerful than integrated graphics card, the dedicated graphics cards has built in separate hardware components with their own GPU and memory (VRAM), designed specifically for graphics-intensive workloads.&lt;/p&gt;

&lt;p&gt;Whereas the Integrated graphics card is built into the same chip as the CPU, sharing the system resource like memory (RAM) and power. As the Integrated GPU’s uses the system’s main memory for graphics tasks, which limits performance and reduces the memory available for other applications. Integrated GPUs are cheaper because they don’t require additional hardware and consume less power. They are sufficient for basic computing task like web browsing, streaming, and light gaming, they struggle with resource-intensive tasks such as modern AAA gaming or 3D rendering.&lt;/p&gt;

&lt;p&gt;Let’s take an example from Intel Iris Xe Integrated Graphic card, it has significantly lower number of Execution Units (EUs) (the equivalent of cores in CPUs) compared to dedicated GPUs.&lt;/p&gt;

&lt;p&gt;These EUs are responsible for processing graphical data, but their architecture is optimized for lower power consumption and sharing resources with the CPU rather than raw power.&lt;/p&gt;

&lt;p&gt;The Intel Iris Xe has up to 96 Execution Units (EUs) in higher-end configurations (e.g., 11th Gen Intel processors). The EUs are specialized cores that handle tasks like rendering, shading and computation.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flkrxljs3klhb2myvv443.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flkrxljs3klhb2myvv443.png" alt="Image description" width="800" height="556"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;When compared to Dedicated GPUs, A dedicated GPU (e.g. NVIDIA RTX 4050) will be having thousands of CUDA cores, designed for parallel processing and handling complex graphical tasks at much higher speeds.&lt;/p&gt;

&lt;p&gt;Let’s see that how Integrated Graphics works: Instead of dedicated VRAM, integrated GPUs like the Intel Iris Xe use system RAM.&lt;/p&gt;

&lt;p&gt;For example: If your system has 16GB of RAM, the integrated GPU might allocate 2GB for graphics. This limits the GPUs performance because system RAM is slower and not optimized for graphics data.&lt;/p&gt;

&lt;p&gt;Integrated GPUs prioritizes power-saving and lightweight tasks, making them ideal for laptops and Ultrabook’s.&lt;/p&gt;

&lt;p&gt;For more understanding on Intel Iris Xe graphics card you can check the official site of intel which has all the information on this chip.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.intel.com/content/www/us/en/docs/oneapi/optimization-guide-gpu/2023-0/intel-iris-xe-gpu-architecture.html?source=post_page-----bb3bf964edfd--------------------------------" rel="noopener noreferrer"&gt;Intel Iris Xe GPU Architecture&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Conclusion:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;I hope this article has provided you a clear understanding on the topics that we have been discussed. These basics serve as a stepping stone for diving deeper into the intricate concepts of graphics rendering.&lt;/p&gt;

&lt;p&gt;Finally, I thank whoever reading, for spending your valuable time on my article.&lt;/p&gt;

&lt;p&gt;Much of the explanation on GPU architecture and the GPU overview was inspired by the excellent content from Branch Education’s YouTube channel. This has greatly contributed to my understanding of GPU architecture and functionality.&lt;/p&gt;

&lt;p&gt;For a more detailed and in-depth explanation of how GPUs work, I highly recommend checking out their channel&lt;br&gt;
&lt;a href="https://www.youtube.com/watch?v=h9Z4oGN89MU" rel="noopener noreferrer"&gt;How Graphics cards work?&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Contact: &lt;a href="//www.linkedin.com/in/vinish-kumar-s"&gt;Vinish Kumar&lt;/a&gt;&lt;/p&gt;

</description>
      <category>gpu</category>
      <category>opengl</category>
      <category>gamedev</category>
      <category>beginners</category>
    </item>
  </channel>
</rss>
