New UI - Ignore raycast where alpha is 0

So new UI, I have a frame for a panel, and I want the frame to block clicks to components behind it. Of course, the center of the frame is transparent, and contains the contents of the window. The clicks in the transparent area should not be blocked.

Seems obvious, but found no solution in unity.
Canvas group component (for UI elements) and IsPointerOverGameObject() (for game objects) do not take alpha into account and will cause the entire inside of the frame to be blocked as well…

(Edit: See image below. Green area should pass clicks through to components below, while red area should block)

Ideas?

Just for that “transparent” area use stand alone panel and add script where you will be checking alpha:

if(yourobject.getComponent<CanvasGroup>().alpha == 0f)
     yourobject.getComponent<CanvasGroup>().blockRaycast = false;
else
     yourobject.getComponent<CanvasGroup>().blockRaycast = true;

Please check if my spelling is correct cus its from memory :wink:

Here is the solution: use RaycastAll to retrieve all the objects hit, then return the closest object such that the alpha value of the pixel is not 0.

private static RaycastHit? RaycastWithTransparency(Ray ray)
{

    var res = Physics.RaycastAll(ray, float.MaxValue).ToList().OrderBy(h => h.distance);

    foreach (var h in res)
    {
        var col = h.collider;

        Renderer rend = h.transform.GetComponent<Renderer>();
        Texture2D tex = rend.material.mainTexture as Texture2D;
        var xInTex = (int) (h.textureCoord.x*tex.width);
        var yInTex = (int) (h.textureCoord.y*tex.height);
        var pix = tex.GetPixel(xInTex, yInTex);

        if (pix.a > 0)
        {
            //Debug.Log("You hit: " + col.name + " position " + h.textureCoord.x + " , " + h.textureCoord.y);
            return h;
            
        }
    }
    return null;
}