See through effect

pixelmeat

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!!

Harald

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.

Spinebot

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:

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.
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.
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.
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.
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:

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.
Shader Adjustments:
- Ensure you are using Spine's URP shaders.
- Adjust the Render Queue to AlphaTest if necessary.
Example Scene:
- Check the example scene RenderTexture FadeOut Transparency for a practical implementation.

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

Spine Unity Rendering
[Spine URP Shaders UPM Package](https://esotericsoftware.com/spine-unity#URP-Shaders

pixelmeat

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

Harald

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.

pixelmeat

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?

Misaki

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.

pixelmeat

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 🙁

Misaki

pixelmeat Ah, sorry my explanation was not complete. If the texture and material settings are not set appropriately for the Straight alpha texture, the error will not be resolved. See this section of the documentation for the correct settings:
Correct Texture Packer export and Texture and Material import settings

Misaki

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:

Harald

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

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 🙂

Harald

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

@pixelmeat And note that the Universal Render Pipeline/Spine/Skeleton shader is for use with URP without a 2D Renderer, while Universal Render Pipeline/2D/Spine/Skeleton is for URP when using a 2D Renderer.

See the documentation here:
https://esotericsoftware.com/spine-unity-rendering#URP-Shaders-Extension-Package

pixelmeat

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:

Harald

@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.

pixelmeat

Harald
I see this setup in the example scene:

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

Harald

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.

pixelmeat

Harald That's exactly what I meant, thanks!

pixelmeat

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!!

다음 페이지 »