更新日期：2021年9月2日。
Github源碼：[點(diǎn)我獲取源碼]

索引

• Shiny 閃亮
• 思路分析
• • 閃亮區(qū)域
  • 柔和度
  • 光澤度
  • 旋轉(zhuǎn)
  • 閃亮動(dòng)畫

Shiny 閃亮

Shiny以另一種方式實(shí)現(xiàn)了LOGO流光，在表現(xiàn)效果上與其相差無幾，不同的地方是Shiny不需要指定流光遮罩以及流動(dòng)的圖片紋理等，他是直接通過UV計(jì)算出一塊區(qū)域，然后疊加顏色，以達(dá)到亮閃閃的效果，最終的效果圖：

思路分析

首先，按照LOGO流光的思路，我們只需要選出一片uv區(qū)域，為區(qū)域疊加顏色，并使得區(qū)域的中心越亮，越往區(qū)域的兩邊擴(kuò)散越暗，在不考慮動(dòng)畫的情況下，這便是我們想要的區(qū)域閃亮效果了。

因?yàn)橐o人一種一閃而過的感覺，所以我們的閃亮區(qū)域必定是上下貫通（左右移動(dòng)）或者左右貫通（上下移動(dòng)）的情況，如上文的最終效果圖，閃亮區(qū)域便是上下貫通的，進(jìn)行左右移動(dòng)達(dá)到一閃而過的效果。

閃亮區(qū)域

我們先考慮上下貫通的方式，設(shè)想中，我們的閃亮區(qū)域如下：

我們將閃亮的值想象為0-1，則區(qū)域最中心為1（最亮），越往兩邊擴(kuò)散就越接近0（最暗）：

根據(jù)經(jīng)驗(yàn)，很明顯我們這里可以使用uv的橫坐標(biāo)來轉(zhuǎn)換至閃亮的值，已知uv的橫坐標(biāo)值區(qū)間如下：

那么我們的算法便明確了，即是將區(qū)間[0,1]（也即是uv.x的取值范圍）映射為區(qū)間[0,1,0]！

首先，區(qū)間[0,1]可以進(jìn)一步抽象為區(qū)間[0,0.5,1]，然后，先將區(qū)間[0,0.5,1]映射至區(qū)間[-1,0,1]：

//將區(qū)間[0,0.5,1]，映射到區(qū)間[-1,0,1]half value1 = uv.x * 2 - 1;

然后再將區(qū)間[-1,0,1]，通過取絕對(duì)值映射到區(qū)間[1,0,1]：

//將區(qū)間[0,0.5,1]，映射到區(qū)間[-1,0,1]half value1 = uv.x * 2 - 1;//將區(qū)間[-1,0,1]，映射到區(qū)間[1,0,1]half value2 = abs(value1);

最后，將區(qū)間[1,0,1]倒置，便得到我們的所求結(jié)果，區(qū)間[0,1,0]：

//將區(qū)間[0,0.5,1]，映射到區(qū)間[-1,0,1]half value1 = uv.x * 2 - 1;//將區(qū)間[-1,0,1]，映射到區(qū)間[1,0,1]half value2 = abs(value1);//倒置區(qū)間[1,0,1]，得到區(qū)間[0,1,0]half value3 = 1 - value2;

到這里，得到的值value3便是一個(gè)根據(jù)當(dāng)前輸入的uv.x值，返回的閃亮的值，此值的區(qū)間為[0,1,0]，中間亮，兩邊暗。

柔和度

我們可以使用如下方式將值value3 [0,1,0]進(jìn)行平滑，得到的power就是我們最終的閃亮強(qiáng)度：

//通過smoothstep將區(qū)間[0,1,0]平滑，得到閃亮強(qiáng)度powerhalf power = smoothstep(0, softness, value3);

這里的softness是外部輸入的值，我們命名為柔和度，柔和度為何能夠達(dá)到平滑效果呢？我們看圖分析一下。

首先，當(dāng)柔和度最低時(shí)（這里是0.01），效果上表現(xiàn)為完全不柔和：

我們分析一下公式，將柔和度0.01帶入：

//通過smoothstep將區(qū)間[0,1,0]平滑，得到閃亮強(qiáng)度powerhalf power = smoothstep(0, 0.01, value3);

根據(jù)smoothstep方法特性，只要輸入值value3值大于0.01的，都會(huì)返回1，賦予power，也即是說，經(jīng)過一輪平滑運(yùn)算，我們?cè)镜膙alue3區(qū)間：

