搜狐畅游

04-09 16:54

企业号

关注

图形引擎实战：镭射效果制作分享

镭射的效果可以拆解为以下几点：

边缘光
镭射效果
流动亮片效果

最终渲染效果

下面我来为大家介绍一下各个部分是如何实现的。

边缘光：

边缘光的实现方案是由常见的菲尼尔函数完成的。通过rimSoft和rimStrength两个变量分别对边缘光强度和边缘光过渡的软硬程度进行调控。最后在与边缘光颜色相乘即可。具体的代码实现如下：

float3 RimLighting(float3 V,float3 N,float rimStrength,float rimSoft,float3 rimColor)

{

float3 rimlight = (float3)0;

float fresnel = saturate(dot(V,N));

fresnel = rimStrength * pow(1.0 - fresnel,rimSoft);

fresnel = saturate(fresnel);

rimlight = fresnel * rimColor;

return rimlight;

}

边缘光设置面板

镭射效果：

镭射效果常见的制作方案有使用基于物理的薄膜干涉算法生成，可以参考HDRP中彩虹色（Iridescence）材质的算法。该方案的优势1.遵循物理的2.可以使用少量的参数去调控镭射的效果。缺点的话也有几点比如：镭射颜色不能够由美术自定义，算法计算较为复杂。另一个常见的方案是使用fresnel然后经过HSV的转换从而生成镭射颜色。计算相对简单，缺点仍是颜色不能够自定义，还有一种常见的方案是采样一张镭射贴图来模拟，好处是颜色可以自定义同时性能上还很高效没有复杂的公式计算。综上所述，我还是选择了可以自定义镭射颜色的贴图方案实现。

我使用了两种不同的贴图方案来实现镭射效果，第一种是使用手绘贴图实现，由美术同学手绘镭射颜色。另一种方案是采用实时生成Ramp图方案。这两个方案的好处是美术同学可以手动的去控制镭射的颜色。很方便去控制。接下来我便讲述一下我是如何去实现的吧。

手绘贴图方案GUI界面

第一种使用手绘贴图来模拟镭射的效果方案比较简单，我们只需创建两个向量来对镭射贴图进行平铺度和流动速度进行控制。然后利用NdotV和NdotL作为uv坐标对贴图进行采样，这时镭射效果会受到视角方向和光照方向的影响。具体代码实现如下：

float NdotV = dot(customLitData.N,customLitData.V);

float2 irideColor_uv = float2(NdotV,lerp(NdotV,NdotL,0.5));

irideColor_uv = max(0,irideColor_uv);

irideColor_uv = irideColor_uv * 0.5 + 0.5;

irideColor = SAMPLE_TEXTURE2D(_IrideScenceMap,sampler_IrideScenceMap,irideColor_uv);

iridescence = irideColor * _iridescenceIntensity;

Ramp图方案GUI界面

相比之前使用手绘图的方案，该Ramp图方案的优点在于镭射颜色可以在引擎内实时地进行控制和调整。该方案的重点是如何实时生成这张Ramp图，以便美术人员可以更好地调整效果。我查阅了网上普遍的方案，常见的做法是制作一个Ramp图生成工具，然后将生成好的ramp图赋给材质。而我将这个过程移植到了材质ShaderGUI中，这样就可以更方便地直接在材质中进行调控，而且看起来更简洁。也简化了操作步骤。

下图为ShaderGUI绘制Ramp图区域的函数，主要是利用了EditorGUILayouy.GradientField函数绘制Gradient到ShaderGUI上面。当用户修改了Gradient的内容时，会调用UpdateTex()函数来对Ramp图进行实时的更新。

private Texture2D UpdateTex(int width)

{

Texture2D tex = new Texture2D(width, 1, TextureFormat.RGBA32, false,false);

tex.wrapMode = TextureWrapMode.Repeat;

tex.filterMode = FilterMode.Bilinear;

tex.name = "RampTexture";

var colors = new Color[tex.width * tex.height];

for (int x = 0; x < width; ++x)

{

colors[x] = s_gradient.Evaluate(1.0f * x / (width - 1));

}

tex.SetPixels(colors);

tex.Apply();

return tex;

}

当调整好Ramp图颜色时，需要设置保存路径。并导出这张Ramp图。再ShaderGUI中使用GUILayout.Button()创建一个Button，当用户点击该按钮时调用SetTexturePath(),利用内置API EditorUtility.SaveFilePanelInProject来设置保存路径。具体的函数实现如下：

if (GUILayout.Button("设置保存路径"))

{

SetTexturePath();

}

private void SetTexturePath()

{

Var currentRampObjPath = AssetDatabase.GetAssetPath(m_MaterialEditor.serializedObject.targetObject);

var defaultDirectory = System.IO.Path.GetDirectoryName(currentRampObjPath);

s_texturePath = EditorUtility.SaveFilePanelInProject("Export as PNG file", "LightRamp", "png", "Set file path for the PNG file", defaultDirectory);

}

接下来时贴图导出部分实现，先判断当前保存路径是否为空，如果为空就需要用户进行贴图路径的设置。然后再将其导出。