【從UnityURP開始探索遊戲渲染】專欄-直達

暈影(Vignette)是Unity URP後處理中的一種視覺效果，主要用於模擬攝影中圖像邊緣變暗或去飽和的現象。它通過將觀眾注意力引導至畫面中心來增強視覺焦點，常見於電影、遊戲等場景中。

發展歷史

暈影效果最初源自攝影技術，後逐漸被引入數字圖像處理領域。在Unity中，早期版本通過標準資源包實現，隨着URP/HDRP管線的推出，該效果被整合到Volume框架中，成為模塊化後處理系統的一部分。

實現原理

暈影通過計算像素與屏幕中心的距離，應用衰減函數產生邊緣暗化效果。URP提供兩種實現模式：

• ‌程序化模式‌：通過數學函數生成圓形/橢圓形暈影
• ‌蒙版模式‌：使用紋理貼圖定義自定義形狀

暈影(Vignette)在Unity URP中的底層實現基於屏幕空間距離計算和顏色混合算法.

數學計算模型

• ‌距離衰減函數‌：通過計算像素座標與屏幕中心(0.5,0.5)的歐氏距離，使用length(abs(uv - center))生成徑向梯度
• ‌平滑度控制‌：對原始距離值應用pow(saturate(dist), smoothness)運算，通過指數函數調整邊緣過渡曲線
• ‌反向映射‌：最終通過1 - dist * dist將黑白關係反轉，使中心區域保持明亮而邊緣變暗

着色器實現

以下為簡化後的HLSL代碼片段：

hlsl
float2 uv = i.uv - _Center;
float dist = length(uv * _Intensity);
float vignette = pow(saturate(1 - dist * dist), _Smoothness);
return inputColor * vignette;

該算法在URP的PostProcessPass.cs中通過全屏繪製命令執行，每個像素都會經過此計算流程

模式差異

• ‌程序化模式‌：實時計算圓形/橢圓形遮罩，性能開銷約0.3ms(1080p分辨率)
• ‌蒙版模式‌：採樣外部紋理作為遮罩，支持任意形狀但增加內存帶寬消耗

• Vignette.shader

  Shader "Hidden/URP/Vignette"
  {
      Properties {
          _MainTex ("Base (RGB)", 2D) = "white" {}
          _VignetteColor ("Vignette Color", Color) = (0,0,0,1)
          _VignetteCenter ("Center", Vector) = (0.5, 0.5, 0, 0)
          _VignetteIntensity ("Intensity", Float) = 1.0
          _VignetteSmoothness ("Smoothness", Range(0,1)) = 0.5
      }
      SubShader {
          Pass {
              HLSLPROGRAM
              #include "Packages/com.unity.render-pipelines.universal/ShaderLibrary/Core.hlsl"
  
              TEXTURE2D(_MainTex);
              float4 _VignetteColor;
              float2 _VignetteCenter;
              float _VignetteIntensity;
              float _VignetteSmoothness;
  
              float4 Frag(Varyings input) : SV_Target {
                  float4 color = SAMPLE_TEXTURE2D(_MainTex, sampler_MainTex, input.uv);
  
                  float2 uv = input.uv - _VignetteCenter;
                  float dist = length(uv * _VignetteIntensity);
                  float vignette = pow(saturate(1 - dist * dist), _VignetteSmoothness);
  
                  return lerp(_VignetteColor, color, vignette);
              }
              ENDHLSL
          }
      }
  }

該實現包含顏色混合、中心點偏移和動態平滑度控制，通過lerp函數實現顏色插值

完整實現流程

創建全局Volume

在Hierarchy右鍵 Create > Volume > Global Volume

添加Vignette效果

選中Volume對象 > Inspector > Add Override > Post-processing > Vignette

配置相機

選中主相機 > Rendering > 啓用Post Processing

參數説明與用例

藝術化應用案例

• ‌恐怖遊戲‌：高強度(0.7)黑色暈影配合低平滑度(0.1)，營造隧道視野效果
• ‌復古風格‌：棕色暈影+膠片顆粒，模擬老電影質感
• ‌UI聚焦‌：短暫增強暈影引導玩家注意關鍵UI元素

【從UnityURP開始探索遊戲渲染】專欄-直達
（歡迎點贊留言探討，更多人加入進來能更加完善這個探索的過程，🙏）