unity-shader-切线空间

分类于 Unity3d-Shader

法线贴图与切线空间

前篇

为什么要有切线空间（Tangent Space），它的作用是什么 - https://www.zhihu.com/question/23706933
切线空间(Tangent Space) 的计算与应用
http://docs.cryengine.com/display/SDKDOC4/Tangent+Space+Normal+Mapping
Tutorial 13 : Normal Mapping - http://www.opengl-tutorial.org/intermediate-tutorials/tutorial-13-normal-mapping
凹凸映射 Bump mapping（unityshader入门精要学习笔记） - https://blog.csdn.net/u013354943/article/details/52779991
Unity切线空间问题和推理思考 - https://www.jianshu.com/p/af800402f5db

切线空间

使用法线贴图是因为在低模下想获得高模凹凸表面光照效果。（也就是面数不够，法线来凑，基于面的法线建立一个 虚拟坐标系 ，通过法线贴图在面上 加多点法线）

由于需要将同一份法线纹理贴到不同模型的表面，或者同一个模型中不同角度的表面，那么当初生成这份法线纹理时所使用的面元角度（所谓模型local坐标系），就无法适用在其他角度的面元上。所以，人们不记录当时用模型坐标系生成的法线，而使用z轴与该点所在面元的法线平行的一个虚拟的相对坐标系来记录该点法线在该坐标系中的x/y/z的值，相当于记录了该点法线与所在平面法线之间的相对关系，而不是记录绝对坐标。由于点的法向量基本不会偏移面法向量太多，也就是凹凸程度一般不会太夸张，所以最终的法向量值中，z的值总是比x和y的大一些（也就是说点法向量与平面的的夹角一般会大于45度），用（法向量值+1）/2转换为RGB后，就成了蓝色为主的色调了。

这里写图片描述

经过这样记录下来的法向量，贴到哪个模型表面，就按照当前表面的法向量，计算出该点法向量在世界坐标空间中的值，然后计算光照就可以了。

但是有个问题，看下图，竖轴同样是面法向量，但是有多种不同的x和y轴组合，每种组合生成的点法向量是不一致的，所以需要规定一套固定的x和y轴，大家遵守同样的规则。怎么规定呢？就用纹理的uv坐标来定。具体做法是，取该点所在的三角形的三个顶点P1.P2.P3的纹理U和V坐标，然后x轴的方向就是P3指向P1，又称T轴；y轴方向是P3指向P2，又称B轴。（完）

这里写图片描述

参考资料

https://www.zhihu.com/question/23706933
切线空间(Tangent Space) 的计算与应用
http://docs.cryengine.com/display/SDKDOC4/Tangent+Space+Normal+Mapping
http://www.opengl-tutorial.org/intermediate-tutorials/tutorial-13-normal-mapping/
凹凸映射 Bump mapping : https://blog.csdn.net/u013354943/article/details/52779991
法线贴图（凹凸贴图）: https://nuysoft.gitbooks.io/unity-manual/content/Manual/StandardShaderMaterialParameterNormalMap.html

顶点法线,切线,副切线图解

测试代码1

// Upgrade NOTE: replaced '_Object2World' with 'unity_ObjectToWorld'

