Search Unity

  1. We are migrating the Unity Forums to Unity Discussions. On July 12, the Unity Forums will become read-only. On July 15, Unity Discussions will become read-only until July 18, when the new design and the migrated forum contents will go live. Read our full announcement for more information and let us know if you have any questions.

Shader Graph UI Image Shader

Discussion in 'UGUI & TextMesh Pro' started by thegreatmiasma, Feb 12, 2019.

  1. thegreatmiasma

    thegreatmiasma

    Joined:
    Mar 27, 2016
    Posts:
    48
    Is it possible to make a shader for an Image(sprite) that does not need a scene light? My shader is black without a light?
     
    wlwl2 likes this.
  2. thegreatmiasma

    thegreatmiasma

    Joined:
    Mar 27, 2016
    Posts:
    48
    Figured it out. At least what I figured out works.
     
  3. oen432

    oen432

    Joined:
    Apr 24, 2015
    Posts:
    40
    Could you post what you did that worked?
     
  4. thegreatmiasma

    thegreatmiasma

    Joined:
    Mar 27, 2016
    Posts:
    48
    . Haven't worked it any more than this though .
     
    NPCsZ, ssojyeti2 and nessirio like this.
  5. leshemamit

    leshemamit

    Joined:
    Feb 16, 2018
    Posts:
    3
    I had issues using Shader graph for a UI Image, finally fixed all the issues and decided to make a tutorial about it.
    besides of the Canvas render mode issues I also had the "Material doesn't have texture property '_MainTex'" error.



    hope you will find it useful
     
  6. noahabannister

    noahabannister

    Joined:
    Oct 12, 2017
    Posts:
    2
    For me, Screen Space - Camera was not an option. Setting the canvas distance close to the near clipping plane introduced pixel jitter. Setting it farther made the UI clip with scene geometry.

    There are two solutions I have found:
    1. Use Screen Space - Camera with custom UI shaders with ZTest set to Always
    2. Edit your custom shader Blend properties

    First, hop on over to https://unity3d.com/get-unity/download/archive and use the drop-downs to grab copies of the built-in shaders. If you look in DefaultResourcesExtra\UI\UI-Default.shader, you can see how the shaders are usually set up for UI.

    Solution 1:
    Once you have a copy of UI-Default.shader, go ahead and change ZTest [unity_GUIZTestMode] to ZTest Always. It should be around line 44. You will then need to create a material using this shader and use it for every UI element on the Screen Space-Camera Canvas to prevent clipping. Then you can set the canvas far enough out to prevent jitter. You will also have to set ZTest Always on your Shader Graph shader.

    Solution 2:
    To create a code version of your Shader Graph, right-click the master node and select, Copy Shader. Then paste it into a new shader file.

    In order to make your Shader Graph render correctly in Screen Space-Overlay mode, you will need to set the blend settings as they are in the Default UI shader. As of this writing, Unlit Shader Graphs set Blend at the Pass level: Blend One Zero, One Zero. We need it at the SubShader level: Blend SrcAlpha OneMinusSrcAlpha. (See line 49 in the code below.)

    If you want Image tinting to work correctly, keep in mind that the Image component leverages vertex colors. You will have to do the blending in your graph, like so: upload_2019-9-25_11-13-48.png

    Your can also add in some of the features from the default UI shader. Below is the code I am using up until the point where the HLSL starts.

    Code (CSharp):
    1. Shader "UI/Pulse"
    2. {
    3.     Properties
    4.     {
    5.         [PerRendererData] _MainTex("Sprite Texture", 2D) = "white" {}
    6.         _Color("Tint", Color) = (1,1,1,1)
    7.        
    8.         [ToggleUI] _Pulse("Pulse", Float) = 1
    9.         _HighlightColor("Highlight Color", Color) = (1,0.6412213,0,1)
    10.         _HighlightFrequency("Frequency ", Float) = 1
    11.         _HighlightStrength("Strength ", Range(0, 1)) = 1
    12.  
    13.         _StencilComp("Stencil Comparison", Float) = 8
    14.         _Stencil("Stencil ID", Float) = 0
    15.         _StencilOp("Stencil Operation", Float) = 0
    16.         _StencilWriteMask("Stencil Write Mask", Float) = 255
    17.         _StencilReadMask("Stencil Read Mask", Float) = 255
    18.  
    19.         _ColorMask("Color Mask", Float) = 15
    20.  
    21.         [Toggle(UNITY_UI_ALPHACLIP)] _UseUIAlphaClip("Use Alpha Clip", Float) = 0
    22.  
    23.     }
    24.     SubShader
    25.     {
    26.         Tags
    27.         {
    28.             "RenderPipeline" = "LightweightPipeline"
    29.             "Queue" = "Transparent"
    30.             "IgnoreProjector" = "True"
    31.             "RenderType" = "Transparent"
    32.             "PreviewType" = "Plane"
    33.             "CanUseSpriteAtlas" = "True"
    34.         }
    35.        
    36.         Stencil
    37.         {
    38.             Ref[_Stencil]
    39.             Comp[_StencilComp]
    40.             Pass[_StencilOp]
    41.             ReadMask[_StencilReadMask]
    42.             WriteMask[_StencilWriteMask]
    43.         }
    44.  
    45.         Cull Off
    46.         Lighting Off
    47.         ZWrite Off
    48.         ZTest[unity_GUIZTestMode]
    49.         Blend SrcAlpha OneMinusSrcAlpha
    50.         ColorMask[_ColorMask]
    51.            
    52.         Pass
    53.         {
    54.             HLSLPROGRAM
     
    chrismarch, Euricius, GCatz and 8 others like this.
  7. WalterKavalri

    WalterKavalri

    Joined:
    Jan 22, 2019
    Posts:
    3
    Thank you! I followed your second route and I updated the ZTest to "ZTest[unity_GUIZTestMode]" and the Blend to "Blend SrcAlpha OneMinusSrcAlpha".

    This worked for an Unlit shader in Unity 2019.3.15f1
     
  8. SBliznitsov

    SBliznitsov

    Joined:
    Mar 13, 2019
    Posts:
    17
    Thank you, noahabannister, for the explanation!
    I also used the second solution and it works correctly for an Unlit shader in Unity 2020.1.17f1.
     
  9. mishakozlov74

    mishakozlov74

    Joined:
    Aug 8, 2018
    Posts:
    144
    Now it's much easier - just select one of Sprite options here

    upload_2021-5-30_1-15-35.png
     
  10. EricFFG

    EricFFG

    Joined:
    May 10, 2021
    Posts:
    198
    is there anything for HDRP that works?
     
  11. EricFFG

    EricFFG

    Joined:
    May 10, 2021
    Posts:
    198
    You can make it work with amplify shader when using a legacy UI / Sprite shader and using a sprite input
    Keep in mind the alpha channel
     
  12. edsludden

    edsludden

    Joined:
    Nov 6, 2018
    Posts:
    6
    It would be good if HDRP supported Sprite Unlit, if it means that I can get my Shadergraph UI shaders to work with HDRP and Screen Space Overlay Canvas. Feel this should just work out of the Box.
     
  13. miracletechteam1

    miracletechteam1

    Joined:
    Sep 18, 2019
    Posts:
    24
    Hi, how to keep it masked by Rect Mask 2D?

    Before using custom shader:
    upload_2021-9-29_17-11-32.png
    After using custom shader:
    upload_2021-9-29_17-12-23.png

    My shader graph:
    upload_2021-9-29_17-14-25.png

    Thank you for helping!
     
  14. miracletechteam1

    miracletechteam1

    Joined:
    Sep 18, 2019
    Posts:
    24
    I did it.
    Don't use Rect Mask 2D.
    Add Mask and Image to the parent gameobject > set image material using your custom material
    upload_2021-9-29_17-49-56.png
     
    JGroxz likes this.
  15. NickAndreev

    NickAndreev

    Joined:
    Jun 5, 2015
    Posts:
    1
    Can you please describe in more detail how you did it? I repeat everything one to one, nothing works for me, the mask still does not work.
     
  16. MagyarPeter

    MagyarPeter

    Joined:
    Nov 28, 2020
    Posts:
    14
    I think I found a solution: set the Z position of your shadergraph UI image to 1000.
    The image is no longer blocked by the world, but it's still visible and works as intended

    (Mics info: canvas is screen space overlay, scales with screen sizel, match width or height, 3d topdown game, unlit opaque shadergraph with alpha-clip, uses the UV to render a noise, unity version: 2022.2.1f1)
     
    Eric-Farraro and EricFFG like this.
  17. PandaArcade

    PandaArcade

    Joined:
    Jan 2, 2017
    Posts:
    132
    If you're following the solutions posted here but still running into problems it's because Unity Shader Graph does not support the creation of shaders for rendering with the canvas renderer(UI). Confirmed here by Unity.

    If you're like me and desperately want this feature added then please vote on it here.
     
  18. EricFFG

    EricFFG

    Joined:
    May 10, 2021
    Posts:
    198
    Why do you want to combine a shader with rect mask 2D?
    Rect mask 2D is a shortcut for not making a shader
    Just add a texture mask to your shader. It looks better and is likely even less expensive