Unity和Three.js中如何分别用shader渲染法线贴图？答案

【问题标题】：How to render the normal map in Unity and Three.js with shader respectively？Unity和Three.js中如何分别用shader渲染法线贴图？
【发布时间】：2019-01-31 11:05:25
【问题描述】：

我想在three.js和Unity中渲染法线贴图，但我发现最终输出不同。

Unity中使用的Shader如下：

Shader "Unlit/normal"
{
Properties
{
    _MainTex ("Texture", 2D) = "white" {}
}
SubShader
{
    Tags { "RenderType"="Opaque" }
    LOD 100

    Pass
    {
        CGPROGRAM
        #pragma vertex vert
        #pragma fragment frag
        // make fog work
        #pragma multi_compile_fog

        #include "UnityCG.cginc"

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

        struct v2f
        {
            float2 uv : TEXCOORD0;
            UNITY_FOG_COORDS(1)
            float4 vertex : SV_POSITION;
            fixed4 color : COLOR;
        };

        sampler2D _MainTex;
        float4 _MainTex_ST;

        v2f vert (appdata v)
        {
            v2f o;
            o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
            o.color.xyz = mul(_Object2World, v.normal)*0.5+0.5 ;
            o.color.w = 1.0f;
            return o;
        }

        fixed4 frag (v2f i) : SV_Target
        {

            return i.color; //output normal
        }
        ENDCG
    }
}

}

在three.js中，我使用MeshNormalMaterial来渲染法线贴图，但它与Unity中渲染不同。

统一输出

threejs 输出

【问题讨论】：

标签： unity3d three.js glsl shader hlsl

【解决方案1】：

我认为问题在于您正在使用 unity_ObjectToWorld 矩阵转换法线，该矩阵还包括比例。这可能会导致法线缩放或剪切，考虑到 Unity 版本看起来有多暗，这可能是正在发生的事情。我的建议是改用 UnityCG.cginc 中包含的内置函数：

o.color.rgb = UnityObjectToWorldNormal(v.normal);

理想情况下，法线也应该在片段函数中进行归一化，因为硬件插值器不能保证您的值保持归一化。此外，您的着色器中还有很多不需要的额外内容 - 您可以删除以下行：

#pragma multi_compile_fog
float2 uv : TEXCOORD0;
UNITY_FOG_COORDS(1)
sampler2D _MainTex;
float4 _MainTex_ST;

编辑：另请注意，MeshNormalMaterial 似乎在视图空间而不是在世界空间中渲染法线。这就是将世界法线转换为视图空间的方式：

float3 viewNormal = normalize(mul((float3x3)UNITY_MATRIX_V, worldNormal));

【讨论】：