Render order of primitives attached to UI canvas

I have a situation which is quite hard to explain. Firstly I have a scene which consist of a Screen Space -Camera canvas set at plane distance = 10. Attached to the canvas is a UGUI Raw Image element which is displaying a render target, and a Pie Chart which is a filled-circle created using procedural mesh. Each object are position of top of each other but with different Z-order.(ie textui is place in front of the circle which is place in front of the rawimage). The hierarchy of the objects are as follow:

+ ScreenSpaceCanvas
++ RawImage
++ Panel
+++ PieChart(emptyObject)
++++ TextLabel
++++ ProceduralCircleMesh

The camera is at world position (0,1, -10) with lookAt in the direction of (0,0,1).
The local position of each of the element are as follow:

+ ScreenSpaceCanvas
++ RawImage = (0,0,10)
++ Panel = (0,0, -1)
+++ PieChart = (0,0,-1)
++++ TextLabel = (0,0,-2)
++++ ProceduralCircleMesh = (0,0,0)

So this is the problem I am facing, when the RawImage is active, the UIText in TextLabel does not draw(or maybe is drawn behind the piechart), but then I disabled the rawImage, the text object rendered correctly in front of the circle.

To help isolating the problem, the ProceduralCircleMesh has a custom shader attached to it

Code (CSharp):

1. Shader "Custom/PieChart" {
2.     Properties {
3.         _Color ("Color", Color) = (1,1,1,1)
4.     }
5.     SubShader
6.     {
7.    
8.         Tags { "Queue"="Transparent" "IgnoreProjector"="True" "RenderType"="Transparent" }
9.         Blend SrcAlpha OneMinusSrcAlpha
10.  
11.         Pass
12.         {
13.             Cull off
14.             Zwrite off
15.            
16.             CGPROGRAM
17.             #include "UnityCG.cginc"
18.            
19.             #pragma target 4.0
20.             #pragma vertex vert
21.             #pragma fragment frag
22.            
23.            
24.             half4 _Color;
25.            
26.            
27.             struct VertIn
28.             {
29.                 float4 vertex : POSITION;
30.             };
31.  
32.             struct v2f
33.             {
34.                 float4  pos : SV_POSITION;  
35.             };
36.                            
37.  
38.             v2f vert(VertIn v)
39.             {
40.                 v2f OUT;
41.                
42.                 OUT.pos = mul(UNITY_MATRIX_MVP, v.vertex);
43.        
44.                 return OUT;
45.             }
46.            
47.             half4 frag(v2f i) : SV_TARGET
48.             {          
49.                 return _Color;  
50.             }
51.            
52.             ENDCG
53.  
54.         }
55.     }
56.     FallBack "Diffuse"
57. }

When i change the shader to a opaque shader by modifying the shader to

Code (CSharp):

1.  
2.  
3.        Tags { "RenderType"="Opaque" }
4.  
5.         Pass
6.         {
7.             Cull off
8.             Zwrite On
9.             .
10.             .
11.             .
12.  

The text is rendered correctly in front of the circle.
Hence i suspect that the problem is caused by the conflicting draw order of the circle with the rest of the transparent UI element, but i have no idea how to resolve this.

Sorry for the long post, hope you guys can point me to the right direction

 

Thanks Tim for the info. For the past days, I have been messing around with canvasRenderer and manage to get my piechart to render using the canvasRenderer instead of a mesh renderer. However I am now unable to customize the color of my pie chart like I used to. Previously I am modifying the color properties of my custom shader by:

Code (CSharp):

1. pieSlice.GetComponent<Renderer>().material.SetColor("_Color", color[i]);

Now converting to canvas shader, I am unable to do so. I am aware, from your previous posts, about canvasRenderer not being a renderer but something that pump vertex to the canvas to create a UI mesh. Currently canvasRender have a setColor function but its not working with the custom material that I am using.

So how do I modify the color of the mesh(and in such a way that it works with canvasgroup's alpha) and if it is possible to assign texture to it too?

 

Hi all, I'd like to share with you my plugin to create 2D Primitives.
You can create these primitives

• Circle
• Star
• Rounded square
• Arrow
• Spiral
• N-Sides Polygon
• Gradient Quad
• 4 Corner Gradient Quad

All primitives types are inherited from default Graphic class so it's behave as any canvas element.
The main pros to use those primitives are:

• They are resolution independent;
• Fully animable;
• Lightweight;
  
• Fully configurable;
• Source code included;
• You can use the shapes included in the pack (as a static class Shape2DHelper) for many implementations: spawn objects, emit particles, draw, animation etc.
• Fast and easy to prototype or create UI / UX;

To next version I'm adding support to create 2D Sprite Primitives as well.

Here is the link to the plugin on Asset Store
2D Primitives