It is a common requirement, but the shaders found generally only consider 1:1 rectangles. These shaders can be used in square images such as head portraits, but when used as rectangular images, rounded corners will deform.
Why Shader
If you use Mask, there will be an additional DrawCall.
Shader transformation
The Shaders found are similar to each other, so you can find one to modify at random. Only the modified part is discussed, and other contents are omitted.
The aspect ratio of the image is introduced as a Shader parameter:
_RatioNum("height / width",Float) = 1
Logically, the UV coordinates of the picture are all 0-1. According to the above aspect ratio, the coordinates of the current point are forcibly mapped to equal proportions:
float _RatioNum; fixed4 frag(v2f IN) : SV_Target { half4 color = xxxxxxxxxxxx; //Previously omitted float width = 1; Float height=_RatioNum;//That is, width * rational. Since the uv width is 1, this step is omitted. float x = IN.texcoord.x; float y = IN.texcoord.y * height; //Judgment cutting, omitted later }
The following content is the same as the original Shader. Judge the four corners. If they belong to the trimming range, set the alpha of the color to 0 (transparent). The code is omitted.
design sketch
Suppose there is a 16:9 operation picture bit, replace the material shader with our modified shader, and the value is modified as follows:
Throw the picture on, and the effect is as follows:
As you can see, when the aspect ratio is introduced, the fillet shader can display normally on the rectangular image. As for the 1:1 square effect, see the white figure in the head of this article.
