Help to find an asset/solution

Hey. Can anyone please advise me good Outline effect? I tried free assets and basically all that are based on shaders showed me this:

I use Spine for 2D animations, and the problem is that it does not create Sprite but Mesh, which is assembled from a texture atlas. On the screen this is clearly seen in the example of the characters head: the Outline line goes over the area that the Spine API cuts out of the texture atlas, rather than in the picture itself.

There is also a solution in the asset store that partially solves my problem:

Here is this asset:https://assetstore.unity.com/packag...76.2109637591.1570167075-415830096.1561346586
But it is no longer supported, and also does not work on some devices. But the main problem with this asset is performance. On my LG G2, it drop FPS from 60 to 25 (and it doesn’t matter if there are objects in the scene that need to be outlined)

I'm afraid to buy something from paid assets because I can pay money for what you can see on the first screen, but I'm ready to pay for a working (for my Spine objects) asset.


P.S. I also noticed that in Unity 2018 (maybe earlier) Outline Effect was added in the editor. It is clearly visible on the second screen on the right side. Perhaps Unity laid out this effect somewhere or maybe it is in the Unity sources?

 

up

 

There are generally 3 main kinds of outline shaders.

The expanded mesh, the post process, and the in-shader texture sample outline.

The expanded mesh is the one you'll find most of the time, which renders the mesh using a shader that expands the vertices to puff up an object, or uses stencils to exclude the outline if you don't want inner lines. This doesn't work on flat meshes like sprites or spline characters because there's nothing to puff up.

In-shader texture sample outlines work by sampling a texture multiple times with an offset and rendering a solid color where the offset samples have alpha, but the main sprite isn't visible. Works great for single object UI elements or sprites, or even 3D meshes with transparency. But it outlines each "part" separately, so it'd work on your spline mesh, but each body part would have its own outline.

Post processing works great of anything and gets you much more accurate screen space lines than the other options due to working in screen space (which the other two do not). This is actually very similar to the in-shader texture sample method, in some cases exactly the same. The texture being sampled just happens to one rendered to the camera view rather than on the model. More advanced versions allow for a lot of different outline styles. The problem is it's much more expensive, especially on mobile.


So obviously none of those options work. But you can kind of do a version that's a mix of the above 3 techniques.
Render the object as a solid color 4 times with screen space offsets then render the object normally.

Code (csharp):

1. Shader "Unlit/Spine Outline"
2. {
3.     Properties
4.     {
5.         _MainTex ("Texture", 2D) = "white" {}
6.         _OutlineColor ("Outline Color", Color) = (1,1,1,1)
7.         _OutlineWidth ("Outline Width", Range(0, 4)) = 1
8.     }
9.     SubShader
10.     {
11.         Tags { "Queue"="Transparent" "RenderType"="Transparent" }
12.         LOD 100
13.         ZWrite Off
14.         Blend SrcAlpha OneMinusSrcAlpha
15.  
16.         CGINCLUDE
17.         #include "UnityCG.cginc"
18.  
19.         sampler2D _MainTex;
20.         float4 _MainTex_ST;
21.  
22.         fixed4 _OutlineColor;
23.         float _OutlineWidth;
24.  
25.         struct v2fOutline
26.         {
27.             float4 pos : SV_POSITION;
28.             float2 uv : TEXCOORD0;
29.         };
30.  
31.         v2fOutline vertOutline (appdata_base v, float2 offset)
32.         {
33.             v2fOutline o;
34.             o.pos = UnityObjectToClipPos(v.vertex);
35.             o.pos.xy += offset * 2 * o.pos.w * _OutlineWidth / _ScreenParams.xy;
36.             o.uv = TRANSFORM_TEX(v.texcoord, _MainTex);
37.             return o;
38.         }
39.  
40.         fixed4 fragOutline (v2fOutline i) : SV_Target
41.         {
42.             fixed alpha = tex2D(_MainTex, i.uv).a;
43.             fixed4 col = _OutlineColor;
44.             col.a *= alpha;
45.             return col;
46.         }
47.         ENDCG
48.  
49.         Pass
50.         {
51.             CGPROGRAM
52.             #pragma vertex vert
53.             #pragma fragment fragOutline
54.  
55.             v2fOutline vert (appdata_base v)
56.             {
57.                 return vertOutline(v, float2( 1, 1));
58.             }
59.             ENDCG
60.         }
61.  
62.         Pass
63.         {
64.             CGPROGRAM
65.             #pragma vertex vert
66.             #pragma fragment fragOutline
67.  
68.             v2fOutline vert (appdata_base v)
69.             {
70.                 return vertOutline(v, float2(-1, 1));
71.             }
72.             ENDCG
73.         }
74.  
75.         Pass
76.         {
77.             CGPROGRAM
78.             #pragma vertex vert
79.             #pragma fragment fragOutline
80.  
81.             v2fOutline vert (appdata_base v)
82.             {
83.                 return vertOutline(v, float2( 1,-1));
84.             }
85.             ENDCG
86.         }
87.  
88.         Pass
89.         {
90.             CGPROGRAM
91.             #pragma vertex vert
92.             #pragma fragment fragOutline
93.  
94.             v2fOutline vert (appdata_base v)
95.             {
96.                 return vertOutline(v, float2(-1,-1));
97.             }
98.             ENDCG
99.         }
100.  
101.         Pass
102.         {
103.             CGPROGRAM
104.             #pragma vertex vert
105.             #pragma fragment frag
106.  
107.             #include "UnityCG.cginc"
108.  
109.             struct v2f
110.             {
111.                 float4 pos : SV_POSITION;
112.                 float2 uv : TEXCOORD0;
113.                 float4 color : TEXCOORD1;
114.             };
115.  
116.             v2f vert (appdata_full v)
117.             {
118.                 v2f o;
119.                 o.pos = UnityObjectToClipPos(v.vertex);
120.                 o.uv = TRANSFORM_TEX(v.texcoord, _MainTex);
121.                 o.color = v.color;
122.                 return o;
123.             }
124.  
125.             fixed4 frag (v2f i) : SV_Target
126.             {
127.                 return tex2D(_MainTex, i.uv) * i.color;
128.             }
129.             ENDCG
130.         }
131.     }
132. }

 

