Why? - How 2D textures render in 3D nodes

[Ronsku]

Hi,

Since working with Zindexes in 2D Cocos Creator games are a bit cumbersome, since it is basically just about rendering order (order of nodes) that decides how it is rendered, I thought it would be nice to use 3D nodes instead.

This sadly didn’t work at all, here is an example that I made. Why couldn’t this be working? I of course get it to work with 3D objects, but why not with 2D as well? or am I doing it wrong?

[huanxinyin]

Not very sure what you want to do, how about your camera setting? Did the setting meets you needs?
Can you provide a test project, let us know what you want to do clearly.

[Ronsku]

@huanxinyin

Not very sure what you want to do

Hi @huanxinyin,
I’m trying to hide the 2D texture behind the other 2D texture with 3D nodes. But even though the red button is above the bomb, the bomb shines through the button for some reason?

I’m just trying to use the camera to hide the bomb behind the button if the bomb is hidden by the button cause of the camera angle.

I can provide test project, but it is literally just 3D nodes and two 2D sprites with different 3D Z-values

[Ronsku]

@huanxinyin
Here is a demo:2d-sprite-in-3d-node.zip (2.3 MB)

You can see the big red wall being in front of the normal wall when looking form the side and you see how the camera is angled:

Viewing the game still looks like this with 2D assets. Even though the red wall should completely cover the vision of the regular brick wall due to having a 3D node with Z-values.

[huanxinyin]

The material of cc.Sprite alway close the depth test, and render with UI index, that is what you see.
I suggest you use 3d mesh to render the 3d object, and depth test has be opened.

[Ronsku]

@huanxinyin
Does this mean you can or cannot use 3D node to create depth to the 2D sprite in some way?
If it is possible to use the 3D depth with these 2D sprites, would you be able to edit the project and show how you would do it?
Would appreciate a lot, cause I have no clue!

Thanks!

[Ronsku]

Any updates here @huanxinyin?

[TiniovyKit]

I supposed you should not. In my project canvas contains all 2d ui that is rendered by 2d ui camera. 3d node I use only for real 3d objects with another 3d camera. To manage your z-index of 2d sprites you should use node hierarchy tree.

[Ronsku]

@TiniovyKit I know how the 2D z-index works, but it would be VERY harndy if I could use a 3D node to place 2D graphics, because the z-indexing in 2D require you to have a flat node hierarchy

[TiniovyKit]

You can create your own 3d sprite shader that uses depth check, and use it instead of builtin 2d sprite, if you want to.

[huanxinyin]

Here is the solution, I hope will help you.

1. enable depth test in shader code:
   

   

2. Give you a custom demo, the only thing I do is copy effect and materials from builtin-2d-sprite, and modify shader to enable depth test (need fix issue-1).
   2d-sprite-enable-depth.zip (1.0 MB)

[Ronsku]

@huanxinyin, wow!

Thank you a LOT for this detailed explanation, custom material and all the time you spent on making this work!

You should have seen my ugly workarounds that I have had to do to create the same effect that I now can do with proper Z-Indexing! This made my super happy!