• Products
  • Solutions
  • Made with Unity
  • Learning
  • Support & Services
  • Community
  • Asset Store
  • Get Unity

UNITY ACCOUNT

You need a Unity Account to shop in the Online and Asset Stores, participate in the Unity Community and manage your license portfolio. Login Create account
  • Blog
  • Forums
  • Answers
  • Evangelists
  • User Groups
  • Beta Program
  • Advisory Panel

Navigation

  • Home
  • Products
  • Solutions
  • Made with Unity
  • Learning
  • Support & Services
  • Community
    • Blog
    • Forums
    • Answers
    • Evangelists
    • User Groups
    • Beta Program
    • Advisory Panel

Unity account

You need a Unity Account to shop in the Online and Asset Stores, participate in the Unity Community and manage your license portfolio. Login Create account

Language

  • Chinese
  • Spanish
  • Japanese
  • Korean
  • Portuguese
  • Ask a question
  • Spaces
    • Default
    • Help Room
    • META
    • Moderators
    • Topics
    • Questions
    • Users
    • Badges
  • Home /
avatar image
Question by crustforever · Oct 01, 2015 at 12:06 AM · uishaderrenderingcanvasrender

How do Image shaders interact with UI Canvas draw order?

Problem

I have a simple 2D lighting setup using two custom shaders (one for lights, one for sprites) attached to Image components in a UI Canvas (introduced in Unity 4.6). When the Canvas is in Render Mode 'Screen Space - Overlay' everything works as intended. However, in Render Mode 'Screen Space - Camera', my light is being drawn behind everything.

Can somebody help me fix my shaders (and/or my camera setup?) so that the light is drawn on top of the background in 'Screen Space - Camera' mode? Please see the reference section below for shader source code!


Example

RENDER MODE OVERLAY -- WORKING AS INTENDED

alt textalt text

RENDER MODE CAMERA -- SOME KIND OF DEPTH ISSUE -- NO LIGHTING:

alt textalt text


Reference: Sprites, Shaders, and Camera

LIGHT SOURCE:

alt text

 Shader "UI Lights/Light"
 {
     Properties
     {
         _MainTex ("Light Texture", 2D) = "white" {}
         _LightColor ("Light Color", Color) = (1.0, 1.0, 1.0, 1.0)
         _LightIntensity ("Light Intensity", Range(0.0, 2.0)) = 1.0
     }
     
     SubShader
     {
         Pass
         {
             Blend DstColor One, Zero One
             
             CGPROGRAM
             #pragma vertex vert
             #pragma fragment frag
             
             //user defined variables
             uniform sampler2D _MainTex;
             uniform float4 _LightColor;
             uniform float _LightIntensity;
             
             //in/out structs
             struct vertexInput
             {
                 float4 vertex : POSITION;
                 float2 uv_MainTex : TEXCOORD0;
             };
             struct vertexOutput
             {
                 float4 vertex : POSITION;
                 float2 uv_MainTex : TEXCOORD0;
             };
             
             //vertex
             vertexOutput vert(vertexInput v)
             {
                 vertexOutput o;
                 o.uv_MainTex = v.uv_MainTex;
                 o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
                 return o;
             }
             
             //fragment
             float4 frag(vertexOutput i) : COLOR
             {
                 float4 lightValue = tex2D(_MainTex, i.uv_MainTex);
                 return _LightIntensity * _LightColor * lightValue;
             }
             
             ENDCG
         }
     }
 }

BACKGROUND:

alt text

 Shader "UI Lights/Lit"
 {
     Properties
     {
         _MainTex ("Sprite Texture", 2D) = "white" {}
     }
     
     SubShader
     {
         Cull Off
         
         Pass
         {
             Blend SrcAlpha OneMinusSrcAlpha
         
             CGPROGRAM
             #pragma vertex vert
             #pragma fragment frag
             
             //user defined variables
             uniform sampler2D _MainTex;
             
             //in/out structs
             struct vertexInput
             {
                 float4 vertex : POSITION;
                 float2 uv_MainTex : TEXCOORD0;
             };
             struct vertexOutput
             {
                 float4 vertex : POSITION;
                 float2 uv_MainTex : TEXCOORD0;
             };
             
             //vertex
             vertexOutput vert(vertexInput v)
             {
                 vertexOutput o;
                 o.uv_MainTex = v.uv_MainTex;
                 o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
                 return o;
             }
             
             //fragment
             float4 frag(vertexOutput i) : COLOR
             {
                 float4 col = tex2D(_MainTex, i.uv_MainTex);
                 return float4(col.rgb / 2.0, col.a);
             }
             
             ENDCG
         }
     }
 }

CAMERA:

alt text

Comment
Crisp_Aardvark
Tomer-Barkan
DanielAtLevelEx

People who like this

3 Show 0
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users

0 Replies

  • Sort: 

Unity Answers is in Read-Only mode

Unity Answers content will be migrated to a new Community platform and we are aiming to launch a public beta by June 9. Please note, Unity Answers is now in read-only so we can prepare for the final data migration.

For more information and updates, please read our full announcement thread in the Unity Forum.

Follow this Question

Answers Answers and Comments

4 People are following this question.

avatar image avatar image avatar image avatar image

Related Questions

Transparent object with look front of all object 0 Answers

Raw image not visible in overlay canvas 0 Answers

Unity 5.2 Canvas component makes the position not to update 2 Answers

How do I create a soft Drop Shadow or Glow in 2D UI? 0 Answers

Can't position instantiated objects on canvas 2 Answers


Enterprise
Social Q&A

Social
Subscribe on YouTube social-youtube Follow on LinkedIn social-linkedin Follow on Twitter social-twitter Follow on Facebook social-facebook Follow on Instagram social-instagram

Footer

  • Purchase
    • Products
    • Subscription
    • Asset Store
    • Unity Gear
    • Resellers
  • Education
    • Students
    • Educators
    • Certification
    • Learn
    • Center of Excellence
  • Download
    • Unity
    • Beta Program
  • Unity Labs
    • Labs
    • Publications
  • Resources
    • Learn platform
    • Community
    • Documentation
    • Unity QA
    • FAQ
    • Services Status
    • Connect
  • About Unity
    • About Us
    • Blog
    • Events
    • Careers
    • Contact
    • Press
    • Partners
    • Affiliates
    • Security
Copyright © 2020 Unity Technologies
  • Legal
  • Privacy Policy
  • Cookies
  • Do Not Sell My Personal Information
  • Cookies Settings
"Unity", Unity logos, and other Unity trademarks are trademarks or registered trademarks of Unity Technologies or its affiliates in the U.S. and elsewhere (more info here). Other names or brands are trademarks of their respective owners.
  • Anonymous
  • Sign in
  • Create
  • Ask a question
  • Spaces
  • Default
  • Help Room
  • META
  • Moderators
  • Explore
  • Topics
  • Questions
  • Users
  • Badges