Unity shader 实现圆角矩形

已于 2024-09-02 10:33:54 修改
阅读量8.4k 收藏 25
点赞数 8
分类专栏： Unity工具篇 文章标签： unity shader 圆角矩形 圆角 shaderlab
于 2022-01-20 14:22:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yupu56/article/details/122600360
版权

一.前言

很多情况下我们需要给矩形的图片添加圆角，如果每次都让美术处理，又有些繁琐，所以我们今天就使用shader自己实现一个圆角矩形的功能，如下图所示
在这里插入图片描述
在这里插入图片描述

二.实现原理

把图片拆分成如上图所示的几个不同结构（1中间的一个十字区域，2四个角分别一个1/4圆形区域），我们只需要计算出每个像素的UV在哪个区域，就可以判断是否需要渲染

1.调整uv范围从(0,1)到(-0.5,0.5)，即图片uv原点从左下角到中心点

	o.adaptUV = v.texcoord
了解本专栏 订阅专栏 解锁全文 超级会员免费看
TxNet.Ltd.
关注
专栏目录
订阅专栏
unity shader 处理圆角矩形进度条
frankxixu的专栏
01-03 966
Shader "Custom/BloodShader" { Properties{ _MainTex("Base (RGB)", 2D) = "white" {} _RADIUSBUCE("_RADIUSBUCE", Range(0,0.5)) = 0.2 _WidthDevideHeight("WidthDevideHeight", Float) = 8.889//宽 / 长 } SubShader { pas...
Unity3D shader 实现圆角矩形和圆形区域
scott.cgi
03-18 8300
可以使用Marc Edwards的超椭圆方程，直接计算出圆角矩形和圆形的像素区域，并且可以使用参数调节形状的区域。    x,y 是坐标，5是弧度的程度越大越接近矩形，60是半径系数，shader中需要归一化转换。 利用此公式实现shader如下：    Shader "Custom/Vignette" { Properties { _fade ("Opac
Unity 无锯齿圆滑圆角头像圆角图形
12-12
自定义ugui 无锯齿圆滑圆角头像，圆角图形 shader支持UGUI 的mask
unity 圆角shader
05-16
圆角shader，可以用于UI图片圆角剪裁，可自行调节参数，更改圆角大小
Unity UI 圆角组件：增强你的UI设计美感
最新发布
gitblog_07260的博客
09-13 336
Unity UI 圆角组件：增强你的UI设计美感 Unity-UI-Rounded-Corners This components and shaders allows you to add rounded corners to UI elements! ...
解读Unity中的CG编写Shader系列4——unity中的圆角矩形shader
宇仔TuT的博客
08-21 9099
上篇文章中我们掌握了表面剔除和剪裁模式 这篇文章将利用这些知识实现一个简单的，但是又很常用的例子:把一张图片做成圆角矩形 例3：圆角矩形Shader 好吧我承认在做这个例子的时候走了不少弯路，由于本人对矩阵的知识掌握已经悉数还给老师，所以一开始用了一些笨办法计算圆角矩形区域。 我们知道TEXTCOORD0是一个以对象为坐标系的坐标，并且范围在该坐标的第一象限，取值为(0,0)到(1,1) 那么我们把每一张图片都看做一张1X1大小的矩形 我们要在1X1大小的矩形中擦除4个角，应该是这样: 以左上角为例，
Unity 圆角矩形Shader实现(支持长方形)（只写两行）
yueh0607
01-07 3945
相信很多小伙伴都会遇到做圆角矩形的需求，网上的shader还不明白是怎么实现的，甚至还有一部分是错误的，本文讲从原理到代码讲解圆角矩形shader的实现想要实现一个圆角矩形，常见的是抽象成一个数学模型，如下图紫色区域，就是我们应该保留的区域，为了更准确的描述这个图形，我们在四个角创建四个相等的圆形。 因为控制每个像素的颜色主要是由片元着色器负责的，所以我们也通过Fragment Shader去实现这个效果，可以看到在这个函数里我们只能拿到 uv和vertex，所以我们根据uv坐标判定是否在上图的紫色区域，
Unity Shader 圆角矩形 V0.1
qq_45253770的博客
09-26 1179
目的： 使用Unity Shader实现圆角矩形 原理分析： 提示：这里描述项目中遇到的问题： 例如：数据传输过程中数据不时出现丢失的情况，偶尔会丢失一部分数据 APP 中接收数据代码： 先有一个矩形 假设矩形里边还有一个矩形（与原有矩形等比缩放） 再假设有一个圆形 重新规划坐标，Unity中UV原点为左下角（0，0），将坐标偏移到（0.5， 0.5） 假设圆形的r，得出内矩形的边长 假设有点（x, y），为了将点在四个象限的不同情况当做一个象限处理，我们将点取绝对值，统
unity 切圆角矩形
03-01
unity 切圆角矩形，通过shader编码实现图片圆角
Unity的UI圆角矩形shader.unitypackage
07-08
Unity的UI圆角矩形shader.unitypackage
unity无锯齿圆角矩形、圆形shader，可做圆形头像显示
04-01
unity无锯齿圆角矩形、圆形shader，可做圆形头像显示，Round Radiu的取值范围为0-0.5，输入0.5的时候为圆形。Width 和 Height的值输入图像的大小。
Unity圆角遮盖shader
11-24
Unity使用的shader圆角遮盖,可以代替掉UI的mask组件，节省性能 使用方法：直接把材质球放到UI的Image组件上即可，然后通过调节材质球上面的参数来控制圆角大小
UI圆角效果-Shader实现
05-10
UI圆角效果-Shader实现
Unity-UI-Rounded-Corners：此组件和着色器使您可以向UI元素添加圆角！
02-06
Unity-UI-圆角 这些组件和着色器使您可以向UI元素添加圆角！ 如何安装 包装经理 打开%projectname%/Packages/manifest.json 在依赖项部分添加以下内容： "com.nobi.roundedcorners": "https://github.com/kirevdokimov/Unity-UI-Rounded-Corners.git" Unity包 从获取.unitypackage 如何使用 相同的圆度 使用Image将ImageWithRoundedCorners附加到游戏对象 创建新材料 选择RoundedCorners着色器 将材质附加到Imag
unity 切圆角矩形 --shader编程
热门推荐
fengya1的专栏
03-01 1万+
先上个效果图 制作思路 如上图我们要渲染的就是上图带颜色的部分 步骤： 先获取黄色和蓝绿部分 如下图 算法 |U| 注意的是模型贴图最大值是1. 然后获取红色的四份之一圆部分 实现过程 首先在unity里创建一个shader。 创建完成后 然后双击newshader（名字是可以随便起）
Unity3D 开发之shader教程(实现圆角矩形)
weixin_30517001的博客
11-18 341
　　之前因为需要做新手引导，导致需要对一张图片进行挖空的效果显示！刚开始使用的拼凑的界面，后来发现，拼凑的界面会因为计算的关系出现一个像素的缝隙。在忙完之后，果断决定使用shader来做 一张图片，UV坐标，以左下为（0,0,）右上为（1,1）进行坐标判断，由代码里的实际需要来进行挖洞，即位置占整个图片的大小百分比来做！在这个范围内的执行 discard，也就是丢弃这个像素的渲染。做出来就会是个...
圆角矩形shader
weixin_30527551的博客
03-10 159
在游戏中，有时需要对一张矩形图片进行切割，绘制成圆角矩形。 circelrect.vert attribute vec4 a_position; attribute vec4 a_normal; attribute vec4 a_color; attribute vec2 a_texCoord0; uniform mat4 u_projTrans; varying vec...
【UnityShader】图片圆角
qq_35064654的博客
04-21 2078
我们在开发的时候，有时候一些按钮或者菜单栏的边角是直角的需要改成圆角，但是让美术重新绘制耽误时间不说也确实没必要，这个时候我们不妨使用一个简单的shader去解决这个问题，下面我们就讲讲这个shader要如何实现。需求1：可以将图片四角任意一角从直角变为圆角，可控制圆角大小需求2：在需求一的基础上可以选择是否给图片加上边框，颜色可变附加小需求：可更改图片透明度。
Unity UI shader 实现等距离半径的圆角矩形
weixin_38926960的博客
09-16 1450
Unity UI shader 实现等距离半径的圆角矩形
unity shader 实现缩放
04-29
实现缩放可以使用Shader中的一个内置变量"_MainTex_ST"，它包含了纹理的缩放值。这个变量是一个Vector2类型的值，分别表示纹理在水平和垂直方向上的缩放比例。 在Shader中，可以通过修改这个变量的值来实现缩放效果。例如，如果想将纹理在水平方向上缩小一半，可以将"_MainTex_ST"的X值设为0.5。 下面是一个简单的Shader示例，可以实现纹理的缩放效果： ``` Shader "Custom/Scale" { Properties { _MainTex ("Texture", 2D) = "white" {} _Scale ("Scale", Range(0, 2)) = 1 } SubShader { Tags {"Queue"="Transparent" "RenderType"="Opaque"} Pass { CGPROGRAM #pragma vertex vert #pragma fragment frag #include "UnityCG.cginc" struct appdata { float4 vertex : POSITION; float2 uv : TEXCOORD0; }; struct v2f { float2 uv : TEXCOORD0; float4 vertex : SV_POSITION; }; sampler2D _MainTex; float _Scale; v2f vert (appdata v) { v2f o; o.vertex = UnityObjectToClipPos(v.vertex); o.uv = v.uv; return o; } fixed4 frag (v2f i) : SV_Target { float2 st = i.uv * _MainTex_ST.xy * _Scale; return tex2D(_MainTex, st); } ENDCG } } } ``` 这个Shader中使用了一个名为"_Scale"的自定义属性来控制纹理的缩放比例。在顶点着色器中，将纹理坐标乘以"_MainTex_ST"和"_Scale"的乘积，得到最终的纹理坐标。在片元着色器中，使用tex2D函数获取对应纹理坐标上的颜色进行渲染。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

TxNet.Ltd.

你的赞同是对我的鼓励

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值