Awesome

Juan Shader&GraphGUI

Efficient GUI for both ShaderLab and ShaderGraph

Join us on Discord

Consider this page as text instructions

If prefer a video tutorial, you can find it here:

English:

中文:

Or you can find a simple cheat sheet inside the package. Use it alongsidethe demo materials to learn all syntax usage

Want to see new features of the latest version? Please refer to CHANGELOG.

Notes

• Shader may not work in some Unity version, but the GUI will work just fine

• Support for Built-in Render Pipeline, URP and HDRP, but the demo shaders are creating in URP

• Tested with Unity version 2020.3.29f1, 2021.3.15f1 and 2022.3.16f1

• ShaderGUI tested with 2019.3.14f1, but ShaderGraphGUI won't work if Shader Graph version older than 10.0

• Surface Options and Advanced Options are only tested with URP

• Download
  • Download from Asset Store
  • Manually Download
• Getting Started
  • Installing on Shader
  • Installing on Shader Graph
• Shader
  • Folder
  • ConditionFolder
  • ConditionBlock
  • FeatureFolder
  • Texture
  • Remapping
  • QuickSlider
  • Vector
  • TextField
  • Space & Separator
  • Demo
• Shader Graph
  • Folder
  • ConditionFolder
  • ConditionBlock
  • FeatureFolder
  • Texture
  • Remapping
  • Vector
  • ScaleOffset
  • TextField
  • Space & Separator
  • Demo
• Surface Options & Advanced Options
• License

Download

Download from Asset Store

• Search for Juan Shader&GraphGUI in Asset Store and Click "Add to My Assets"

• Inside Unity, go to Package Manager and download Juan Shader&GraphGUI

• Click import to add it to your project

• Currently Pending

Manually Download

• Go to the release page and download Juan_Shader&GraphGUI.unitypackage

• Drag it into your Unity project and click import

Getting Started

Installing on Shader

Add CustomEditor "JuanShaderGUI" to the end of your shader file

Installing on Shader Graph

Add JuanShaderGraph to Custom Editor GUI under Graph Inspector -> Graph Settings

Shader

• All Syntax is case sensitive

• Properties and keywords inside () must strictly match their references

• Condition inside () is case insensitive

• Special commands such as True and HDR are case insensitive

Folder

• Folders must be closed by [Close] syntax

• If only one parameter is given, the parameter will be the name of the Folder

• If the second parameter is True(case insensitive), the Folder's icon will disappear and the Folder becomes a simple block

• If a property or a keyword is given and there's no thrid parameter, the Folder will be drawn if the value is On/1.0/Not-Null (case insensitive)

• If a third parameter is given, it will be used as condition

[Folder(Simple Folder)]

[Texture(_Color)]_MainTex ("Albedo (RGB)", 2D) = "white" {}
[HideInInspector]_Color ("Color", Color) = (1,1,1,1)

[Folder(Nested Folder Style)]
[Close(Nested Folder Style)]

[Close(Simple Folder)]

[Folder(Always Open Folder, True)]
[Toggle]_ShowFolder1("Show Folder 1", Float) = 1.0
[Toggle(_SHOW_BLOCK_TWO)]_HideFolder2("Hide Folder 2", Float) = 1.0 
[Toggle(_SHOW_BLOCK_THREE)]_OpenFolder3("Show Folder 3", Float) = 1.0 
[Toggle(_SHOW_BLOCK_FOUR)]_HideFolder4("Hide Folder 4", Float) = 1.0 
[Texture]_AssignTexToShowFolder5("Assign to Show Folder 5", 2D) = "white"{}
_MakeFloat3ToShowFolder6("Make This Float 3.0 to Show Folder 6", Float) = 1.0
[Close]

[Folder(Condition Folder 1, _ShowFolder1, 1.0)]
[Close]

[Folder(Condition Folder 2, _HideFolder2, OFF)]
[Close]

[Folder(Condition Folder 3, _SHOW_BLOCK_THREE)]
[Close]

[Folder(Condition Folder 4, _SHOW_BLOCK_FOUR, OFF)]
[Close]

[Folder(Condition Folder 5, _AssignTexToShowFolder5)]
[Close]

[Folder(Condition Folder 6, _MakeFloat3ToShowFolder6, 3.0)]
[Close]

How to read it ?

When we find [Folder] syntax, then look for the corresponding [Close] syntax, these two work together to form a complete folder

