Shader: Sin wave trail 波形擺動拖尾效果
大家好!今天跟大家分享先前製作的效果Ghost Trail 波形擺動拖尾效果。
Hi, everyone. I`m glad to share the breakdown of the Ghost Trail Effect.
在這此效果中僅使用了一組粒子系統搭配其中的Trail組件及模型粒子來實現，而如何透過一組Trail面板來實現看似三條拖尾的擺動效果，正是此Shader表現的重點。
It was done with just a particle system, and it is particle mesh render within trail component. The issue of the effect is how to create three different swing trail on a single plane.
Shader是使用Amplify Shader Editor1.5.8 製作亦可使用內建Shader graph實現，先看一下整個Shader樹狀圖。
The shader is made by Amplify shader editor 1.5.8. It also could do it with shader graph in Unity.
貼圖使用Substance Designer 2018
Texture made by Substance designer 2018
R: 拖尾紋理1 / for trail 1.
G: 拖尾紋理2 / for trail 2.
B: 拖尾擾動 / the noise of distortion.
A: 消散雜訊紋理 / the noise for dissolve.
Shader的製作 Breakdown of shader
1.基礎Shader屬性設定 Setting property
2.Shader大圖中Sin01的區塊為擺動UV的產生，Sin02及03僅是重複01計算後，改變其波長頻率時間等來製作三種不同擺幅 。
The Sin01 block is working for the motion of V coordinate. Sin02 and Sin03 block are just duplicate it, and modify the value of wavelength, amplitude and time to do the variety of motion.
a. 先製作Sin的頻率並加入時間參數使其成為動態。
First, create the sin node and add with time.
First, create the sin node and add with time.
b.接著將V坐標系映射成上下正負對稱的數值(例: 1~-1, 0.5~-0.5) 後再與Sin進行疊加。
V coordinate remap to 1~ -1, and then add to Sin. You can fin the Sin wave animation.
c.由於疊加後參數將大於1因而產生重複貼圖紋理，故進行參數的映射計算使其於1~-1之間。
As the result, value goes to be more than one. It has to remap to 1~ -1.
d.將計算完的擺動值與U坐標系相乘，使其產生越遠離左端擺動越大之效果，最後加回V坐標系中完成擺動效果的V坐標系。
Multiply U coordinate to increase the swing animation from left to right (0~1) and add to the origin V coordinate.
e.計算完成後的V坐標系動態接著與原U坐標系相互合併成為此次所需的擺動UV。
Append swing V and origin U to get the swing UV for trail map.
3.為了使擺動更為柔軟且具變化性, 將加入擾動的UV，擾動UV為FlowUV區塊，利用貼圖B通道的雜訊圖製作兩組錯位位移，透過FlowStrength參數調控擾動強度，及U坐標系保持左端拖尾起始位置的形狀。
In order to make the trail animation to be more variety, need to add some distortion into UV. The Flow UV block work with two motion from B channel of texture and multiply the parameter value to control the strength of distortion. Multiply U coordinate to keep shape in the start position (left) and more distortion to end (right).
In order to make the trail animation to be more variety, need to add some distortion into UV. The Flow UV block work with two motion from B channel of texture and multiply the parameter value to control the strength of distortion. Multiply U coordinate to keep shape in the start position (left) and more distortion to end (right).
4.EdgeMask區塊為製作遮罩清除邊緣因過度擾動所超出的紋理，並淡出前端紋理去除切線。
Create the edge mask within UV coordinate to clean the shape animation over the edge.
Create the edge mask within UV coordinate to clean the shape animation over the edge.
5.最後Dissolve區塊來進行尾端消散的效果。
Dissolve block is doing the dissolve in the end of trail.
Dissolve block is doing the dissolve in the end of trail.
a.為了使消散自然不重複，故也使用FlowUV的擾動效果與原UV坐標系相加來完成基本的擾動效果。
Add Flow UV to make it naturally.
b.特別說明一下取位移後只取小數點，因貼圖是無縫紋理故只取用小數點以下即0~1之間即可效果無影響，如不做會因時間大量疊代產生的數值偏差與虛耗，當然前提是該效果會在場上停留非常久之時間才須注意。
To add frac node, it will let the value from 0~1, even it is going to be huge from time. But the texture have to be seamless. In this way, it could maintain the motion value and some performance.
c.調整消散的強度曲線，並注意將數值限制於0~1之間。
Modify the ramp (0~1) to increase effect of dissolve.
Modify the ramp (0~1) to increase effect of dissolve.
6.最後利用U坐標系作為遮罩添加兩組顏色的分布，再將遮罩消散計算等參數相乘混和後輸出完成。
Lerp within U coordinate to create two color from start (left) to end (right). 
Shader的部分就到此完成
Done
Done
粒子系統設置 particle setting
主要是選用模型粒子製作骷髏頭螺旋向上的動態及拖尾效果的運用，參數如圖所示各部件詳細功能解說請參閱官方文件。
The render is mesh particle and add the trail component. You can find the detail setting in the below picture.
The render is mesh particle and add the trail component. You can find the detail setting in the below picture.
以上就是Sin Wave拖尾效果的製作。
It is the breakdown of the Sin Wave effect.
歡迎留言反饋與分享，感謝觀看。
Please feel free feedback and comment.
Enjoy it. Thanks!
好文！
回覆刪除感謝支持
刪除謝謝分享，從 Real Time VFX 過來看到的，受益良多。
回覆刪除不知道作者是如何想出 Shader 的，若想自己寫出需要甚麼樣的基礎呢？
感謝支持。
刪除有電腦圖學的基礎會很有幫助你快速理解成像邏輯，再來是美學及動畫的邏輯會幫助你活用這些程式碼產生令人驚豔的效果。
而我是純特效美術並不懂程式語言,SHADER的學習須從基礎搞懂每一個Node所進行的計算後，並且大量練習與運用，一開始面對空白的編輯頁面會令人茫然，所以必須多臨摹學習他人已完成的效果並且理解其邏輯原理，千萬不能只是照抄有效果後就此結束，須等日積月累到一定的程度會慢慢找出自己一套編寫的方式，這部分會因每個人的理解能力有快有慢所以無須擔心，只要每天持續的練習及思考就會慢慢理解開來。
之前在Youtube上看到这个效果的时候就感到特别惊艳！没想到您居然出了教程！感谢分享！真是太厉害了！
回覆刪除謝謝大大願意分享~~~~~~~~~~祝生意興隆~~~~XDD
回覆刪除