Unity - 光滑模糊材质？

Question

我正在尝试制作一个标准的模糊材质，就像这样（黑暗的节拍刀菜单）：

或者

但是要用在3D对象上，而不是相机效果或画布材质。我找到了一些提供低质量模糊的资源，但我需要它光滑并且有一个好的高斯模糊效果。我现在使用的模糊材质有奇怪的条纹：

// 升级注意：将“mul(UNITY_MATRIX_MVP,)”替换为“UnityObjectToClipPos()”

Shader "Custom/WaterBlur" {
    Properties {
    _blurSizeXY("BlurSizeXY", Range(0,10)) = 0
}
    SubShader {

        // Draw ourselves after all opaque geometry
        Tags { "Queue" = "Transparent" }

        // Grab the screen behind the object into _GrabTexture
        GrabPass { }

        // Render the object with the texture generated above
        Pass {


CGPROGRAM
#pragma debug
#pragma vertex vert
#pragma fragment frag 
#ifndef SHADER_API_D3D11

    #pragma target 3.0

#else

    #pragma target 4.0

#endif

            sampler2D _GrabTexture : register(s0);
            float _blurSizeXY;

struct data {

    float4 vertex : POSITION;

    float3 normal : NORMAL;

};



struct v2f {

    float4 position : POSITION;

    float4 screenPos : TEXCOORD0;

};



v2f vert(data i){

    v2f o;

    o.position = UnityObjectToClipPos(i.vertex);

    o.screenPos = o.position;

    return o;

}



half4 frag( v2f i ) : COLOR

{

    float2 screenPos = i.screenPos.xy / i.screenPos.w;
    float depth= _blurSizeXY*0.0005;

    screenPos.x = (screenPos.x + 1) * 0.5;

    screenPos.y = 1-(screenPos.y + 1) * 0.5;

    half4 sum = half4(0.0h,0.0h,0.0h,0.0h);   
    sum += tex2D( _GrabTexture, float2(screenPos.x-5.0 * depth, screenPos.y+5.0 * depth)) * 0.025;    
    sum += tex2D( _GrabTexture, float2(screenPos.x+5.0 * depth, screenPos.y-5.0 * depth)) * 0.025;

    sum += tex2D( _GrabTexture, float2(screenPos.x-4.0 * depth, screenPos.y+4.0 * depth)) * 0.05;
    sum += tex2D( _GrabTexture, float2(screenPos.x+4.0 * depth, screenPos.y-4.0 * depth)) * 0.05;


    sum += tex2D( _GrabTexture, float2(screenPos.x-3.0 * depth, screenPos.y+3.0 * depth)) * 0.09;
    sum += tex2D( _GrabTexture, float2(screenPos.x+3.0 * depth, screenPos.y-3.0 * depth)) * 0.09;

    sum += tex2D( _GrabTexture, float2(screenPos.x-2.0 * depth, screenPos.y+2.0 * depth)) * 0.12;
    sum += tex2D( _GrabTexture, float2(screenPos.x+2.0 * depth, screenPos.y-2.0 * depth)) * 0.12;

    sum += tex2D( _GrabTexture, float2(screenPos.x-1.0 * depth, screenPos.y+1.0 * depth)) *  0.15;
    sum += tex2D( _GrabTexture, float2(screenPos.x+1.0 * depth, screenPos.y-1.0 * depth)) *  0.15;



    sum += tex2D( _GrabTexture, screenPos-5.0 * depth) * 0.025;    
    sum += tex2D( _GrabTexture, screenPos-4.0 * depth) * 0.05;
    sum += tex2D( _GrabTexture, screenPos-3.0 * depth) * 0.09;
    sum += tex2D( _GrabTexture, screenPos-2.0 * depth) * 0.12;
    sum += tex2D( _GrabTexture, screenPos-1.0 * depth) * 0.15;    
    sum += tex2D( _GrabTexture, screenPos) * 0.16; 
    sum += tex2D( _GrabTexture, screenPos+5.0 * depth) * 0.15;
    sum += tex2D( _GrabTexture, screenPos+4.0 * depth) * 0.12;
    sum += tex2D( _GrabTexture, screenPos+3.0 * depth) * 0.09;
    sum += tex2D( _GrabTexture, screenPos+2.0 * depth) * 0.05;
    sum += tex2D( _GrabTexture, screenPos+1.0 * depth) * 0.025;

    return sum/2;

}
ENDCG
        }
    }

Fallback Off
} 

我如何为网格实现光泽甚至高质量的高斯模糊材质？

- blue

---

