[Shader]新手引导中的遮罩裁剪

最近要写新手引导,记录一下

1<效果图>

  

上面四张图已经展示得很清楚了 shader里面的计算也很简单 对比了一下uv与中心点的位置关系

<2>源码

Shader "Tang/matMask"
{
Properties
{
[PerRendererData] _MainTex("Sprite Texture", 2D) = "white" {}
_Color("Tint", Color) = (1,1,1,1)

_StencilComp("Stencil Comparison", Float) = 8
_Stencil("Stencil ID", Float) = 0
_StencilOp("Stencil Operation", Float) = 0
_StencilWriteMask("Stencil Write Mask", Float) = 255
_StencilReadMask("Stencil Read Mask", Float) = 255

_ColorMask("Color Mask", Float) = 15
//除以2
_Origin("圆心",Vector) = (0.3,0.2,0,0)
_Height("高",Float) = 0.12
_Width("宽",Float) = 0.12

[Toggle(UNITY_UI_ALPHACLIP)] _UseUIAlphaClip("Use Alpha Clip", Float) = 0
}

SubShader
{
Tags
{
"Queue" = "Transparent"
"IgnoreProjector" = "True"
"RenderType" = "Transparent"
"PreviewType" = "Plane"
"CanUseSpriteAtlas" = "True"
}

Stencil
{
Ref[_Stencil]
Comp[_StencilComp]
Pass[_StencilOp]
ReadMask[_StencilReadMask]
WriteMask[_StencilWriteMask]
}

Cull Off
Lighting Off
ZWrite Off
ZTest[unity_GUIZTestMode]
Blend SrcAlpha OneMinusSrcAlpha
ColorMask[_ColorMask]

Pass
{
Name "Default"
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#pragma target 2.0

#include "UnityCG.cginc"
#include "UnityUI.cginc"

#pragma multi_compile __ UNITY_UI_ALPHACLIP

struct appdata_t
{
float4 vertex : POSITION;
float4 color : COLOR;
float2 texcoord : TEXCOORD0;
UNITY_VERTEX_INPUT_INSTANCE_ID
};

struct v2f
{
float4 vertex : SV_POSITION;
fixed4 color : COLOR;
float2 texcoord : TEXCOORD0;
float4 worldPosition : TEXCOORD1;
UNITY_VERTEX_OUTPUT_STEREO
};

fixed4 _Color;
fixed4 _TextureSampleAdd;
float4 _ClipRect;
float4 _Origin;
float _Height;
float _Width;

v2f vert(appdata_t IN)
{
v2f OUT;
UNITY_SETUP_INSTANCE_ID(IN);
UNITY_INITIALIZE_VERTEX_OUTPUT_STEREO(OUT);
OUT.worldPosition = IN.vertex;
OUT.vertex = UnityObjectToClipPos(OUT.worldPosition);

OUT.texcoord = IN.texcoord;

OUT.color = IN.color * _Color;
return OUT;
}

sampler2D _MainTex;

fixed4 frag(v2f IN) : SV_Target
{
float2 uv = IN.texcoord;
half4 col = IN.color;
//开始裁剪
//外部直接给坐标 宽 高 GPU计算比率
float posX = (_Origin.x + 640) / 1280;
float posY = (_Origin.y + 360) / 720;
float w = _Origin.z / 1280 / 2;
float h = _Origin.w / 720 / 2;

float2 pos = float2(posX,posY);

if (uv.x > pos.x - w && uv.x<pos.x + w && uv.y>pos.y - h && uv.y < pos.y + h)
col.a = 0;

half4 color = (tex2D(_MainTex,uv) + _TextureSampleAdd) * col;

color.a *= UnityGet2DClipping(IN.worldPosition.xy, _ClipRect);
clip(col.a);
#ifdef UNITY_UI_ALPHACLIP
clip(color.a - 0.001);
#endif

return color;
}
ENDCG
}
}
}

时间: 2024-07-28 17:05:39

[Shader]新手引导中的遮罩裁剪的相关文章

CSS遮罩——如何在CSS中使用遮罩

Css遮罩是2008年4月由苹果公司添加到webkit引擎中的.遮罩提供一种基于像素级别的,可以控制元素透明度的能力,类似于png24位或png32位中的alpha透明通道的效果. 图像是由rgb三个通道以及在每个像素上定义的颜色组成的.但是在他们之上还有第四个通道,alpha通道,通过亮度定义每个像素上的透明度.白色意味着不透明,黑色意味着透明,介于黑白之间的灰色表示半透明.你可以看到下面的图片 给一个html元素使用css遮罩,就会这样处理.不用给图片应用一个alpha通道,只需要给一个图片