Shader "Custom/texture/test2" {

//  定义纹理属性 增加法线纹理
    Properties {
        _Color ("Color", Color) = (1,1,1,1)
        _MainTex ("Main Tex", 2D) = "white" {}
        _BumpMap("Normal Map",2D)="bump"{}
        _BumpScale("Bump Scale",Float)=1.0
        _Specular("Specular",Color)=(1,1,1)
        _Gloss ("Gloss", Range(8.0,256)) = 20
        }
    SubShader {
    Pass{
        Tags { "LightMode"="ForwardBase" }

        CGPROGRAM

        #pragma vertex vert

        #pragma fragment frag

        #include "Lighting.cginc"

        fixed4 _Color;
        sampler2D _MainTex;
//      纹理缩放平移属性
        float4 _MainTex_ST;
        sampler2D _BumpMap;
        float4 _BumpMap_ST;
        float _BumpScale;
        fixed4 _Specular;
        float _Gloss;

        struct a2v{
        float4 vertex: POSITION;
//      指定顶点法线
        float3 normal:NORMAL;
//      指定顶点切线
        float4 tangent:TANGENT;
//      语义指定第一个纹理
        float4 texcoord:TEXCOORD0;

        };

        struct v2f{
            float4 pos:SV_POSITION;
            float4 uv:TEXCOORD0;
            float3 lightDir:TEXCOORD1;
            float3 viewDir:TEXCOORD2;
        };

        v2f vert(a2v v){
            v2f o;
            o.pos=mul(UNITY_MATRIX_MVP,v.vertex);
            o.uv.xy=v.texcoord.xy*_MainTex_ST.xy+_MainTex_ST.zw;
            o.uv.zw=v.texcoord.xy*_BumpMap_ST.xy+_BumpMap_ST.zw;
    //      计算副切线
            float3 binormal=cross(normalize(v.normal),normalize(v.tangent.xyz))*v.tangent.w;
    //      构建变换矩阵，将位置坐标从模型空间转换到切线空间
            float3x3 rotation=float3x3(v.tangent.xyz,binormal,v.normal);
    //      或者使用内建方法
    //      TANGENT_SPACE_ROTATION;
    //      转换光源方向从模型空间到切线空间
            o.lightDir=mul(rotation,ObjSpaceLightDir(v.vertex)).xyz;
    //      转换注视方向从模型空间到切线空间
            o.viewDir=mul(rotation,ObjSpaceViewDir(v.vertex)).xyz;
            return o;
        }

        fixed4 frag(v2f i):SV_Target{
            fixed3 tangentLightDir=normalize(i.lightDir);
            fixed3 tangentViewDir=normalize(i.viewDir);
    //      获取法线贴图纹理
            fixed4 packedNormal=tex2D(_BumpMap,i.uv.zw);
            fixed3 tangentNormal;
    //      如果纹理不是法线纹理
    //      tangentNormal.xy=(packedNormal.xy*2-1)*_BumpScale;
    //      tangentNormal.z=sqrt(1.0-saturate(dot(tangentNormal.xy,tangentNormal.xy)));
    //      或者使用内建方法
            tangentNormal=UnpackNormal(packedNormal);
            tangentNormal.xy*=_BumpScale;
            // 通过 xy值求出 z 变量
            tangentNormal.z=sqrt(1.0-saturate(dot(tangentNormal.xy,tangentNormal.xy)));

            fixed3 albedo=tex2D(_MainTex,i.uv).rgb*_Color.rgb;
            fixed3 ambient=UNITY_LIGHTMODEL_AMBIENT.xyz*albedo;
            fixed3 diffuse=_LightColor0.rgb*albedo*max(0,dot(tangentNormal,tangentLightDir));
            fixed3 halfDir=normalize(tangentLightDir+tangentViewDir);
    //      BlinnPhon光照模型
            fixed3 specular=_LightColor0.rgb*_Specular.rgb*pow(max(0,dot(tangentNormal,halfDir)),_Gloss);
        	return fixed4(ambient+diffuse+specular,1.0);
        }
        ENDCG
        }

    }
    FallBack "Specular"
}

切线空间下的计算

