Unity Shader 学习 Bump Mapping

简介

Bump Mapping（凹凸映射） 是计算机图形学中的一种纹理映射技术，用于模拟物体表面的凹凸和皱纹^[1]。目前有2中方法：

• height map (高度纹理) 通过模拟置换获得修改后的法线值，又名高度映射(height mapping)

• noraml map (法线纹理) 通过存储在纹理中的法线信息来实现的，又名法线映射(noraml mapping)

  记录pixel shading过程中每个pixel的法线信息，用来描述像素级的法线信息，而不是直接使用顶点和面法线插值得到的pixel法线，从而得到更好的细节表现^[3]。

实现逻辑

• noraml map

  • 实现逻辑
    有2种方法：1.在切线空间下计算，2.在世界空间下计算。但是由于通用性问题第二种要优于第一种，例如使用CubeMap我们要在世界空间下进行采样。

    • 在世界空间下计算

      • 在顶点着色器计算从切线空间到世界空间的变换矩阵 TBN矩阵 T切线 B副切线 N法线 B可以由TN叉乘获得
        
      • 获得切线空间下的法线纹理数据
      • 将法线纹理数据从切线空间转换到世界空间

  • Coding

    Shader "Unlit/NoramlShader"
    {
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
        [Normal]_NormalMap("Normal Map",2D) = "bump"{}
        _NormalScale("NormalScale",Range(0,1)) = 0
    }
    SubShader
    {
        Tags { "RenderType"="Opaque" }
        Pass
        {
            HLSLPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #pragma multi_compile_fog
    
            #include "Packages/com.unity.render-pipelines.universal/ShaderLibrary/Core.hlsl"
            #include "Packages/com.unity.render-pipelines.universal/ShaderLibrary/Lighting.hlsl" 
    
            struct appdata
            {
                float4 vertex       : POSITION;
                float2 uv           : TEXCOORD0;
                float3 normal       : NORMAL;
                float4 tangent      : TANGENT;
            };
    
            struct v2f
            {
                float4 pos          : SV_POSITION;
                float2 uv           : TEXCOORD0;
                float3 posWS        : TEXCOORD1;
                float3 nDirWS       : TEXCOORD2;
                float3 tDirWS       : TEXCOORD3;
                float3 bDirWS       : TEXCOORD4;
                
            };
    
            CBUFFER_START(UnityPerMaterial)
                real4 _MainTex_ST;
                real _NormalScale;
            CBUFFER_END
    
            TEXTURE2D(_MainTex);
            SAMPLER(sampler_MainTex);
            TEXTURE2D(_NormalMap);
            SAMPLER(sampler_NormalMap);
    
            v2f vert (appdata v)
            {
                v2f o;
                o.posWS = TransformObjectToWorld(v.vertex.xyz);
                o.pos = TransformWorldToHClip(o.posWS);
                o.uv = TRANSFORM_TEX(v.uv, _MainTex);
                o.nDirWS = TransformObjectToWorldNormal(v.normal);
                o.tDirWS = normalize(TransformObjectToWorldDir(v.tangent.xyz));
                o.bDirWS = normalize(cross(o.nDirWS,o.tDirWS)*v.tangent.w);
                return o;
            }
    
            half4 frag (v2f i) : SV_Target
            {
                float3x3 TBN = float3x3(i.tDirWS,i.bDirWS,i.nDirWS);
                float3 nDirWS = normalize(i.nDirWS);
                float4 normalMap = SAMPLE_TEXTURE2D(_NormalMap,sampler_NormalMap,i.uv); 
                float3 normal = UnpackNormal(normalMap);
                normal.z = sqrt(1.0 - saturate(dot(normal.xy,normal.xy)));
                normal = TransformTangentToWorld(normal,TBN);
                normal = normalize(normal);
                // 混合法线
                nDirWS = lerp(nDirWS,normal,_NormalScale);
    
                Light mainLight = GetMainLight();
                real4 lightColor = real4(mainLight.color, 1);
                float3 lightDir = mainLight.direction;
    
                float nDotL = dot(nDirWS, lightDir);
                float lambert = max(0.0,nDotL);
    
                return lambert.rrrr;
            }
            ENDHLSL
        }
    }
    }

问题和思考

1. 法线贴图为什么是蓝色的？
   模型空间下的法线纹理看起来是“五颜六色”的。这是因为所有法线所在的坐标空间是同一个坐标空间，即模型空间，而每个点存储的法线方向是各异的，有的是(0,1, 0), 经过映射后存储到纹理中就对应了 RGB(0.5, 1, 0.5) 浅绿色，有的是(0, -1, 0), 经过映射后存储到纹理中就对应了 0.5, 0, 0.5)紫色。而切线空间下的法线纹理看起来几乎全部是浅蓝色的这是因为，每个法线方向所在的坐标空间是不一样的，即是表面每点各自的切线空间。这种法线纹理其实就是存储了每个点在各自的切线空间中的法线扰动方向。也就是说，如果一个点的法线方向不变，那么在它的切线空间中 ，新的法线方向就是 轴方向，即值为(0,0, 1), 经过映射后存储在纹理中就对应了 RGB(0.5, 0.5, 1) 浅蓝色 。而这个颜色就是法线纹理中大片的蓝色。

2. 为什么法线贴图一般使用的是切线空间而非模型空间？

   • 自由度高
   • 可进行UV动画
   • 可重用法线纹理
   • 可压缩

3. 什么是切线空间（Tangent space）？

   Tangent space是一个三维空间。对3D空间中的一个顶点来说，切空间的三条座标轴分别对应该点的法线N，切线T，和副法线（binormal）B，显然，对不同的顶点来说，切空间是不同的。

   

   T = normalize(dx/du, dy/du, dz/du)

   N = T × normalize(dx/dv, dy/dv, dz/dv)

   B = N × T

4. 法线贴图的设置细节。

   • 法线贴图的属性 Bump
   • 贴图属性 TextureType-Noraml Map

5. 法线贴图的优化方案。

   1. 使用双通道进行法线数据的处理

参考

[1] Bump mapping - wikipedia

[2] Unity Shader 入门精要 - 凹凸映射 - 146

[3] 图形 2.5 BUMP图改进

[4] 庄懂的技术美术入门课(美术向)-直播录屏-第8课

[5] Tutorial 13 : Normal Mapping