//擴(kuò)大區(qū)間細(xì)節(jié)[0,0.1,0.2,...0.9,1,0.9...0.2,0.1,0]

被轉(zhuǎn)換為了power區(qū)間：

//擴(kuò)大區(qū)間細(xì)節(jié)[0,1,1,...1,1,1...1,1,0]

也即是說，極低柔和度使得所有稍微有一點(diǎn)亮度的地方，都變?yōu)榱肆炼葹?，這便是柔和度的體現(xiàn)。

反之，當(dāng)柔和度最高時(shí)（這里是1），此平滑運(yùn)算將返回value3原值，他本身就是一個(gè)帶有平滑效果的區(qū)間：

光澤度

由上文我們已經(jīng)求得了閃亮的亮度值power，我們將亮度值乘以一個(gè)顏色，便得到我們最終的閃亮顏色了，在這里，我們?cè)俣纫胍粋€(gè)控制參數(shù)光澤度，用他來控制我們輸出的顏色值：

//通過光澤度插值得到閃光顏色shinyColorhalf3 shinyColor = lerp(fixed3(1, 1, 1), color.rgb, gloss);//輸出最終顏色（原始顏色 + 閃亮顏色）color.rgb += shinyColor * power;

這里的光澤度gloss在純白色與本身顏色之間插值，當(dāng)光澤度為0，閃亮顏色為白色（三通道值相等，乘以power后會(huì)被降低部分值），任意顏色的三通道RGB累加上相同的值后，并不會(huì)改變其色相，也就是說，他該是紅色還是紅色，該是藍(lán)色還是藍(lán)色，看起來就只是整體變亮了一點(diǎn)，沒有光澤感：

當(dāng)光澤度為1時(shí)，閃亮顏色為自身顏色，自身顏色累加自身顏色，這就使得紅色的地方越紅，藍(lán)色的地方越藍(lán)，極具光澤感：

旋轉(zhuǎn)

如上的計(jì)算，我們得到的只是一個(gè)垂直的，上下貫通的閃亮區(qū)域，我們想要將他任意旋轉(zhuǎn)，比如下面這樣：

這樣：

這樣：

如何實(shí)現(xiàn)這樣的效果呢？

我們?cè)倩叵胍幌伦铋_始求得閃亮區(qū)域的算法：輸入一個(gè)uv坐標(biāo)，根據(jù)uv坐標(biāo)的x值求得此坐標(biāo)點(diǎn)的閃亮顏色強(qiáng)度。

我們要實(shí)現(xiàn)旋轉(zhuǎn)效果，直接將uv坐標(biāo)旋轉(zhuǎn)后再輸入，輸出的不就是該uv坐標(biāo)的真實(shí)坐標(biāo)點(diǎn)的閃亮顏色強(qiáng)度！

所以算法很簡單，說干就干，直接轉(zhuǎn)一下uv：

//uv旋轉(zhuǎn) uv = RotatePoint2(uv, float2(0.5, 0.5), radians(_Rotation));

RotatePoint2的功能是沿著一個(gè)圓心，將輸入的二維點(diǎn)旋轉(zhuǎn)指定弧度：

//將二維頂點(diǎn)point2，沿著圓心center，順時(shí)針旋轉(zhuǎn)radian弧度 float2 RotatePoint2(float2 point2, float2 center, half radian) {half radius = distance(point2, center);half angle = atan((point2.y - center.y) / (point2.x - center.x)) - radian;point2.x = cos(angle) * radius + center.x;point2.y = sin(angle) * radius + center.y;return point2; }

算法也即是三角函數(shù)，這里就不做詳解了。

閃亮動(dòng)畫

要實(shí)現(xiàn)閃亮動(dòng)畫，我們只需要改變輸入的_Position值即可，不需要借助_Time參數(shù)，直接添加一個(gè)動(dòng)畫播放器：

到此，這個(gè)簡單的閃亮效果就基本完結(jié)了，如果還有不明白的地方可以查閱源碼，當(dāng)然，博客中的代碼不一定與源碼完全相同，這里的本意只是介紹思路，具體的實(shí)現(xiàn)過程中可能有一些語句上的優(yōu)化，當(dāng)然核心算法是一樣的。

總結(jié)

以上是生活随笔為你收集整理的【Unity Shader】Special Effects（三）Shiny 闪亮（UI）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。