Unity3D 에서 불투명한 스파인 리소스가 겹치는 문제

Harald

이 작업을 원할 경우 다음을 확인해야합니다.
If you want to make this work, you have to ensure the following:

1) 메시 내부의 순서 정렬 그리기가 앞뒤로 변경되어야합니다 (Spine은 투명도를 올바르게 처리하기 위해 앞뒤 순서를 사용합니다)
2) ZWrite를 활성화해야합니다.
3) ZTest를 활성화해야합니다.
4) 알파 테스트는 매우 적극적으로 폐기해야하며 1.0 이하의 모든 불투명도는 잘립니다. 그렇지 않으면 이상한 테두리 윤곽 효과가 나타납니다.

1) Draw order sorting inside the mesh needs to be changed to front-to-back (Spine uses back-to-front order to handle transparency correctly)
2) ZWrite needs to be enabled
3) ZTest needs to be enabled
4) Alpha Test needs to discard very agressively, everything below 1.0 opacity should be clipped. Otherwise you would receive strange border outline effects.

컬 모드를컬백 (Cull Back) '으로 설정하여 달성하고자하는 것을 이해하지 못합니다. I do not quite understand what you wanted to achieve by setting cull mode toCull Back`.

하나의 대안은 RenderTexture를 사용하는 것입니다 : https://docs.unity3d.com/Manual/class-RenderTexture.html.
One alternative would be to use a RenderTexture: https://docs.unity3d.com/Manual/class-RenderTexture.html.

RenderTexture를 100 % 불투명도로 렌더링하고 투명도를 적용하지 않고 RenderTexture를 원하는 불투명도로 오버레이하여 RenderTexture를 간단한 투명한 재질로 적용한 간단한 쿼드를 통해 렌더링 할 수 있습니다 (50 % 투명한). 이것은 귀하의 경우에 가장 빠르고 쉬운 해결책이 될 것입니다.

You could render the character to the RenderTexture at 100% opacity (so without the transparency applied yet) and then overlay the RenderTexture to your scene at the desired opacity via a simple quad with the RenderTexture applied at a simple transparent material (lets say 50% transparent). This would be the quickest and easiest solution in your case.

앞으로는 일반적인 페이드 아웃 시나리오를 보여주기 위해 예제 장면을 제공 할 계획입니다.

We are planning to provide an example scene in the future to show common fade-out scenarios.

Harald

친절한 단어를 가져 주셔서 대단히 감사합니다!
Thank you very much for the kind words!

문제에 대한 다른 해결책을 제공하는대로 알려 드리겠습니다.
We will let you know as soon as we can provide another solution for the problem.

titidatiti

Harald wrote
이 작업을 원할 경우 다음을 확인해야합니다.
If you want to make this work, you have to ensure the following:

1) 메시 내부의 순서 정렬 그리기가 앞뒤로 변경되어야합니다 (Spine은 투명도를 올바르게 처리하기 위해 앞뒤 순서를 사용합니다)
2) ZWrite를 활성화해야합니다.
3) ZTest를 활성화해야합니다.
4) 알파 테스트는 매우 적극적으로 폐기해야하며 1.0 이하의 모든 불투명도는 잘립니다. 그렇지 않으면 이상한 테두리 윤곽 효과가 나타납니다.

1) Draw order sorting inside the mesh needs to be changed to front-to-back (Spine uses back-to-front order to handle transparency correctly)
2) ZWrite needs to be enabled
3) ZTest needs to be enabled
4) Alpha Test needs to discard very agressively, everything below 1.0 opacity should be clipped. Otherwise you would receive strange border outline effects.

컬 모드를컬백 (Cull Back) '으로 설정하여 달성하고자하는 것을 이해하지 못합니다. I do not quite understand what you wanted to achieve by setting cull mode toCull Back`.

하나의 대안은 RenderTexture를 사용하는 것입니다 : https://docs.unity3d.com/Manual/class-RenderTexture.html.
One alternative would be to use a RenderTexture: https://docs.unity3d.com/Manual/class-RenderTexture.html.

