Hi! We are using Unity 2022 with URP 3D and our characters are made in Spine.
I'm trying to determine if we'd be able to implement the effect shown in this tutorial:
Silhouette tutorial

The method works great with opaque objects, just as in the tutorial.

But Spine characters are not opaque, they are transparent. So I tried to change the "Event" to "AfterRenderingTransparents" instead of "AfterRenderingOpaques" and added the object layer to be filtered to the "Transparent Layer Mask" instead of the "Opaque Layer Mask".

Turns out it couldn't be so easy hehehe. The results are just an invisible object behind another.

It is visible when the depth test is set to "Less Equal"

But it does not render as the opaque version when I change the test to "Greater"

As you can see, the character disappears instead of showing the hidden part.

This is the pannel I'm modifying, just as the tutorial suggests, but changing the opaque options to the transparent ones.

I hope someone has tried something similar and can help me. Maybe there's a much simpler way to do this with spine objects and I'm just overcomplicating things?

Anyway, thanks in advance!!

    Related Discussions
    ...

    To achieve the "see-through" effect with Spine characters in Unity, you need to handle transparency and depth sorting carefully. Here are some steps and considerations based on the provided contexts:

    1. Render to a RenderTexture: One effective method is to render your Spine character to a RenderTexture at full opacity and then use this texture in your scene with the desired transparency. This approach avoids the common issue where back parts of the skeleton show through when transparency is applied directly.

    2. Use SkeletonRenderTexture: Spine provides a component called SkeletonRenderTexture which can be used to render the skeleton to a texture. You can then control the opacity of this texture. This method is demonstrated in the example scene RenderTexture FadeOut Transparency.

    3. Shader Adjustments: Ensure you are using the correct shaders for URP. Spine provides URP-compatible shaders which you can find in the Spine URP Shaders UPM package. Make sure not to mix 2D and 3D URP shaders.

    4. Depth and Transparency Settings: When dealing with transparency, you might need to adjust the depth settings. For instance, enabling ZWrite and setting the Render Queue to AlphaTest instead of Transparent can help with depth sorting issues.

    5. Custom Shader: If the built-in solutions do not meet your needs, you might need to create a custom shader. This shader should handle transparency and depth correctly. You can start by modifying existing Spine shaders to suit your requirements.

    Here is a summary of the steps you can follow:

    1. Render to RenderTexture:

      • Use SkeletonRenderTexture to render your Spine character to a texture.
      • Apply this texture to a quad or another object in your scene.
    2. Shader Adjustments:

      • Ensure you are using Spine's URP shaders.
      • Adjust the Render Queue to AlphaTest if necessary.
    3. Example Scene:

      • Check the example scene RenderTexture FadeOut Transparency for a practical implementation.

    For more detailed guidance, you can refer to the following resources:

    pixelmeat It is visible when the depth test is set to "Less Equal"

    But it does not render as the opaque version when I change the test to "Greater"

    Your yellow object seems to be fully in front. If you set it to Less Equal and see everything, setting it to Greater will show the inverse of everything, which is nothing 🙂. So I see nothing unexpected in these two screenshots.

    Oh, maybe the screenshots' angle is misleading. The small yellow object is behind the big one. Here's a better angle:

    It is visible when the depth test is set to "Less Equal"

    Then which depth test did you set to Less Equal? If it's behind, it should not render with Less Equal, so something in your setup or the description is wrong.

    Sorry to take a detour here, but I started getting this error:

    Problematic material setup at Spine GameObject (blob_skeleton):
    Warning: Premultiply-alpha atlas textures not supported in Linear color space!You can use a straight alpha texture with 'PMA Vertex Color' by choosing blend mode 'PMA Vertex, Straight Texture'.

    If you have a PMA Texture, please
    a) re-export atlas as straight alpha texture with 'premultiply alpha' unchecked
    (if you have already done this, please set the 'Straight Alpha Texture' Material parameter to 'true') or
    b) switch to Gamma color space via
    Project Settings - Player - Other Settings - Color Space.

    UnityEngine.Debug:LogWarningFormat (UnityEngine.Object,string,object[])
    Spine.Unity.SkeletonRenderer:Initialize (bool,bool) (at Assets/Spine/Runtime/spine-unity/Components/SkeletonRenderer.cs:508)
    Spine.Unity.SkeletonAnimation:Initialize (bool,bool) (at Assets/Spine/Runtime/spine-unity/Components/SkeletonAnimation.cs:189)
    Spine.Unity.SkeletonRenderer:Awake () (at Assets/Spine/Runtime/spine-unity/Components/SkeletonRenderer.cs:402)
    UnityEditor.EditorApplication:Internal_RestoreLastOpenedScenes ()

    I don't think I can do viable tests until it is solved. What happened? I was just testing different shaders and selected this one:

    Now the character won't render (I disabled all render features and filters to be sure)

    It's just invisible. Its skeleton animation component is showing this warning:

    I tried deleting the character files and reexporting/reimporting from Spine and the error persists. What did I just break?

      pixelmeat As it says there, the error appears when a PMA texture is used in the material but your Unity project's color space is set to Linear. If it is your intention to use the PMA texture, set the Color Space to Gamma in the Player - Other Settings in Project Settings:

      If exporting the textures as PMA itself is an error, uncheck Premultiply alpha in the Texture Packer settings in the Spine Editor and check Bleed instead. You will then be able to export straight alpha textures.

        Misaki
        I haven't touched the PMA option and it was checked (Is this the default?) Now I reexported the character without the PMA option.

        I prefer not to change the color space of the project, as Linear is the default and I don't want to change values that I don't understand hehe.
        Anyways, I reimported the NOT-PMA png to Unity and the error persists.
        Here's the PNG, in case you need to check that it is NOT-PMA.

        The warnings persist 🙁

          pixelmeat

          I haven't touched the PMA option and it was checked (Is this the default?)

          Yes, the PMA option is enabled by default. This is because there are some advantages to using PMA textures.

          • Using PMA textures can reduce draw calls when using the Additive blend mode for skeleton slots.
          • Better results when creating mip maps.
            To understand this, watch the following video from 1:45-4:50:

            Misaki
            Alright! Now I have configured the color space as Gamma and enabled PMA back. The warnings are gone and the character renders if I use the Spine/Skeleton shader.

            But as soon as I change to the Universal Render Pipeline/Spine/Skeleton shader, the character disappears:

            I still have the feeling that something broke in the background, as I had no issues with the Spine URP shaders before. Any ideas?

            BTW, thanks so much for your help so far Misaki 🙂

              pixelmeat I haven't touched the PMA option and it was checked (Is this the default?) Now I reexported the character without the PMA option.

              Note that exporting as PMA was always wrong when using Linear color space then. The warning however will not lead to things not rendering at all, just rendering incorrectly with outline artifacts. If you see nothing, you've likely setup anything completely wrong with your graphics settings or Material settings, or something like that.

              pixelmeat I prefer not to change the color space of the project, as Linear is the default and I don't want to change values that I don't understand hehe.

              If you leave settings at Linear color space, semi-transparent colors will add up differently than what you're used to in Photoshop or other image editors.

              pixelmeat Here's the PNG, in case you need to check that it is NOT-PMA.

              It's impossible to check this png image. An object with a black outline and bleed will look pretty much identical. If you had no black outline, then you've exported it incorrectly.

              pixelmeat I still have the feeling that something broke in the background, as I had no issues with the Spine URP shaders before. Any ideas?

              If you see nothing at all, you've likely messed up your material settings, or any graphics settings in the Project Settings or your Render Pipeline Asset, or with your post-processing settings, etc.

              Best revert to an older state in your version control history before performing the breaking changes. If you don't use any version control software, well, we can just recommend to undo the changes that you've made, and use version control software in the future.

              pixelmeat Alright! Now I have configured the color space as Gamma and enabled PMA back. The warnings are gone and the character renders if I use the Spine/Skeleton shader.

              Glad to hear you've decided to switch to Gamma color space! This will make many things behave more intuitively.

              Harald
              Wow, I really didn't see that coming, the shaders were not working because I had reverted to the 2D renderer and I was still trying to use the 3D shaders. Changed to the 2D ones and it displays right now. I'll continue from here.
              Just one more question for now. Are there versions of the outline shaders for the URP/2D category?
              I mean like this one:

                @pixelmeat Very glad to hear you've found the issue!

                pixelmeat Just one more question for now. Are there versions of the outline shaders for the URP/2D category?

                It's a bit more complicated currently, unfortunately there is no single-shader version available yet. This is planned in this issue ticket:
                EsotericSoftware/spine-runtimes1824
                However in the meantime you can use e.g. the RenderExistingMesh component and the Universal Render Pipeline/Spine/Outline/Skeleton-OutlineOnly shader as described here in the documentation.

                You can find an outline URP example scene Outline Shaders URP.unity in the Samples of the Spine URP Shaders UPM package (installed via Package Manager under the Samples tab), there you can see this setup in action.

                  Harald
                  I see this setup in the example scene:

                  How can I make the outline object be mask-interactive?

                    pixelmeat How can I make the outline object be mask-interactive?

                    By mask-interactive, do you mean the masks in the way of Inside-Mask Outside-Mask options of the Mask Interaction parameter of SkeletonAnimation? If so, that's the Stencil Comparison parameter (_StencilComp in the shader and in the Material properties under debug mode). Values are as follows (as names and parameter int-values):

                    • None - Inside and outside (Default): Always, 8
                    • Inside: LessEqual, 4
                    • Outside: Greater, 5

                    The integer values for each comparison operation can also be found under UnityEngine.Rendering.CompareFunction.

                      I have encountered a new problem now. My prototype is using custom axis sorting, so the scene sprites sort themselves using the Y axis instead of Z. All the characters and ground obstacles are in a sorting layer called onGround, more specifically in position 0 inside that sorting layer.
                      Now that the outline object is working, I need it to render in position 1, inside the onGround layer, so the "see through" silhouette will be visible when the character is behind an obstacle.
                      I've tried using the SortingGroup component, as I think this has worked for me in the past. Is that the right way to force a mesh to sort using the sprite sorting system? It is not working for me right now.

                      What do you think I am doing wrong?
                      Thanks!!

                      I can't delete my last post, so please ignore it. My mask was not in the wrong place. The setup is working as intended.

                      OK! Now I have something really similar to what I was trying to do. The problem is... I don't know why it's working! hahaha
                      Here's the effect in action:

                      The thing I'm not getting is why the shader that I use for the "silhouette" is working correctly inside the masks.
                      These are the shader settings:

                      There's no info there about Stencil Comparison, not even if I look in debug mode. So I don't know how is it working correctly with the Sprite Mask.
                      Here's the rest of the components I'm using to create the silhouette, based on the same components used in the outline method:

                      And that would be all for now, just looking for some enlightenment about why this is working before I happily move on 😃
                      Thanks!

                        pixelmeat There's no info there about Stencil Comparison, not even if I look in debug mode. So I don't know how is it working correctly with the Sprite Mask.

                        Are you sure it's not there in debug mode, named _StencilComp? If you are switching from a previous shader, the keywords are carried over.

                        Your game looks so cute BTW! 8)

                          Harald

                          Oh, I think I found it! Is this the property?

                          I was only looking under the "valid keywords" and "invalid keywords" not under "saved properties", my bad. Too many new things ^^
                          I see that the value is set to 4 which is exactly what I needed for the effect, although I don't know why is it set to this value or even if it was me who set it accidentally. Could I change this value somehow if I needed it?

                          I have a follow up question too. Would it be possible to have a simpler version of this shader that, instead of modifying the texture color via a screen blending effect and an input color, just changed the color value of the texture to the same input color? I'm not a coder, just a tinkerer, and almost had a heart attack when I opened the shader file in Visual Studio :_(

                          Anyway, thanks again for your help and your compliments Harald. The game is still in pre-production and I'm the game designer, so I'm exploring the possibilities of what we can do and what we can't. I'll make sure to keep posting some showcase bits, as the Spine community is always so kind and appreciative of the works of others.

                            pixelmeat I was only looking under the "valid keywords" and "invalid keywords" not under "saved properties", my bad. Too many new things ^^

                            Keywords are for switching between shader variants (active shader branches), properties are actual value paramters.

                            pixelmeat Could I change this value somehow if I needed it?

                            Yes, you see it right in front of you. You can click on the 4 and replace it with e.g. 5 😉.

                            We have just exposed the Stencil Comparison parameter for all URP blend modes shaders (via this commit). These were indeed hidden as they don't use the same custom shader GUI code as built-in-RP blend modes shaders which exposes these properties. Thanks for reporting.

                            A new Spine URP Shaders UPM package is available for download:
                            https://esotericsoftware.com/spine-unity-download

                              Harald That's great! TY

                              I have a follow up question too. Would it be possible to have a simpler version of this shader that, instead of modifying the texture color via a screen blending effect and an input color, just changed the color value of the texture to the same input color? I'm not a coder, just a tinkerer, and almost had a heart attack when I opened the shader file in Visual Studio :_(

                              Any ideas on that? What I have in mind is a simple shader that paints the character in a constant color and has the stencil interaction property.

                                pixelmeat Would it be possible to have a simpler version of this shader that, instead of modifying the texture color via a screen blending effect and an input color, just changed the color value of the texture to the same input color?

                                What do you mean by the last half of the sentence "just changed the color value of the texture to the same input color"? Do you want to output just the tint color in additive blend mode?

                                In general you can quite easily modify existing shaders if you just need to output a constant color. You can create a copy of the .shader file, and rename the name in the first line of the file to your desired name to be displayed in the Materials shader property.

                                Then you can change the line #pragma fragment frag which defines the following method from the included file "../../Include/Spine-Skeleton-ForwardPass-URP.hlsl" to be used:

                                half4 frag(VertexOutput i) : SV_Target{
                                	float4 texColor = tex2D(_MainTex, i.uv0);
                                #if defined(_ZWRITE)
                                	clip(texColor.a * i.color.a - _Cutoff);
                                #endif
                                #if defined(_TINT_BLACK_ON)
                                	return fragTintedColor(texColor, i.darkColor, i.color, _Color.a, _Black.a);
                                #else
                                	#if defined(_STRAIGHT_ALPHA_INPUT)
                                	texColor.rgb *= texColor.a;
                                	#endif
                                	return (texColor * i.color);
                                #endif
                                }

                                Now you can replace the used fragment program function like this in the .shader file:

                                 #pragma fragment yourFunction

                                and below the include statement add your function:

                                #include "../../Include/Spine-Skeleton-ForwardPass-URP.hlsl"
                                
                                half4 yourFunction(VertexOutput i) : SV_Target {
                                	float4 texColor = tex2D(_MainTex, i.uv0);
                                #if defined(_ZWRITE)
                                	clip(texColor.a * i.color.a - _Cutoff);
                                #endif
                                	return float4(i.color.rgb, texColor.a * i.color.a);
                                }

                                  Harald What do you mean by the last half of the sentence "just changed the color value of the texture to the same input color"? Do you want to output just the tint color in additive blend mode?

                                  I'd like the shader to output a single color from an input, without any blending, just the input color and the alpha from the character texture. And the shader should have the stencil interaction property.

                                  I'll try to implement your suggestion and see how far my skills get me 🙂

                                    pixelmeat I'd like the shader to output a single color from an input, without any blending, just the input color and the alpha from the character texture. And the shader should have the stencil interaction property.

                                    Yes, that's exactly what should be achieved by the modifications that I proposed above 🙂.

                                    pixelmeat I'll try to implement your suggestion and see how far my skills get me 🙂

                                    Great. 🙂 If it does not work, please re-read my posting and perform everything litterally as described 😉.

                                      Harald
                                      I tried what you proposed. If I'm understanding correctly, by changing #pragma fragment frag to #pragma fragment constantColorFrag I'm telling the shader to use this new method to paint the image instead of the frag method found in ../../Include/Spine-Skeleton-ForwardPass-URP.hlsl, right?
                                      Just to clarify, I understand that I am not supposed to make any changes to the Spine-Skeleton-ForwardPass-URP.hlsl file.
                                      So, my new shader now looks like this:

                                      Shader "Universal Render Pipeline/2D/Spine/Blend Modes/Skeleton Constant" {
                                      	Properties {
                                      		_Color ("Tint Color", Color) = (1,1,1,1)
                                      		[NoScaleOffset] _MainTex ("MainTex", 2D) = "black" {}
                                      		[Toggle(_STRAIGHT_ALPHA_INPUT)] _StraightAlphaInput("Straight Alpha Texture", Int) = 0
                                      		_Cutoff ("Shadow alpha cutoff", Range(0,1)) = 0.1
                                      		[MaterialToggle(_TINT_BLACK_ON)]  _TintBlack("Tint Black", Float) = 0
                                      		_Black("    Dark Color", Color) = (0,0,0,0)
                                      		[HideInInspector] _StencilRef("Stencil Reference", Float) = 1.0
                                      		[Enum(UnityEngine.Rendering.CompareFunction)] _StencilComp("Stencil Comparison", Float) = 8 // Set to Always as default
                                      	}
                                      
                                      	SubShader {
                                      		Tags { "RenderPipeline" = "UniversalPipeline" "Queue"="Transparent" "IgnoreProjector"="True" "RenderType"="Transparent" }
                                      		LOD 100
                                      
                                      		Fog { Mode Off }
                                      		Cull Off
                                      		ZWrite Off
                                      		Blend One OneMinusSrcColor
                                      		Lighting Off
                                      
                                      		Stencil {
                                      			Ref[_StencilRef]
                                      			Comp[_StencilComp]
                                      			Pass Keep
                                      		}
                                      
                                      		Pass {
                                      			Tags { "LightMode" = "Universal2D" }
                                      
                                      			HLSLPROGRAM
                                      			// Required to compile gles 2.0 with standard srp library
                                      			#pragma prefer_hlslcc gles
                                      			#pragma exclude_renderers d3d11_9x
                                      
                                      			// -------------------------------------
                                      			// Unity defined keywords
                                      			#pragma multi_compile_fog
                                      
                                      			//--------------------------------------
                                      			// GPU Instancing
                                      			#pragma multi_compile_instancing
                                      
                                      			//--------------------------------------
                                      			// Spine related keywords
                                      			#pragma shader_feature _ _STRAIGHT_ALPHA_INPUT
                                      			#pragma shader_feature _TINT_BLACK_ON
                                      			#pragma vertex vert
                                      			#pragma fragment constantColorFrag
                                      
                                      			#undef LIGHTMAP_ON
                                      
                                      			#define USE_URP
                                      			#define fixed4 half4
                                      			#define fixed3 half3
                                      			#define fixed half
                                      			#define APPLY_MATERIAL_TINT_COLOR
                                      			#include "../../Include/Spine-Input-URP.hlsl"
                                      			#include "../../Include/Spine-Skeleton-ForwardPass-URP.hlsl"
                                      			
                                      			half4 constantColorFrag(VertexOutput i) : SV_Target 
                                      			{
                                      				float4 texColor = tex2D(_MainTex, i.uv0);
                                      				#if defined(_ZWRITE)
                                      				clip(texColor.a * i.color.a - _Cutoff);
                                      				#endif
                                      				return float4(i.color.rgb, texColor.a * i.color.a);
                                      			}
                                      
                                      			ENDHLSL
                                      		}
                                      	}
                                      }

                                      With this new shader, I'm getting these results:

                                      The color is still performing some kind of additive effect and the clipping is not taking the alpha into account.

                                      This is the current shader inspector config:

                                        pixelmeat I tried what you proposed. If I'm understanding correctly, by changing #pragma fragment frag to #pragma fragment constantColorFrag I'm telling the shader to use this new method to paint the image instead of the frag method found in ../../Include/Spine-Skeleton-ForwardPass-URP.hlsl, right?

                                        Yes.

                                        pixelmeat Just to clarify, I understand that I am not supposed to make any changes to the Spine-Skeleton-ForwardPass-URP.hlsl file.

                                        Yes. The included Spine-Skeleton-ForwardPass-URP.hlsl file is shared with the original shader that you copied, you don't want to break the original shader.

                                        The color is still performing some kind of additive effect

                                        I thought you want to create a variant of Blend Modes/Skeleton Screen where there is only a constant color instead of the texture color used?

                                        If you want to use normal blending and not screen blend mode, you could either replace the line:

                                        Blend One OneMinusSrcColor

                                        with this:

                                        Blend One OneMinusSrcAlpha

                                        You then also should remove /Blend Modes from the first line which defines the shader name and folder, as it's no blend-mode shader then. Alternatively you can also start from copying Spine-Skeleton-URP-2D.shader and applying the previous changes there.

                                        I just noticed I forgot to premultiply the resulting color, so please also replace:

                                        return float4(i.color.rgb, texColor.a * i.color.a);

                                        with the following:

                                        return i.color * texColor.a;

                                          Harald
                                          It worked!

                                          Thank you so much. I'll try to make a showcase post down the road when we implement the final production effect.
                                          Cheers @Harald!

                                          @pixelmeat Very cool, glad to hear it worked out! Thanks for letting us know.