【博物納新】Isaura—光環特效開源庫評測

【博物納新】是UWA重磅推出的全新欄目，旨在為開發者推薦新穎、易用、有趣的開源項目，幫助大家在項目研發之餘發現世界上的熱門項目、前沿技術或者令人驚嘆的視覺效果，並探索將其應用到自己項目的可行性。很多時候，我們並不知道自己想要什麼，直到某一天我們遇到了它。

導讀

今天給大家安利一個keijiro的光環特效項目Isaura（Aura effect with a isoline shader），工程結構非常簡單，只有必要的測試資源，代碼量也不大，對新手非常友好。

一、效果展示

二、項目概述

作者利用等值線Shader，將普通的粒子系統效果轉化成絢麗漂亮的不規則圓環效果，調整美化後最終得到上圖中「跟隨角色招式的光環效果」，實現思路值得借鑒。

三、實現步驟

接下來，帶大家簡單看一看項目中漂亮的光環效果是如何實現的。

準備基礎模型及動作

首先準備一個人形模型及對應的動作，由於希望在角色的左右手上製作出光環效果，故項目中保留了模型上的左右手節點使其暴露出來，並在節點下添加了兩個紫色點光源。效果如下圖：

在角色手上添加粒子特效

第二步，在角色的右手節點（希望有特效的部位）下創建兩個粒子特效，項目中使用了一個Billboard粒子和一個Mesh粒子，效果如下：

將粒子系統效果渲染到一張RenderTexture上

新建一個RenderTexture資源Aura，格式設為R8，Size設為1920x1080。

新建Layer，命名為Isaura，並將第二步添加的粒子系統的Layer設為Isaura。

新建一個Camera 命名為Isaura Camera，並將其CullingMask設為Isaura層，TargetTexture設為Aura。

完成上述步驟後，第二步創建的粒子系統的渲染效果就被以R8格式存儲在Aura這張RenderTexture上了。

編寫等值線Shader，用於將圖像轉換成「等值線圖」

項目中IsauraEffect.shader的部分代碼：

Shader "Hidden/Isaura/Isaura Effect" { Properties { _MainTex("", 2D) = "" {} _AuraTex("", 2D) = "" {} _Color("", Color) = (1, 1, 1) }

HLSLINCLUDE

#include "PostProcessing/Shaders/StdLib.hlsl"

TEXTURE2D_SAMPLER2D(_MainTex, sampler_MainTex);

TEXTURE2D_SAMPLER2D(_AuraTex, sampler_AuraTex);
float4 _AuraTex_TexelSize;

half _Threshold; //等值線檢測值
half _Thickness; //等值線厚度(粗細)
half4 _Color; //等值線顏色

half Contour(float2 uv)
{
float4 duv = _AuraTex_TexelSize.xyxy * float4(1, 1, -1, 0) * _Thickness;

half3x3 m = half3x3(
SAMPLE_TEXTURE2D(_AuraTex, sampler_AuraTex, uv - duv.xy).r,
SAMPLE_TEXTURE2D(_AuraTex, sampler_AuraTex, uv - duv.wy).r,
SAMPLE_TEXTURE2D(_AuraTex, sampler_AuraTex, uv - duv.zy).r,
SAMPLE_TEXTURE2D(_AuraTex, sampler_AuraTex, uv - duv.xw).r,
SAMPLE_TEXTURE2D(_AuraTex, sampler_AuraTex, uv ).r,
SAMPLE_TEXTURE2D(_AuraTex, sampler_AuraTex, uv + duv.zw).r,
SAMPLE_TEXTURE2D(_AuraTex, sampler_AuraTex, uv + duv.zy).r,
SAMPLE_TEXTURE2D(_AuraTex, sampler_AuraTex, uv + duv.wy).r,
SAMPLE_TEXTURE2D(_AuraTex, sampler_AuraTex, uv + duv.xy).r
);

m = m > _Threshold;

half gx = m._11 + m._12 * 2 + m._13 - m._31 - m._32 * 2 - m._33;
half gy = m._11 + m._21 * 2 + m._31 - m._13 - m._23 * 2 - m._33;

return saturate(sqrt(gx * gx + gy * gy));
}

float4 Fragment(VaryingsDefault input) : SV_Target
{
float4 src = SAMPLE_TEXTURE2D(_MainTex, sampler_MainTex, input.texcoord);
return src + Contour(input.texcoord) * _Color;
}

ENDHLSL

SubShader
{
Cull Off ZWrite Off ZTest Always
Pass
{
HLSLPROGRAM
#pragma vertex VertDefault
#pragma fragment Fragment
ENDHLSL
}
}
}

這個Shader的原理類似於邊緣檢測演算法，通過計算周圍點的色值梯度值，判斷是否是等值線上的點。以第三步中的RenderTexture截圖為例，Shader中的Contour(input.texcoord) * _Color輸出結果如下圖右：

新建PostProcessEffect，將粒子效果的等值線渲染到屏幕上

項目使用Post Processing v2添加後處理效果：

首先使用第4步中的Shader新建一個棧前（Before Stack）後處理效果，MenuItem設為「Isaura/Isaura

Effect」（具體代碼可查看項目中的IsauraEffect.cs）。
新建Layer，命名為Post Fx。
新建一個GameObject PostFx，Layer設為Post Fx，並添加Post Process Volume組件，在PostProcess Volume上添加之前定義好的「Isaura/Isaura Effect」效果，如下圖：