RenderTexture를 100 % 불투명도로 렌더링하고 투명도를 적용하지 않고 RenderTexture를 원하는 불투명도로 오버레이하여 RenderTexture를 간단한 투명한 재질로 적용한 간단한 쿼드를 통해 렌더링 할 수 있습니다 (50 % 투명한). 이것은 귀하의 경우에 가장 빠르고 쉬운 해결책이 될 것입니다.

You could render the character to the RenderTexture at 100% opacity (so without the transparency applied yet) and then overlay the RenderTexture to your scene at the desired opacity via a simple quad with the RenderTexture applied at a simple transparent material (lets say 50% transparent). This would be the quickest and easiest solution in your case.

앞으로는 일반적인 페이드 아웃 시나리오를 보여주기 위해 예제 장면을 제공 할 계획입니다.

We are planning to provide an example scene in the future to show common fade-out scenarios.

Is there any updates on the subject now?
I meet the same problem when creating a fake shadow for the spine character. I used a camera to render the shadow to a render texture, but found it difficult to place the render texture to the position of the spine character. :tear:

Harald

I'm sorry to say that unfortunately we did not get to this task yet.

Do you have any special requirements that you need your shadow to look like? Please note that there are more efficient ways to create shadows than using the render texture based approach above. You could use any shader with zwrite (depth write) enabled and have the alpha threshold set accordingly.

titidatiti

Harald wrote
I'm sorry to say that unfortunately we did not get to this task yet.

Do you have any special requirements that you need your shadow to look like? Please note that there are more efficient ways to create shadows than using the render texture based approach above. You could use any shader with zwrite (depth write) enabled and have the alpha threshold set accordingly.

Thank you for your reply!
I'm new to shader, and I'm creating fake shadow in a platform game which actually does not have real ground.
Now I'm trying something like this:

Set the original spine character's z-spacing to -0.0001
Copy the mesh filter to the shader in LateUpdate
Use a z-write and z-test shader on shadow
Clip transparency and set color to black where the pixel is not transparent

Then I get something like this:

The texture has outer glow so they are are treated as bigger pieces with transparent border.With the Z-Test on, the transparent part is preventing the pieces behind it to get rendered.
If I set the transparent cutoff to 0, I get something like this:

Is there any solution to achieve something like:

Get the whole spine result
Then use transparent cutoff to the whole texture

Many thanks!

Harald

Sorry, I forgot to mention a few things: you should set:

ZWrite On
ZTest Less

And also enable alpha cutoff by adding the following line (which discards pixels when alpha test fails), this seems to be missing in your shader above:

clip(yourTexture.a - _Cutoff);

With this combination, you should set Z-Spacing to 0 to make sure that everything is rendered at the same depth.

I have just written a shader that does all this for you (and anyone who is interested), please find it attached below.
Using this shader you can set the Color to a transparent black color and set Color Overlay to 1 to get the desired transparent shadow effect. Note that when Color Overlay is less than 1, it will be visible that draw order is actually inverted for this ZTest setup.

After some testing, this shader will most likely be added to the official spine-unity packages. Then later, we could potentially add a Reverse Draw Order parameter at SkeletonRenderer to also draw everything in the correct order without any color overlay.

titidatiti

Harald wrote
Sorry, I forgot to mention a few things: you should set:
ZWrite On
ZTest Less
And also enable alpha cutoff by adding the following line (which discards pixels when alpha test fails), this seems to be missing in your shader above:
clip(yourTexture.a - _Cutoff);
With this combination, you should set Z-Spacing to 0 to make sure that everything is rendered at the same depth.

I have just written a shader that does all this for you (and anyone who is interested), please find it attached below.
Using this shader you can set the Color to a transparent black color and set Color Overlay to 1 to get the desired transparent shadow effect. Note that when Color Overlay is less than 1, it will be visible that draw order is actually inverted for this ZTest setup.

After some testing, this shader will most likely be added to the official spine-unity packages. Then later, we could potentially add a Reverse Draw Order parameter at SkeletonRenderer to also draw everything in the correct order without any color overlay.

Thank you so much! I love Spine not only for it's a wonderful software, but also for such a responsible team!
After comparing you shader code with mine, I found out I've made a mistake of using

c.a = step(_CutOff, c.a);

