10 高级纹理 [URP] - 清色的知识花园

10.1.3 反射#

如果想要去模拟反射的效果，我们就需要反射的出射方向，去从CubeMap中的对应面的纹理进行颜色采样。所以我们就需要根据入射光线的方向和表面法线方向来计算反射方向

代码实现

1
Shader "Unity Shaders Book/Chapter10/Reflection"
2
{
3
    Properties
4
    {
5
        _BaseColor ("BaseColor", Color) = (1,1,1,1)
6
        _ReflectColor("Reflection Color",Color) = (1,1,1,1)
7
        _ReflectAmount("Reflection Amount",Range(0,1)) = 1
8
        _CubeMap("Reflection Cubemap",Cube) = "_Skybox"{}
9

10
    }
11
    SubShader
12
    {
13
        Tags { "RenderType"="Opaque" }
14
        Pass
15
        {
16
            HLSLPROGRAM
17
            #pragma vertex vert
18
            #pragma fragment frag
19

20
            #include "Packages/com.unity.render-pipelines.universal/ShaderLibrary/Core.hlsl"
21
            #include "Packages/com.unity.render-pipelines.universal/ShaderLibrary/Lighting.hlsl"
22
            #include "Packages/com.unity.render-pipelines.universal/ShaderLibrary/UnityInput.hlsl"
23
            #include "Packages/com.unity.render-pipelines.universal/ShaderLibrary/Input.hlsl"
24
            #include "Packages/com.unity.render-pipelines.universal/ShaderLibrary/Shadows.hlsl"
25

26
            TEXTURECUBE(_CubeMap);
27
            SAMPLER(sampler_CubeMap);
28

29
            CBUFFER_START(UnityPerMaterial)
30
            half4 _BaseColor;
31
            half4 _ReflectColor;
32
            float _ReflectAmount;
33
            CBUFFER_END
34

35
            struct Attributes
36
            {
37
                float3 positionOS: POSITION;
38
                float3 normalOS: NORMAL;
39
            };
40

41
            struct Varyings
42
            {
43
                float4 positionCS: SV_POSITION;
44
                float3 positionWS: TEXCOORD0;
45
                float3 normalWS: TEXCOORD1;
46
                float3 viewDirWS: TEXCOORD2;
47
                float3 reflectonWS: TEXCOORD3;
48
                float4 shadowCoord: TEXCOORD4;
49
            };
50

51
            Varyings vert(Attributes IN)
52
            {
53
                Varyings OUT;
54
                ZERO_INITIALIZE(Varyings,OUT);
55
                OUT.positionCS = TransformObjectToHClip(IN.positionOS);
56
                OUT.normalWS = normalize(TransformObjectToWorldNormal(IN.normalOS));
57
                OUT.positionWS = TransformObjectToWorld(IN.positionOS);
58
                OUT.viewDirWS = GetWorldSpaceViewDir(OUT.positionWS);
59
                OUT.reflectonWS = reflect(OUT.viewDirWS, OUT.normalWS);
60

61
                OUT.shadowCoord = TransformWorldToShadowCoord(OUT.positionWS);
62
                return OUT;
63
            }
64

65
            half4 frag(Varyings IN) : SV_TARGET
66
            {
67
                half3 worldNormal = normalize(IN.normalWS);
68
                half3 worldLightDir = normalize(_MainLightPosition);
69
                half3 worldViewDir = normalize(IN.viewDirWS);
70

71
                half3 ambient = UNITY_LIGHTMODEL_AMBIENT.xyz;
72
                half3 diffuse = _MainLightColor.rgb*_BaseColor*max(0,dot(worldNormal,worldLightDir));
73

74
                // use the reflect dir in world space to access the cubemap
75
                half3 reflection = SAMPLE_TEXTURECUBE(_CubeMap, sampler_CubeMap, IN.reflectonWS).rgb;
76

77
                Light mainLight = GetMainLight(IN.shadowCoord);
78
                half atten =  mainLight.shadowAttenuation;
79

80
                half3 finalColor = ambient+lerp(diffuse,reflection,_ReflectAmount)*atten;
81

82
                return half4(finalColor,1);
83
            }
84
            ENDHLSL
85
        }
86
    }
87
    FallBack "Universal Render Pipeline/Lit"
88
}

