Sprite rendering order and perspective camera (again!)

Questions
#1

I have a problem with sprite rendering order when using a perspective camera.

I want to use a perspective camera for a 2d side view platformer in order to have parallax for free. I know I may implement parallax also with an orthographic camera and some scripts shifting the sprites to simulate the distance from the camera. This approach needs a script for any object with the parallax and, for importantly, in my setting there is a lag of 2 frames from go updates and rendering.

So I switched all my project to perspectve camera but I have a problem with rendering order of sprites. Let me describe it. I have a collection with various GO and each GO has various sprites. The sprites have different z values. When I draw the collection on screen the drawing order of the sprites is not respected.

If I understand correctly the sprites are ordered with respect to the z-value of the position of the center of the sprite (no pivot) as seen from the camera. This can result in incorrect order, yes, I understand this. But, when the collection is draw in front of the camera (i.e. the vector from the camera to the GO is perpendicular to the near/far clipping planes) then the sprites should be in the correct order. But, this is not the case and I don’t understand why!

I have read the other posts about the same problem, however it seems to me that they don’t solve my issue. I am using: no depth mask and no depth test. I cannot use depth test since my sprite have a lot of transparency.

My apologizes for the long post and thanks!

Ciao!

1 Like
#2

This would make sense in 3d space with depth testing and simple blending in the render script. I did a test on one of my projects, there are a couple angles the depth test may fail on a sprite, however I believe this is what you are looking to do.

3dalphatest_sprites
3dalphatest_sprites1259Ă—799 161 KB

Try it here: pass : 1234

Download the project :

Hope this helps.

Cheers~

3 Likes
#3

Thanks for sharing this! It is very very interesting how you are blending 3D and sprites!

At the moment I don’t understand if this can help me with my issue with sprite rendering order. Moreover: is your renderer capable of showing sprites that are partially transparent?

On the other hand, now I am using a mix of perspective and orthographic cameras: the perspective one for the background with parallax and the orthographic one for the gameplay action. Indeed the issue I have with sprites and perspective camera is mainly in the collections used as gameplay elements.

This is not the more elegant way but for the moment it is working.

Still I hope someone can give me some further help about the issue.

Ciao!

#4

Could you make a demo project to make it easier to understand your question? Defold sorts sprites (and not only) strictly by z and back-to-front (to respect sprite transparency).

And please put a “thumbs up” in this issue, it is very important for the growth of Defold as a 3d engine - Control sort order of rendered primitives (DEF-2530) · Issue #3625 · defold/defold · GitHub

3 Likes
#5

Thanks for your answer! I will try to make a simple project with the issue, yes.

I voted for the issue #3625.

#6

I suggest that this is not an entirely correct conclusion in the case of a perspective camera. Sprites are sorted by one point only, and there may well be cases when the sprite farther away from the viewer is closer to the camera with its pivot. In the picture r1 is less than r2.

2023-12-02_11-25-49
2023-12-02_11-25-49843Ă—500 22.2 KB

To solve this issue, I can recommend using a depth test with a combination of discarding transparent pixels in the sprite shader.

vec4 color = texture2D(tex0, var_texcoord0.xy) * tint_pm;
if(color.a < 0.1) discard;

Also in some cases, for example the Zelda-like view (2.5D and sprites toward to the camera), a good solution would be to be able to set anchor points for the sprite itself in the atlas. And engine sort such sprites by this anchor, and not just by the center only.

It’s one of my favorite graphic issue ever :slight_smile:
2021-12-16_19-15-24

7 Likes
#7

Many thanks Igor @Dragosha!

What you say about the rendering order is clear to me. But I failed to explain myself well; I wanted to describe the situation where sprite 2 (of your picture) is exactly in front of the camera. In that situation it should be drawn above sprite 1, right?

Also, different instances of the same collection are drawn with different sprite orders even though they are in the same position. This is very strange and should not happen, right? Maybe there is some problem somewhere else in the code… but I can’t find it. So I decided to use a mix of perspective and orthographic camera and so far everything seems fine.

Thanks again for your help and the very clear figure :slight_smile:

#8

No. If you look at that image, you’ll see that the sprite 1 is closet to the camera than sprite 2. Project the position of sprite 1 onto the r2 (the view direction), and I think it may be clearer.

#9

And again I am not able to convey what I think… poor me and poor my english

I understand that in the Dragosha picture sprite 1 is CLOSER to the camera and hence it will be drawn above sprite 2. Clear!

Now consider a DIFFERENT situation. Move the camera so that sprite 2 is ortogonal and not sprite 1. Now sprite 2 is closer and should appear above, right?

#10

Make sure you add a sampler to your sprite materials so that they don’t go weird when rotated flat against the camera.

#11

Thanks, That would help a bit with those blurry mipmap angles.