Best Method? 3D Model as part of UI Canvas

So working on the GUI for a “Encyclopedia” part of the GUI. It will display info and a model of different units. Got it working mostly, need to work on Camera for model since it isn’t displaying nicely.
Best suggestion seems to be an Ortho camera on the 3D model outside of the Canvas.

Doing research doesn’t seem to have any conclusive answers. Is there a better way to display said model as part of the Canvas or is putting it outside the Canvas with a Camera for only the model the best method?

This is mostly for proof of concept so not worried about doing it real fancy or perfect, just looking if there is a better way to perform what I am looking for?

I think 99% of the time this is done via a render texture.

With uGUI you can physically put game objects in front of the camera with a Camera Space overlay, though I think a render texture is the more universal approach that will work in both uGUI and UI Toolkit.

1 Like

You could use camera stacking and layer masks to render 3D models over the UI Canvas, although this is quite finnicky and makes it difficult to format.

The recommended approach is to create a new Camera for your 3D Model, and assign a Render Texture to it. Then you can apply this render texture to an Image component in your UI.

That way you can stretch, rotate and position your 3D Model (well the render of it at least) inside the Canvas.

2 Likes

Camera stack was what I was using but was a bit messy.

Render Texture did it wonderfully, took a bit of research and experimentation since tutorials I had found were a bit out of date but got it working.

Thanks for the assistance.

2 Likes

if your using mullitple cameras for each model with an output texture → render texture it will have an heavy impact on performance. i would suggest if your using this approach to only render with camera once and then deactivating the camera.

public class DisableUICameraRendering : MonoBehaviour
{
    public bool needsUpdate = true;
    public List<Camera> UICameras = new List<Camera>();

    private void Start()
    {
        if (needsUpdate)
        {
            foreach (Camera c in UICameras)
            {
                c.enabled = true;
                // Render one frame
                c.Render();
                c.enabled = false;
            }
            needsUpdate = false;
        }
    }
}

reactivate the camera if you need to change the model to change or update the render texture

1 Like

yeah, basically reuse the same camera for all your needs, if performance is a concern. I do this too in a 3d inventory