兩年前，為項目做演示視頻的時候用了一個AE模板弄了一個音樂可視化效果，當時也沒想過會要做到項目里面。

后來項目落地的時候用了另外一個效果。前一段時間在學習圖形學，突然想起這件事，對于那個未能完成的效果有點不死心，于是重新研究了一下，大致完成了這個效果：

先說下音樂可視化的原理。

原理：

• 通過unity的內置函數采樣音樂頻域的數值，我們項目中因為是流媒體傳輸，所以方法有所不同，總之就是通過一系列代碼獲取音樂頻域數值（關于音樂的頻域，時域這些有一大堆的理論，還涉及到非常復雜的算法，有興趣的可以去百度研究下）。
• 將頻域的數值記錄下來，寫入一張256像素寬度的貼圖，這里參考的是某位大神的腳本，但是因為時間久遠，找不到原文了，所以鏈接也沒法給出來。
• 寫一個shader，采樣音樂圖，根據獲取的數值計算想要的效果。

?

步驟：

• 在場景中創建一個plane，掛上一個AudioSource 組件，選一首你喜歡的音樂，設置一下播放和循環：

• 創建腳本，采樣音樂的數值，并記錄到一張貼圖里，并且每幀更新。然后將腳本也掛在plane上面。這里要注意下對更新數值的延遲處理，會讓最終的效果有個連續增長和連續減少的效果，如果不做這一步，就會讓效果不夠連續，會卡卡的感覺。

腳本代碼：

