2D Sprites in a 3D environment - going beyond billboarding

As is well known to many 2D developers who work with Unity, billboarding a sprite, so that it always faces the camera, is the quickest way to ensure that the entirety of the sprite is visible at all times. All 2D graphics have 'square' dimensions, yet the perspective of the camera influences their appearance - in the case of orthographic rendering it becomes more of a rhombus-like shape.



So far, all is well with the world. When the camera is set to perspective rendering, however, the shape of the sprite is also distorted. This is most evident when it appears on the far sides, away from the center focus as shown below.






In the above image we can see billboarding in full effect.

My question is, what are our options for rendering the plane (in the example above it appears as a cube for the sake of clarity) in such a way that all corners are right angles, in perspective (the middle one in the picture above) and regardless of the object's position?

i.e so it looks like this:





The only way I can think of is to render it as a GUITexture (worldtoscreenspace), this complicates things as scaling the texture relative to the proximity of the in-world vector has to be taken into account (for it to seem like an appropriate size).

In simple terms, how can we get 2D sprites to render in the same way as Ragnarok Online?

I haven't seen this addressed yet, possibly because it's difficult to explain.

Thanks for your time!



Edit - Relevant links:

 

Well there's plenty of 2D packages for Unity to easily display 2D sprites without distortion and they all rely on the same basic feature : the use of an orthographic camera.

 

I'd rather not have an orthographic environment as I'm trying to keep away from the isometric feel. Having two cameras, one set to orthographic and one to perspective just gets weird.

:C

 

Magicka is orthographic and at some points this just irritates the S*** out of me

A good example for Isometric 3D and 2D mixing would be the old Breath of Fire series on PSOne. Those also mixed 2D and 3D Isometrically together. They didn't have anything in place for sprite rotation, though.

 

That clip from ragnarok online looks 100% orthographic to me. All Orthographic means is that the geometry is not distorted by the perspective, as it would be in real life. Rhombuses are not necessarily used in orthographic games.

The rhomboid example you gave is an example of an orthographic, but the rhomboid shapes are simply an arbitrary grid that the artist chose. Sometimes, parallelograms are used also. The parallel rectangles that you want are also orthographic.

 

One solution to perspective distortion is to set your perspective camera very far away (like 1000) and use a tiny FOV (1 or 2). This gives you a normal field of vision but flattens everything considerably. Telephoto lens trick learned from photography.

 

On the other hand, it sounds like you really do just want an orthographic camera, but don't realize it. Orthographic does not at all limit you to an isometric view. That as an artistic choice, not a technical one. Just draw your sprites from the perspective you want them seen.
The rhombus is only one choice. Another is perfect squares, just like your drawing.

 

@Kelly G, The ragnarok video of Zante is not rendered with an orthographic camera : there's parallax effect everywhere while the camera moves and I'm quite sure that's it was what he is after. The focal may be small but it's still perspective rendering.

@Zante, if you're just searching for a non isometric feel the easy way is to model everything with a small distorsion making thinks slightly smaller at the base and film it with an ortho camera. You can also create artificially parallax effects with layer of clouds or folliage scrolling faster on top of your setting. That's cheap but it sometimes works.

Now if you're really after the same setup as Ragnarok that may prove a bit trickier. I've one or two ideas but i don't know how easily they can be implemented.

- Placing quad objects is easy on the x and y axis for your billboard, you just have to transform your perspective position into screen space then back in some orthographic space also aligned with the screen.The tricky part is to select the correct Z for each billboard to 'merge' correctly with the depth buffer of the perspective camera. I'm not sure if it's even possible because there would be problem due to the difference of angle between the two vertical axises (the orthographic one and the perspective one). In fact I don't even know if an orthographic camera can draw over a perspective one and share the same Z-buffer (I'll have to try that ^^)

- You could also use billboards rendered with the same perspective camera to avoid any depth and placement problems but map them with screen space texture coordinates to avoid distorsion.

I'll think about that, in fact that's an interesting problem ^^

 

I'm struggling with a similar problem at the moment and thought some of you might have some advice. I'm trying to marry 3D and 2D, and unlike some have no problem with the "isometric" look. My problem is getting 2D assets to sort nicely in Z based on their apparent perspective. An example:

Here's a quick scattering of 2D objects in a 3D environment that looks okay.

<I linked this image externally and the host is no longer available.. sorry!>

But in the scene view the illusion is clear.

<I linked this image externally and the host is no longer available.. sorry!>

That table, because it's "long," extends way off the ground, making it impossible for the character in the scene to appear properly standing 'in front' and 'behind' it when moving across the 3D space of the floor. It looks okay for the other objects because their squarish aspect keeps them from leaping off the landscape.

Any ideas on how this problem can possibly be solved?

 

I solved this by cheating horribly. I set up my own colliders that correspond to the objects' location as if they were 3D objects, then raycast to see if the player is in front or behind them and occlude accordingly with layers. It'll probably be way too hard to create lots of content this way, but we'll see! : P

 

If I understand the problem correctly, what you're battling with is that different objects all face the camera, which means that when they are not centered they have strange angles that show off their not 2D-ness. Perhaps you could have an invisible "core" object that always looks at the camera from directly in front of it, and then just take the angle of that and apply it to everything in the scene? As far as I'm aware that would make the perspective of the camera alter the size of the other objects but not their squareness.

 

@Nuthael: indeed, that could do the trick, but what about colliders? I mean, the now right looking of the object could mislead for collision (since the collider should not rotate).

 

the solution is actually quite simple. instead of making every billboard face toward the camera's position (where each one would face a slightly different direction), you instead make them face the OPPOSITE way that the camera faces.
this way, all billboards point in the same direction as each other, so they don't get distorted by perspective.

 

Trust me its not orthographic, played it for more than 10 years.

 

You are right, its not orthographic, first time I replay the video I was skeptical, but then I realize that isnt orthographic by looking on highest objects, they parallax with elements that are far away, in a orthographic camera this shouldnt occur, right!?
So it seem they use a far perspective camera with low FOV.

 

I'm revisiting the same problem a few years later. Is anyone able to shed light on this issue? : )

 

One thing is clear: people should really be attaching images to posts here rather than linking from elsewhere....

--Eric

 

Sorry. I've at least clarified on the post. 2012 was a long time ago!

 

Try rotating the sprite by 90 degrees on the x axis!