Added a tutorial.

Author: yahiaetman

Documentation~/tut-add-grayscale-to-after-pp.png

@@ -38,7 +38,157 @@ The package contains 8 example effect which are included as a sample. Samples ca
 
 ## Tutorial
 
-**TODO**
+First, we need a c# shader and a script for our custom effect. We will create a grayscale effect for the sake of simplicity.
+
+First, lets create the C# script. We will call it `GrayScaleEffect.cs`. The name of the file must match the volume component class name to comply with Unity Serialization rules. In the file write the following:
+
+```csharp
+using UnityEngine;
+using UnityEngine.Rendering;
+using UnityEngine.Rendering.Universal;
+using UnityEngine.Rendering.Universal.PostProcessing;
+
+// Define the Volume Component for the custom effect 
+[System.Serializable, VolumeComponentMenu("CustomPostProcess/Grayscale")]
+public class GrayscaleEffect : VolumeComponent
+{
+    [Tooltip("Controls the effect strength")]
+    public ClampedFloatParameter blend = new ClampedFloatParameter(0, 0, 1);
+}
+
+// Define the renderer for the custom post processing effect
+[CustomPostProcess("Grayscale", CustomPostProcessInjectPoint.AfterPostProcess)]
+public class GrayscaleEffectRenderer : CustomPostProcessRenderer
+{
+    // A variable to hold a reference to the corresponding volume component.
+    private GrayscaleEffect m_VolumeComponent;
+
+    // The postprocessing material.
+    private Material m_Material;
+    
+    // The ids of the shader variables
+    static class ShaderIDs {
+        internal readonly static int Input = Shader.PropertyToID("_MainTex");
+        internal readonly static int Blend = Shader.PropertyToID("_Blend");
+    }
+    
+    // Whether the effect is visible in the scene view or not.
+    public override bool visibleInSceneView => true;
+    
+    // Setup is called once so we use it to create our material
+    public override void Setup()
+    {
+        m_Material = CoreUtils.CreateEngineMaterial("Hidden/PostProcess/Grayscale");
+    }
+
+    // Called once before rendering for each camera.
+    // Return true if the effect should be rendered.
+    public override bool SetupCamera(ref RenderingData renderingData)
+    {
+        // Get the current volume stack
+        var stack = VolumeManager.instance.stack;
+        // Get the corresponding volume component
+        m_VolumeComponent = stack.GetComponent<GrayscaleEffect>();
+        // if blend value > 0, then render this effect. 
+        return m_VolumeComponent.blend.value > 0;
+    }
+
+    // The actual rendering execution is done here
+    public override void Render(
+        CommandBuffer cmd, 
+        ref RenderingData renderingData, 
+        RenderTargetIdentifier source, 
+        RenderTargetIdentifier destination
+    ){
+        // set material properties
+        if(m_Material != null){
+            m_Material.SetFloat(ShaderIDs.Blend, m_VolumeComponent.blend.value);
+        }
+        // set source texture
+        cmd.SetGlobalTexture(ShaderIDs.Input, source);
+        // draw a fullscreen triangle to the destination
+        CoreUtils.DrawFullScreen(cmd, m_Material, destination);
+    }
+}
+```
+
+As you can see, the code consists of two classes: the volume component and the renderer. The volume component only holds data and will appear as a volume profile option. The renderer is rensponsible for rendering the effect and read the effect parameters from the volume component. The volume component and renderer is decoupled from each other which opens up many options while implementing your effects. For example:
+1. You can have a one-to-one relationship between your volume component and renderer (as we did above).
+2. You can have a renderer without any corresponding volume component if it does not need any data from the volumes.
+3. You can have a renderer that reads from multiple volume components (see [GrayAndInvertEffect.cs](Samples~/Examples/Scripts/PostProcessing/GrayAndInvertEffect.cs) as an example).
+4. You can have multiple renderers read from the same volume component(s).
+
+The option #3 is especially useful for writing uber effect shaders that can do multiple effects in the same blit to enhance performance.
+
+Then we create the shader code. Create a shader file with any name you like (I prefer `GrayScale.shader`) and replace its content with the following code:
+
+```glsl
+Shader "Hidden/PostProcess/Grayscale"
+{
+    HLSLINCLUDE
+    #include "Packages/com.yetman.render-pipelines.universal.postprocess/ShaderLibrary/Core.hlsl"
+    #include "Packages/com.unity.render-pipelines.core/ShaderLibrary/Color.hlsl"
+
+    TEXTURE2D_X(_MainTex);
+
+    float _Blend;
+
+    float4 GrayscaleFragmentProgram (PostProcessVaryings input) : SV_Target
+    {
+        UNITY_SETUP_STEREO_EYE_INDEX_POST_VERTEX(input);
+
+        float2 uv = UnityStereoTransformScreenSpaceTex(input.texcoord);
+        float4 color = LOAD_TEXTURE2D_X(_MainTex, uv * _ScreenParams.xy);
+        
+        // Blend between the original and the grayscale color
+        color.rgb = lerp(color.rgb, Luminance(color.rgb).xxx, _Blend);
+        
+        return color;
+    }
+    ENDHLSL
+
+    SubShader
+    {
+        Cull Off ZWrite Off ZTest Always
+        Pass
+        {
+            HLSLPROGRAM
+            #pragma vertex FullScreenTrianglePostProcessVertexProgram
+            #pragma fragment GrayscaleFragmentProgram
+            ENDHLSL
+        }
+    }
+    Fallback Off
+}
+```
+
+Since vertex shaders rarely contain any logic specific to the effect, we use a default vertex shader `FullScreenTrianglePostProcessVertexProgram` which is included in `Packages/com.yetman.render-pipelines.universal.postprocess/ShaderLibrary/Core.hlsl`. The fragment shader is the one reponsible for reading the original pixel color, calculating the grayscale color and blending the two colors together.
+
+Now that we have our custom effect, we need to add a `CustomPostProcess` renderer feature to the foward renderer as seen in the next image. You can also add a `SceneNormals` renderer feature if you want to use scene normals in an effect (such as Edge Detection).
+
+![Add Renderer Feature](Documentation~/tut-add-renderer-feature.png)
+
+The `CustomPostProcess` renderer feature contains 3 lists that represent 3 injection points in the `ScriptableRenderer` as seen in the next image. The three injection points are:
+* **After Opaque and Sky** where we can apply effects before the transparent geometry is rendered.
+* **Before Post Process** which happens after the transparent geometry is rendered and before the builtin post processing is applied.
+* **After Post Process** which happens at the very end before the result is blit to the camera target.
+
+The ordering of the effects in a list is the same order in which they are executed (from top to bottom). You can re-order the effects as you see fit. **Note** that the effect must be added to the renderer feature to be rendered, otherwise, it will be ignored. So we added `GrayScale` to its list `After Post Process`.
+
+![Add GrayScale to After Post Process](Documentation~/tut-add-grayscale-to-after-pp.png)
+
+Then we will create a volume in the scene (or use an existing volume) and add a `GrayScale Effect` volume component to it as seen in the next image.
+
+![Add GrayScale to Volume](Documentation~/tut-add-grayscale-to-volume.png)
+
+Now you can override the `Blend` parameter and see the view becoming grayscale.
+
+![Modify Blend](Documentation~/tut-modify-blend.gif)
+
+Other stuff we didn't explain but can be seen in the samples:
+* Merge effects and read from more than one volume component (see [GrayAndInvertEffect.cs](Samples~/Examples/Scripts/PostProcessing/GrayAndInvertEffect.cs) and [GrayAndInvert.shader](Samples~/Examples/Resources/Shaders/PostProcessing/GrayAndInvert.shader)). 
+* Create temporary render targets inside the renderer (see [StreakEffect.cs](Samples~/Examples/Scripts/PostProcessing/StreakEffect.cs)).
+* Create persistent render targets inside the renderer (see [AfterImageEffect.cs](Samples~/Examples/Scripts/PostProcessing/AfterImageEffect.cs)).
 
 ## License
  [MIT License](LICENSE.md)