3d environment with 2d sprites clipping problem

[Tabaqui]

Hi all!
I'm playing with groverburger's g3d library and i'm trying to draw 2d sprites in a 3d environment with a fixed camera (no rotation).

I've noticed that, as the angle between the camera and the environment increases, the sprites become "shorter":

1.png (48.05 KiB) Viewed 3428 times

I've tried rotating them towards the camera with the same angle (billboard approach). When the angle between the camera and the map is low (below 20 degrees) the result is fine but, as the angle increases, the sprites will sink into the walls:

2.png (38.04 KiB) Viewed 3428 times

In order to avoid rendering the whole map i need to use a greater angle (45 degrees would be fine). Is there any technique to avoid this clipping?

Thank you in advance

EDIT: Added the smallest possible .love file with the behaviour explained above

[pgimeno]

That problem is not an easy one to solve. More people seem to have faced that problem with other engines, e.g. https://www.reddit.com/r/gamedev/commen ... ing_issue/

While intuitively the intention seems clear and straightforward, mathematically it's much harder to define, and there are some corner cases where it's hard to tell how it should behave. I don't have a solution, but I have an idea. I'm a bit sceptical that it will work well, though.

The idea assumes that you will always represent the image using a camera whose projection is parallel to the X or Y axes, as it appears to be the case in your image, so before I explain it, I have to ask, is that really the case? That is, will the camera always point straight north, or south, or east, or west, and not e.g. south-west? (I assume it will always have an elevation).

A simpler approach would be to rotate around the centre of the sprite, rather than the feet, to try to to minimize the possibility of penetration. It's not guaranteed to be perfect, but it's probably the simplest. I think I've seen this one used in commercial games.

Edit: I've tuned your example to apply the latter solution, by adding 1 to every Y coordinate in the model and subtracting 1 from every Y coordinate in the char:setTranslation calls. It no longer clips.

[Tabaqui]

That problem is not an easy one to solve. More people seem to have faced that problem with other engines, e.g. https://www.reddit.com/r/gamedev/commen ... ing_issue/

While intuitively the intention seems clear and straightforward, mathematically it's much harder to define, and there are some corner cases where it's hard to tell how it should behave. I don't have a solution, but I have an idea. I'm a bit sceptical that it will work well, though.

The idea assumes that you will always represent the image using a camera whose projection is parallel to the X or Y axes, as it appears to be the case in your image, so before I explain it, I have to ask, is that really the case? That is, will the camera always point straight north, or south, or east, or west, and not e.g. south-west? (I assume it will always have an elevation).

A simpler approach would be to rotate around the centre of the sprite, rather than the feet, to try to to minimize the possibility of penetration. It's not guaranteed to be perfect, but it's probably the simplest. I think I've seen this one used in commercial games.

Edit: I've tuned your example to apply the latter solution, by adding 1 to every Y coordinate in the model and subtracting 1 from every Y coordinate in the char:setTranslation calls. It no longer clips.

Thank you, pgimeno. I've tried your solution and it works fine but with a couple of problems:

• If the sprite is taller clipping will still occur

• Sprites won't appear "centered" inside the tile where they are standing

Right now i'm trying to understand how octopath traveler has been made, and it looks like they are using billboarding too but with a lower camera angle. It seems that they are developing maps in height, placing a background and using a blur effect based on distance to make it "merge" with the map. That would be cool, too bad i've tried to implement it with a shader but without success.

[pgimeno]

Thank you, pgimeno. I've tried your solution and it works fine but with a couple of problems:

• If the sprite is taller clipping will still occur

Yes, that's why I said the technique is not perfect, even if simpler.

• Sprites won't appear "centered" inside the tile where they are standing

It seems to me that that is related to the size of your image. There is a lot of "air" above the head of the sprite, and the centre lies approximately at eye height. This can be easily compensated by defining the height of the pivot per sprite.

Right now i'm trying to understand how octopath traveler has been made, and it looks like they are using billboarding too but with a lower camera angle. It seems that they are developing maps in height, placing a background and using a blur effect based on distance to make it "merge" with the map. That would be cool, too bad i've tried to implement it with a shader but without success.

I've taken a look at a video, since I didn't know the game. With that lower angle, they can afford to use a collision box with a size that covers the footprint of the billboard. With some simple precautions, that's enough to guarantee that the sprite will not interpenetrate anything.