instead of

clip(baseColor.a - _Cutoff);

which causes the alpha pixels are not really being clipped! :lol:
Now it's working perfectly after setting the _Cutoff value to almost 1! :nerd:

I still have a question about the 'Z-Spacing'. In my understanding, the 'Z-Spacing' makes the pieces of the spine to separate from each other in Z-Axis to get a correct render order.

However, when I set the 'Z-Spacing' to zero, the render order of shadow seems to get messed up:

If I set the value to -0.00001, the problem still occurs with a small probability:

The problem is gone when I set the 'Z-Spacing' to very small value like -0.001.

Is this problem occurs because I'm using a perspective main camera? I've set the camera transparency sort axis to z-axis in my project, but the problem still occurs:

I just want to get an expert reply from you! It's not a big problem for setting the 'Z-Spacing' to -0.001 does not mess up anything. 😃

Many thanks!

Harald

Thanks so much for your kind words! 🙂

I would assume that you are using ZTest LEqual instead of ZTest Less, right?

When it is set to LEqual, you will receive undesired overdraw (double-shadowing) at equal depth, so when there is no Z-Spacing, it will all be at the same depth (= all overlapping shadow areas are incorrectly accepted). When set to a very small value like -0.00001, you have a chance that numerical rounding errors will put two elements on the same depth. Finding a value that is causing no visual problems like -0.001 will always be in the precision range where there is enough numerical precision available so that no two different elements will end up at the same depth.

Note that precision will depend on Z distance between the camera near plane and the rendered element (the vertex position), and also on the distance between near and far plane. So the same Z-Spacing value may be sufficient when the element is very close, but could lead to precision problems when far away. Just keep this in mind so you don't wonder why things suddenly look wrong when placed further back in a scene.

The precise solutions would be the Reverse Draw Order option with Z-Spacing < 0 which is yet to be implemented, or using ZTest Less and Z-Spacing = 0.

titidatiti

Harald wrote
Thanks so much for your kind words! 🙂

I would assume that you are using ZTest LEqual instead of ZTest Less, right?

When it is set to LEqual, you will receive undesired overdraw (double-shadowing) at equal depth, so when there is no Z-Spacing, it will all be at the same depth (= all overlapping shadow areas are incorrectly accepted). When set to a very small value like -0.00001, you have a chance that numerical rounding errors will put two elements on the same depth. Finding a value that is causing no visual problems like -0.001 will always be in the precision range where there is enough numerical precision available so that no two different elements will end up at the same depth.

Note that precision will depend on Z distance between the camera near plane and the rendered element (the vertex position), and also on the distance between near and far plane. So the same Z-Spacing value may be sufficient when the element is very close, but could lead to precision problems when far away. Just keep this in mind so you don't wonder why things suddenly look wrong when placed further back in a scene.

The precise solutions would be the Reverse Draw Order option with Z-Spacing < 0 which is yet to be implemented, or using ZTest Less and Z-Spacing = 0.

Thank you for reply! I'm sorry for replying late.
The ZTest is set to less actually.
When I rotate the fake shadow to (0,0,0), the overdraw does not occur:

When the rotationX is not zero, the overdraw occurs:

According to your explanation, the overdraw should appear because the pieces are not at the same depth when rotated. Maybe I should use scaleY instead rotationX to achieve a similar result when the Z-Spacing is set to 0.
Thank you! 😃

Harald

Hm, rotation by 180 degrees is indeed problematic, didn't think of that.
And yes, your solution of using scaleX would be the proper solution, just be sure to set scale to scaleX = cos(angle), this should do the trick. 🙂

KFM94

Harald wrote
이 작업을 원할 경우 다음을 확인해야합니다.
If you want to make this work, you have to ensure the following:

1) 메시 내부의 순서 정렬 그리기가 앞뒤로 변경되어야합니다 (Spine은 투명도를 올바르게 처리하기 위해 앞뒤 순서를 사용합니다)
2) ZWrite를 활성화해야합니다.
3) ZTest를 활성화해야합니다.
4) 알파 테스트는 매우 적극적으로 폐기해야하며 1.0 이하의 모든 불투명도는 잘립니다. 그렇지 않으면 이상한 테두리 윤곽 효과가 나타납니다.