Shader "LT/TangentNormal"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
        _Color("Color",Color) = (1,1,1,1)
        _BumpMap("Normal Map", 2D) = "white" {}
        _BumpScale("Bump Scale", Float) = 1.0
        _Specular("Specular",Color) = (1,1,1,1)   //高光反射颜色
        _Gloss("gloss", Range(5,30)) = 10     //高光区域大小
    }
    SubShader
    {
        LOD 100
        Tags { "LightMode"="ForwardBase" }

        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            
            #include "UnityCG.cginc"
            #include "Lighting.cginc"

            sampler2D _MainTex;
            float4 _MainTex_ST;
            fixed4 _Specular;
            fixed4 _Color;
            float _Gloss;
            float _BumpScale;
            sampler2D _BumpMap;
            float4 _BumpMap_ST;

            struct appdata
            {
                float4 vertex : POSITION;
                float4 uv : TEXCOORD0;
                float3 normal:NORMAL;
                float4 tangent: TANGENT;
            };

            struct v2f
            {
                float4 uv : TEXCOORD0;
                float4 vertex : SV_POSITION;
                float3 lightDir :TEXCOORD1;
                float3 viewDir :TEXCOORD2;
            };
            
            v2f vert (appdata v)
            {
                v2f o;
                o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
                o.uv.xy = TRANSFORM_TEX(v.uv.xy, _MainTex);
//                o.uv.zw = TRANSFORM_TEX(v.uv.zw, _BumpMap);   天哪还以为法线也可以这样写。。。其实是没用的
                o.uv.zw = v.uv.xy *_BumpMap_ST.xy +_BumpMap_ST.zw;

                //副法线 = 叉积（单位化的法向量，单位化的切线向量）*切线向量的w分量来确定副切线的方向性
                //float3 binormal = cross(normalize(v.normal,normalize(v.tangent.xyz))) * v.tangent.w;
                //构建一个矩阵使向量从对象空间转变到切线空间
                //float3x3 rotation = float3x3(v.tangent.xyz,binormal,v.normal );
                //或者使用unity提供的宏定义来直接计算得到rotation变换矩阵
                TANGENT_SPACE_ROTATION;

                //将光照方向和视角方向从对象空间转变到切线空间
                o.lightDir = mul(rotation,ObjSpaceLightDir(v.vertex)).xyz;
                o.viewDir = mul(rotation,ObjSpaceViewDir(v.vertex)).xyz;
                return o;
            }
            
            fixed4 frag (v2f i) : SV_Target
            {
                fixed3 tangentLightDir = normalize(i.lightDir);
                fixed3 tangentViewDir = normalize(i.viewDir);
                //将法线纹理中的颜色重新映射回正确的法线方向值
                fixed4 packedNormal = tex2D(_BumpMap,i.uv.zw);
                fixed3 tangentNormal;

                //如果我们把“Texture Type”不设置成“Normal Map”,未压缩的格式
//                tangentNormal.xy = (packedNormal.xy * 2 - 1) * _BumpScale;
                //法线是单位向量， x^2+y^2+z^2 = 1.所以已知2个坐标可以求出第三个。只需2个通道 
//                tangentNormal.z = sqrt(1.0- saturate(dot(tangentNormal.xy ,tangentNormal.xy)));

                //如果我们把“Texture Type”设置成“Normal Map”，那么上面2行代码与下面3行等价。使用内置函数UnpackNormal
                //。DXT5nm压缩格式，也就是unity使用的压缩格式
                tangentNormal = UnpackNormal(packedNormal);
                tangentNormal.xy *= _BumpScale;
                tangentNormal.z = sqrt(1.0- saturate(dot(tangentNormal.xy ,tangentNormal.xy)));
                
                fixed3 albedo = tex2D(_MainTex, i.uv) * _Color.rgb;

                fixed3 ambient = UNITY_LIGHTMODEL_AMBIENT.xyz * albedo;

                fixed3 diffuse = _LightColor0.rgb *albedo * max(0,dot(tangentNormal,tangentLightDir));
                fixed3 halfDir = normalize(tangentLightDir + tangentViewDir);

                fixed3 specular = _LightColor0.rgb *_Specular * pow( max(0,dot(tangentNormal,tangentLightDir)),_Gloss);

                return fixed4(ambient + diffuse + specular,1.0);
            }
            ENDCG
        }
    }
    FallBack "Specular"
}

世界空间下的计算