这个答案是针对一个UI效果的问题，但据我所知，它应该适用于任何材料。 - Ruzihm

@Ruzihm 太棒了，谢谢！第二个答案 https://dev59.com/X14b5IYBdhLWcg3whB6V 已经解决了我的问题，但现在我需要完成第二部分，如何让这个材质变得有光泽？这是否可能，还是我需要叠加另一个网格？ - blue

Answer 1

如果您想在表面上添加光泽，这里有一种方法可以实现，基于Unity社区维基中光泽纹理文章中的着色器，如下所示：

Shader "Cg per-pixel lighting with texture" {
   Properties {
      _MainTex ("RGBA Texture For Material Color", 2D) = "white" {} 
      _Color ("Diffuse Material Color", Color) = (1,1,1,1) 
      _SpecColor ("Specular Material Color", Color) = (1,1,1,1) 
      _Shininess ("Shininess", Float) = 10
   }
   SubShader {
      Pass {    
         Tags { "LightMode" = "ForwardBase" } 
            // pass for ambient light and first light source

         CGPROGRAM

         #pragma vertex vert  
         #pragma fragment frag 

         #include "UnityCG.cginc"
         uniform float4 _LightColor0; 
            // color of light source (from "Lighting.cginc")

         // User-specified properties
         uniform sampler2D _MainTex;    
         uniform float4 _Color; 
         uniform float4 _SpecColor; 
         uniform float _Shininess;

         struct vertexInput {
            float4 vertex : POSITION;
            float3 normal : NORMAL;
            float4 texcoord : TEXCOORD0;
        };
         struct vertexOutput {
            float4 pos : SV_POSITION;
            float4 posWorld : TEXCOORD0;
            float3 normalDir : TEXCOORD1;
            float4 tex : TEXCOORD2;
        };

         vertexOutput vert(vertexInput input) 
         {
            vertexOutput output;

            float4x4 modelMatrix = unity_ObjectToWorld;
            float4x4 modelMatrixInverse = unity_WorldToObject;

            output.posWorld = mul(modelMatrix, input.vertex);
            output.normalDir = normalize(
               mul(float4(input.normal, 0.0), modelMatrixInverse).xyz);
            output.tex = input.texcoord;
            output.pos = mul(UNITY_MATRIX_MVP, input.vertex);
            return output;
         }

         float4 frag(vertexOutput input) : COLOR
         {
            float3 normalDirection = normalize(input.normalDir);

            float3 viewDirection = normalize(
               _WorldSpaceCameraPos - input.posWorld.xyz);
            float3 lightDirection;
            float attenuation;

            float4 textureColor = tex2D(_MainTex, input.tex.xy);

            if (0.0 == _WorldSpaceLightPos0.w) // directional light?
            {
               attenuation = 1.0; // no attenuation
               lightDirection = 
                  normalize(_WorldSpaceLightPos0.xyz);
            } 
            else // point or spot light
            {
               float3 vertexToLightSource = 
                  _WorldSpaceLightPos0.xyz - input.posWorld.xyz;
               float distance = length(vertexToLightSource);
               attenuation = 1.0 / distance; // linear attenuation 
               lightDirection = normalize(vertexToLightSource);
            }

            float3 ambientLighting = textureColor.rgb  
               * UNITY_LIGHTMODEL_AMBIENT.rgb * _Color.rgb;

            float3 diffuseReflection = textureColor.rgb  
               * attenuation * _LightColor0.rgb * _Color.rgb
               * max(0.0, dot(normalDirection, lightDirection));

            float3 specularReflection;
            if (dot(normalDirection, lightDirection) < 0.0) 
               // light source on the wrong side?
            {
               specularReflection = float3(0.0, 0.0, 0.0); 
                  // no specular reflection
            }
            else // light source on the right side
            {
               specularReflection = attenuation * _LightColor0.rgb 
                  * _SpecColor.rgb * (1.0 - textureColor.a) 
                     // for usual gloss maps: "... * textureColor.a" 
                  * pow(max(0.0, dot(
                  reflect(-lightDirection, normalDirection), 
                  viewDirection)), _Shininess);
            }

            return float4(ambientLighting + diffuseReflection 
               + specularReflection, 1.0);
         }

         ENDCG
      }

      Pass {    
         Tags { "LightMode" = "ForwardAdd" } 
            // pass for additional light sources
         Blend One One // additive blending 

          CGPROGRAM

         #pragma vertex vert  
         #pragma fragment frag 

         #include "UnityCG.cginc"
         uniform float4 _LightColor0; 
            // color of light source (from "Lighting.cginc")

         // User-specified properties
         uniform sampler2D _MainTex;    
         uniform float4 _Color; 
         uniform float4 _SpecColor; 
         uniform float _Shininess;

        struct vertexInput {
            float4 vertex : POSITION;
            float3 normal : NORMAL;
            float4 texcoord : TEXCOORD0;
        };
         struct vertexOutput {
            float4 pos : SV_POSITION;
            float4 posWorld : TEXCOORD0;
            float3 normalDir : TEXCOORD1;
            float4 tex : TEXCOORD2;
        };

         vertexOutput vert(vertexInput input) 
         {
            vertexOutput output;

            float4x4 modelMatrix = unity_ObjectToWorld;
            float4x4 modelMatrixInverse = unity_WorldToObject;

            output.posWorld = mul(modelMatrix, input.vertex);
            output.normalDir = normalize(
               mul(float4(input.normal, 0.0), modelMatrixInverse).xyz);
            output.tex = input.texcoord;
            output.pos = mul(UNITY_MATRIX_MVP, input.vertex);
            return output;
         }

         float4 frag(vertexOutput input) : COLOR
         {
            float3 normalDirection = normalize(input.normalDir);

            float3 viewDirection = normalize(
               _WorldSpaceCameraPos - input.posWorld.xyz);
            float3 lightDirection;
            float attenuation;

            float4 textureColor = tex2D(_MainTex, input.tex.xy);

            if (0.0 == _WorldSpaceLightPos0.w) // directional light?
            {
               attenuation = 1.0; // no attenuation
               lightDirection = 
                  normalize(_WorldSpaceLightPos0.xyz);
            } 
            else // point or spot light
            {
               float3 vertexToLightSource = 
                  _WorldSpaceLightPos0.xyz - input.posWorld.xyz;
               float distance = length(vertexToLightSource);
               attenuation = 1.0 / distance; // linear attenuation 
               lightDirection = normalize(vertexToLightSource);
            }

            float3 diffuseReflection = textureColor.rgb  
               * attenuation * _LightColor0.rgb * _Color.rgb
               * max(0.0, dot(normalDirection, lightDirection));

            float3 specularReflection;
            if (dot(normalDirection, lightDirection) < 0.0) 
               // light source on the wrong side?
            {
               specularReflection = float3(0.0, 0.0, 0.0); 
                  // no specular reflection
            }
            else // light source on the right side
            {
               specularReflection = attenuation * _LightColor0.rgb 
                  * _SpecColor.rgb * (1.0 - textureColor.a) 
                     // for usual gloss maps: "... * textureColor.a" 
                  * pow(max(0.0, dot(
                  reflect(-lightDirection, normalDirection), 
                  viewDirection)), _Shininess);
            }

            return float4(diffuseReflection 
               + specularReflection, 1.0);
               // no ambient lighting in this pass
         }

         ENDCG
      }
   }
   Fallback "Specular"
}

