上篇文章中我们掌握了表面剔除和剪裁模式

这篇文章将利用这些知识实现一个简单的,可是又非经常常使用的样例:把一张图片做成圆角矩形

例3:圆角矩形Shader

好吧我承认在做这个样例的时候走了不少弯路,因为本人对矩阵的知识掌握已经悉数还给老师,所以一開始用了一些笨办法计算圆角矩形区域。

我们知道TEXTCOORD0是一个以对象为坐标系的坐标,而且范围在该坐标的第一象限,取值为(0,0)到(1,1)

那么我们把每一张图片都看做一张1X1大小的矩形

我们要在1X1大小的矩形中擦除4个角,应该是这样:

以左上角为例,我们做一个辅助圆内切于这个角,半径为0.1,那么我们将这个圆擦掉3/4,剩下的黄色弧线与这个角形成的区域就是我们要擦除的区域:

这个道理非常easy,那么我们对4个角分别擦除掉这种区域就能得到一个半径为10%原图尺寸的圆角矩形

我一開始走的弯路就在于计算这个区域,是用4个圆的方程来算呢还是用距离来计算

因为给出4个圆的方程太过于复杂,我这里直接给出计算外点距离算法的示意图:

首先在这个大矩形的内部以4个圆心为顶点做出一个内矩形,心算得边长为0.8

其次忽略内矩形内部的点,在这个红色矩形内给定随意一个蓝色矩形的外点p  ,仅仅要可以得到p到蓝色矩形的距离,距离大于0.1(半径),那么就在圆角矩形外部,直接擦除,如图:

我们看p1,p2,p3,3个点到蓝色矩形的距离各自是p1的距离<半径,根号2倍半径>p2的距离>半径,p3的距离等于半径

所以p2在圆角矩形外,p1,p3在圆角矩形内部或边缘,我们将p2擦除掉

当中p3的距离恰好是 p3到4条直线的距离最小值

p1同理

而p2的距离不能再这样计算,而应该是计算p2到4个顶点距离的最小值

按这个算法仅仅要算出全部外点中的点到蓝色矩形区域的距离,然后与半径推断大小,大于则discard就能得到圆角矩形

一開始我依照这个思路得出一个极端无脑的方法:

给定随意一点p,求p到4条直线,4个顶点的距离,然后在8个距离中求最小值作为终于的距离拿来与半径比較

兴奋地写完代码知道我错了,检查了非常久才明确,像p3这样的点,算出来的8个距离中,最小距离并非到顶点的距离,而是到两条边的延长线的距离

于是终于8距离求最小值算法以失败告终

还是得老老实实分情况

那么有几种情况呢

事实上仅仅有1种,可是先按正常逻辑分为2种:

我们来看绿色区域和紫色区域的外点们

1、当外点在紫色区域时,距离应是点到4顶点的距离最小值

2、当外点在绿色区域时,距离应是点到4条直线的距离最小值

依照这个思路那么我们能够对整个 坐标系内的随意点(x,y)进行推断:

1、假设点在白色区域或者绿色区域内,  还计算个毛线距离啊,肯定是不discard啊~~~~(之前我傻乎乎的还真去算了)

2、紫色区域内计算点到4顶点距离,然后取最小值,然后将大于0.1的部分剔除掉

最后我们须要将这个0.1作为变量提取出来,不能写死,这样能够在Inspector中方便调节,或者在script中去设置,也就是给我们的shader定义一个float或rang型的属性

最后代码为:

Shader "Custom/RoundRect" {
Properties {
//两种内容模式,图片模式
_MainTex ("Base (RGB)", 2D) = "white" {}
//纯色模式
//_MainColor ("Color", COLOR) = (1,1,1,1)
//圆角半径,默觉得0.1
_RoundRadius("Radius",float) = 0.1
}
SubShader { Pass{
CGPROGRAM #pragma fragment frag #include "UnityCG.cginc"
//获取3个属性 并传值到CG代码段
sampler2D _MainTex;
float _RoundRadius;
float4 _MainColor; //片段着色器输入结构体(可省略)
struct FragInput{
float2 texcoord:TEXCOORD0; }; //片段着色器入口函数
float4 frag(FragInput input) : COLOR
{ float4 c=tex2D(_MainTex,input.texcoord);//将图片信息按坐标转换成颜色
//float4 c=_MainColor; //纯色 //x,y两个变元,区间均为[0,1]
float x=input.texcoord.x;
float y=input.texcoord.y; //4条直线的常数部分
float xt=1-_RoundRadius;
float xb=_RoundRadius;
float yl=_RoundRadius;
float yr=1-_RoundRadius;
//假设(x,y)不在4条直线构成的矩形中(上图的白色区域)
if(!(x<xt&&x>xb&&y>yl&&y<yr))
{ //假设(x.y)不在上图的绿色区域
if(!((x<xt&&x>xb) || (y>yl&&y<yr) ))
//数学不好,好像推断的复杂了,假设您能够直接写出紫色区域
//的不等式组那么能够简单点
{
//计算四个顶点的坐标
float2 plb=float2(_RoundRadius,_RoundRadius);
float2 plt=float2(_RoundRadius,1-_RoundRadius);
float2 prt=float2(1-_RoundRadius,1-_RoundRadius);
float2 prb=float2(1-_RoundRadius,_RoundRadius); //计算x,y分别到4个顶点的距离
float distlb=sqrt(pow((x-plb.x),2)+pow((y-plb.y),2));
float distlt=sqrt(pow((x-plt.x),2)+pow((y-plt.y),2));
float distrt=sqrt(pow((x-prt.x),2)+pow((y-prt.y),2));
float distrb=sqrt(pow((x-prb.x),2)+pow((y-prb.y),2)); //对4个距离取最小值
float dist=min(distlb,distlt);
dist=min(dist,distrt);
dist=min(dist,distrb); //将大于半径的表面剔除
if(dist>_RoundRadius)
discard; } } return c; }
ENDCG
} }
FallBack "Diffuse"
}

最后执行的效果,不同Radius不同尺寸的图片进行圆角矩形剔除

当radius设为0.25时我们能够得到一个圆,所以我们的RoundRadius属性能够设置为一个0.01~0.25的rang

因为我是windows系统,mac os下好像有点问题,不知道是不是省略了顶点着色器的问题,发现原因后再来补正

假设我的博客对您有帮助或者您有不论什么疑问,欢迎增加重庆u3d交流QQ群我会给您解答:68994667,也能够加群与我们一同交流技术

