You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Welcome to the advanced 2D shaders tutorial! Before we dive into writing complex effects, this first chapter will make sure you are ready to go. We will get the starting project set up and take a quick look at the technical foundation of how shaders work with MonoGame's `SpriteBatch`.
6
+
Welcome to the advanced 2D shaders tutorial! The goal of this series is to explore several concepts in MonoGame's 2D graphics capabilities, specifically with respect to shaders.
7
7
8
8
## The Starting Code
9
9
10
-
This tutorial series builds directly on top of the final code from the "Building 2D Games" tutorial. It is essential that you start with this project.
10
+
This tutorial series builds directly on top of the final code from the [Building 2D Games](./../../../building_2d_games/index.md) tutorial. It is essential that you start with this project.
11
11
12
12
> [!note]
13
13
> You can get the complete starting source code for this tutorial here:
Copy file name to clipboardExpand all lines: articles/tutorials/advanced/2d_shaders/10_next_steps/index.md
+5-3Lines changed: 5 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -19,11 +19,12 @@ You have the tools to develop shaders in MonoGame, and you have implemented a se
19
19
20
20
The world of graphics programming is vast and there is always more to learn. If you are excited and want to keep going, here are a few topics to explore.
21
21
22
-
#### Signed Distance Fields (SDFs)
23
-
Signed Distance Fields are a powerful technique for rendering resolution-independent shapes, text, and UI elements. Instead of a texture storing color, it stores the distance to the nearest edge of a shape. With some shader code, you can render perfectly crisp shapes at any size. They are fantastic for fonts and for creating procedural effects like outlines, glows, and soft shadows.
24
22
#### Advanced Post-Processing
23
+
25
24
We touched on post-processing with our scene transition, but there's a whole world of effects you can apply to the final rendered image. Effects like bloom, depth of field, chromatic aberration, and film grain can all be implemented as shaders that process the entire screen to give your game a unique stylistic look. Check out the bloom effect in the [NeonShooter](https://github.com/MonoGame/MonoGame.Samples/blob/3.8.4/NeonShooter/NeonShooter.Core/Content/Shaders/BloomCombine.fx) sample.
25
+
26
26
#### Beyond SpriteBatch
27
+
27
28
In this tutorial, we worked within the confines of the default `SpriteBatch` vertex format (`VertexPositionColorTexture`). MonoGame can draw arbitrary vertex buffer data with the `GraphicsDevice.DrawPrimitives()` functions. You can draw shapes with more than 4 corners. You can pass extra data _per_ vertex, like a unique id, custom data, or whatever you need for your effects. If you want to get into 3d game development, then you'll need to expand beyond `SpriteBatch`.
28
29
29
30
## Continued Reading
@@ -43,8 +44,9 @@ This tutorial series was an exploration of various shader topics, with a focus o
43
44
44
45
45
46
## A Note From The Author
47
+
46
48
Hey friend,
47
-
If you read through this whole series, then _thank you_ for lending me your time and patience. Hopefully you learned some good information. I remember it took me at least 3 distinct attempts to learn shaders. Once when I was a teenager. Once when I was in college. And then finally again as a eager-eyed young developer in the software world. Each attempt got me further, but it took me _decades_ to understand anything at all. If you find shaders confusing, please do not give up. Keep going.
49
+
If you read through this whole series, then _thank you_ for lending me your time and patience. Hopefully you learned some good information, or at least enjoyed the ride. I love shader programming, but it took me a _long_ time to build up any intuition around computer graphics. I hope that you find the spark in graphics programming that leads you to build beautiful things.
Copy file name to clipboardExpand all lines: articles/tutorials/advanced/2d_shaders/index.md
+11-11Lines changed: 11 additions & 11 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -3,7 +3,7 @@ title: Advanced 2D Shaders in MonoGame
3
3
description: A tutorial series on creating advanced 2D visual effects with custom shaders in MonoGame.
4
4
---
5
5
6
-
This tutorial series picks up where the "Building 2D Games" tutorial left off, diving deep into the world of custom shaders. The goal is to develop tooling for MonoGame to facilitate shader development, write some custom effects for _DungeonSlime_, and build intuition for how to approach shader programming.
6
+
This tutorial series picks up where the [Building 2D Games](./../../building_2d_games/index.md) tutorial left off, diving deep into the world of custom shaders. The goal is to develop tooling for MonoGame to facilitate shader development, write some custom effects for _DungeonSlime_, and build intuition for how to approach shader programming.
7
7
8
8
## What We Will Build
9
9
@@ -22,23 +22,23 @@ Throughout this series, we will take our _Dungeon Slime_ game and add a whole ne
22
22
This documentation is for intermediate MonoGame users. It assumes that you have a solid understanding of C# and have _already completed the entire "Building 2D Games" tutorial series._
23
23
24
24
> [!IMPORTANT]
25
-
> The concepts and code from the original tutorial, especially the "Shaders" chapter, are a mandatory prerequisite. We will be building directly on top of the final project from that series.
25
+
> The concepts and code from the original tutorial, especially the [Shaders](./../../building_2d_games/24_shaders/index.md) chapter, are a mandatory prerequisite. We will be building directly on top of the final project from that series.
26
26
27
27
## Table of Contents
28
28
29
29
This documentation is organized to be read sequentially, as each chapter builds upon the techniques and code from the previous one.
|[Chapter 01: Introduction](01_introduction/index.md)| An overview of the advanced shader techniques covered in this tutorial series. |[Final Chapter from Building-2D-Games Series](https://github.com/MonoGame/MonoGame.Samples/tree/3.8.4/Tutorials/learn-monogame-2d/src/24-Shaders/)|
34
-
|[Chapter 02: Hot Reload](02_hot_reload/index.md)| Set up a workflow with a "hot-reload" system to recompile and view shader changes in real-time without restarting the game. |[02-Hot-Reload](https://github.com/MonoGame/MonoGame.Samples/tree/3.8.4/Tutorials/2dShaders/src/02-Hot-Reload-System/)|
35
-
|[Chapter 03: The Material Class](03_the_material_class/index.md)| Create a `Material` class to manage shader parameters and handle the complexities of the shader compiler and our hot-reload system. |[03-Material-Class](https://github.com/MonoGame/MonoGame.Samples/tree/3.8.4/Tutorials/2dShaders/src/03-The-Material-Class)|
36
-
|[Chapter 04: Debug UI](04_debug_ui/index.md)| Integrate ImGui.NET to build a real-time debug UI, allowing for runtime manipulation of shader parameters. |[04-Debug-UI](https://github.com/MonoGame/MonoGame.Samples/tree/3.8.4/Tutorials/2dShaders/src/04-Debug-UI)|
37
-
|[Chapter 05: Transition Effect](05_transition_effect/index.md)| Create a flexible, texture-driven screen wipe for smooth scene transitions. |[05-Transition-Effect](https://github.com/MonoGame/MonoGame.Samples/tree/3.8.4/Tutorials/2dShaders/src/05-Transition-Effect)|
38
-
|[Chapter 06: Color Swap Effect](06_color_swap_effect/index.md)| Implement a powerful color-swapping system using a 1D texture as a Look-Up Table (LUT), allowing for dynamic color palette changes. |[06-Color-Swap-Effect](https://github.com/MonoGame/MonoGame.Samples/tree/3.8.4/Tutorials/2dShaders/src/06-Color-Swap-Effect)|
39
-
|[Chapter 07: Sprite Vertex Effect](07_sprite_vertex_effect/index.md)| Dive into the vertex shader to manipulate sprite geometry, break out of the 2D plane, and give the game a dynamic 3D perspective. |[07-Sprite-Vertex-Effect](https://github.com/MonoGame/MonoGame.Samples/tree/3.8.4/Tutorials/2dShaders/src/07-Sprite-Vertex-Effect)|
40
-
|[Chapter 08: Light Effect](08_light_effect/index.md)| Build a 2D dynamic lighting system from scratch using a deferred rendering approach, complete with color, light, and normal map buffers. |[08-Light-Effect](https://github.com/MonoGame/MonoGame.Samples/tree/3.8.4/Tutorials/2dShaders/src/08-Light-Effect)|
41
-
|[Chapter 09: Shadows Effect](09_shadows_effect/index.md)| Add dynamic 2D shadows to the lighting system by using a vertex shader and the stencil buffer for efficient light masking. |[09-Shadows-Effect](https://github.com/MonoGame/MonoGame.Samples/tree/3.8.4/Tutorials/2dShaders/src/09-Shadows-Effect/)|
33
+
|[Chapter 01: Introduction](01_introduction/index.md)| An overview of the advanced shader techniques covered in this tutorial series. |[Final Chapter from Building-2D-Games Series](https://github.com/MonoGame/MonoGame.Samples/tree/3.8.5/Tutorials/learn-monogame-2d/src/24-Shaders/)|
34
+
|[Chapter 02: Hot Reload](02_hot_reload/index.md)| Set up a workflow with a "hot-reload" system to recompile and view shader changes in real-time without restarting the game. |[02-Hot-Reload](https://github.com/MonoGame/MonoGame.Samples/tree/3.8.5/Tutorials/2dShaders/src/02-Hot-Reload-System/)|
35
+
|[Chapter 03: The Material Class](03_the_material_class/index.md)| Create a `Material` class to manage shader parameters and handle the complexities of the shader compiler and our hot-reload system. |[03-Material-Class](https://github.com/MonoGame/MonoGame.Samples/tree/3.8.5/Tutorials/2dShaders/src/03-The-Material-Class)|
36
+
|[Chapter 04: Debug UI](04_debug_ui/index.md)| Integrate ImGui.NET to build a real-time debug UI, allowing for runtime manipulation of shader parameters. |[04-Debug-UI](https://github.com/MonoGame/MonoGame.Samples/tree/3.8.5/Tutorials/2dShaders/src/04-Debug-UI)|
37
+
|[Chapter 05: Transition Effect](05_transition_effect/index.md)| Create a flexible, texture-driven screen wipe for smooth scene transitions. |[05-Transition-Effect](https://github.com/MonoGame/MonoGame.Samples/tree/3.8.5/Tutorials/2dShaders/src/05-Transition-Effect)|
38
+
|[Chapter 06: Color Swap Effect](06_color_swap_effect/index.md)| Implement a powerful color-swapping system using a 1D texture as a Look-Up Table (LUT), allowing for dynamic color palette changes. |[06-Color-Swap-Effect](https://github.com/MonoGame/MonoGame.Samples/tree/3.8.5/Tutorials/2dShaders/src/06-Color-Swap-Effect)|
39
+
|[Chapter 07: Sprite Vertex Effect](07_sprite_vertex_effect/index.md)| Dive into the vertex shader to manipulate sprite geometry, break out of the 2D plane, and give the game a dynamic 3D perspective. |[07-Sprite-Vertex-Effect](https://github.com/MonoGame/MonoGame.Samples/tree/3.8.5/Tutorials/2dShaders/src/07-Sprite-Vertex-Effect)|
40
+
|[Chapter 08: Light Effect](08_light_effect/index.md)| Build a 2D dynamic lighting system from scratch using a deferred rendering approach, complete with color, light, and normal map buffers. |[08-Light-Effect](https://github.com/MonoGame/MonoGame.Samples/tree/3.8.5/Tutorials/2dShaders/src/08-Light-Effect)|
41
+
|[Chapter 09: Shadows Effect](09_shadows_effect/index.md)| Add dynamic 2D shadows to the lighting system by using a vertex shader and the stencil buffer for efficient light masking. |[09-Shadows-Effect](https://github.com/MonoGame/MonoGame.Samples/tree/3.8.5/Tutorials/2dShaders/src/09-Shadows-Effect/)|
42
42
|[Chapter 10: Conclusion & Next Steps](10_next_steps/index.md)| Review the techniques learned throughout the series and preview further graphics programming topics to continue your journey. ||
0 commit comments