更新日期：2021年9月2日，
Github原始碼：[點我獲取原始碼]
索引
- Shiny 閃亮
- 思路分析
- 閃亮區域
- 柔和度
- 光澤度
- 旋轉
- 閃亮影片
Shiny 閃亮
Shiny以另一種方式實作了LOGO流光，在表現效果上與其相差無幾，不同的地方是Shiny不需要指定流光遮罩以及流動的圖片紋理等，他是直接通過UV計算出一塊區域，然后疊加顏色，以達到亮閃閃的效果，最終的效果圖：
思路分析
首先，按照LOGO流光的思路，我們只需要選出一片uv區域，為區域疊加顏色，并使得區域的中心越亮，越往區域的兩邊擴散越暗，在不考慮影片的情況下，這便是我們想要的區域閃亮效果了，
因為要給人一種一閃而過的感覺，所以我們的閃亮區域必定是上下貫通（左右移動）或者左右貫通（上下移動）的情況，如上文的最終效果圖，閃亮區域便是上下貫通的，進行左右移動達到一閃而過的效果，
閃亮區域
我們先考慮上下貫通的方式，設想中，我們的閃亮區域如下：
我們將閃亮的值想象為0-1，則區域最中心為1（最亮），越往兩邊擴散就越接近0（最暗）：
根據經驗，很明顯我們這里可以使用uv的橫坐標來轉換至閃亮的值，已知uv的橫坐標值區間如下：
那么我們的演算法便明確了，即是將區間[0,1]（也即是uv.x的取值范圍）映射為區間[0,1,0]！
首先，區間[0,1]可以進一步抽象為區間[0,0.5,1]，然后，先將區間[0,0.5,1]映射至區間[-1,0,1]：
//將區間[0,0.5,1]，映射到區間[-1,0,1]
half value1 = uv.x * 2 - 1;
然后再將區間[-1,0,1]，通過取絕對值映射到區間[1,0,1]：
//將區間[0,0.5,1]，映射到區間[-1,0,1]
half value1 = uv.x * 2 - 1;
//將區間[-1,0,1]，映射到區間[1,0,1]
half value2 = abs(value1);
最后，將區間[1,0,1]倒置，便得到我們的所求結果，區間[0,1,0]：
//將區間[0,0.5,1]，映射到區間[-1,0,1]
half value1 = uv.x * 2 - 1;
//將區間[-1,0,1]，映射到區間[1,0,1]
half value2 = abs(value1);
//倒置區間[1,0,1]，得到區間[0,1,0]
half value3 = 1 - value2;
到這里，得到的值value3便是一個根據當前輸入的uv.x值，回傳的閃亮的值，此值的區間為[0,1,0]，中間亮，兩邊暗，
柔和度
我們可以使用如下方式將值value3 [0,1,0]進行平滑，得到的power就是我們最終的閃亮強度：
//通過smoothstep將區間[0,1,0]平滑，得到閃亮強度power
half power = smoothstep(0, softness, value3);
這里的softness是外部輸入的值，我們命名為柔和度，柔和度為何能夠達到平滑效果呢？我們看圖分析一下，
首先，當柔和度最低時（這里是0.01），效果上表現為完全不柔和：
我們分析一下公式，將柔和度0.01帶入：
//通過smoothstep將區間[0,1,0]平滑，得到閃亮強度power
half power = smoothstep(0, 0.01, value3);
根據smoothstep方法特性，只要輸入值value3值大于0.01的，都會回傳1，賦予power，也即是說，經過一輪平滑運算，我們原本的value3區間：
//擴大區間細節
[0,0.1,0.2,...0.9,1,0.9...0.2,0.1,0]
被轉換為了power區間：
//擴大區間細節
[0,1,1,...1,1,1...1,1,0]
也即是說，極低柔和度使得所有稍微有一點亮度的地方，都變為了亮度為1，這便是柔和度的體現，
反之，當柔和度最高時（這里是1），此平滑運算將回傳value3原值，他本身就是一個帶有平滑效果的區間：
光澤度
由上文我們已經求得了閃亮的亮度值power，我們將亮度值乘以一個顏色，便得到我們最終的閃亮顏色了，在這里，我們再度引入一個控制引數光澤度，用他來控制我們輸出的顏色值：
//通過光澤度插值得到閃光顏色shinyColor
half3 shinyColor = lerp(fixed3(1, 1, 1), color.rgb, gloss);
//輸出最終顏色（原始顏色 + 閃亮顏色）
color.rgb += shinyColor * power;
這里的光澤度gloss在純白色與本身顏色之間插值，當光澤度為0，閃亮顏色為白色（三通道值相等，乘以power后會被降低部分值），任意顏色的三通道RGB累加上相同的值后，并不會改變其色相，也就是說，他該是紅色還是紅色，該是藍色還是藍色，看起來就只是整體變亮了一點，沒有光澤感：
當光澤度為1時，閃亮顏色為自身顏色，自身顏色累加自身顏色，這就使得紅色的地方越紅，藍色的地方越藍，極具光澤感：
旋轉
如上的計算，我們得到的只是一個垂直的，上下貫通的閃亮區域，我們想要將他任意旋轉，比如下面這樣：
這樣：
這樣：
如何實作這樣的效果呢？
我們再回想一下最開始求得閃亮區域的演算法：輸入一個uv坐標，根據uv坐標的x值求得此坐標點的閃亮顏色強度，
我們要實作旋轉效果，直接將uv坐標旋轉后再輸入，輸出的不就是該uv坐標的真實坐標點的閃亮顏色強度！
所以演算法很簡單，說干就干，直接轉一下uv：
//uv旋轉
uv = RotatePoint2(uv, float2(0.5, 0.5), radians(_Rotation));
RotatePoint2的功能是沿著一個圓心，將輸入的二維點旋轉指定弧度：
//將二維頂點point2，沿著圓心center，順時針旋轉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;
}
演算法也即是三角函式，這里就不做詳解了，
閃亮影片
要實作閃亮影片，我們只需要改變輸入的_Position值即可，不需要借助_Time引數，直接添加一個影片播放器：
到此，這個簡單的閃亮效果就基本完結了，如果還有不明白的地方可以查閱原始碼，當然，博客中的代碼不一定與原始碼完全相同，這里的本意只是介紹思路，具體的實作程序中可能有一些陳述句上的優化，當然核心演算法是一樣的，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/297680.html
標籤：其他