1024programmer Blog Unity3D shader realizes rounded rectangle and circular area_unity already has a rectangle with four sides how to cut rounded corners_scott.cgi’s blog

Unity3D shader realizes rounded rectangle and circular area_unity already has a rectangle with four sides how to cut rounded corners_scott.cgi’s blog

class=”htmledit_views”>

You can use Marc Edwards’ hyperelliptic equation directly calculates the pixel areas of rounded rectangles and circles, and can use parameters to adjust the shape area.




x, y are the coordinates, 5 is the larger the degree of radians, the closer to the rectangle, 60 is the radius coefficient, and normalization conversion is required in the shader. Use this formula to implement the shader as follows:

Shader "Custom/Vignette"
 {
 Properties
 {
 _fade("Opacity", float) = 1
 _intensity ("Intensity", float) = 1
 _offsetX ("OffsetX", float) = 0
 _offsetY ("OffsetY", float) = 0
 _width("Width", float) = 1
 _height ("Height", float) = 1
 _ellipse("Ellipse", float) = 4
 _fuzzy("Fuzzy", float) = 1
 }
 	
 SubShader
 {
 Tags
 {
 "QUEUE"="Transparent"
 "RenderType"="Transparent"
 }
 pass
 {
 ZWrite Off
 Blend SrcAlpha OneMinusSrcAlpha

 CGPROGRAM
 #pragma vertex vert
 #pragma fragment frag
 #include "UnityCG.cginc"

 struct v2f
 {
 float4 vertex : POSITION;
 float2 texcoord : TEXCOORD0;
 };

 struct appdata_t
 {
 float4 vertex : POSITION;
 };

 float _offsetX;
 float_offsetY;
 float _fade;
 float_intensity;
 float_width;
 float_height;
 float _ellipse;
 float_fuzzy;
 			
 v2f vert(in appdata_t v)
 {
 float4 tmpvar_2 = mul(UNITY_MATRIX_MVP, v.vertex);
 float2 tmpvar_3 = (tmpvar_2.xy / tmpvar_2.w);
 				
 float2 tmpvar_1;
 tmpvar_1.x = (tmpvar_3.x + _offsetX);
 tmpvar_1.y = (tmpvar_3.y + _offsetY) * 2.5;
 				
 v2f o;
 o.vertex = tmpvar_2;
 o.texcoord = tmpvar_1;
 				
 return o;
 }

 half4 frag(v2f IN) : COLOR
 {
 half4 col;
 				
 col.xyz = half3(0.0, 0.0, 0.0);
 				
 col.w = clamp
 (
 pow(abs(IN.texcoord.x / 0.5) * _width, _ellipse) +
 pow(abs(IN.texcoord.y / 0.5) * _height, _ellipse),
 0.0,
 1.0
 );
 						
 if (col.w < 1.0f)
 {
 col.w *= _fade * _intensity * _fuzzy;
 }
 else
 {
 col.w *= _fade * _intensity;
 }
 				
 				
 return col;
 }

 ENDCG

 }
 }
 	
 FallBack "Diffuse"
 }

The effect is as follows:




The main idea is to use the formula to calculate the transparency of the highlighted part, and the other areas are completely opaque. The shader provides a variety of parameters to adjust the price, size, brightness, and edge transition effects.

If an existing rectangular texture needs to be de-rounded, the texture data of the area calculated by the formula needs to remain unchanged. The part that is not in the area is not displayed to achieve the purpose of clipping.

This article is from the internet and does not represent1024programmerPosition, please indicate the source when reprinting:https://www.1024programmer.com/unity3d-shader-realizes-rounded-rectangle-and-circular-area_unity-already-has-a-rectangle-with-four-sides-how-to-cut-rounded-corners_scott-cgis-blog/

author: admin

Previous article
Next article

Leave a Reply

Your email address will not be published. Required fields are marked *

Contact Us

Contact us

181-3619-1160

Online consultation: QQ交谈

E-mail: [email protected]

Working hours: Monday to Friday, 9:00-17:30, holidays off

Follow wechat
Scan wechat and follow us

Scan wechat and follow us

Follow Weibo
Back to top
首页
微信
电话
搜索