[Port] [6000.5] DOCG-7573 - Shader Graph documentation for Custom Material Property Drawers sample

Author: sebastienduverne

Packages/com.unity.shadergraph/Documentation~/Property-Types.md

@@ -21,7 +21,7 @@ All properties have the following common parameters in addition to those specifi
 | **Preview Value** | Sets a value to use for preview in the Shader Graph window, only when you set **Scope** to **Global**. |
 | **Show In Inspector** | Displays the property in the material Inspector when enabled.<br/>If you disable this option, it includes an `[HideInInspector]` attribute to the material property (refer to [Properties block reference in ShaderLab](https://docs.unity3d.com/Manual/SL-Properties.html#material-property-attributes) for more details). |
 | **Read Only** | Marks the property as non-editable in the material Inspector by adding the [`PerRendererData`](https://docs.unity3d.com/ScriptReference/Rendering.ShaderPropertyFlags.html) attribute. |
-| **Custom Attributes** | Enables attachment of custom scripted drawers or decorators to extend the material property UI, such as adding static headers or complex controls.<br/>The **Custom Material Property Drawers** sample, available in the Package Manager among other [Shader Graph samples](ShaderGraph-Samples.md), shows how to display a Vector2 as a min/max slider, for example.<br/><br/>**Note**: When you declare the custom functions in the script, make sure to suffix their names with `Drawer` or `Decorator`.<br/><br/>In the list, use **+** or **-** to add or remove entries. Each entry corresponds to a function call which requires the following parameters:<ul><li>**Name**: A shorthened version of the function name, without its `Drawer` or `Decorator` suffix.</li><li>**Value**: The input values for the function as the script expects them.</li></ul>**Note**: A property can only have one drawer at any given time. |
+| **Custom Attributes** | Enables attachment of custom scripted drawers or decorators to extend the material property UI, such as adding static headers or complex controls.<br/>The [Custom Material Property Drawers](Shader-Graph-Sample-Custom-Material-Property-Drawers.md) sample shows how to display a Vector2 as a min/max slider, for example.<br/><br/>**Note**: When you declare the custom functions in the script, make sure to suffix their names with `Drawer` or `Decorator`.<br/><br/>In the list, use **+** or **-** to add or remove entries. Each entry corresponds to a function call which requires the following parameters:<ul><li>**Name**: A shortened version of the function name, without its `Drawer` or `Decorator` suffix.</li><li>**Value**: The input values for the function as the script expects them.</li></ul>**Note**: A property can only have one drawer at any given time. |
 | **Use Custom Binding** | Turns the property into a bound input port for connection to the [**Branch On Input Connection**](Branch-On-Input-Connection-Node.md) node. In the **Label** field, enter the label for the default value that displays on your Subgraph node's port binding in its parent Shader Graph.<br/>This property is available only in sub graphs. |
 
 ## Float

Packages/com.unity.shadergraph/Documentation~/Shader-Graph-Sample-Custom-Lighting-Get-Started.md

@@ -3,7 +3,7 @@
 Use the templates and sub graphs included in the **Custom Lighting** sample to get started with lighting model customization in Shader Graph.
 
 > [!NOTE]
-> To use the **Custom Lighting** templates and sub graphs, you first need to [import the sample in your project](ShaderGraph-Samples.md#add-samples).
+> To use the **Custom Lighting** templates and sub graphs, you first need to [import the sample in your project](ShaderGraph-Samples-Import.md).
 
 ## Start from a shader graph template
 

Packages/com.unity.shadergraph/Documentation~/Shader-Graph-Sample-Custom-Lighting.md

@@ -1,6 +1,4 @@
-# Custom Lighting
-
-![An example scene with custom lighting effects.](images/CustomLightingSample.png) 
+# Custom Lighting sample
 
 Use the additional templates and sub graphs provided in the **Custom Lighting** sample to get started with lighting model customization in Shader Graph.
 

Packages/com.unity.shadergraph/Documentation~/Shader-Graph-Sample-Custom-Material-Property-Drawers.md

@@ -0,0 +1,81 @@
+## Custom Material Property Drawers sample
+
+Learn how to use custom attributes in Shader Graph to improve the display and usability of property controls in the material's Inspector window.
+
+The Custom Material Property Drawers sample includes a shader graph based material set up for adjustable color gradient and noise. This example shows how to achieve the following in the material Inspector UI with Shader Graph:
+
+* Hide or display a basic material color property.
+* Display a Vector2 property as a min/max slider.
+* Display a help box for a property.
+
+## Before you start
+
+To access the Custom Material Property Drawers sample, follow these steps:
+
+1. [Import](ShaderGraph-Samples-Import.md) the Custom Material Property Drawers sample in your project.
+
+1. In the Project window, open the `Assets/Samples/Shader Graph/<your version>/Custom Material Property Drawers` folder.
+
+1. Open the `RemapDrawerExample` shader graph asset.
+
+## Hide or display a property in the material Inspector UI
+
+To hide or display a material property from the shader graph in the material Inspector UI, follow these steps:
+
+1. In the [Shader Graph window](Shader-Graph-Window.md), in the [Blackboard](Blackboard.md), select a property, for example **InnerColor**.
+
+1. In the [Graph Inspector](Internal-Inspector.md), in the **Node Settings** tab, disable **Show in Inspector**.
+
+1. Save the graph.
+
+1. In the Project window, select the `RemapDrawerExample` material variant asset.
+
+1. In the Inspector window, notice that the **InnerColor** property isn't displayed, contrarily to the other properties of the graph.
+
+1. In the [Shader Graph window](Shader-Graph-Window.md), re-enable **Show in Inspector** for the **InnerColor** property.
+
+1. Save the graph.
+
+1. In the Inspector window, notice that the **InnerColor** property is now displayed.
+
+## Display a material property as a min/max range slider
+
+To learn how to display a material property as a min/max range slider in the material Inspector UI, follow these steps:
+
+1. In the [Shader Graph window](Shader-Graph-Window.md), in the [Blackboard](Blackboard.md), select the **Range** property.
+
+1. In the [Graph Inspector](Internal-Inspector.md), in the **Node Settings** tab, notice the following:
+   
+   * The **Custom Attributes** include an entry named **Remap**, which modifies the **Range** property's appearance in the material UI based on a script provided with the sample.
+   * The attribute includes no parameter values for the called function. For more information, refer to the sticky note besides the **Range** property instance in the graph.
+   
+1. In the Project window, open the `Editor` subfolder.
+
+1. Select the `RemapDrawer` C# file.
+
+1. In the Inspector window, notice the following:
+
+   * The C# file includes a set of custom functions named `RemapDrawer` to display a Vector2 as a min/max slider.
+   * The function names include a `Drawer` suffix while in the shader graph the **Range** property excludes this suffix to call the functions.
+
+## Display a help box in the material Inspector UI
+
+To learn how to display a help box in the material Inspector UI, follow these steps:
+
+1. In the [Shader Graph window](Shader-Graph-Window.md), in the [Blackboard](Blackboard.md), select the **NoiseRange** property.
+
+1. In the [Graph Inspector](Internal-Inspector.md), in the **Node Settings** tab, notice the following:
+   
+   * The **Custom Attributes** include an entry named **Remap** (previously described) and a second one named **HelpBox**, which adds a help box to the **NoiseRange** property in the material UI based on a second script provided with the sample.
+   * The two attributes include specific parameter values for the called functions. For more information, refer to the sticky note under the **NoiseRange** property instance in the graph.
+
+1. In the Project window, still in the `Editor` subfolder, select the `HelpBoxDecorator` C# file.
+
+1. In the Inspector window, notice the following:
+
+   * The C# file includes a set of custom functions named `HelpBoxDecorator` to draw a message box in the material UI.
+   * The function names include a `Decorator` suffix while in the shader graph the **NoiseRange** property excludes this suffix to call the functions.
+
+## Additional resources
+
+* [Property attribute reference](Property-Types.md)

Packages/com.unity.shadergraph/Documentation~/Shader-Graph-Sample-Feature-Examples.md

@@ -1,7 +1,9 @@
-# Feature Examples
+# Feature Examples sample
 
 The Shader Graph Feature Examples sample content is a collection of Shader Graph assets that demonstrate how to achieve common techniques and effects in Shader Graph.  The goal of this sample pack is to help users see what is required to achieve specific effects and provide examples to make it easier for users to learn.
 
+Each sample contains notes that describe what the shader does. Most of the shaders have their core functionality in a subgraph, so you can copy and paste them into your own shader graphs.
+
 The sample content is broken into the following categories:
 
  - **Blending Masks** - these samples generate masks based on characteristics of the surface - such as height, facing angle, or distance from the camera.

Packages/com.unity.shadergraph/Documentation~/Shader-Graph-Sample-Node-Reference.md

@@ -0,0 +1,5 @@
+# Node Reference sample
+
+This set of Shader Graph assets provides reference material for the nodes available in the Shader Graph node library.
+
+Each graph contains a description for a specific node, examples of how it can be used, and useful tips. Some example assets also show a break-down of the math that the node is doing. You can use these samples along with the documentation to learn more about the behavior of individual nodes.

Packages/com.unity.shadergraph/Documentation~/Shader-Graph-Sample-Procedural-Patterns.md

@@ -0,0 +1,19 @@
+# Procedural Patterns sample
+
+This collection of Assets showcases various procedural techniques possible with Shader Graph. Use them directly in your Project, or edit them to create other procedural patterns.
+
+This collection includes the following patterns:
+
+* Bacteria
+* Brick
+* Dots
+* Grid
+* Herringbone
+* Hex Lattice
+* Houndstooth
+* Smooth Wave
+* Spiral
+* Stripes
+* Truchet
+* Whirl
+* Zig Zag

Packages/com.unity.shadergraph/Documentation~/Shader-Graph-Sample-Production-Ready.md

@@ -1,8 +1,6 @@
-# Production Ready Shaders
+# Production Ready Shaders sample
 
-The Shader Graph Production Ready Shaders sample is a collection of Shader Graph shader assets that are ready to be used out of the box or modified to suit your needs.  You can take them apart and learn from them, or just drop them directly into your project and use them as they are. The sample also includes a step-by-step tutorial for how to combine several of the shaders to create a forest stream environment.
-
-The sample content is broken into the following categories:
+The Shader Graph Production Ready Shaders sample is a collection of Shader Graph shader assets that are ready to be used out of the box or modified to suit your needs.  You can take them apart and learn from them, or just drop them directly into your project and use them as they are. The sample includes the Shader Graph versions of the HDRP and URP Lit shaders. It also includes a step-by-step tutorial for how to combine several of the shaders to create a forest stream environment.
 
 | Topic | Description   |
 |:------|:--------------|

Packages/com.unity.shadergraph/Documentation~/Shader-Graph-Sample-Terrain.md

@@ -1,4 +1,4 @@
-# Terrain Shaders
+# Terrain Shaders sample
 
 The Terrain Shaders sample shows you how to design your own terrain material solutions and customize them to fit your specific goals and performance budgets. Possibilities include high quality tile repetition break-up solutions, detail mapping, smooth blending with the distant material, parallax mapping, auto materials, triplanar projection, and more.
 

Packages/com.unity.shadergraph/Documentation~/Shader-Graph-Sample-UGUI-Shaders.md

@@ -1,11 +1,10 @@
-# UGUI Shaders
-![The Shader Graph UGUI Shaders: A collection of Shader Graph subgraphs that serve as building blocks for building user interface elements.](images/UIToolsSample.png) 
+# UGUI Shaders sample
 
-The Shader Graph UGUI Shaders sample is a collection of Shader Graph subgraphs that serve as building blocks for building user interface elements. They speed up the process of building widgets, buttons, and backgrounds for the user interface of your project.  Using these tools, you can build dynamic, procedural UI elements that don’t require any texture memory and scale correctly for any resolution screen.
+The Shader Graph UGUI Shaders sample is a collection of Shader Graph subgraphs that you can use to build user interface elements. They speed up the process of building widgets, buttons, and backgrounds for the user interface of your project.  With these tools, you can build dynamic, procedural UI elements that don’t require any texture memory and scale correctly for any resolution screen.
 
 In addition to the subgraphs, the sample also includes example buttons, indicators, and backgrounds built using the subgraphs.  The examples show how the subgraphs function in context and help you learn how to use them.
 
-We have two main objectives with this sample set:
+This sample set covers two main objectives:
 
 
  - Demonstrate Shader Graph’s ability to create dynamic, resolution-independent user interface elements in a wide variety of shapes and styles.