Merge pull request #62 from aabhinavg1/cookies

added the doc for the graphic pipeline

docs/gpu/introduction.md

@@ -0,0 +1,178 @@
+---
+id: introduction
+title: The Graphic Rendering Pipeline
+description: Learn about the graphic rendering pipeline, a fundamental process that transforms 2D images into dynamic 3D scenes in real time.
+keywords: 
+  - Rendering
+  - Rendering Pipeline
+  - Graphic Rendering Pipeline
+  - GPU Pipeline
+  - Real-Time Rendering
+  - Graphics
+  - Industry Best Practices
+author: CompilerSutra
+date: 2024-10-11
+tags: 
+  - Graphics
+  - Rendering Pipeline
+  - Graphic Pipeline
+slug: /The_Graphic_Rendering_Pipeline
+sidebar_label: The Graphic Rendering Pipeline
+---
+
+<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
+<script src="../mermaid-init.js"></script>
+
+# The Graphic Rendering Pipeline 🎨
+
+## Summary
+
+In the world of *real-time graphics*, the **Rendering Pipeline** plays a crucial role in transforming 3D models into 2D visuals. It enables applications like video games and CGI to generate immersive digital environments in real time. The pipeline determines the *position*, *shape*, and *appearance* of objects, simulating environmental interactions to create seamless, visually stunning scenes. 
+
+This article dives into the intricacies of the rendering pipeline and explores the key stages involved in bringing digital content to life. 🔍
+
+---
+
+## What is the Rendering Pipeline? 🤔
+
+The **rendering pipeline** is a sequence of steps used by **GPUs** to convert 3D models into a 2D image that displays on your screen. This pipeline is essential for modern graphics technologies, ensuring high-quality and real-time rendering.  
+
+### Overview of the Rendering Pipeline 🖼️
+
+The process involves multiple stages, each responsible for different operations. Below is a high-level summary of the main stages:
+
+<details>
+<summary>🎯 Application Stage</summary>
+
+The **Application Stage** prepares the scene by managing objects, transformations, and user inputs. It defines how geometry is transformed and sets up camera views before passing data to the graphics hardware.
+</details>
+
+<details>
+<summary>🎨 Geometry Processing</summary>
+
+In this stage, the GPU processes each triangle and vertex. It consists of:
+1. **Vertex Shading**  
+2. **Projection**  
+3. **Clipping**  
+4. **Screen Mapping**
+</details>
+
+<details>
+<summary>📊 Rasterization</summary>
+
+The **Rasterization Stage** converts 3D data into pixels, determining how objects appear on a 2D screen. This process takes into account lighting, textures, and colors.
+</details>
+
+<details>
+<summary>✨ Pixel Processing (Post-Processing)</summary>
+
+Post-processing applies final visual effects, such as **anti-aliasing**, **motion blur**, and **depth of field**, resulting in polished images.
+</details>
+
+Understanding these stages offers insight into how real-time rendering enhances industries like gaming, VR, and animation.
+
+---
+
+## Detailed Breakdown of the Stages
+
+### 1. Application Stage
+
+This stage is executed on the **CPU**. Developers have full control here, managing transformations, user input, and determining what is sent to the **GPU** for further processing.  
+
+The **CPU** executes tasks in parallel, enhancing performance by managing several processes simultaneously. After this stage, the geometry is sent to the next phase: **Geometry Processing**.
+
+---
+
+### 2. Geometry Processing
+
+Geometry processing occurs on the **GPU** and handles **per-triangle** and **per-vertex** operations. This stage is divided into four steps:
+
+```bash
+Vertex Shading ===> Projection ===> Clipping ===> Screen Mapping
+```
+
+<details> 
+<summary>🖼️ Vertex Shading</summary>
+
+In this step, the **vertex positions** are calculated.  
+When the model first appears on screen, it resides in **model space** (its original coordinate system).  
+
+The **model transform** determines how the object is positioned and oriented in the scene. Multiple copies (called **instances**) of the same model can have different orientations and sizes without duplicating the geometry.  
+
+The two main tasks of vertex shading are:
+1. **Compute the vertex position** in world space.
+2. **Evaluate vertex output data** based on the programmer’s requirements.
+
+:::note
+We'll cover more details about vertex shading in upcoming articles.
+:::
+</details>
+
+---
+
+### 3. Rasterization 📊
+
+During rasterization, the GPU converts 3D models into **pixels**. Each pixel's appearance depends on object positions, lighting, and texture data. This stage is critical for transforming 3D geometry into a 2D image.
+All the pixel that survive the clipping in the previous stage are rasterized. Which implies that all pixels that are inside a primitive are found and send further down the pipeline to **pixel processing**.
+
+---
+
+### 4. Pixel Processing ✨
+
+Here we have to compute the colour of each pixel of each visible primitive.
+Those triangle that are not been associated with any texture(images) are render with this image appiled to them as desired.
+Visibility is resolved by ``z-buffer algorithm``. along with optional discard and stencil tests.
+Each object is processed in turn and the final image is then displayed on the screen.
+
+**Pixel Processing** (or **Post-Processing**) applies final visual effects, such as:
+- **Anti-aliasing** to smooth out jagged edges.
+- **Motion blur** to create smooth transitions.
+- **Depth of field** to simulate camera focus.
+
+These effects enhance the overall visual quality of the scene.
+
+---
+
+## Why is the Rendering Pipeline Important? 🚀
+
+The rendering pipeline ensures that every visual element in real-time applications looks polished and responds naturally to lighting and movement. It leverages **parallel execution** at different stages to optimize performance, allowing fast rendering speeds essential for gaming, VR, and CGI.
+
+Graphics pipelines have evolved through decades of API improvements and hardware innovations to meet the demands of real-time applications. With each stage executed in parallel, the pipeline ensures efficiency and high-quality output.
+
+---
+
+## Conclusion 💡
+
+The **Graphic Rendering Pipeline** is the foundation of modern computer graphics. By orchestrating how geometry, textures, lighting, and pixels interact, it allows digital worlds to come alive in real time. 🎮
+
+Understanding the rendering pipeline is crucial for developers and artists working with **graphics-intensive applications**. Stay tuned for more articles where we explore advanced concepts in graphics rendering and industry best practices.
+
+---
+
+# References for The Graphic Rendering Pipeline 📚
+
+## Books  
+1. **"Computer Graphics: Principles and Practice"** by John F. Hughes, Andries van Dam, et al.  
+   - A comprehensive guide to computer graphics, covering both theoretical and practical aspects of rendering pipelines.  
+   - ISBN: 978-0321399526
+
+2. **"Real-Time Rendering"** by Tomas Akenine-Möller, Eric Haines, and Naty Hoffman.  
+   - Focuses on real-time graphics and explores rendering techniques used in modern games and VR.  
+   - ISBN: 978-0367347254
+
+3. **"GPU Gems: Programming Techniques, Tips, and Tricks for Real-Time Graphics"** by Randima Fernando (Editor).  
+   - A collection of advanced techniques for leveraging GPU hardware for rendering.
+
+## Online Resources  
+1. **[Learn OpenGL](https://learnopengl.com/)**  
+   - A hands-on introduction to graphics programming using OpenGL.
+
+2. **[Real-Time Rendering Resources](https://www.realtimerendering.com/)**  
+   - A curated collection of resources and research papers related to graphics and rendering.  
+
+3. **[NVIDIA Developer Blog](https://developer.nvidia.com/blog)**  
+   - Industry trends, tutorials, and technical insights on graphics pipelines and GPU programming.
+
+
+
+*Author: CompilerSutra modified with AI*

docs/mermaid-init.js

@@ -0,0 +1,15 @@
+document.addEventListener("DOMContentLoaded", function () {
+    if (typeof mermaid !== 'undefined') {
+        mermaid.initialize({
+            startOnLoad: true,
+            theme: 'default',
+            securityLevel: 'loose',
+            logLevel: 'debug', // Set logging to debug for troubleshooting
+            flowchart: { curve: 'linear' },
+            sequence: { actorMargin: 50 }
+        });
+
+    } else {
+        console.error("Mermaid.js not found. Please ensure Mermaid is loaded properly.");
+    }
+});