解读Unity中的CG编写Shader系列4——unity中的圆角矩形shader的更多相关文章

  1. [转]解读Unity中的CG编写Shader系列7——漫反射

    如果前面几个系列文章的内容过于冗长缺乏趣味着实见谅,由于时间原因前面的混合部分还没有写完,等以后再补充,现在开始关于反射的内容了.折射与反射在物理世界中,光的反射与折射往往是同时存在的,光源由真空或者 ...

  2. 解读Unity中的CG编写Shader系列四(unity中的圆角矩形shader)

    转自 http://www.itnose.net/detail/6097625.html 上篇文章中我们掌握了表面剔除和剪裁模式 这篇文章将利用这些知识实现一个简单的,但是又很常用的例子:把一张图片做 ...

  3. [转]解读Unity中的CG编写Shader系列4——unity中的圆角矩形shader

    上篇文章中我们掌握了表面剔除和剪裁模式这篇文章将利用这些知识实现一个简单的,但是又很常用的例子:把一张图片做成圆角矩形 例3:圆角矩形Shader好吧我承认在做这个例子的时候走了不少弯路,由于本人对矩 ...

  4. 解读Unity中的CG编写Shader系列八(镜面反射)

    转自http://www.itnose.net/detail/6117378.html 讨论完漫反射之后,接下来肯定就是镜面反射了 在开始镜面反射shader的coding之前,要扩充一下前面提到的知 ...

  5. [转]解读Unity中的CG编写Shader系列9——镜面反射

    讨论完漫反射之后,接下来肯定就是镜面反射了在开始镜面反射shader的coding之前,要扩充一下前面提到的知识,加深理解镜面反射与漫反射的区别.注:这篇文章实现的镜面反射是逐顶点着色(per-ver ...

  6. unity 切圆角矩形 --shader编程

    先上个效果图 制作思路 如上图我们要渲染的就是上图带颜色的部分 步骤: 先获取黄色和蓝绿部分 例如以下图 算法 |U|<(0.5-r)或|V|<(0.5-r) 注意的是模型贴图最大值是1. ...

  7. 圆角矩形shader

    在游戏中,有时需要对一张矩形图片进行切割,绘制成圆角矩形. circelrect.vert attribute vec4 a_position; attribute vec4 a_normal; at ...

  8. 解读Unity中的CG编写Shader系列十 (光滑的镜面反射(冯氏着色))

    前文完成了最基本的镜面反射着色器,单平行光源下的逐顶点着色(per-vertex lighting),又称为古罗着色(Gouraud shading).这篇文章作为后续讨论更光滑的镜面反射方式,逐像素 ...

  9. 解读Unity中的CG编写Shader系列七(不透明度与混合)

    转自http://www.itnose.net/detail/6098539.html 1.不透明度 当我们要将两个半透的纹理贴图到一个材质球上的时候就遇到混合的问题,由于前面的知识我们已经知道了片段 ...

随机推荐

  1. 2016计蒜之道复赛 菜鸟物流的运输网络 网络流EK

    题源:https://nanti.jisuanke.com/t/11215 分析:这题是一个比较经典的网络流模型.把中间节点当做源,两端节点当做汇,对节点进行拆点,做一个流量为 22 的流即可. 吐槽 ...

  2. iOS已发布应用中对异常信息捕获和处理

    iOS已发布应用中对异常信息捕获和处理 iOS开发中我们会遇到程序抛出异常退出的情况,如果是在调试的过程中,异常的信息是一目了然,但是如果是在已经发布的程序中,获取异常的信息有时候是比较困难的. iO ...

  3. [原创]个人工具 - YE快速复制助手(YeFastcopyHelper)

    版本:v1.3.216 更新时间:2014/02/16 * 代码完善 + 右键关于显示当前版本号,点击并链接到软件帮助页 Technorati 标签: NET,.NET 3.5,asion C#,Ch ...

  4. 选择学习Pomelo

    我之前的项目都是基于http做网络通信,但是做多玩家同时对战的游戏,http短连接不支持服务器的push是个问题,这样客户端就没办法收到服务器的消息. 最简单的方法是定时发起request询问服务器, ...

  5. RabbitMQ>Erlang machine stopped instantly (distribution name conflict?). The service is not restarted as OnFail is set to ignore.-报错解决方案 原来是NNND。。。

    >Erlang machine stopped instantly (distribution name conflict?). The service is not restarted as ...

  6. [iOS基础控件 - 6.12.4] NavigationController vs TabBarController

    A.属性 1. Item NavigationController: navigationItem (不需要创建) title rightBarButtonItems/ rightBarButtonI ...

  7. 2015年必火的五个Html5移动开发工具推荐

    NO.1   DCloudHBuilder:基于HTML5开发工具 中文官网:http://www.dcloud.io/ DCloudHBuilder:基于HTML5开发工具是当前最快的HTML开发工 ...

  8. PictureEdit中拖放图片

    public partial class Form2 : Form { string fileName = string.Empty; public Form2() { InitializeCompo ...

  9. arcmap+vs2010

    esri为vs2010提供了addin开发模版,有几个关键的地方注意下 1.C:\Program Files (x86)\MSBuild\Esri\下存在ESRI.ArcGIS.AddIns.Serv ...

  10. Linux chmod命令修改文件与文件夹权限命令代码

    在Unix和Linux的各种操作系统下,每个文件(文件夹也被看作是文件)都按读.写.运行设定权限. 以下转自:http://www.codeceo.com/article/linux-chmod-co ...