哎!竭力想说清楚这个实现原理,并解释清楚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实现矩形圆角的更多相关文章

  1. Android自定义ImageView实现图片圆形 ,椭圆和矩形圆角显示

    Android中的ImageView只能显示矩形的图片,为了用户体验更多,Android实现圆角矩形,圆形或者椭圆等图形,一般通过自定义ImageView来实现,首先获取到图片的Bitmap,然后通过 ...

  2. cocos2dx-lua 圆角矩形 圆角图片 drawNode

    使用的官方类是:drawNode 函数是:drawNode:drawPolygon() C++函数的参数说明: //画多边形,verts为点集,count为点数,fillColor为填充颜色,bord ...

  3. 【MFC】MFC中使对话框变成圆角矩形的代码(转)

    原文转自 http://blog.csdn.net/cracent/article/details/48274469 BOOL CLoginDlg::OnInitDialog() { CDialog: ...

  4. canva绘制圆角矩形

    在做组态的时候,需要支持矩形圆角格式,但是因为canvas本身不带有圆角矩形,需要自行算出坐标进行绘制 方案一.统一圆角 <!DOCTYPE html> <html> < ...

  5. Android 圆角的效果实现

    Android 自定义ImageView实现圆角图片昨天给学生布置作业,写微信首页,也就是聊天的界面,listView里的item中联系人的头像是圆角的,图形界面如下: 那么我就仔细研究了圆角的具体实 ...

  6. 【原】iOS学习之Quartz2D(1)

    什么是Quartz2D 1.Quartz 2D 是一个二维绘图引擎,同时支持iOS和Mac系统 2.Quartz 2D 能完成的工作: 绘制图形 : 线条\三角形\矩形\圆\弧等 绘制文字 绘制\生成 ...

  7. Qt自定义窗体,边框,圆角窗体

    MainWindow::MainWindow(QWidget*parent): QMainWindow(parent), ui(new Ui::MainWindow) { setAttribute(Q ...

  8. Android 高级UI设计笔记18:实现圆角图片

    1. 下面我们经常在APP中看到的圆角图片,如下: 再比如:微信聊天会话列表的头像是圆角的. 2. 下面分析一个Github的经典: (1)Github库地址: https://github.com/ ...

  9. CSS样式做圆角

    我处理圆角的版本是由内置的绝对定位的四个div组成,每个div都有唯一的圆角图片作CSS Sprite操作.我们将会这样做:  是什么方式导致这项技术表现得这么了不起呢(What makes this ...

随机推荐

  1. 在ios中使用第三方类库

    在项目开发中经常会用到一些第三方类库,通常有两种方法来做到:一种方法是直接把所有的.h和.m文件复制到项目中:另一种方法是把.xcodeproj拖到项目中生成静态链接库并引用. 方法一:直接复制所有源 ...

  2. Ora-01536:超出了表空间users的空间限量(转)

    Ora-01536:超出了表空间users的空间限量(转) 正在开会,同事跑过来说数据库有问题,通讯程序不能入库,赶快获取一条insert into a values()语句后在toad工具中手动插入 ...

  3. [游戏模版18] Win32 五子棋

    >_<:Learning its AI logic. >_<:resource >_<:code: #include <windows.h> // C ...

  4. 小米Web前端JavaScript面试题

    面试题目 一. 请定义这样一个函数 function repeat (func, times, wait) { } 这个函数能返回一个新函数,比如这样用 var repeatedFun = repea ...

  5. html中的图片直接使用字符串代替

    最近来了一个网页,里面有图片,但是却没有引用外部的图片资源,很好奇.查看代码后发现,里面的图片是使用base64编码后的字符串代替了,这个叫做Data URI scheme. Data URI sch ...

  6. atittit.表单验证的实现方式以及原理本质以及选型以及自定义兼容easyui dsl规则的表单验证

    atittit.表单验证的实现方式以及原理本质以及选型以及自定义兼容easyui dsl规则的表单验证 1. 需求,表单验证需要弹框式,但目前easyui ms绑定死了tooltip式样 1 2. 表 ...

  7. MySql的基本操作以及以后开发经常使用的常用指令

    第一章:数据类型和操作数据表MySQL语句的规范(1):关键字与函数名称全部大写(2):数据库名称,表名称,字段名称全部小写(3):SQL语句必须以分号结尾 1:命令行模式启动mysql服务net s ...

  8. Leetcode 303 Range Sum Query - Immutable

    题意:查询一个数组在(i,j]范围内的元素的和. 思路非常简单,做个预处理,打个表就好 拓展:可以使用树状数组来完成该统计,算法复杂度为(logn),该数据结构强力的地方是实现简单,而且能完成实时更新 ...

  9. "Cannot find one of more components. Please reinstall the application"--安装VS2013之后不能正常打开的处理办法

    今天,安装完VS2013之后,不能正常启动.总提示一个让人摸不到头脑的错误: "Cannot find one of more components. Please reinstall th ...

  10. vs2012 MSDN帮助文档离线包下载安装方法

    vs2012安装文件 自带的 MSDN帮助文档不全, 需要自己手动添加需要的离线文档包, 具体方法如下 1. 打开 vs2012 2. 按 ctrl + alt + F1 打开帮助文档管理器 3. 在 ...