3D masking

UI UGUI
1

I want to add 3D objects with 3D perspective to a UI, as they will be part of a selectable array.

The list contains 3D objects (which can be clicked), with and icon and some text.

Getting a 3D model to render on a Screen Space Canvas is easy enough.
Simply put the 3D object in the hierarchy and give it a rect transform.

But the Mask (even the new on in 5.2 beta) does not handle 3D objects at all.

So I set up a render texture.
This solved the clipping issue, but deals poorly with resolution changes (the camera clicks are misaligned).

Has anyone been able to get 3D objects to ‘just work’ as part of a canvas?

2

This seems to solve the inaccuracy of the render texture quite nicely.
Still a bit of a bummer to use a second camera and a second canvas in order to get the desired effect.

Add it to the RawImage and set up a second canvas with it’s own camera.
Hook up the render texture to both as well.

using UnityEngine;
using System.Collections;
using UnityEngine.UI;
using UnityEngine.EventSystems;

[RequireComponent(typeof(RawImage))]
public class MatchRenderSize : UIBehaviour {

    public RenderTexture texture;
    public Camera renderCamera;
    public Canvas canvas;

    private RawImage buf;
    public RawImage rawImage { get { if (buf == null) buf = GetComponent<RawImage>(); return buf; } }

    public Vector2 size;

    protected override void Start() {
        OnRectTransformDimensionsChange();
        base.Start();
    }

    protected override void OnRectTransformDimensionsChange() {
        Vector3[] fourCorners = new Vector3[4];

        Rect points = RectTransformUtility.PixelAdjustRect(rawImage.rectTransform, buf.canvas);

        //rectTransform.GetWorldCorners(fourCorners);

        //for (int i = 0; i < 4; i++) {
        //    fourCorners[i] = mainCamera.WorldToScreenPoint(fourCorners[i]);
        //}

        //var width = Screen.width * fourCorners[]
        size = new Vector2(points.width, points.height);

        if (canvas != null) {
            var rct = canvas.GetComponent<RectTransform>();
            rct.sizeDelta = size;
            rct.hasChanged = true; //<-- forces an update of some kind?
        }

        texture.Release();
        texture = new RenderTexture(Mathf.CeilToInt(size.x), Mathf.CeilToInt(size.y), texture.depth);
        if (renderCamera != null) {
            renderCamera.targetTexture = texture;
        }
        buf.texture = texture;

//not sure what happens in here, should it go first? last? Seems fine to keep it as last
        base.OnRectTransformDimensionsChange();
    }
}
3

Hey can you elaborate on your implementation? I’m trying to do something similar and I’m a little lost when you reference using a render texture for the 3D game objects to be properly masked by scrolling UI.

4

create a rendertexture
create a second camera and set it render into the rendertexture
now create a layer just for the UI & 3D elements you want to clip

in your original canvas add a mask with the shape you want to clip then add a child with rawimage.
Set the rawimage to the rendertexture.
Add the above script.

It still seems 5.1 does not handle resizing properly with the above script (needs a bit of experimentation).
It was working fine in the 5.2 beta, so I am not that worried about it for now.
It seems to handle the initial resolution just fine, so perhaps disabling and enabling the canvas/camera/rawimage would be good enough.

I used the scrolling rect on the second canvas, this way that camera handles scrolling without needing to render the entire width/height of the items.