为什么要在Vertex 中计算反射方向？

我们也可以在片元着色器中计算反射方向。这样得到的效果更加细腻，但这种效果其实不是很明显，对大部分人来说都可以忽略不计。处于性能上的考虑，故在顶点着色器中计算放射方向

10.1.4 折射#

折射的基础就是初中物理的当光线从一种介质斜射进另一种介质的时候，传播方向一般会发生改变。在给定入射角的情况下，我们可以使用斯涅尔定律来计算反射角

n_1sinθ_1 = n_2sinθ_2

n1 和 n2 分别是两个介质的折射率

10.1.5 菲涅尔反射#

Schlick菲涅尔近似等式#

F_s(v,n) = F_0+(1-F0)(1-v*n)^5

其中 F0 是一个反射系数，控制菲涅尔反射的强度。v是视角方向，n是表面法线。

代码

1
Shader "Unity Shaders Book/Chapter10/Fresnel"
2
{
3
    Properties
4
    {
5
        _BaseColor("Base Color", Color) = (1, 1, 1, 1)
6
        _FresnelScale("Fresnel Scale", Range(0, 1)) = 0.5
7
        _Cubemap("Reflection Cubemap", Cube) = "_Skybox" {}
8
    }
9

10
    SubShader
11
    {
12
        Pass
13
        {
14
            HLSLPROGRAM
15
            #pragma vertex vert
16
            #pragma fragment frag
17

18
            #include "Packages/com.unity.render-pipelines.universal/ShaderLibrary/Core.hlsl"
19
            #include "Packages/com.unity.render-pipelines.universal/ShaderLibrary/Lighting.hlsl"
20
            #include "Packages/com.unity.render-pipelines.universal/ShaderLibrary/UnityInput.hlsl"
21
            #include "Packages/com.unity.render-pipelines.universal/ShaderLibrary/Input.hlsl"
22
            #include "Packages/com.unity.render-pipelines.universal/ShaderLibrary/Shadows.hlsl"
23

24
            TEXTURECUBE(_Cubemap);
25
            SAMPLER(sampler_Cubemap);
26

27
            CBUFFER_START(UnityPerMaterial)
28
                float4 _BaseColor;
29
                float _FresnelScale;
30
            CBUFFER_END
31

32
            struct Attributes
33
            {
34
                float4 positionOS : POSITION;
35
                float3 normalOS:NORMAL;
36
            };
37

38
            struct Varyings
39
            {
40
                float4 positionCS : SV_POSITION;
41
                float3 normalWS : TEXCOORD0;
42
                float3 positionWS : TEXCOORD1;
43
                float3 viewDirWS : TEXCOORD2;
44
                float3 reflectWS : TEXCOORD3;
45
                float4 shadowCoord : TEXCOORD4;
46
            };
47

48
            Varyings vert(Attributes IN)
49
            {
50
                Varyings OUT;
51
                OUT.positionCS = TransformObjectToHClip(IN.positionOS);
52
                OUT.normalWS = TransformObjectToWorldNormal(IN.normalOS);
53
                OUT.positionWS = TransformObjectToWorld(IN.positionOS).xyz;
54
                OUT.viewDirWS = GetWorldSpaceViewDir(OUT.positionWS);
55
                OUT.reflectWS = reflect(-OUT.viewDirWS, OUT.normalWS);
56

57
                OUT.shadowCoord = TransformWorldToShadowCoord(OUT.positionWS);
58

59
                return OUT;
60
            }
61

62
            half4 frag(Varyings IN) : SV_Target
63
            {
64
                half3 worldNormal = normalize(IN.normalWS);
65
                half3 worldLightDir = normalize(_MainLightPosition.xyz);
66
                half3 worldViewDir = normalize(IN.viewDirWS);
67
                half3 ambient = UNITY_LIGHTMODEL_AMBIENT.xyz;
68

69
                Light mainLight = GetMainLight(IN.shadowCoord);
70
                float atten = mainLight.shadowAttenuation;
71

72
                half3 reflection = SAMPLE_TEXTURECUBE(_Cubemap, sampler_Cubemap, IN.reflectWS).rgb;
73
                // schlick菲涅尔近似等式
74
                half fresnel = _FresnelScale + (1 - _FresnelScale) * pow(1 - dot(worldNormal, worldViewDir), 5);
75
                half3 diffuse = _MainLightColor.rgb * _BaseColor.rgb * max(0, dot(worldNormal, worldLightDir));
76
                half3 color = ambient + lerp(diffuse, reflection, saturate(fresnel)) * atten;
77

78
                return half4(color, 1);
79
            }
80
            ENDHLSL
81
        }
82
    }
83
}