We can also put a (folder name) after Close to manually pair them up for readability

ConditionFolder

• ConditionFolder has basically the same feauture as Folder with condition above, but with indented GUI style

[Folder(Condition, True)]
[Toggle]_Boolean("Show Folder 1 with Toggle", Float) = 0.0
[Toggle(_SHADER_FEATURE_TWO)]_HideFolder2("Hide Folder 2 with KEYWORD", Float) = 0.0
[Texture]_AssignToShowFolder3("Hide Folder 3 with Texture", 2D) = "white"{}
[Close]

[ConditionFolder(_Boolean)]
_Color1("Color1", Color) = (1,1,1,1)
[Close]

[ConditionFolder(_SHADER_FEATURE_TWO, OFF)]
_Color2("Color2", Color) = (1,1,1,1)
[Close]

[ConditionFolder(_AssignToShowFolder3, OFF)]
_Color3("Color3", Color) = (1,1,1,1)
[Close]

_Float("Float", Range(0, 1)) = 0

ConditionBlock

• Same feature as ConditionFolder but with inline styles

  Syntax	Drawer
  [ConditionBlock(_Property/_KEYWORD)]	Condition Block
  [ConditionBlock(_Property/_KEYWORD, Condition)]	Condition Block with Condition (On/Off, float)

FeatureFolder

• FeatureFolder will draws a toggle in its right side to control a certain shader feature

[FeatureFolder(Feature Folder One, _SHADER_FEATURE_ONE)]
_Color_One("Color One", Color) = (1,1,1,1)
[Close]

[FeatureFolder(Feature Folder Two, _SHADER_FEATURE_TWO)]
_Color_Two("Color Two", Color) = (1,1,1,1)
[Close]

Texture

• If a _KEYWORD is specified, the _KEYWORD will be enabled if the texture is assigned and disabled if texture is null

[Texture]_CommonTex("Common Texture", 2D) = "white"{}

[Texture(_Color)]_MainTex ("Albedo (RGB)", 2D) = "white" {}
[HideInInspector]_Color ("Color", Color) = (1,1,1,1)