Thanks for the answer! In truth, I don’t know how shaders are written. Now I’ve sat down to study the official Cg tutorial from Nvidia, I hope it helps me somehow. Perhaps you would recommend any material that teaches how to write shaders?

 

https://www.alanzucconi.com/2015/06/10/a-gentle-introduction-to-shaders-in-unity3d/
https://catlikecoding.com/unity/tutorials/rendering/
https://www.shadertoy.com/

 

Many thanks!

 

@bgolus signed distance fields and only 2 passes for all?

 

Something like my samurai sprite example for the outline pass instead of 4 individual passes? Could work, yes. But has some potential problems for Spine since the the character components aren’t guaranteed to be all of the same resolution, and squash & stretch are common use cases. Could be overcome with

fwidth()

and a wide enough SDF "glow" so scaled parts don't loose their outline. Depends on how much you scale objects.

edit: fix typo

 

very good point!

 

Please tell me, is it possible to render only the character (which will be marked with an Outline layer) on a second, disabled camera?

The fact is that my DragonBones API collects a character from a texture atlas, and I can’t make a normal Outline around the character itself (and not around each part of the body) without resorting to post processing.

I got the idea to wait until the character appears in the frame buffer (already assembled), transfer only the character to another camera, fill the background with a certain color (which will probably be absent in the character's texture) and based on this data I can create an Outline around it , and then return the result back to the main camera.

The problem is that I do not quite understand how can I specifically transfer only a character to another camera, process it there, and then return it back.

 

Yep, totally possible ... except what you're describing is almost exactly the same as what a post process based outline would do, because that's how they work. And it's going to be too slow. A lot of what's slow is that copying and compositing of multiple buffers back and forth which is what you're adding back into the mix.

Did the example shader I posted not work for you? If not, then it would seem the character isn't being rendered as a single mesh. If that's the case you'd need to use two materials with different queues or render orders and render your characters twice. Try taking the shader I posted earlier, remove the last pass, and render that earlier, then render the character normally.

 

As soon as you provided your Outline shader, I immediately ran to check it.
I ran it and saw this:

In addition, the number of parties for four such small zombies was 20. And in the game there will be several dozen, which in total will give several hundred batches. Is there a way to reduce batches?

But since from that moment I read the material that you provided + I searched in some training material myself, I could understand that the thing is that by default Culling is in the Front. After “Cull Off”(for some reason he thinks the belly is a Backface, lol), everything worked.


I was very happy at that point, since you could help me solve one of the problems! I am very grateful to you.(by the way, I will continue to learning shaders in my free time anyway, since this is interesting, although some points are completely incomprehensible to me)

But another problem remained - displaying on top of objects such as buildings. The purpose of this shader in the game is to show that characters are behind buildings or trees (without it, they disappear from view, since the camera is isometric)

I know that there is a Z buffer. If I done this with ZTest Always, then in this case the whole character will overlap the object, not just Outline.

Could you please tell me how to solve this problem?

 

If I understand the shader correctly, it creates a copy behind the character, but a little larger and filled with _OutlineColor color. And if so, then when I try to bring only Outline to the foreground, only the fill will be displayed and the Outline effect will disappear, right?

 

Yep. The outline only exists because the character’s sprite covered up the middle fill. You can use the Frame Debugger window to step through rendering and see each pass render to help you understand things better if you need to.

So, is the goal to only show the outline when behind a wall, or all the time?

For 3D rendering, usually most of the stuff in the scene is opaque with hard edges, so you can rely on ZTest and stencils pretty easily. Sprites are a little harder because everything is usually alpha blended with no ZWrite or hard edges that would allow for easy stencil usage.

For an outline that shows all the time, you could use a stencil based shader that draws after everything else. You’d draw the character once using an alpha tested shader that writes only to the stencil buffer. Then render the 4 offset passes testing against the stencil to exclude it from the center. This means a hard edge on the interior of the outline, but it will work. An alternative would be to do something with destination alpha, which is abusing the mostly ignored alpha channel of the render buffer and careful and creative control of the blend mode. It means a nicer, smooth alpha interior edge. But it also means everything else being rendered needs to careful about what goes into the rendered alpha.

If you want it to only show when behind stuff, that gets more complicated. That probably requires having objects in front of the character write to the stencil as well, probably using alpha tested shaders that only render to the stencil.

 

ZTest Greater ?

 

I think to draw constantly on top of all objects. But if I do ZWrite Always, I get the whole character on top of all the items, but I need only Outline.

 

Sprites don't usually write to the depth, so only rendering order matters.

but ...

The fact ZWrite does anything here confuses me. Does this mean you're using opaque shaders with ZWrite On (or perhaps more accurately without ZWrite Off)?

Note the technique I described in my last post requires the outline be a completely separate shader & material from the character's main material. Basically the render order would be:

1. Render Background Objects (default sprite shader)
2. Render Character (default sprite shader)
3. Render Foreground Objects (default sprite shader)
4. Render Character Outline (custom outline shader)

If your character mesh only has one material index, you can add a second material which will cause the mesh to render twice, once with each material (and pop up a warning in the inspector you can ignore).

Here's some example shaders of the two methods:
Stencil based

Code (csharp):

1. Shader "Unlit/Spine Outline Stencil"
2. {
3.     Properties
4.     {
5.         _MainTex ("Texture", 2D) = "white" {}
6.         _OutlineColor ("Outline Color", Color) = (1,1,1,1)
7.         _OutlineWidth ("Outline Width", Range(0, 4)) = 1
8.     }
9.     SubShader
10.     {
11.         Tags { "Queue"="Transparent" "RenderType"="Transparent" }
12.         LOD 100
13.         ZWrite Off
14.         Blend SrcAlpha OneMinusSrcAlpha
15.  
16.         CGINCLUDE
17.         #include "UnityCG.cginc"
18.  
19.         sampler2D _MainTex;
20.         float4 _MainTex_ST;
21.  
22.         fixed4 _OutlineColor;
23.         float _OutlineWidth;
24.  
25.         struct v2fOutline
26.         {
27.             float4 pos : SV_POSITION;
28.             float2 uv : TEXCOORD0;
29.         };
30.  
31.         v2fOutline vertOutline (appdata_base v, float2 offset)
32.         {
33.             v2fOutline o;
34.             o.pos = UnityObjectToClipPos(v.vertex);
35.             o.pos.xy += offset * 2 * o.pos.w * _OutlineWidth / _ScreenParams.xy;
36.             o.uv = TRANSFORM_TEX(v.texcoord, _MainTex);
37.             return o;
38.         }
39.  
40.         fixed4 fragOutline (v2fOutline i) : SV_Target
41.         {
42.             fixed alpha = tex2D(_MainTex, i.uv).a;
43.             fixed4 col = _OutlineColor;
44.             col.a *= alpha;
45.             return col;
46.         }
47.         ENDCG
48.  
49.         Pass
50.         {
51.             Name "MASK"
52.             Stencil {
53.                 Ref 1
54.                 Pass Replace
55.             }
56.  
57.             CGPROGRAM
58.             #pragma vertex vert
59.             #pragma fragment frag
60.  
61.             #include "UnityCG.cginc"
62.  
63.             struct v2f
64.             {
65.                 float4 pos : SV_POSITION;
66.                 float2 uv : TEXCOORD0;
67.             };
68.  
69.             v2f vert (appdata_full v)
70.             {
71.                 v2f o;
72.                 o.pos = UnityObjectToClipPos(v.vertex);
73.                 o.uv = TRANSFORM_TEX(v.texcoord, _MainTex);
74.                 return o;
75.             }
76.  
77.             void frag (v2f i)
78.             {
79.                 clip(tex2D(_MainTex, i.uv).a - 0.5);
80.             }
81.             ENDCG
82.         }
83.  
84.         Pass
85.         {
86.             Stencil {
87.                 Ref 1
88.                 Comp NotEqual
89.             }
90.  
91.             CGPROGRAM
92.             #pragma vertex vert
93.             #pragma fragment fragOutline
94.  
95.             v2fOutline vert (appdata_base v)
96.             {
97.                 return vertOutline(v, float2( 1, 1));
98.             }
99.             ENDCG
100.         }
101.  
102.         Pass
103.         {
104.             Stencil {
105.                 Ref 1
106.                 Comp NotEqual
107.             }
108.  
109.             CGPROGRAM
110.             #pragma vertex vert
111.             #pragma fragment fragOutline
112.  
113.             v2fOutline vert (appdata_base v)
114.             {
115.                 return vertOutline(v, float2(-1, 1));
116.             }
117.             ENDCG
118.         }
119.  
120.         Pass
121.         {
122.             Stencil {
123.                 Ref 1
124.                 Comp NotEqual
125.             }
126.  
127.             CGPROGRAM
128.             #pragma vertex vert
129.             #pragma fragment fragOutline
130.  
131.             v2fOutline vert (appdata_base v)
132.             {
133.                 return vertOutline(v, float2( 1,-1));
134.             }
135.             ENDCG
136.         }
137.  
138.         Pass
139.         {
140.             Stencil {
141.                 Ref 1
142.                 Comp NotEqual
143.             }
144.  
145.             CGPROGRAM
146.             #pragma vertex vert
147.             #pragma fragment fragOutline
148.  
149.             v2fOutline vert (appdata_base v)
150.             {
151.                 return vertOutline(v, float2(-1,-1));
152.             }
153.             ENDCG
154.         }
155.     }
156. }

Will produce an outline with no interior color, but has a hard interior edge.


Destination Alpha

Code (csharp):

1. Shader "Unlit/Spine Outline Dest Alpha"
2. {
3.     Properties
4.     {
5.         _MainTex ("Texture", 2D) = "white" {}
6.         _OutlineColor ("Outline Color", Color) = (1,1,1,1)
7.         _OutlineWidth ("Outline Width", Range(0, 4)) = 1
8.     }
9.     SubShader
10.     {
11.         Tags { "Queue"="Transparent" "RenderType"="Transparent" }
12.         LOD 100
13.         ZWrite Off
14.         Blend OneMinusDstAlpha DstAlpha
15.         ColorMask RGB
16.  
17.         CGINCLUDE
18.         #include "UnityCG.cginc"
19.  
20.         sampler2D _MainTex;
21.         float4 _MainTex_ST;
22.  
23.         fixed4 _OutlineColor;
24.         float _OutlineWidth;
25.  
26.         struct v2fOutline
27.         {
28.             float4 pos : SV_POSITION;
29.             float2 uv : TEXCOORD0;
30.         };
31.  
32.         v2fOutline vertOutline (appdata_base v, float2 offset)
33.         {
34.             v2fOutline o;
35.             o.pos = UnityObjectToClipPos(v.vertex);
36.             o.pos.xy += offset * 2 * o.pos.w * _OutlineWidth / _ScreenParams.xy;
37.             o.uv = TRANSFORM_TEX(v.texcoord, _MainTex);
38.             return o;
39.         }
40.  
41.         fixed4 fragOutlineMask (v2fOutline i) : SV_Target
42.         {
43.             fixed alpha = tex2D(_MainTex, i.uv).a;
44.             fixed4 col = _OutlineColor;
45.             col.a *= alpha;
46.             return 1 - col.a;
47.         }
48.  
49.         fixed4 fragOutline (v2fOutline i) : SV_Target
50.         {
51.             fixed alpha = tex2D(_MainTex, i.uv).a;
52.             fixed4 col = _OutlineColor;
53.             col.a *= alpha;
54.             return col;
55.         }
56.         ENDCG
57.  
58.         Pass
59.         {
60.             Name "OUTLINEALPHA"
61.             BlendOp Min
62.             ColorMask A
63.  
64.             CGPROGRAM
65.             #pragma vertex vert
66.             #pragma fragment fragOutlineMask
67.  
68.             v2fOutline vert (appdata_base v)
69.             {
70.                 return vertOutline(v, float2( 1, 1));
71.             }
72.             ENDCG
73.         }
74.  
75.         Pass
76.         {
77.             Name "OUTLINEALPHA"
78.             BlendOp Min
79.             ColorMask A
80.  
81.             CGPROGRAM
82.             #pragma vertex vert
83.             #pragma fragment fragOutlineMask
84.  
85.             v2fOutline vert (appdata_base v)
86.             {
87.                 return vertOutline(v, float2(-1, 1));
88.             }
89.             ENDCG
90.         }
91.  
92.         Pass
93.         {
94.             Name "OUTLINEALPHA"
95.             BlendOp Min
96.             ColorMask A
97.  
98.             CGPROGRAM
99.             #pragma vertex vert
100.             #pragma fragment fragOutlineMask
101.  
102.             v2fOutline vert (appdata_base v)
103.             {
104.                 return vertOutline(v, float2( 1,-1));
105.             }
106.             ENDCG
107.         }
108.  
109.         Pass
110.         {
111.             Name "OUTLINEALPHA"
112.             BlendOp Min
113.             ColorMask A
114.  
115.             CGPROGRAM
116.             #pragma vertex vert
117.             #pragma fragment fragOutlineMask
118.  
119.             v2fOutline vert (appdata_base v)
120.             {
121.                 return vertOutline(v, float2(-1,-1));
122.             }
123.             ENDCG
124.         }
125.  
126.         Pass
127.         {
128.             Name "CENTERMASK"
129.             ColorMask A
130.             Blend Zero One, One OneMinusSrcAlpha
131.  
132.             CGPROGRAM
133.             #pragma vertex vert
134.             #pragma fragment frag
135.  
136.             #include "UnityCG.cginc"
137.  
138.             struct v2f
139.             {
140.                 float4 pos : SV_POSITION;
141.                 float2 uv : TEXCOORD0;
142.             };
143.  
144.             v2f vert (appdata_full v)
145.             {
146.                 v2f o;
147.                 o.pos = UnityObjectToClipPos(v.vertex);
148.                 o.uv = TRANSFORM_TEX(v.texcoord, _MainTex);
149.                 return o;
150.             }
151.  
152.             fixed4 frag (v2f i) : SV_Target
153.             {
154.                 return tex2D(_MainTex, i.uv);
155.             }
156.             ENDCG
157.         }
158.  
159.         Pass
160.         {
161.             Name "OUTLINECOLOR"
162.             CGPROGRAM
163.             #pragma vertex vert
164.             #pragma fragment fragOutline
165.  
166.             v2fOutline vert (appdata_base v)
167.             {
168.                 return vertOutline(v, float2( 1, 1));
169.             }
170.             ENDCG
171.         }
172.  
173.         Pass
174.         {
175.             Name "OUTLINECOLOR"
176.             CGPROGRAM
177.             #pragma vertex vert
178.             #pragma fragment fragOutline
179.  
180.             v2fOutline vert (appdata_base v)
181.             {
182.                 return vertOutline(v, float2(-1, 1));
183.             }
184.             ENDCG
185.         }
186.  
187.         Pass
188.         {
189.             Name "OUTLINECOLOR"
190.             CGPROGRAM
191.             #pragma vertex vert
192.             #pragma fragment fragOutline
193.  
194.             v2fOutline vert (appdata_base v)
195.             {
196.                 return vertOutline(v, float2( 1,-1));
197.             }
198.             ENDCG
199.         }
200.  
201.         Pass
202.         {
203.             Name "OUTLINECOLOR"
204.             CGPROGRAM
205.             #pragma vertex vert
206.             #pragma fragment fragOutline
207.  
208.             v2fOutline vert (appdata_base v)
209.             {
210.                 return vertOutline(v, float2(-1,-1));
211.             }
212.             ENDCG
213.         }
214.     }
215. }

No interior color, soft interior edge!
Also twice as many passes, and requires the render target alpha be pure white before it renders. Need to make sure camera clears to a color with 100% alpha, and nothing else is writing anything but white either.

 

i did not read carefully enough... sorry.

 

Thank you very much! Here is the result I wanted to get:

Please tell me, do you have a Patreon or something like that?