你的模糊着色器的最终Pass需要合并到上述着色器的第一和第二个Pass中。

着色器属性

如果不存在以下属性，请在模糊着色器中添加它们（如果需要，您可能需要重命名）：

  _MainTex ("RGBA Texture For Material Color", 2D) = "white" {} 
  _Color ("Diffuse Material Color", Color) = (1,1,1,1) 
  _SpecColor ("Specular Material Color", Color) = (1,1,1,1) 
  _Shininess ("Shininess", Float) = 10

第一次光泽处理

将标签设置为与光泽着色器匹配："LightMode" = "ForwardBase"

如果这些变量不存在，请将它们添加到通道中（如果需要，您可能需要重新命名）：

 uniform sampler2D _MainTex; 
 uniform float4 _Color; 
 uniform float4 _SpecColor; 
 uniform float _Shininess;

在你的顶点输入结构中包含float3 normal : NORMAL;。

在你的顶点输出结构中包含float4 posWorld : TEXCOORD0;和float3 normalDir : TEXCOORD1;。

在vert函数中，像光泽着色器vert一样设置output.posWorld和output.normalDir。

然后，在frag函数中，使用你的模糊着色器已经返回的内容作为第一个光泽着色器frag中的textureColor变量，然后执行其余的第一个光泽frag。

你可能需要重命名代码中的其他内容，以使其与你已有的通道配合使用。我不知道你的模糊着色器是什么样子的，所以无法列出合并两个通道的每个步骤。

第二个光泽通道

重复第一个“Pass”词条的相同过程，但使用来自第二个“Pass”词条的代码（尤其重要的是不同的标签“LightMode” =“ForwardAdd”）。

- Ruzihm