哎!竭力想说清楚这个实现原理,并解释清楚shader里面的算法,结果发现越解释越不好理解,见谅!

一、实现目标:矩形四角是圆弧效果

二、实现的原理:通过每个角绘制1/4圆弧,剔除掉圆弧以外的部分。

原理图:

实现代码:

  1. Shader "Custom/Test" {
  2. Properties {
  3. _MainTex ("Base (RGB)", 2D) = "white" {}
  4. }
  5. SubShader {
  6. Tags { "RenderType"="Opaque" }
  7. LOD
  8. Blend SrcAlpha OneMinusSrcAlpha
  9. pass{
  10. CGPROGRAM
  11. #pragma vertex vert
  12. #pragma fragment frag
  13. #include "UnityCG.cginc"
  14. sampler2D _MainTex;
  15.  
  16. struct Input {
  17. fixed4 vertex:POSITION;
  18. fixed2 texcoord :TEXCOORD0;
  19. };
  20.  
  21. struct Output {
  22. fixed4 pos:POSITION;
  23. fixed2 uv :TEXCOORD0;
  24. };
  25. Output vert(Input i)
  26. {
  27. Output o;
  28. o.pos = mul(UNITY_MATRIX_MVP,i.vertex);
  29. o.uv = i.texcoord;
  30. return o;
  31. }
  32.  
  33. fixed4 frag(Output o):COLOR
  34. {
  35. fixed4 c = tex2D(_MainTex,o.uv);
  36. float2 uv = o.uv.xy- float2(0.5);//UV 坐标默认是(0 0)左下角,减0.5 是把UV的中心点移到(0 0) 这样纹理坐标的范围就是 (-0.5,-0.5)~(0.5,0.5)
  37. float rx = fmod(uv.x, 0.4); //fmod 求余函数,从原点开始 矩形的顶点坐标为0.4
  38. float ry = fmod(uv.y, 0.4);
  39. float mx = step(0.4, abs(uv.x)); // if 0.4>abs(uv.x)?0:1
  40. float my = step(0.4, abs(uv.y));
  41. float filletAlpha = - mx * my * step(0.1, length(half2(rx,ry))); //如果在圆角矩形内,alpha值为1 否则为0。 和0.1做比较 因为圆角半径为0.1
  42. c = fixed4(c.r,c.g,c.b,filletAlpha);
  43. return c;
  44. }
  45. ENDCG
  46. }
  47. }
  48. }

注意:直接理解上面的计算圆角部分 有点难以理解,可以套到具体图里面 看效果推理就可以。

实现效果:

参考:

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笔记之UIKit_UIScrollView

    //通过系统的一个接口 拿到是不是第一次启动这个程序 如果是就调用导航页 如果不是 直接进入下一个视图 NSUserDefaults *userDefaults = [NSUserDefaults s ...

  2. 把HDFS里的json数据转换成csv格式

      1. 全景图 2. 用ListHDFS获取所有文件名   如果想重新再取一次,右健view state:   点击 clear state, 再运行,即可再次采集数据了.   3. 用FetchH ...

  3. 【笔记】select2的使用

    <script src="~/Scripts/jquery-1.10.2.js"></script> <script src="~/Cont ...

  4. JS自动化

    写在前面 记得当时刷笔试题的时候有了解过“前端工程化”,无非就是用自动化工具帮助开发人员完成一些小细节,提高工作效率之类的,不过当时可没想到可维护性这么远 构建项目 -> 模块化开发 -> ...

  5. Mac下修改环境变量

    Mac下修改环境变量 如果使用默认Bash, 首先修改 ~/.bash_profile 文件,添加文件路径,比如: export PATH=~/bin:/usr/local/bin/node:~/Do ...

  6. Linux 进程间通信(一)

    Linux 进程间通信 进程是一个独立的资源分配单位,不同进程之间的资源是相互独立的,没有关联,不能在一个进程中直接访问另一个进程中的资源.但是,进程不是孤立的,不同的进程之间需要信息的交换以及状态的 ...

  7. git查看一个文件的历史记录

    git log --all -- '*'FILENAME'*' 支持模糊查询 主要用于查找历史上被删除的文件 可以做成git的一个快捷命令 find = "!f(){ git log --a ...

  8. 基于slideout.js实现的移动端侧边栏滑动特效

    HTML5现在本领太大了,PC端已经无法满足它的胃口了,它将强势攻入移动端,所以移动端中各种特效也得基于HTML5实现,看看我们将要介绍的slideout.js,能帮我们实现怎么样的侧边栏滑动特效呢~ ...

  9. [Python爬虫] scrapy爬虫系列 <一>.安装及入门介绍

    前面介绍了很多Selenium基于自动测试的Python爬虫程序,主要利用它的xpath语句,通过分析网页DOM树结构进行爬取内容,同时可以结合Phantomjs模拟浏览器进行鼠标或键盘操作.但是,更 ...

  10. Atitit.并发编程原理与概论 attilax总结

    Atitit.并发编程原理与概论 attilax总结 1. 并发一般涉及如下几个方面:2 2. 线程安全性 ( 2.2 原子性 2.3 加锁机制2 2.1. 线程封闭3.3.1Ad-hoc线程封闭 3 ...