Show only specific part of UI.Image

Unity Engine
1

Hello guys.
I need to reach next effect, and have a big problems with that, even dont know how to reach that.

  1. We have 100% stretched background image inside Canvas.
  2. This image should be invisible by default(set alpha 0, or what).
  3. I have a kinect representation of my body, it is 3d Avatar, without renderers. I do convert the coordinates of this 3d avatar to 2D space, and now,
    I need to get the shape of this avatar, it’s silhouette, and enable the area of image, on this background one, with the shape of my silhouette, so in short words, I would only render the part of ui.Image, where my body, or any 3d object is, with the shape of the body(what is also dynamic, because I can turn hands, or any other parts)

Do you guys have any ideas how to reach that?

First what I was thinking about was UI.Mask, but it is not really, what Im looking for, or do I wrong?
The second what I have in mind - is a shaders, but Im not the spec in it, so dont know, how they would work.

Thanks.

2

A shader would certainly do it, use the screen space position in the fragment program as the texture coordinate lookup for this effect:

589×522 35 KB

Shader "Custom/MaskObject" {
    Properties {
        _MainTex ("Base (RGB)", 2D) = "white" {}
    }
    SubShader {
        Lighting Off
        cull Off
        Zwrite Off
        Fog { Mode Off }
        Tags { "Queue"="Transparent" }
        Pass {
            Blend SrcAlpha OneMinusSrcAlpha
            CGPROGRAM
                #pragma vertex vert
                #pragma fragment frag
                #include "UnityCG.cginc"
       
                sampler2D _MainTex;
       
                struct v2f {
                    float4 pos : SV_POSITION;
                };
               
                v2f vert (appdata_base vInput) {
                    v2f OUT;
                    OUT.pos = mul (UNITY_MATRIX_MVP, vInput.vertex);
                    return OUT;
                }
               
                half4 frag (v2f fInput) : COLOR {
                    return tex2D (_MainTex, float2(fInput.pos.x/_ScreenParams.x , 1-fInput.pos.y/_ScreenParams.y));
                }
            ENDCG
        }
     }
}
3

Should I just create a material with such a schader, put it to an object, and set the texture to shader? tried now with a cube and UI sprite icon on it, not working if I do move object, or just a mouse…

4

yeah, doesnt need ui at all

5

Can I ask you please to upload maybe a build with this or smth more detailed? Somewhy it doesnt work on the latest Unity5 …

6

There is really nothing to it

  • Get an image
  • Create a shader
  • Paste shader code into shader and save
  • Create material from shader
  • Assign image into materials’ texture
  • Create 3d objects
  • Put material on object

Have a small grainy GIF in 5.1.1f1

Of course, it will look better if you use an image with the same aspect ratio as your target device

1 Like
7

First of all thanks a lot for your help with that! Really appreciate that!

Trying to do the same what you do on Mac Yosemite, and it not works, just a white sphere, without any scrolling.
From what I think - the problem is in fInput, maybe it can not read the touchpad data as this fInput, and doesnt render it. Anyways, gonna try that on the windows platform tomorrow in the evening.

Btw, for now from what I see it reads the position of the cursor, but what if I want to change this to position of the sphere, of an object, that is converted in 2D space? how this shader may be modified?
Im really 0 with shaders, so even dont know how to set the params here, that I can access from C# later.

8

It does not read the cursor
fInput is fragment input (for the fragment program)
I can’t really troubleshoot, have you tried it in a build (not editor)?

9

Yeah, in either editor and in the build. Maybe it requires Pro version? My license has expired, so maybe this is an issue?

10

Nah, I’m free user

11

To confirm. Have tested in on my Windows PC. And it works good!
But something strange is with the mac, it is not working on it.
Thanks to this project, that it is for kinect and Windows.
However, thanks a lot Hpjohn! You have done me a great favor, and I hope not only to me!