10.2 渲染纹理#

现代的GPU 允许我们去吧整个3D场景去渲染到一个中间缓冲中，即渲染目标纹理(Render Target Texture, RTT) 而不是传统的帧缓冲或后备缓冲。

与之相关的技术是多重渲染目标(Multiple Render Target, MRT)，这种技术指的是GPU 允许我们把场景渲染到多个目标纹理中，不再需要为每个渲染目标纹理渲染完整的场景。

延迟渲染就是多重渲染目标的一个应用

10.2.1 镜子效果#

10.2.2 玻璃效果#

Unity Shader中还可以使用一种特殊的 Pass 来获取屏幕图像，这就是GrabPass。我们在定义了GrabPass 之后，Unity会把当前屏幕的图像绘制在一张纹理当中，一边我们在后续的Pass中访问它。

我们可以使用GrabPass 来实现诸如玻璃等透明材质的模拟。使用GrabPass可以让我们对物体后面的图像进行更复杂的处理。例如使用法线来模拟折射效果。

当使用 GrabPass时，需要小心物体的渲染队列设置，我们通常需要把物体的渲染队列设置成透明队列。这样可以保证在渲染该物体时，所有的不透明物体已经被渲染在屏幕上。获取正确的屏幕图像。

代码

1
Shader "Custom/Chapter10-GlassRefraction"
2
{
3
    Properties
4
    {
5
        _MainTex("Main Tex",2D) = "white" {}
6
        _BumpMap("Normal Map",2D) = "bump" {}
7
        _CubeMap("Environment Cubemap",Cube)="_Skybox" {}
8
        _Distortion("Distortion",Range(0,100)) = 10
9
        _RefractAmount("Refract Amount",Range(0,1)) = 1
10
    }
11
    SubShader
12
    {
13
        Tags
14
        {
15
            "Queue" = "Transparent" "RenderType"="Opaque"
16
        }
17

18
        Pass
19
        {
20
            HLSLPROGRAM
21
            #pragma vertex vert
22
            #pragma fragment frag
23

24
            #include "Packages/com.unity.render-pipelines.universal/ShaderLibrary/Core.hlsl"
25
            #include "Packages/com.unity.render-pipelines.universal/ShaderLibrary/Lighting.hlsl"
26
            #include "Packages/com.unity.render-pipelines.universal/ShaderLibrary/UnityInput.hlsl"
27
            #include "Packages/com.unity.render-pipelines.universal/ShaderLibrary/Input.hlsl"
28
            #include "Packages/com.unity.render-pipelines.universal/ShaderLibrary/Shadows.hlsl"
29
            #include  "Packages/com.unity.render-pipelines.universal/ShaderLibrary/DeclareOpaqueTexture.hlsl"
30

31
            CBUFFER_START(UnityPerMaterial)
32
                float4 _MainTex_ST;
33
                float4 _BumpMap_ST;
34
                float _Distortion;
35
                half _RefractAmount;
36
                //GrabPass 指定的纹理名称
37
                // float4 _CameraOpaqueTexture_TexelSize;
38
            CBUFFER_END
39

40
            TEXTURE2D(_MainTex);
41
            SAMPLER(sampler_MainTex);
42

43
            TEXTURE2D(_BumpMap);
44
            SAMPLER(sampler_BumpMap);
45

46
            TEXTURECUBE(_CubeMap);
47
            SAMPLER(sampler_CubeMap);
48

49

50
            struct Atrributes
51
            {
52
                float4 positionOS : POSITION;
53
                float3 normalOS : NORMAL;
54
                float4 tangent: TANGENT;
55
                float2 texcoord: TEXCOORD0;
56
            };
57

58
            struct Varyings
59
            {
60
                float4 positionCS : SV_POSITION;
61

62
                float4 TtoW0 : TEXCOORD0;
63
                float4 TtoW1 : TEXCOORD1;
64
                float4 TtoW2 : TEXCOORD2;
65
                float4 uv: TEXCOORD3;
66
                float4 positionScreen: TEXCOORD4;
67
                float4 tangentWS: TEXCOORD5;
68
            };
69

70
            Varyings vert(Atrributes IN)
71
            {
72
                Varyings OUT;
73
                // VertexPositionInputs position_inputs = GetVertexPositionInputs(IN.positionOS.xyz);
74

75
                OUT.positionCS = TransformObjectToHClip(IN.positionOS);
76
                OUT.positionScreen = ComputeScreenPos(OUT.positionCS);
77
                OUT.uv.xy = TRANSFORM_TEX(IN.texcoord, _MainTex);
78
                OUT.uv.zw = TRANSFORM_TEX(IN.texcoord, _BumpMap);
79

80
                float3 worldPos = TransformObjectToWorld(IN.positionOS).xyz;
81
                half3 worldNormal = TransformObjectToWorldNormal(IN.normalOS);
82
                half3 worldTangent = TransformObjectToWorldDir(IN.tangent.xyz);
83
                half3 worldBinormal = cross(worldNormal, worldTangent) * IN.tangent.w;
84

85
                OUT.TtoW0 = float4(worldTangent.x, worldBinormal.x, worldNormal.x, worldPos.x);
86
                OUT.TtoW1 = float4(worldTangent.y, worldBinormal.y, worldNormal.y, worldPos.y);
87
                OUT.TtoW2 = float4(worldTangent.z, worldBinormal.z, worldNormal.z, worldPos.z);
88

89
                return OUT;
90
            }
91

92
            half4 frag(Varyings IN):SV_TARGET
93
            {
94
                float3 worldPos = float3(IN.TtoW0.w, IN.TtoW1.w, IN.TtoW2.w);
95
                half3 worldViewDir = normalize(GetWorldSpaceViewDir(worldPos));
96

97
                half3 bump = UnpackNormal(SAMPLE_TEXTURE2D(_BumpMap, sampler_BumpMap, IN.uv.zw));
98
                // 通过法线贴图计算出切线空间的偏移
99
                float2 offset = bump.xy * _Distortion * _CameraOpaqueTexture_TexelSize.xy;
100
                IN.positionScreen.xy = IN.positionScreen.xy + offset;
101
                half3 refrCol = SampleSceneColor(IN.positionScreen.xy / IN.positionScreen.w);
102

103
                bump = normalize(half3(dot(IN.TtoW0.xyz,bump), dot(IN.TtoW1.xyz, bump), dot(IN.TtoW2.xyz, bump)));
104

105
                // 获取屏幕uv
106

107
                half3 reflDir = reflect(-worldViewDir, bump);
108
                half4 texColor = SAMPLE_TEXTURE2D(_MainTex, sampler_MainTex, IN.uv.xy);
109
                half3 reflCol = SAMPLE_TEXTURECUBE(_CubeMap, sampler_CubeMap, reflDir).rgb*texColor.rgb;
110

111
                half3 finalColor = refrCol * (1 - _RefractAmount) + reflCol * _RefractAmount;
112

113
                return half4(finalColor, 1);
114
            }
115
            ENDHLSL
116

117
        }
118
    }
119
    FallBack "Diffuse"
120
}

其中_Distortion 用来跟存取的屏幕目标纹理混合，产生偏移效果，模拟折射

10.2.3 渲染纹理 VS GrabPass#

尽管说GrabPass 和渲染纹理+额外摄像机

GrabPass 实现简单，但是这张屏幕图片的分辨率是与屏幕分辨率一致的，在移动设备上，GrabPass虽然不会重新渲染场景，但往往需要cpu读取后备缓冲中的数据，破坏了 CPU和GPU的并行性