Search Unity

  1. Megacity Metro Demo now available. Download now.
    Dismiss Notice
  2. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

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

Discussion in 'Editor & General Support' started by Zante, Feb 3, 2012.

  1. Zante

    Zante

    Joined:
    Mar 29, 2008
    Posts:
    429
    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:

     
    Last edited: Feb 3, 2012
  2. Krobill

    Krobill

    Joined:
    Nov 10, 2008
    Posts:
    282
    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.
     
  3. Zante

    Zante

    Joined:
    Mar 29, 2008
    Posts:
    429
    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
     
  4. the_motionblur

    the_motionblur

    Joined:
    Mar 4, 2008
    Posts:
    1,774
    Magicka is orthographic and at some points this just irritates the S*** out of me :D

    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.
     
  5. Kelly G

    Kelly G

    Joined:
    Oct 29, 2010
    Posts:
    35
    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.
     
    Last edited: Feb 3, 2012
  6. dasbin

    dasbin

    Joined:
    Jan 14, 2012
    Posts:
    261
    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.
     
    Zante likes this.
  7. dasbin

    dasbin

    Joined:
    Jan 14, 2012
    Posts:
    261
    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.
     
  8. Krobill

    Krobill

    Joined:
    Nov 10, 2008
    Posts:
    282
    @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 ^^
     
  9. Marble

    Marble

    Joined:
    Aug 29, 2005
    Posts:
    1,268
    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?
     
    Last edited: Sep 23, 2016
  10. Marble

    Marble

    Joined:
    Aug 29, 2005
    Posts:
    1,268
    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
     
  11. Nuthael

    Nuthael

    Joined:
    Oct 3, 2012
    Posts:
    1
    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.
     
  12. wondersonic

    wondersonic

    Joined:
    Jan 8, 2012
    Posts:
    62
    @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).
     
  13. CazCore

    CazCore

    Joined:
    Jul 5, 2013
    Posts:
    1
    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.
     
  14. Gekigengar

    Gekigengar

    Joined:
    Jan 20, 2013
    Posts:
    738
    Trust me its not orthographic, played it for more than 10 years.
     
  15. k10czar

    k10czar

    Joined:
    Dec 11, 2013
    Posts:
    1
    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.
     
  16. Zante

    Zante

    Joined:
    Mar 29, 2008
    Posts:
    429
    I'm revisiting the same problem a few years later. Is anyone able to shed light on this issue? : )
     
  17. Eric5h5

    Eric5h5

    Volunteer Moderator Moderator

    Joined:
    Jul 19, 2006
    Posts:
    32,401
    One thing is clear: people should really be attaching images to posts here rather than linking from elsewhere....

    --Eric
     
  18. Marble

    Marble

    Joined:
    Aug 29, 2005
    Posts:
    1,268
    Sorry. I've at least clarified on the post. 2012 was a long time ago!
     
  19. s0urav

    s0urav

    Joined:
    Dec 29, 2016
    Posts:
    1
    Try rotating the sprite by 90 degrees on the x axis!