1) Draw order sorting inside the mesh needs to be changed to front-to-back (Spine uses back-to-front order to handle transparency correctly)
2) ZWrite needs to be enabled
3) ZTest needs to be enabled
4) Alpha Test needs to discard very agressively, everything below 1.0 opacity should be clipped. Otherwise you would receive strange border outline effects.

컬 모드를컬백 (Cull Back) '으로 설정하여 달성하고자하는 것을 이해하지 못합니다. I do not quite understand what you wanted to achieve by setting cull mode toCull Back`.

하나의 대안은 RenderTexture를 사용하는 것입니다 : https://docs.unity3d.com/Manual/class-RenderTexture.html.
One alternative would be to use a RenderTexture: https://docs.unity3d.com/Manual/class-RenderTexture.html.

RenderTexture를 100 % 불투명도로 렌더링하고 투명도를 적용하지 않고 RenderTexture를 원하는 불투명도로 오버레이하여 RenderTexture를 간단한 투명한 재질로 적용한 간단한 쿼드를 통해 렌더링 할 수 있습니다 (50 % 투명한). 이것은 귀하의 경우에 가장 빠르고 쉬운 해결책이 될 것입니다.

You could render the character to the RenderTexture at 100% opacity (so without the transparency applied yet) and then overlay the RenderTexture to your scene at the desired opacity via a simple quad with the RenderTexture applied at a simple transparent material (lets say 50% transparent). This would be the quickest and easiest solution in your case.

앞으로는 일반적인 페이드 아웃 시나리오를 보여주기 위해 예제 장면을 제공 할 계획입니다.

We are planning to provide an example scene in the future to show common fade-out scenarios.

please help me how to Change Draworder sorting inside the mesh.
I tried hard but I couldn't find it 😢

Harald

Without modifying the MeshGenerator code, you could reverse the order of the draw order items in the Skeleton.drawOrder container.
You can access it like this:

var drawOrder = skeletonAnimation.Skeleton.DrawOrder;
// and you should be able to reverse it like this:
drawOrder.Reverse();

Skeleton drawOrder

DarkTI

Seems like these days drawOrder is a private variable already 🙂

Would it be possible to make reversed draw order a parameter of skeleton, similar to Fix Draw Order, in a future version of spine runtime?
As well as make it work during animations too (ie when reversed order is true, the draw order used by playing animations is also reversed).

Harald

Sorry for the confusion. In the spine-csharp runtime skeletonAnimation.Skeleton.drawOrder is an internal parameter, .DrawOrder is the public getter for it (it was like this in 3.8 as well). I have edited the above posting accordingly. As applies to almost any method and attribute, when the official documentation states lowercase first letter, it likely is uppercase in spine-csharp to follow the common C# coding style.

gunspike

I am also having this problem. I try to follow the above, but nothing makes sense.

Could you please attach a video or download a related example? :think: :think:

Harald

A new example component SkeletonRenderTexture has been added to the repository on the 4.0 branch, alongside with a fadeout example scene named 'RenderTexture FadeOut Transparency'. This commit will be merged to 4.1-beta soon.

A new 4.0 spine-unity unitypackage is available for download here as usual:
Spine Unity Download

ftianf

Harald Hello, I need Blend transparency to render to the editor in preview. I have reviewed your 4.0 SkeletonRenderTexture Code and 4.1 SkeletonRenderTexture Code. The 4.0 code causes rendering failure and irreversibility when the editor is paused, while the 4.1 code does not have this issue, but only renders within the Main camera. I am not familiar with rendering, so I do not know how to correct this issue. Looking forward to your reply.

Harald

ftianf The 4.0 code causes rendering failure and irreversibility when the editor is paused

What do you mean by "rendering failure" and "irreversibility "?

[..] but only renders within the Main camera
I am not familiar with rendering, so I do not know how to correct this issue.

I'm not quite sure what issue you want to correct. You should be able to assign a different camera at the targetCamera property of the SkeletonRenderTexture component. Did this not work out as expected?

What are you trying to achieve in general?

다음 페이지 »