[原]shader实现矩形圆角
哎!竭力想说清楚这个实现原理,并解释清楚shader里面的算法,结果发现越解释越不好理解,见谅!
一、实现目标:矩形四角是圆弧效果
二、实现的原理:通过每个角绘制1/4圆弧,剔除掉圆弧以外的部分。
原理图:


实现代码:
Shader "Custom/Test" {
Properties {
_MainTex ("Base (RGB)", 2D) = "white" {}
}
SubShader {
Tags { "RenderType"="Opaque" }
LOD
Blend SrcAlpha OneMinusSrcAlpha
pass{
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#include "UnityCG.cginc"
sampler2D _MainTex;
struct Input {
fixed4 vertex:POSITION;
fixed2 texcoord :TEXCOORD0;
};
struct Output {
fixed4 pos:POSITION;
fixed2 uv :TEXCOORD0;
};
Output vert(Input i)
{
Output o;
o.pos = mul(UNITY_MATRIX_MVP,i.vertex);
o.uv = i.texcoord;
return o;
}
fixed4 frag(Output o):COLOR
{
fixed4 c = tex2D(_MainTex,o.uv);
float2 uv = o.uv.xy- float2(0.5);//UV 坐标默认是(0 0)左下角,减0.5 是把UV的中心点移到(0 0) 这样纹理坐标的范围就是 (-0.5,-0.5)~(0.5,0.5)
float rx = fmod(uv.x, 0.4); //fmod 求余函数,从原点开始 矩形的顶点坐标为0.4
float ry = fmod(uv.y, 0.4);
float mx = step(0.4, abs(uv.x)); // if 0.4>abs(uv.x)?0:1
float my = step(0.4, abs(uv.y));
float filletAlpha = - mx * my * step(0.1, length(half2(rx,ry))); //如果在圆角矩形内,alpha值为1 否则为0。 和0.1做比较 因为圆角半径为0.1
c = fixed4(c.r,c.g,c.b,filletAlpha);
return c;
}
ENDCG
}
}
}
注意:直接理解上面的计算圆角部分 有点难以理解,可以套到具体图里面 看效果推理就可以。
实现效果:

参考:
http://imgtec.eetrend.com/blog/3608
http://blog.sina.com.cn/s/blog_89d90b7c0102vayz.html
[原]shader实现矩形圆角的更多相关文章
- Android自定义ImageView实现图片圆形 ,椭圆和矩形圆角显示
Android中的ImageView只能显示矩形的图片,为了用户体验更多,Android实现圆角矩形,圆形或者椭圆等图形,一般通过自定义ImageView来实现,首先获取到图片的Bitmap,然后通过 ...
- cocos2dx-lua 圆角矩形 圆角图片 drawNode
使用的官方类是:drawNode 函数是:drawNode:drawPolygon() C++函数的参数说明: //画多边形,verts为点集,count为点数,fillColor为填充颜色,bord ...
- 【MFC】MFC中使对话框变成圆角矩形的代码(转)
原文转自 http://blog.csdn.net/cracent/article/details/48274469 BOOL CLoginDlg::OnInitDialog() { CDialog: ...
- canva绘制圆角矩形
在做组态的时候,需要支持矩形圆角格式,但是因为canvas本身不带有圆角矩形,需要自行算出坐标进行绘制 方案一.统一圆角 <!DOCTYPE html> <html> < ...
- Android 圆角的效果实现
Android 自定义ImageView实现圆角图片昨天给学生布置作业,写微信首页,也就是聊天的界面,listView里的item中联系人的头像是圆角的,图形界面如下: 那么我就仔细研究了圆角的具体实 ...
- 【原】iOS学习之Quartz2D(1)
什么是Quartz2D 1.Quartz 2D 是一个二维绘图引擎,同时支持iOS和Mac系统 2.Quartz 2D 能完成的工作: 绘制图形 : 线条\三角形\矩形\圆\弧等 绘制文字 绘制\生成 ...
- Qt自定义窗体,边框,圆角窗体
MainWindow::MainWindow(QWidget*parent): QMainWindow(parent), ui(new Ui::MainWindow) { setAttribute(Q ...
- Android 高级UI设计笔记18:实现圆角图片
1. 下面我们经常在APP中看到的圆角图片,如下: 再比如:微信聊天会话列表的头像是圆角的. 2. 下面分析一个Github的经典: (1)Github库地址: https://github.com/ ...
- CSS样式做圆角
我处理圆角的版本是由内置的绝对定位的四个div组成,每个div都有唯一的圆角图片作CSS Sprite操作.我们将会这样做: 是什么方式导致这项技术表现得这么了不起呢(What makes this ...
随机推荐
- 20+ 个很有用的 jQuery 的 Google 地图插件
转自:http://www.oschina.net/translate/20-useful-jquery-google-maps-plugins Google 地图在寻找我们想要了解的商店或者其它有趣 ...
- WPF快速入门系列(5)——深入解析WPF命令
一.引言 WPF命令相对来说是一个崭新的概念,因为命令对于之前的WinForm根本没有实现这个概念,但是这并不影响我们学习WPF命令,因为设计模式中有命令模式,关于命令模式可以参考我设计模式的博文:h ...
- 设计模式之美:Facade(外观)
索引 意图 结构 参与者 适用性 效果 相关模式 实现 实现方式(一):用抽象类定义 Facade 而使子类对应于不同的子系统. 意图 为子系统中的一组接口提供一个一致的界面,Facade 模式定义了 ...
- java Unicode转UTF-8代码
在做http请求时,有时候服务器传回的数据中会遇到传回数据为Unicode的情况,为此需要进行Unicode转UTF-8的转化,代码: public class StringTest { /** * ...
- HTML5实战与剖析之原生拖拽(四可拖动dragable属性和其他成员)
可拖动dragable属性 之前我们已经为大家介绍过几篇有关HTML5中原生拖拽的相关知识了.今天为大家介绍HTML5拖拽中的其他一些小东东,闲话不多说赶快一起看看吧. 在默认情况下,链接.文本和图像 ...
- 【转】关于Mahalanobis距离的笔记
Mahalanobis距离是用来度量一个点P和一个分布D之间的距离,它是衡量点P与分布D的均值之间存在多少个标准差的一个多维泛化版本. 如果P就位于分布D的均值处,则该距离为0:该距离随着P的偏离均值 ...
- iOS开发之静态库(二)—— .a
前面已经介绍了iOS中静态库的基本概念和特点,这里就不再多废话,直接上代码 编译环境Xcode5.1 + Mac OS X 10.9.3 新建静态库项目 Xcode中创建静态库的模板有两个,一个是创建 ...
- 数据类型/强制类型转换 和运算符---标识符规则/关键字 a++和++a区别
3.2关键字都是小写,TRUE FALSE NULL都不是Java关键字 3.3数据类型 变量相当于一个有名称的容器,该容器用于装各种不同类型的数据 Java类型分为2种 基本类型: 引用类型: 基本 ...
- SQL Server 内存中OLTP内部机制概述(三)
----------------------------我是分割线------------------------------- 本文翻译自微软白皮书<SQL Server In-Memory ...
- git stash恢复
今天下午在使用Git命令进行代码管理时,因为自己一时疏忽直接把自己一天的劳动成果给弄丢了,这还了得,吓死宝宝了.真的,相信有代码丢失的朋友肯定能体会我当时的心情,不能体会我心情的那就祝你们也丢次代码, ...