tracking 7.1; overview gifs

Author: cdhanna

articles/tutorials/advanced/2d_shaders/07_sprite_vertex_effect/gifs/overview-1.gif

@@ -7,6 +7,12 @@ Every shader has two main parts: the pixel shader, which we've been using to cha
 
 In this chapter, we're going to unlock the power of the vertex shader. we will write our own custom vertex shader from scratch, which will allow us to break out of the 2D plane. we will learn how to use a perspective projection to give our flat world a cool, dynamic 3D feel. 
 
+At the end of this chapter, we will be able to make our sprites appear with 3d perspective.
+
+| ![Figure 7-1: The main menu will have a 3d-esque title ](./gifs/overview-1.gif) | ![Figure 7-2: The game will have a 3d-esque world ](./gifs/overview-2.gif) |
+| :-----------------------------------------------------------------------------: | :------------------------------------------------------------------------: |
+|          **Figure 7-1: The main menu will have a 3d-esque title**               |           **Figure 7-2: The game will have a 3d-esque world**              |
+
 If you are following along with code, here is the code from the end of the [previous chapter](https://github.com/MonoGame/MonoGame.Samples/tree/3.8.4/Tutorials/2dShaders/src/06-Color-Swap-Effect).
 
 ## Default Vertex Shader
@@ -129,9 +135,9 @@ When the game runs, the text will be missing. This is because we never created a
 
 And now you should see the text normally again.
 
-| ![Figure 7-1: The main menu, but rendered with a custom vertex shader](./images/basic.png) |
+| ![Figure 7-3: The main menu, but rendered with a custom vertex shader](./images/basic.png) |
 | :----------------------------------------------------------------------------------------: |
-|          **Figure 7-1: The main menu, but rendered with a custom vertex shader**           |
+|          **Figure 7-3: The main menu, but rendered with a custom vertex shader**           |
 
 ### Making it Move
 
@@ -145,19 +151,19 @@ And change the vertex shader to add the `DebugOffset` to the `output.Position` a
 
 The sprites now move around as we adjust the shader parameter values. 
 
-| ![Figure 7-2: We can control the vertex positions](./gifs/basic.gif) |
+| ![Figure 7-4: We can control the vertex positions](./gifs/basic.gif) |
 | :------------------------------------------------------------------: |
-|         **Figure 7-2: We can control the vertex positions**          |
+|         **Figure 7-4: We can control the vertex positions**          |
 
 It is important to build intuition for the different coordinate systems involved. Instead of adding the `DebugOffset` _after_ the clip-space conversion, if you try to add it _before_, like in the code below:
 
 [!code-hlsl[](./snippets/snippet-7-20.hlsl)]
 
 Then you will not see much movement at all. This is because the `DebugOffset` values only go from `0` to `1`, and in world space, this really only amounts to a single pixel. In fact, exactly how much an addition of _`1`_ happens to make is entirely defined _by_ the conversion to clip-space. The `projection` matrix we created treats world space coordinates with an origin around the screen's center, where 1 unit maps to 1 pixel. Sometimes this is exactly what you want, and sometimes it can be confusing. 
 
-| ![Figure 7-3: Changing coordinates before clip-space conversion](./gifs/basic-2.gif) |
+| ![Figure 7-5: Changing coordinates before clip-space conversion](./gifs/basic-2.gif) |
 | :----------------------------------------------------------------------------------: |
-|          **Figure 7-3: Changing coordinates before clip-space conversion**           |
+|          **Figure 7-5: Changing coordinates before clip-space conversion**           |
 
 ### Perspective Projection
 
@@ -200,25 +206,25 @@ Moving the `z` value uniformly in the shader will not be visually stimulating. A
 
 And now when the debug parameter is adjusted, the text spins in a way that was never possible with the default `SpriteBatch` vertex shader.
 
-| ![Figure 7-4: A spinning text](./gifs/spin-1.gif) |
+| ![Figure 7-6: A spinning text](./gifs/spin-1.gif) |
 | :-----------------------------------------------: |
-|          **Figure 7-4: A spinning text**          |
+|          **Figure 7-6: A spinning text**          |
 
 The text disappears for half of the rotation. That happens because as the vertices are rotated, the triangle itself started to point _away_ from the camera. By default, `SpriteBatch` will cull any faces that point away from the camera. Change the `rasterizerState` to `CullNone` when beginning the sprite batch:
 
 [!code-csharp[](./snippets/snippet-7-26.cs)]
 
 And voilà, the text no longer disappears on its flip side. 
 
-| ![Figure 7-4: A spinning text with reverse sides](./gifs/spin-2.gif) |
+| ![Figure 7-7: A spinning text with reverse sides](./gifs/spin-2.gif) |
 | :------------------------------------------------------------------: |
-|          **Figure 7-4: A spinning text with reverse sides**          |
+|          **Figure 7-7: A spinning text with reverse sides**          |
 
 You may find that the field of view is too high for your taste. Try lowering the field of view to 60, and you'll see something similar to this,
 
-| ![Figure 7-5: A spinning text with reverse sides with smaller fov](./gifs/spin-3.gif) |
+| ![Figure 7-8: A spinning text with reverse sides with smaller fov](./gifs/spin-3.gif) |
 | :-----------------------------------------------------------------------------------: |
-|          **Figure 7-5: A spinning text with reverse sides with smaller fov**          |
+|          **Figure 7-8: A spinning text with reverse sides with smaller fov**          |
 
 As a final touch, we should remove the hard-coded `screenSize` variable from the shader, and extract it as a shader parameter. While we are at it, clean up and remove the debug parameters as well:
 
@@ -232,9 +238,9 @@ And instead of manually controlling the spin angle, we can make the title spin g
 
 [!code-csharp[](./snippets/snippet-7-29.cs)]
 
-| ![Figure 7-6: Spin controlled by the mouse](./gifs/spin-4.gif) |
+| ![Figure 7-9: Spin controlled by the mouse](./gifs/spin-4.gif) |
 | :------------------------------------------------------------: |
-|          **Figure 7-6: Spin controlled by the mouse**          |
+|          **Figure 7-9: Spin controlled by the mouse**          |
 
 ## Applying it to the Game
 
@@ -320,9 +326,9 @@ And then apply all of the parameters to the single material:
 
 Any place where the old `_colorSwapMaterial` is being referenced should be changed to use the `_gameMaterial` instead. Now, if you run the game, the color swap controls are still visible, but we can also manually control the tilt of the map.
 
-| ![Figure 7-7: All of the effects in one](./gifs/uber.gif) |
+| ![Figure 7-10: All of the effects in one](./gifs/uber.gif) |
 | :-------------------------------------------------------: |
-|         **Figure 7-7: All of the effects in one**         |
+|         **Figure 7-10: All of the effects in one**         |
 
 ### Adjusting the Game
 
@@ -332,19 +338,19 @@ Add this snippet to the top of the `GameScene`'s `Update()` method:
 
 [!code-csharp[](./snippets/snippet-7-43.cs)]
 
-| ![Figure 7-8: Camera follows the slime](./gifs/cam-follow.gif) |
+| ![Figure 7-11: Camera follows the slime](./gifs/cam-follow.gif) |
 | :------------------------------------------------------------: |
-|            **Figure 7-8: Camera follows the slime**            |
+|            **Figure 7-11: Camera follows the slime**            |
 
 The clear color of the scene can be seen in the corners (the `CornflowerBlue`). Pick whatever clear color you think looks good for the color swapping:
 
 [!code-csharp[](./snippets/snippet-7-44.cs)]
 
 And to finish this chapter, the game looks like this,
 
-| ![Figure 7-9: vertex shaders make it pop](./gifs/final.gif) |
+| ![Figure 7-12: vertex shaders make it pop](./gifs/final.gif) |
 | :---------------------------------------------------------: |
-|         **Figure 7-9: vertex shaders make it pop**          |
+|         **Figure 7-12: vertex shaders make it pop**          |
 
 ## Conclusion