3d place canvas getting extremely bright when viewed from extreme angle of incidence

Unity Engine
, ,
1

I have a problem when viewing a 3d placed canvas + TextMeshProUGUI with a near infinite angle of incidence. It get’s very bright, as seen in the screenshot below. This is a simple object with 4 canvas’s rotated around it to display a stats. I have HDR + bloom, so I’m assuming this is a result of very high HDR color values for the few pixels visible on the canvas, resulting in a crazy glow around them.

I’m at a loss on what the cause of this may be and how to go about resolving. Any suggestions?

If this is useful - this is how I’m setting up the Canvas:

        for (int i = 0; i < 4; i++)
        {
            mPlacementCanvas.Add(null);

            GameObject goCanvas = new GameObject("PlacementCanvas");
            mPlacementCanvas[i] = goCanvas.AddComponent<Canvas>();
            mPlacementCanvas[i].transform.SetParent(this.transform, false);
            mPlacementCanvas[i].renderMode = RenderMode.WorldSpace;
            goCanvas.AddComponent<CanvasScaler>();
            goCanvas.AddComponent<GraphicRaycaster>();
            RectTransform rt = goCanvas.GetComponent<RectTransform>();
            rt.position = new Vector3(400f, 35f, 400f);
            rt.sizeDelta = new Vector2(12f, 6f);

            GameObject goText = new GameObject();
            goText.transform.parent = mPlacementCanvas[i].transform;
            goText.transform.localPosition = Vector3.zero;
            CanvasRenderer cr = goText.AddComponent<CanvasRenderer>();
            TextMeshProUGUI tmp = goText.AddComponent<TextMeshProUGUI>();
            RectTransform trt = goText.GetComponent<RectTransform>();
            trt.sizeDelta = Vector2.zero;
            trt.anchorMin = Vector2.zero;
            trt.anchorMax = new Vector2(1f, 1f);
            trt.pivot = new Vector2(.5f, .5f);
            tmp.font = mOverlord.mUIManager.TextMeshProFontAsset;
            tmp.fontSize = 2f;
            tmp.alignment = TextAlignmentOptions.Center;
            tmp.text = "Testing";
        }
        mPlacementCanvas[0].transform.Rotate(0, -90f, 0);
        mPlacementCanvas[1].transform.Rotate(0, 90f, 0);
        mPlacementCanvas[2].transform.Rotate(0, 180f, 0);
2

Not that this will necessarily fix the issue, but have you considered just using 3D TMP text objects rather than canvases?

All I can think, looking at the image, is that you somehow have your text rendered as ‘additive’. When the canvas is almost perpendicular to the screen, all the edge-on characters will pile up on the same pixels, with the result you’re seeing.

EDIT: After doing some pixel-peeping, it doesn’t look as though you are rendering the text additively. There are also three regularly-spaced black dots in the middle of all that bloom, which is a bit odd.

3

I had not looked into 3D TMP text objects, I’ll add that to my list to look into at some point.

You are correct, not using additive blending. Undoubtedly those 3 black dots are the source of all that bloom, they are always in the center.

Upon playing around with it more, it seems to stem from the ‘TextMeshPro/Distance Field’ shader. If I remove outline thickness, it goes away. Something is causing the shader to go nuts and produce a crazy high color value.