Shader "LT/WorldNormal"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
        _Color("Color",Color) = (1,1,1,1)
        _BumpMap("Normal Map", 2D) = "white" {}
        _BumpScale("Bump Scale", Float) = 1.0
        _Specular("Specular",Color) = (1,1,1,1)   //高光反射颜色
        _Gloss("gloss", Range(5,30)) = 10     //高光区域大小
    }
    SubShader
    {
        Tags { "LightMode"="ForwardBase" }
        LOD 100

        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag

            #include "UnityCG.cginc"
            #include "Lighting.cginc"

            sampler2D _MainTex;
            float4 _MainTex_ST;
            fixed4 _Specular;
            fixed4 _Color;
            float _Gloss;
            float _BumpScale;
            sampler2D _BumpMap;
            float4 _BumpMap_ST;

            struct appdata
            {
                float4 vertex : POSITION;
                float4 uv : TEXCOORD0;
                float3 normal:NORMAL;
                float4 tangent: TANGENT;
            };

            struct v2f
            {
                float4 uv : TEXCOORD0;
                float4 vertex : SV_POSITION;
                float4 TtoW0 :TEXCOORD1;
                float4 TtoW1 :TEXCOORD2;
                float4 TtoW2 :TEXCOORD3;
            };
            
            v2f vert (appdata v)
            {
                v2f o;
                o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
                o.uv.xy = TRANSFORM_TEX(v.uv.xy, _MainTex);
                o.uv.zw = v.uv.xy *_BumpMap_ST.xy +_BumpMap_ST.zw;

                //对象空间坐标系转换到世界空间坐标系
                float3 worldPos = mul(unity_ObjectToWorld,v.vertex).xyz;
                fixed3 worldNormal = UnityObjectToWorldNormal(v.normal);
                fixed3 worldTangent = UnityObjectToWorldDir(v.tangent.xyz);
                fixed3 worldBinormal = cross(worldNormal,worldTangent) * v.tangent.w;
                
                //TtoW切线空间到世界空间的变换矩阵，按列摆放依次存放：切线，副切线，法线，顶点位置.（都是世界空间下的） 
                o.TtoW0 = float4(worldTangent.x,worldBinormal.x,worldNormal.x,worldPos.x);
                o.TtoW1 = float4(worldTangent.y,worldBinormal.y,worldNormal.y,worldPos.y);
                o.TtoW2 = float4(worldTangent.z,worldBinormal.z,worldNormal.z,worldPos.z);
            
                return o;
            }
            
            fixed4 frag (v2f i) : SV_Target
            {
                //获得世界空间中的坐标
                float3 worldPos = float3(i.TtoW0.w,i.TtoW1.w,i.TtoW2.w);
                //计算光照和视角方向在世界坐标系中
                fixed3 lightDir = normalize(UnityWorldSpaceLightDir(worldPos));
                fixed3 viewDir = normalize(UnityWorldSpaceViewDir(worldPos));

                //获得切线空间下的法线，法线纹理“Texture Type”设置成“Normal Map”
                fixed3 bump = UnpackNormal(tex2D(_BumpMap,i.uv.zw));
                bump.xy *= _BumpScale;
                bump.z = sqrt(1.0 - saturate(dot(bump.xy,bump.xy)));
                //将法线从切线空间转换到世界空间，单位化（矩阵每一行的xyz 与 法线点积）
                bump = normalize(half3(dot(i.TtoW0.xyz,bump),dot(i.TtoW1.xyz,bump),dot(i.TtoW2.xyz,bump)));
                
                fixed3 albedo = tex2D(_MainTex, i.uv).rgb * _Color.rgb;

                fixed3 ambient = UNITY_LIGHTMODEL_AMBIENT.xyz * albedo;

                fixed3 halfDir = normalize(lightDir + viewDir);
                fixed3 diffuse = _LightColor0.rgb * albedo * max(0,dot(bump,lightDir));
                

                fixed3 specular = _LightColor0.rgb *_Specular * pow( max(0,dot(bump,halfDir)),_Gloss);

                return fixed4(ambient + diffuse + specular,1.0);
            }
            ENDCG
        }
    }
    FallBack "Specular"
}

副切线计算

1	fixed3 worldBinormal = cross(worldNormal,worldTangent) * v.tangent.w;

要乘以 v.tangent.w 是为了确定副切线的正确方向, 因为 叉乘 cross 的几何意义是得到垂直于两个向量所在平面的向量, 这个切线的方向与uv展开的方向相关, 这个可能与建模软件相关.

相关讨论可以参考: https://github.com/candycat1992/Unity_Shaders_Book/issues/32

这里也有关于 乘以 v.tangent.w 的讨论:Unity切线空间问题和推理思考 - https://www.jianshu.com/p/af800402f5db

经过一段时间的搜索找到如下解释，有勘误还请指正
首先我们切换回到纹理的定义
对于纹理UV来说，
OpenGL 从左到右(0,1)，从下到上（0，1）
DirectX 从左到右(0,1)，从下到上（1，0）
可见对于切线，即UV的U，对于OpenGL和DirectX都是左到右（左侧为0.0，右侧为1.0）。
而对于binormal，即UV的V，这在OpenGL和DirectX中是不同的。
OpenGL是自下而上的，DirectX是自上而下的。
这也是许多引擎和3D工具对“+ Y / -Y”法线贴图的偏好来自不同的地方。
Unity是+ Y，这是OpenGL标准，
Unreal是-Y，这是DirectX标准。
显然，Unity在Windows上使用DirectX，所以大部分时间W组件都是负值的。
然而，如果纹理UV被反转，不是因为网格反转，而是因为网格的纹理被镜像。
所以，如果纹理被镜像，则需要w来存储这个值

前篇

切线空间

顶点 法线,切线,副切线 图解

测试代码1

切线空间 下的计算

世界空间 下的计算

副切线计算

顶点法线,切线,副切线图解

切线空间下的计算

世界空间下的计算