圆角计算 Shader
圆角的计算
在Shader中,我们使用UV坐标来计算需要显示的部分和不需要显示的部分,使用透明来处理显示与不显示。UV坐标如下图1,我们将坐标平移到图2位置,面片的UV坐标原点在面片中心,UV坐标范围是[0,1]。
我们现在用计算圆的半径的方式来计算,在如图所示的区域(绿色线区分)1,2,3,4内产生圆角:
b
1. 在1区域内,加入区域的左下角是原点(0,0),长度是0.1,R = length(x,y),R大于0.1那么透明,小于等于0.1不透明,(4个区域内同理);
2. 在5,6,7,8区域内,不透明;
Shader 程序:
- Shader "JQM/Test02"
- {
- Properties
- {
- _MainTex ("Texture", 2D) = "white" {}
- }
- SubShader
- {
- Pass
- {
- Tags {"Queue" = "Transparent"}
- ZWrite Off
- Blend SrcAlpha OneMinusSrcAlpha
- CGPROGRAM
- #pragma vertex vert
- #pragma fragment frag
- #include "UnityCG.cginc"
- sampler2D _MainTex;
- float4 _MainTex_ST;
- struct VertexOutPut
- {
- float4 pos : SV_POSITION;
- float2 uv : TEXCOORD0;
- };
- VertexOutPut vert (appdata_full v)
- {
- VertexOutPut o;
- o.pos = mul (UNITY_MATRIX_MVP, v.vertex);
- o.uv = v.texcoord.xy;
- return o;
- }
- fixed4 frag (VertexOutPut i) : COLOR
- {//圆角
- float2 uv = i.uv.xy - float2(0.5,0.5);//移动UV坐标中心
- float rx = fmod(uv.x, 0.4);//圆角所在区域,也就是圆角半径为0.1
- float ry = fmod(uv.y, 0.4);//
- float mx = step(0.4, abs(uv.x));//大于0.4的部分, step(a,x):x<a取0,否则返回1
float my = step(0.4, abs(uv.y));//
float alpha = - mx*my*step(0.1, length(half2(rx,ry)));//在[0,0.4]范围,mx*my始终为0,最终值始终为1;在(0.4,0.5]范围,所在的圆角区域,mx*my使用为1,大小由圆角半径决定;在剩下的其他区域,mx*my也是为0,最终值为;- return float4(,,,alpha);//
}
ENDCG } } }
CG函数
fmod(x,y)
:返回 x/y 的余数。如果 y 为 0,结果不可预料。
step(a,x)
:如果 x<a,返回 0;否则,返回 1。
圆角计算 Shader的更多相关文章
- 解读Unity中的CG编写Shader系列四(unity中的圆角矩形shader)
转自 http://www.itnose.net/detail/6097625.html 上篇文章中我们掌握了表面剔除和剪裁模式 这篇文章将利用这些知识实现一个简单的,但是又很常用的例子:把一张图片做 ...
- 解读Unity中的CG编写Shader系列4——unity中的圆角矩形shader
上篇文章中我们掌握了表面剔除和剪裁模式 这篇文章将利用这些知识实现一个简单的,可是又非经常常使用的样例:把一张图片做成圆角矩形 例3:圆角矩形Shader 好吧我承认在做这个样例的时候走了不少弯路,因 ...
- [转]解读Unity中的CG编写Shader系列4——unity中的圆角矩形shader
上篇文章中我们掌握了表面剔除和剪裁模式这篇文章将利用这些知识实现一个简单的,但是又很常用的例子:把一张图片做成圆角矩形 例3:圆角矩形Shader好吧我承认在做这个例子的时候走了不少弯路,由于本人对矩 ...
- unity 切圆角矩形 --shader编程
先上个效果图 制作思路 如上图我们要渲染的就是上图带颜色的部分 步骤: 先获取黄色和蓝绿部分 例如以下图 算法 |U|<(0.5-r)或|V|<(0.5-r) 注意的是模型贴图最大值是1. ...
- 圆角矩形shader
在游戏中,有时需要对一张矩形图片进行切割,绘制成圆角矩形. circelrect.vert attribute vec4 a_position; attribute vec4 a_normal; at ...
- [ShaderStaff] 圆角矩形效果实现
操作系统:Windows8.1 显卡:Nivida GTX965M 开发工具:Unity2017.3 | Shader 最近在制作一款APP,其中需要对矩形图片资源的展现进行圆角化,看了一下网上的方案 ...
- 技能CD 效果 shader
技能CD特效 这个效果主要是利用反正切函数完成.atan2(x,y)的返回值是[-PI,PI],这个支持4个象限的反正切函数.关于圆角计算,在上篇文章中有介绍. 现在,我们来看看反正切函数的效果: 在 ...
- [译]Vulkan教程(13)图形管道基础之Shader模块
[译]Vulkan教程(13)图形管道基础之Shader模块 Shader modules Unlike earlier APIs, shader code in Vulkan has to be s ...
- Windows操作系统
Microsoft Windows,是美国微软公司研发的一套操作系统,它问世于1985年,起初仅仅是Microsoft-DOS模拟环境,后续的系统版本由于微软不断的更新升级,不但易用,也慢慢的成为家家 ...
随机推荐
- 贪心 CodeForces 124B Permutations
题目传送门 /* 贪心:全排列函数使用,更新最值 */ #include <cstdio> #include <algorithm> #include <cstring& ...
- C. Timofey and a tree 观察题 + dfs模拟
http://codeforces.com/contest/764/problem/C 题意:在n个顶点中随便删除一个,然后分成若干个连通子图,要求这若干个连通子图的颜色都只有一种. 记得边是双向的, ...
- 移动端如何定义字体font-family
移动端如何定义字体font-family 中文字体使用系统默认即可,英文用Helvetica /* 移动端定义字体的代码 */ body{font-family:Helvetica;} 参考<移 ...
- android开发学习 ------- 弹出框
这是一种方法,是我觉得简单易懂代码量较少的一种: /* 创建AlertDialog对象并显示 */ final AlertDialog alertDialog = new AlertDialog.Bu ...
- jquery各种选择器示例
$("#itemExpressionHidden>b:last") 选择id为itemExpressionHidden中的最后一个b标签 $("#itemExp ...
- AJPFX:学习JAVA程序员两个必会的冒泡和选择排序
* 数组排序(冒泡排序)* * 冒泡排序: 相邻元素两两比较,大的往后放,第一次完毕,最大值出现在了最大索引处* * 选择排序 : 从0索引开始,依次和后面元素比较,小的往前放,第一次完毕,最小值出现 ...
- 【C++】模板简述(二):函数模板
我们上文讲了,模板的引入,我们发现在某种特殊的情况下,必须得通过模板才能完美的解决问题. 本文就来简述一下函数模板的基本使用. 一.函数模板格式 template<typename Param1 ...
- ansys中的.full文件中如何看刚度矩阵和质量矩阵(转)
http://fffff-2001.blog.163.com/blog/static/15507529200722492917460 Q:请问ansys中的.full文件中如何看刚度矩阵和质量矩阵? ...
- 强大的云存储与应用管理工具DzzOffice1.0 Beta(大桌子办公)发布下载
之前在9月份我们发布了一份内测版,得到了1000多位朋友参与下载测试.经过2个月,结合测试后朋友们反馈的问题,和开发建议.终于完成了这次Beta版的开发.感谢这两个月中参与测试,和帮助我们完善程序的朋 ...
- 安卓 Android 简单数据库(增删改查)
<Button android:id="@+id/delete_btn" android:layout_width="wrap_content" andr ...