我們先來看最終效果
1.利用演算法得到圓形差值的uv座標（中間為0）去取樣紋理，得到圓形擴散的迴圈紋理動畫。
2.利用演算法得到迴圈的圓形擴散遮罩，並作為頂點偏移遮罩控制頂點動畫。
3.模型頂點uv做了同一塊模型上的uv頂點座標一致性的處理，使得同一塊模型上的所有點偏移量一致。
此次製作使用ase來做演算法說明（**不直觀）。
1. 利用uv的取值範圍對映到指定的取值範圍，並求模（remap和length）
第乙個演算法是remap方法:
將某個區間的取值範圍（[min old, max old]）對映到指定區間範圍（[min new, max new]）。
演算法為：如要將val從[a, b]對映到[a, b]，則公式為 val = a + val * (b - a) / (b - a)
第二個演算法是length方法，意思是求取向量模長。公式：sqrt ( dot ( iput, iput ) )。此處將
[-1， 1]的取值範圍的二維座標取模，因為中間點（0， 0）的模長為0，邊界處模長為1，所以得到乙個[0, 1]灰度漸變的圓（這裡的漸變為線性的）。
2. 兩向量間的距離，（distance）
當b向量timespeed = 0時，distance如下圖所示。
公式：sqrt (dot ( ( b-a ), ( b-a ) ) )，即為兩向量距離公式。
這裡將公式拆開分析，此處為兩個模長的點積，即標量點積（理論上是不成立的，但是unity在底層還是做了計算規則）。先來看下圖：
0.6點積0.6 近似= 1
所以我猜測可能是將一維的值自動填充為了三維向量，三個分量都是一維的那個值。然後兩個三維向量進行點乘。例舉幾個值，測試結果均吻合！下圖是其中乙個測試：
下圖中的a是length的值，即模長為1的圓，根據上面推測的演算法，a和a點積並開方後，邊界值為根號3，即約等於1.732，並做了減法驗證，說明推測無誤（但是從0到1.732是非線性漸變的），所以看起來黑色圓縮小了。
sqrt為開根號運算。
當b向量timespeed != 0時，distance如下圖所示為乙個從time*speed 到（上限值x（此處x為1.732）timespeed） 範圍的取值。並且隨著時間增長，整個區間的值也隨著增長。
3.uv座標值隨著時間線性增長並實時取樣貼圖
用distance的值去取樣彩虹紋理圖，得到迴圈圓的彩虹紋理。
作為uv座標的distance遮罩的(0, 0)點在中心，取樣貼圖顏色為彩虹紋理圖的左下角(0, 0)點的顏色（橙色），所以最終中心點顏色為橙色，並隨著座標的增大，不斷取樣靠上的顏色，黃，綠，藍，紫，紅。當座標超過1時，即迴圈從橙色開始取樣。所以最終效果是乙個迴圈的圓擴散動畫。
4. fract（取小數字）
如上面所分析，distance的取值範圍在[ timespeed， x * timespeed ]，差值為2左右，這樣就有了兩個小數迴圈，如圖fract所示。由於從0.9999到0是突然跳轉（因為1的小數字是0），所以有硬邊，而0到1是漸變的。但是這裡發現了個問題，那就是如果distance上限為1.732，那取小數後就是0.732，不可能為上圖fract的樣式，應該是下圖這樣的：
而我們用點乘開方的演算法算出來正是上面的形狀，請看：
所以我覺得distance演算法並不像官方所說的僅僅是sqrt (dot ( ( b-a ), ( b-a ) ) )，應該還加了乙個壓縮到整數字的操作，這樣取小數時才能取滿。
所以我們使用remap將取值範圍從（0， 1.737）對映到（0， 2），如下圖所，結果和distance結果一致。
5.step節點
step節點具體演算法是，如果b>a，則返回1（白色），如果b<=a，則返回0（黑色）。
將fract的值做step就得到了黑白遮罩，這個遮罩是為了最終影響頂點偏移（黑色不偏移，白色完全偏移，因為模型頂點uv做了同一塊模型上的uv頂點座標一致性的處理）而做的。
頂點動畫 廣告牌效果
轉動攝像機時，無論從哪個方向對著物體，會看到物體看起來總是正對著攝像機。為了使物體不會隨著攝像機的角度的不同，而成像的面向不同。可以使用旋轉矩陣，對物體實時進行旋轉上的修正。即求得模型空間下，以視角方向做為法線方向，並計算出其他兩個座標方向，up與right，構成一組正交基。再使用它對原頂點進行轉換...
Unity shader實現頂點動畫波動效果
需要了解的背景知識 波動例項 y asin x 決定波形與x軸位置關係或橫向移動距離 左加右減 決定週期 最小正週期t 2 a 決定峰值 縱向拉伸壓縮的倍數 頂點著色器的主要計算 1.頂點位置 2.矩陣轉換 片段著色器 1.紋理定址 2.燈光作用 time表示時間週期 float4 t 20,t,t...
ae制h5文字動畫 AE文字書寫動畫製作
影視小白自學之路第十一天，遮罩與蒙版也學習了幾天了，今天學習的是文字書寫動畫的製作，同樣使用了蒙版，按教程來看這個做法不難，只不過是有點費事，嘗試著做一下就知道了。1 新建合成，用純黑色圖層作為背景層，用文字工具新建 文字書寫動畫 設定好文字大小 字型 顏色等 2 使用鋼筆工具，沿文字書寫筆畫進行路...