UI / HUD how to blend orthographic with perspective

Questions
,
1

Hello everyone!

I have been doing a lot of readying on how best to implement a UI / HUD
There are many different approaches to this I have discovered!

The direction I think I will go with is to use the sprite object as a HUD element, as I have read this is beneficial for letting you continue to user ray casting.

I have also ready that a good way to do this is to use an orthographic camera for setting up these HUD Sprites. Which makes sense for keeping things looking flat.

But after my research I am still confused by something…

If I make a game where the view is through a perspective camera, how do I “layer” that HUD from the orthographic camera on top?

I am working with limited coding knowledge here… :upside_down_face:
Are there two cameras in different scenes and then those scenes are layered on top of one another? Or is it’s that two cameras can be rendered at the same time?

In short, THANK YOU you for explaining how I can use sprites set up in an orthographic view as HUD elements in and Perspective view type game…

1 Like
2

I found a way to easily put orthographic objects in perspectiveCamera, just using this material.

ref: http://www.songho.ca/opengl/gl_projectionmatrix.html

1 Like
3

Thank you! That is not quite what I am looking for. But your message taught me something new!
I think I understand the solution a bit better now, looks like people do layers two scenes on top of each other, one being the HUD scene with the ortho camera.

So then I guess my next question would be does ray-casting work with both scene when layered like this?
So a user could click on a hud element and/or a 3D object in the bottom layered scene

4

My solution above is actually to change the geometry of the orthographicCube through verexShader to let it looks and feels like orthographic.
This solution without using layering, so I don’t have to create multiple scenes, and I don’t need to take extra effort to consider the cross-z-index problem, and should naturally support ray-casting all objects at the same time.

If you do need layering, need to use another solution.

5

this is react but it contains all the math and how you treat these cameras: https://codesandbox.io/s/react-three-fiber-viewcube-py4db

it’s a perspective camera that films the scene, and an orthographic camera as a heads up display. in this case the hud camera films a separate scene, but it could well be the main scene. the ortho cam follows the perspective cam but hooking into its matrix.