[Texture(#_HDRColor, HDR)]_TexWithHDR ("Texture with HDR", 2D) = "white" {}
[HideInInspector]_HDRColor ("HDR Color", Color) = (1,1,1,1)

[Texture(_FloatAfterTex)]_TexWithFloat("Texture with Float", 2D) = "white"{}
[HideInInspector]_FloatAfterTex("Float After Texture", Range(0, 1)) = 0.0

[Texture(#_VectorAfterTex)]_TexWithVector("Texture with Vector", 2D) = "white"{}
[HideInInspector]_VectorAfterTex("Vector After Texture", Vector) = (0,0,0,0)

[Texture(_SHADER_FEATURE)]_TexWithKeyword("Texture with Keyword", 2D) = "white"{}

Remapping

• When using remapping with three Floats, the first Float is just for displaying.

• Min and max value's name should be the first Float's name plus Min or Max" (case sensitive)

• When using remapping with Vector, Vector.x will be min value and Vector.y for max value

• The property's default value will be used as the default min and max value

[Remapping]_FloatRemap ("Float Remapping", Float) = 1.0
[HideInInspector]_FloatRemapMax ("Float Remap Max",Float) = 5.0
[HideInInspector]_FloatRemapMin ("Float Remap Min",Float) = 0.0

[Remapping]_VectorRemap("Vector Remapping", Vector) = (-1,2,0,0)

QuickSlider

• Although we can use Range() to make slider, i would like to implement this to see if it's more convenient for us to change the min and max value on GUI instead of opening code editor everytime

• Not implemented in Shader Graph, because I found changing slider in Shader Graph a lot faster

• If no Range is given, the default range will be 0 to 1

• Syntax has symbol limitation, so we can't make the range negative. If we want a negative range value, we have to change it directly on the editor

[QuickSlider(0.0, 5.0)]_QuickSlider("Quick Slider", Float) = 1.0
[QuickSlider]_QuickSliderDefault("Quick Slider Default", Float) = 1.0
[QuickSlider(0, 5, Int)]_QuickSliderInt("Quick Slider Int", Float) = 1.0

Vector

• Actually we don't need Vector4 syntax to draw a Vector4Field, adding Vector4 drawer is just for the completion of files

[Vector4]_Vector4("Vector4", Vector) = (1,0,0,0)
[Vector3]_Vector3("Vector3", Vector) = (1,0,0,0)
[Vector2]_Vector2("Vector2", Vector) = (1,0,0,0)

TextField

• If no type is specified, the type will falls back to label

• Type is case insensitive

• There's no way to change the font size of info/warning/error box. If we found the font size too small, try using label type which has Unity's default font size

[Text(Also demonstrates space and separator, Label)]
[Folder(Text Field)]
[Text(Text Folder #n Label, Label)]
[Text(Text Folder #n Info, Info)]
[Text(Text Folder #n Warning, Warning)]
[Text(Text Folder #n Error, Error)]
[Close]

[Text(Thats how it looks like ouside #n Sadly in Thats I can not put a single quote after That)]
[Text(Text Folder #n Info, Info)]
[Text(Text Folder #n Warning, Warning)]
[Text(Text Folder #n Error, Error)]

Space & Separator

• Unity has [Space] drawer, but it creates vertical space before the shader property. So I create an [EmptySpace] drawer, which omits the shader property and return a truly empty space. Because sometimes we want to put space or separator between folders not properties

...
[Separator(2)]_Float1("Float1", Range(0, 1)) = 0.0
...
...
...
[EmptySpace]_Float("Float", Range(0, 1)) = 0.0

ShaderGUI Demo

• Simple demo of how all these drawers combined look

• Basically copied from Unity's Lit.shader and change the GUI

• Find this at Shader -> ShaderGUI -> ShaderGUI Demo.shader

Shader Graph

• In HLSL, the properties' references would be better to only contain one underscore in front while names contain consecutive underscores might be reserved

• E.g. &BaseColor's reference sometimes will be __BaseColor by default containing two consecutive underscores (I try to reproduce this situation, but it doesn't happen every time)

• If this happened, We should manually remove one underscore to avoid any unpredictable errors

• Notices that this case doesn't always happen, sometimes Unity gives the reference only one underscore. But if this happened, Shader Graph will report warnings about this but only when these properties are used

Folder

• [$] -> Folder

• Same feature as Shader version

• If condition is not specified, We can put a ! in front of _Property or _KEYWORD to invert condition

• The type of the property doesn't matter as long as it's exposed

• How to read it ? When we found a [$], then look for the corresponding [Close] syntax.

• In Shader Graph, it would be better to put a folder name after [Close] syntax. Because we need a property to implement a certain syntax, so we must make sure every property has different names

ConditionFolder

• [?] -> ConditionFolder

ConditionBlock

• [!] -> ConditionBlock
• Same feature as ConditionFolder but with inline styles

FeatureFolder

• [+] -> FeatureFolder
• When working with Unity version older than 2021.3, we can't use Boolean Keyword. Use boolean instead and make reference uppercase. That's why some demo shaders' GUI are broken if used with older versions

Texture

• All texture will be Thumnail by default
• Use double && before _InlineProperty to hide it if the texture is not given
• If we want a HDR Color, just make the following Color HDR
• If the inline property is a _BOOLEANKEYWORD, it will be enabled if the texture is assigned and disabled is the texture is not given

Remapping

Vector

ScaleOffset

TextField

Space & Separator

• The names here just to make sure every property has different name

ShaderGraphGUI Demo

• Simple demo of how all these drawers combined look

• Find this at Shader -> ShaderGraphGUI -> ShaderGraphGUI Demo.shadergraph

Surface Options & Advanced Options

• If there're properties match Unity's naming convention, Surface Options or Advanced Options will be drawn

• All properties name should match Unity's default properties names

• All corresponding keywords should match Unity's default names

• Dedicated/Special Drawers are removed

• Currently Only support URP, because HDRP has different naming convention and different features

Surface Options Properties

Advanced Options Properties

Keywords

Follow the naming convention below if want to properly enable corresponding features

• _RECEIVE_SHADOWS_OFF

• _SPECULAR_SETUP

• _SURFACE_TYPE_TRANSPARENT

• _ALPHATEST_ON

• _EMISSION (Use this keyword to enable Global Illumination Drawer)

• _ _ALPHAPREMULTIPLY_ON _ALPHAMODULATE_ON

• _SPECULARHIGHLIGHTS_OFF

• _ENVIRONMENTREFLECTIONS_OFF

License

This work is licensed under MIT License.