Unity Shader實現新手引導遮罩鏤空效果

這兩天實現了下新手引導需要的遮罩鏤空shader效果，記錄一下。

1、圓形鏤空shader**：

//計算片元世界座標和目標中心位置的距離

float dis = distance(in.worldposition.xy, _center.xy);

//過濾掉距離小於（半徑-過渡範圍）的片元

clip(dis - (_radius - _transitionrange));

//優化if條件判斷，如果距離小於半徑則執行下一步，等於if(dis < _radius)

fixed tmp = step(dis, _radius);

//計算過渡範圍內的alpha值

color.a *= (1 - tmp) + tmp * (dis - (_radius - _transitionrange)) / _transitionrange;

效果：忽略漸變的蒙版，隨便找的

2、橢圓鏤空shader**：

//計算x軸方向距離

float disx = distance(in.worldposition.x, _center.x);

//計算y軸方向距離

float disy = distance(in.worldposition.y, _center.y);

//運用橢圓方程計算片元的alpha值，_ellipse為橢圓係數

fixed factor = clamp(pow(abs(disx / _width), _ellipse) + pow(abs(disy / _height), _ellipse), 0.0, 1.0);

//優化if條件判斷

fixed tmp = step(factor, 1.0f);

//賦值橢圓外或橢圓內的alpha值

color.a *= (1 - tmp) + tmp * factor;

效果：3、圓形目標位置聚合動畫shader**：

//_starttime為效果開始時間點，unity中對應賦值material.setfloat("_starttime", time.timesincelevelload);

fixed processtime = _time.y - _starttime;

//判斷shader執行時長是否超過_totaltime

clip(_totaltime - processtime);

//優化if條件判斷

fixed tmp = step(processtime, _reducetime);

//計算當前時間點的圓形鏤空半徑

float curradius = (1 - tmp) * _radius + tmp * (_maxradius - (_maxradius - _radius) * processtime / _reducetime);

float dis = distance(in.worldposition.xy, _center.xy);

//拋棄距離小於當前圓形鏤空半徑的片元

clip(dis - curradius);

效果：不知道為啥上傳上來就有問題了，正常是沒問題的

整個shader原始碼，在unity ugui 自帶default shader基礎上新增：

shader "ui/default_mask"

_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

[toggle(unity_ui_alphaclip)] _useuialphaclip ("use alpha clip", float) = 0

//-------------------add----------------------

_center("center", vector) = (0, 0, 0, 0)

_radius("radius", range(0,1000)) = 1000 // sliders

_transitionrange("transition range", range(0, 100)) = 10

_width("width", float) = 1

_height("height", float) = 1

_ellipse("ellipse程式設計客棧", float) = 4

_reducetime("reducetime", float) = 1

_totaltime("totaltime", float) = 1

_starttime("starttime", float) = 0

_maxradius("maxradius", float) = 1500

[keywordenum(round, ellipse, dynamic_round)] _roundmode("mask mode", float) = 0

//-------------------add----------------------

} subshader

stencil

cull off

lighting off

zwrite off

ztest [unity_guiztestmode]

blend srcalpha oneminussrcalpha

colormask [_colormask]

pass

;struct v2f

;fixed4 _color;

fixed4 _texturesampleadd;

float4 _cliprect;

//-------------------add----------------------

half _radius;

float2 _center;

half _transitionrange;

half _width;

half _height;

half _ellipse;

fixed _reducetime;

half _totaltime;

float _starttime;

half _maxradius;

//-------------------add----------------------

v2f vert(appdata_t v)

sampler2d _maintex;

fixed4 frag(v2f in) : sv_target

endcg}}}

本文標題: unity shader實現新手引導遮罩鏤空效果

本文位址:

Unity Shader實現模糊效果

今天分享乙個超簡單實現模糊效果的方法，先上圖核心就這句注意要在3.0以上的版本才能使用在取樣後做偏移取樣再疊加，效果與下面的類似 float4 frag v2f o sv target 下面的完整 shader custom testshader40 scale scale range 0...

Unity Shader實現翻書效果

這裡就隨便用的一張紋理了，我們還是稱為翻木板吧，哈哈。實現過程其實這個效果實現起來還是挺簡單的，大概思路其實就是讓所有頂點都繞z軸旋轉，並且通過正余弦使之帶有一點弧度。下面開始讓我們一步一步的實現該效果。首先開啟unity新建乙個工程，場景，並且建立乙個名為openbookeffect的sha...

Unity Shader 中實現凹凸對映

每乙個頂點都有自己的切線空間。在該空間中，z軸是頂點的法線方向，x軸是頂點的切點方向，而y方向則是兩者叉積的方向。我們需要在頂點著色器中把視角方向和光照方向從模型空間變換到切線空間中，即我們需要從模型空間到切線空間的變換矩陣。而很好求的是，這個變換矩陣的逆矩陣正是在頂點著色器中切線 x軸副切線 y...

Unity Shader實現新手引導遮罩鏤空效果

Unity Shader實現模糊效果

Unity Shader實現翻書效果

Unity Shader 中實現凹凸對映

相關推薦