Add diagram and pipeline section

Author: AristurtleDev

articles/tutorials/building_2d_games/24_shaders/images/shader-pipeline.png

@@ -61,6 +61,26 @@ For our Dungeon Slime game, we'll focus primarily on pixel shaders since we want
 > [!NOTE]
 > There are other types of shaders beyond vertex and pixel shaders, such as compute shaders, geometry shaders, and hull/domain shaders.  These more advanced shader types enabled powerful features like physics simulations, procedural geometry, and complex post-processing effects.  However, they are not currently supported in the standard MonoGame implementation and are beyond the scope of this beginner tutorial.  As the MonoGame graphics pipeline evolves, support for these advanced shader types may be added in future versions.
 
+### The Shader Pipeline
+
+To understand how shaders work, it helps to visualize how data flow through the rendering pipeline.
+
+| ![Figure 24-1: Basic shader pipeline showing how data flows through the rendering process](./images/shader-pipeline.png) |
+| :----------------------------------------------------------------------------------------------------------------------: |
+|               **Figure 24-1: Basic shader pipeline showing how data flows through the rendering process**                |
+
+This diagram illustrates the fundamental steps of the shader pipeline:
+
+1. **Input Data**: The process begins with input data that is sent to the GPU to render:
+   1. **Vertex Data**: The vertex data (positions, colors, etc.) that define the geometry of what is being drawn.
+   2. **Texture**: The image data that will be applied to the geometry.
+2. **Vertex Shader**: Processes each vertex, calculating its final position on the screen and passing the data to the next stage.
+3. **Sampler**: Controls how texture data is accessed, applying [filtering](../18_texture_sampling/index.md#filtering-modes) (how pixels blend when scaled) and [addressing](../18_texture_sampling/index.md#addressing-modes) (what happens at texture edges).
+4. **Pixel Shader**: Takes the transformed vertices and sampled texture data to calculate the final color of each pixel.
+5. **Output**: The final rendered image that appears on your screen.
+
+When working with [**SpriteBatch**](xref:Microsoft.Xna.Framework.Graphics.SpriteBatch) (2D) in MonoGame, the framework handles most of the vertex shader work automatically, which is why we will focus primarily on writing pixel shaders for visual effects.
+
 ### Shader Languages and Cross-Platform Considerations
 
 MonoGame uses the [High-Level Shader Language (HLSL)](https://learn.microsoft.com/en-us/windows/win32/direct3dhlsl/dx-graphics-hlsl) for writing shader effects. HLSL is a C-like programming language developed by Microsoft for DirectX. As MonoGame also supports OpenGL which uses the [OpenGL Shading Language (GLSL)](https://www.khronos.org/opengl/wiki/OpenGL_Shading_Language) instead of DirectX, it needs a way to make shaders work everywhere.