怎么在ZBrush中通过遮罩得到子物体

ZBrush® 中通过遮罩为模型添加子物体的方法简单且方便,我们可以通过按住Ctrl键绘制遮罩结合相关命令创建具有抽出厚度的模型提取出作为子物体附在模型表面.本文将详细介绍在Zbrush中如何通过遮罩得到子物体. 若有疑问可直接访问:http://www.zbrushcn.com/changjian/zbrush-4r7-zhezhao-ziwuti.html 1.在Light Box(灯光盒子)默认的3D工具选择PolySphere(多边形球体)物体,单击Tool>Make PolyMesh3

页面异步过程中的遮罩

原本是要继续发自定义控件形式的分页,但是我看了好一会觉得大概思路是利用委托实现事件调用重新绑定数据,我个人不太推荐这种,所以在此也就发了. 采用AJAX异步方式请求在现在页面中非常普遍,原本延迟加载是异步加载的优势.但在不同情况下,如果用户已经发起一个异步请求,再去触发其他的请求可能会导致一些页面错误,假如能在第一次异步后加个页面遮罩就能很好的处理这个情况了. 介绍的第一个遮罩是利用easyui的messager.progress,效果如下: <link href="jquery-easy

Easyui 弹出加载中的遮罩的两种方法

第一种方法:$.ajax({ type:'POST', url:url, data:obj, dataType:'json', beforeSend: function () { load(); }, complete: function () { disLoad(); }, success:function(data){ showMessage(data); } }); //弹出加载层 function load() { $("<div class=\"datagrid-mas

CSS中的路径裁剪样式clip-path

前面的话 CSS借鉴了SVG裁剪的概念,设置了clip-path样式,本文将详细介绍路径裁剪clip-path 概述 clip-path属性可以防止部分元素通过定义的剪切区域来显示,仅通过显示的特殊区域.剪切区域是被URL定义的路径代替行内或者外部svg,或者定义路线的方法 [注意]IE浏览器不支持,且低版本webkit内核浏览器需要添加-webkit-前缀 [clip-path] 值: <clip-source> | [ <basic-shape> || <geometry

cocos2dx(3.X)中使用shader

原文链接:http://blog.csdn.net/xufeng0991/article/details/47256583 一 shader的基本概念 1 什么是shader shader即着色器,就是专门用来渲染3D图形的一种技术. 通过shader,可以自己编写显卡渲染画面的算法,使画面更漂亮.更逼真. 2 shader分类 shader又分两种,一种是顶点shader(3D图形是由三角形组成的,顶点shader就是计算顶点位置,并为后期像素渲染做准备的), 另一种是像素shader,就是以

【浅墨Unity3D Shader编程】之九 深入理解Unity5中的Standard Shader (一)&amp;屏幕水幕特效的实现

本系列文章由@浅墨_毛星云 出品,转载请注明出处.   文章链接:http://blog.csdn.net/poem_qianmo/article/details/49556461 作者:毛星云(浅墨)    微博:http://weibo.com/u/1723155442 本文工程使用的Unity3D版本: 5.2.1 概要:本文主要介绍了Unity5中的标准着色器,并且也涉及到了基于物理的着色.延迟渲染等高级着色技术,而在文章后半部分,也对屏幕水幕特效的实现方法进行了讲解与分析. 依然是附上

【浅墨Unity3D Shader编程】之十 深入理解Unity5中的Standard Shader(二)&amp;屏幕油画特效的实现

本系列文章由@浅墨_毛星云 出品,转载请注明出处.   文章链接:http://blog.csdn.net/poem_qianmo/article/details/49719247 作者:毛星云(浅墨)    微博:http://weibo.com/u/1723155442 本文工程使用的Unity3D版本: 5.2.1 概要:本文讲解了Unity中着色器编译多样化的思路,并对Standard Shader中正向基础渲染通道的源码进行了分析,以及对屏幕油画特效进行了实现. 众所周知,Unity官

【浅墨Unity3D Shader编程】之十一 深入理解Unity5中的Standard Shader(三)&amp;屏幕像素化特效的实现

本系列文章由@浅墨_毛星云 出品,转载请注明出处.   文章链接:http://blog.csdn.net/poem_qianmo/article/details/50095705 作者:毛星云(浅墨)    微博:http://weibo.com/u/1723155442 本文工程使用的Unity3D版本: 5.2.1  概要:续接上文,本文进一步讲解与分析了上文未讲完的Unity5中Standard Shader正向基础渲染通道源码的片段着色实现部分,以及对屏幕像素化后期特效进行了实现. 同