using UnityEngine; using System.Collections; public class MusicTexture: MonoBehaviour {public Material material;[Range(0.0005f,0.5f)]public float delay = 0.0166f;public float multiplyer = 1.0f;[HideInInspector][System.NonSerialized]public float[] spactrumDataDelay;[HideInInspector][System.NonSerialized]public Texture2D dataTexture;public FilterMode filterMode; int numSamples = 512;void Start(){ dataTexture = new Texture2D(numSamples, 1, TextureFormat.RGBA32, false);dataTexture.filterMode = filterMode;material.SetTexture("_MusicData", dataTexture);spactrumDataDelay = new float[numSamples];}void Update() {float[] spectrum = new float[numSamples];//音樂采樣GetComponent<AudioSource>().GetSpectrumData(spectrum, 0, FFTWindow.BlackmanHarris);int i = 1;while (i < numSamples+1) {float newData = (spectrum[i - 1]*1.0f*multiplyer);//對更新數據進行延遲處理if(newData>spactrumDataDelay[i-1]){spactrumDataDelay[i-1] += (delay*Time.deltaTime);if(spactrumDataDelay[i-1] > newData){spactrumDataDelay[i-1] = newData;}}else{spactrumDataDelay[i-1] -= (delay*Time.deltaTime);if(spactrumDataDelay[i-1] <0f){spactrumDataDelay[i-1] = 0f;}} // 設置像素顏色dataTexture.SetPixel(i - 1, 1, new Color((spactrumDataDelay[i - 1] * 255.0f), 0, 0, 0));i++;}// 更新texturedataTexture.Apply();} }

• 編寫shader，采樣傳入的音樂貼圖，然后用算法做出可視化效果。把plane的材質用上這個shader就可以了。

思路：利用了畫圓的算法，用一個圓減另外一個圓畫出圓環。將圓弧等分，圓弧弧度對應音樂貼圖的UV.x。根據采樣值改變圓環的粗細。然后再畫一個細一點的圓環，用之前的減去它。

這樣說可能有點拗口，下面用圖來說明：

畫一個圓；

減去一個圓，先畫個圓環；

將圓弧等分，并且按照采樣值，改變圓環粗細（兩個圓的半徑）；

再畫一個，改細一點，并且在每一小段弧中間要加上間隔；

間隔的代碼，用step函數對圓弧做處理：

float Arc = step(distance(0.5, frac(arc * divides)), 0.46); arcIn *= Arc;

相減。

當然思路是這樣，代碼中用到了各種函數，次序會有些不同。但是結果是一樣的。最后加上背景虛化和顏色變化的效果，增加一些參數。

貼上全部shader代碼：

Shader "Chain/Effects/MusicEffects" {Properties{_Color("Color",Color) = (1,1,1,1)//音樂數據圖輸入_MusicData("MusicData (Alpha)", 2D) = "black" {}//將圓弧分成多少段_Divides("Divides",int) = 64//背景平滑度_Antialias("Antialias",Range(0,1)) = 0.1//圓半徑_radius("Radius",Range(0,1)) = 0.2//變化參數_rayOffset("RayOffset",Range(0,1)) = 0.1//亮度_Brightness("Brightness",Range(0,2)) = 1}SubShader{Tags { "RenderType" = "Transparency" "IgnoreProjection" = "True""RenderQueue" = "Transparency"}Blend SrcAlpha OneZWrite OffPass{CGPROGRAM#pragma vertex vert#pragma fragment frag #include "UnityCG.cginc"struct appdata{float4 vertex : POSITION;float2 uv : TEXCOORD0;};struct v2f{float2 uv : TEXCOORD0;float4 vertex : SV_POSITION;};sampler2D _MusicData;float4 _MusicData_ST;int _Divides;fixed4 _Color;fixed _Antialias;fixed _OutAntialias;fixed _radius;fixed _rayOffset;fixed _Brightness;//用于變色的旋轉矩陣float2x2 rotate2d(float angle) {return float2x2(cos(angle),-sin(angle),sin(angle),cos(angle));}//畫特效形狀的函數fixed2 effectShape(float2 uv, fixed2 center, float radius, float antialias, float offset,fixed arc,int divides) {float2 radiusVector = center - uv;float len = length(radiusVector);//圈圈內圓半徑，根據音樂數據減小float radiusIn = radius - offset;//圈圈外圓半徑，根據音樂數據增大，設定一個最小增大值，一定會比內圓大0.005float radiusOut = radius + offset + 0.005;//畫內圈fixed arcIn = step(len, radiusOut) - step(len, radiusIn);//根據格子數取余，每一格來一個間隔float Arc = step(distance(0.5, frac(arc * divides)), 0.46);arcIn *= Arc;//外圈fixed arcOut = step(len, radiusOut - 0.004) - step(len, radiusIn - 0.004);//增加一個漸變輸出，用于背景輸出fixed arcgradient = smoothstep(radiusOut + antialias + 0.05, radiusOut, len) - smoothstep(radiusIn - 0.05 + antialias,radiusIn - 0.05, len);fixed arc_col = abs(arcOut - arcIn);arc_col = clamp(arc_col, 0.1, 1);//測試背景漸變效果//arc_col =arcIn;//輸出方塊效果//arc_col = arcgradient;//輸出為兩個通道，一個用來存儲畫的線，一個用來存儲背景的漸變return fixed2(arc_col, arcgradient);}v2f vert(appdata v){v2f o;o.vertex = UnityObjectToClipPos(v.vertex);o.uv = TRANSFORM_TEX(v.uv, _MusicData);return o;}fixed4 frag(v2f i) : SV_Target{//將坐標轉換為圓圈的弧度坐標，然后用這個坐標去采樣音樂圖，獲得音樂數據去改變圓圈的半徑等fixed arcU = atan2(i.uv.x * 2 - 1,i.uv.y * 2 - 1) / UNITY_TWO_PI;//將弧度范圍從-1~1轉換到0~1arcU = arcU * 0.5 + 0.5;//取樣音樂圖的數據，將uv分為格子，取格子起始點的值，因為我們的音樂流數據很奇怪，所以前面加了1-，正常的話去掉fixed rayoffset = tex2D(_MusicData,float2(floor((arcU)*_Divides) / _Divides,0)).r;//圓圈中心點設在坐標中心fixed2 center = fixed2(0.5,0.5);//平滑范圍最大不超過0.125fixed inantialias = _Antialias * 0.125;//以時間為旋轉速度因子變色的函數fixed2 v = mul(rotate2d(_Time.y) , i.uv);//繪制fixed2 shape = effectShape(i.uv, center, _radius, inantialias, rayoffset*_rayOffset,arcU,_Divides);fixed4 final;//分拆函數的輸出，分別作為背景和線條疊加起來final.rgb = shape.y * fixed3(v.x, v.y, 0.7 - v.y*v.x) + shape.x;final.rgb *= _Color * _Brightness;final.a = shape.x*0.5 + shape.y*0.2;return final;}ENDCG}} }

總結：

我在做這個效果的時候是根據直觀的視覺效果來分析的，還沒有考慮優化，只是目測了一下幀率，目前這個效果應該在移動平臺上問題不大。

另外如果要替代這個效果，而且算法比較復雜的話，可以考慮把背景發光等效果做成圖片疊加可能會更省效率，項目中我是直接用圖片替代了整個圓環的算法，不過效率孰優孰劣卻沒有很嚴謹的去驗證了。

目前只是一個基礎效果，如果實際應用的話，加上抗鋸齒，還可以考慮加上bloom效果，再配合一些粒子特效應該會很棒，更多效果，可以參考ShaderToy。

后來又看了一下AE源文件的處理方法，發現用到了粒子，模糊，查找邊緣后處理等手段。不知道以后會不會有時間再研究一下這種做法。

總結

以上是生活随笔為你收集整理的Unity音乐可视化效果研究的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。