庄懂着色器_L10_OldSchoolPro

庄懂-BoyanTata的个人空间_哔哩哔哩_Bilibili

---

答疑

法线贴图是记录在切线空间的法线信息

切线空间是由三个轴确定的一个空间,分别是法线方向,切线方向和副法线方向

法线方向就是表面朝外的方向,或者美术在软件生成的那个方向

切线方向和副法线方向:我把贴图在物体表面上摊开,它的UV坐标的U坐标就是它的切线方向,V坐标就是它的副法线方向

就是说我UV怎么展,其实是影响了模型表面的切线空间的,也就是说你的高低模不变,但你的UV变了,它的模型表面的切线空间也就变了,切线空间变了,它的法线信息也就是变了,因为它是在记录切线空间下的法线信息,或者说就是一个相对坐标和绝对坐标的差别

作业回顾

OldSchoolPro构成及连连看解析

1.向量准备

2.中间量准备

3.Lambert

4.Phong

5.Lambert与Phong的光照混合

6.环境光的漫反射部分

7.环境光的镜面反射部分

8.环境反射混合

9.累加输出

向量准备

需要法线方向,视线方向,光方向

中间量准备

ndotl 去算Lambert

rdotv 去算Phong

Clamp 0-1

超过1的部分反复Power,会导致Blow辉光效果爆掉,限定为0-1,这样比较安全

Lambert与Phong相加Add是因为它是光照的两部分,只不过是我们把反射抽象理解为两部分,最后的结果肯定是相加

为什么光源都是相乘Multiply?

因为光源既对漫反射有影响,也对镜面反射有影响,因为它反射的就是光源 ,光源对两者都是有影响的,肯定是相乘,然后遮挡也是一样的,也同样对漫反射和镜面反射都有影响,这两个都是相乘Mul

环境光

环境的镜面反射

环境反射混合

3Col Env Diffuse和Cubemap Env Specular相加Add在一起和上面的原因相同,因为它反射的是两部分,所以要加在一起;另外,它是共同收到遮挡,所以要相乘Mul

OldSchoolPro代码部分

1.Cubemap的对应部分为"_Skybox"{}

2.菲涅尔次幂

金属它是整个表面都是像镜子一样反射的,非金属只在边缘即菲涅尔的区域有明显的反射

3.环境球Mip 

即环境球的反射模糊程度

4.输入结构中

float 4 normal 法线从字面意思来说,它三个轴向就够了,但是它的第四个轴向即w分量里面,也被塞入了数据,所以第四个分量是不能被舍弃的

5.输出结构中

float2 uv0 : TEXCOORD0; 需要输出UV去采样贴图

float4 posWS : TEXCOORD1; 需要输出世界空间的位置

float 3 nDirWS : ..... 世界空间的法线,切线,副法线这些在输出结构中使用 float3就够了,输出空间里面什么内容,什么形式由自己说了算,想塞入w分量就塞入,不想塞入就是三维的了.

然后 输入结构中是引擎说了算的,不是自己说了算,因为引擎中间有些黑盒,如果想去拆,可以搞明白就去拆他,不想拆,只是想用,那按照引擎的规范去书写就行.

法线

1.从法线采样出一个切线空间的Normal,用tex2D做完采样之后,要用UnpackNormal做一次解码,解码之后就得到切线空间的法线方向nDirTS;

2.然后在构造一次TBN矩阵,TBN矩阵就是一个float3x3的矩阵,内部分别排列切线,副法线,法线三个法线方向;

3.然后用切线空间的法线方向nDitTS去和刚才的TBN矩阵相乘Mul,就得到一个世界空间的法线方向nDirWS,这个操作完成以后需要进行归一化Normalize

世界空间下的观察方向

摄像机位置减去你看到的位置,然后再做一次归一化

float3 vDirWS = normamlize(_WorldSpaceCameraPos.xyz - i.posWS.xyz);

视线反射 

观察方向取反和世界法线进行reflect操作

float3 vrDirWS = reflect(-vDirWS,nDirWS);

光的方向

float3 lDirWS = _WorldSpaceLightDirPos0.xyz;

光的反射方向

光的方向取反和世界法线进行reflect操作

float3 lrDirWS = reflect(-lDirWS,nDirWS);

Cubemap中间有一个骚操作

面板上指定的_Cubemap,插值到1,用var_specTex.a通道

高光次幂也可以理解为光滑度,光滑度就是那张图画的越亮,那个位置就越光滑,再回想一下phong,高光次幂的值越大,高光点就越集中,同时材质质感越光滑,现在就可以将高光图中的A通道理解为光滑度(光滑度效果同粗糙度相反)

var_specTex.a 随着光滑度的升高,它的CubemapMip就会越接近于1;然后它的粗糙度越低,它的Cubemip的Mip值就越接近自己指定的数值,那个指定是值是一定大于1的.

Cubemap的Mip值越大,反射的环境越模糊,Mip值越小,反射的环境越清晰;那么对应的就是,越光滑,它反射的内容越清晰,越不光滑,反射的内容越模糊,这个Lerp就是做这个的

我们就是将CubemapMip去做了一个插值,这个插值是你给的最大的Mip值,跟1之间去做一个插值,然后我们用这个值去采样那种Cubemap

Cubemap的采样方法是用texCUBElod,然后它采样的UV,就不是UV了,它是一个四维的坐标去采样,它前三维x,y,z轴的三维是世界空间下的观察方向的反射方向vrDirWS,然后它的w分量是它的Mipmap值

这样采样出来的Cubemap全身上下就不是一个同一个模糊程度了,它是通过那张画出来的高光次幂(or光滑度),越光滑的部分反射越清晰,越不光滑的部分反射越模糊

这边也同样做了一个操作,一般的phong效果全身上下是一个高光次幂值,所以它的表面质感就是单一的,同刚才采样Cubemap一样,我们之前对cubemap的Mip值做了一个lerp插值,同样我们对高光次幂也做一次插值,这个插值也是跟刚才一样,随着它光滑度的升高,它的高光次幂的值从1一直映射到自己给定的那个高光次幂的值,同时这个高光次幂的范围也是在面板上定义的(1,90),如果美术给到了90,那么表面的高光次幂就是从那张光滑度的黑白图去映射,它的范围是1-90

菲涅尔效果

float fresnel = pow(max(0,1-vdotn),_FresnelPow);

非金属它的反射,颜色是黑白的,如果照进来的白色光就是黑白灰的

只有金属反射的光,是会从一个白色的光会产生一个颜色的反光

Shader "AP01/L10/OldSchoolPro"
{
    Properties
    {
        [Header(Texture)]
        _MainTex    ("RGB:基础颜色 A:环境遮罩", 2D)     = "white" {}
        _NormTex    ("RGB:法线贴图", 2D)                = "bump" {}
        _SpecTex    ("RGB:高光颜色 A:高光次幂", 2D)     = "gray" {}
        _EmitTex    ("RGB:环境贴图", 2d)                = "black" {}
        _Cubemap    ("RGB:环境贴图", cube)              = "_Skybox" {}
        [Header(Diffuse)]
        _MainCol    ("基本色",      Color)              = (0.5, 0.5, 0.5, 1.0)
        _EnvDiffInt ("环境漫反射强度",  Range(0, 1))    = 0.2
        _EnvUpCol   ("环境天顶颜色", Color)             = (1.0, 1.0, 1.0, 1.0)
        _EnvSideCol ("环境水平颜色", Color)             = (0.5, 0.5, 0.5, 1.0)
        _EnvDownCol ("环境地表颜色", Color)             = (0.0, 0.0, 0.0, 0.0)
        [Header(Specular)]
        _SpecPow    ("高光次幂",    Range(1, 90))       = 30
        _EnvSpecInt ("环境镜面反射强度", Range(0, 5))   = 0.2
        _FresnelPow ("菲涅尔次幂", Range(0, 5))         = 1
        _CubemapMip ("环境球Mip", Range(0, 7))          = 0
        [Header(Emission)]
        _EmitInt    ("自发光强度", range(1, 10))         = 1
    }

    SubShader
    {
        Tags { "RenderType"="Opaque" }

        Pass
        {
            Name "FORWARD"
            Tags { "LightMode"="ForwardBase" }

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

            // 追加投影相关包含文件
            #include "AutoLight.cginc"
            #include "Lighting.cginc"
            #pragma multi_compile_fwdbase_fullshadows
            #pragma target 3.0

            // 输入参数
            // Texture
            uniform sampler2D _MainTex;
            uniform sampler2D _NormTex;
            uniform sampler2D _SpecTex;
            uniform sampler2D _EmitTex;
            uniform samplerCUBE _Cubemap;

            // Diffuse
            uniform float3 _MainCol;
            uniform float _EnvDiffInt;
            uniform float3 _EnvUpCol;
            uniform float3 _EnvSideCol;
            uniform float3 _EnvDownCol;

            // Specular
            uniform float _SpecPow;
            uniform float _FresnelPow;
            uniform float _EnvSpecInt;
            uniform float _CubemapMip;

            // Emission
            uniform float _EmitInt;

            // 输入结构
            struct VertexInput
            {
                float4 vertex   : POSITION;   // 顶点信息 Get✔
                float2 uv0      : TEXCOORD0;  // UV信息 Get✔
                float4 normal   : NORMAL;     // 法线信息 Get✔
                float4 tangent  : TANGENT;    // 切线信息 Get✔
            };

            // 输出结构
            struct VertexOutput
            {
                float4 pos    : SV_POSITION;  // 屏幕顶点位置
                float2 uv0      : TEXCOORD0;  // UV0
                float4 posWS    : TEXCOORD1;  // 世界空间顶点位置
                float3 nDirWS   : TEXCOORD2;  // 世界空间法线方向
                float3 tDirWS   : TEXCOORD3;  // 世界空间切线方向
                float3 bDirWS   : TEXCOORD4;  // 世界空间副切线方向
                LIGHTING_COORDS(5,6)          // 投影相关
            };

            // 输入结构>>>顶点Shader>>>输出结构
            VertexOutput vert (VertexInput v)
            {
                VertexOutput o = (VertexOutput)0;                   // 新建输出结构
                o.pos = UnityObjectToClipPos( v.vertex );       // 顶点位置 OS>CS
                o.uv0 = v.uv0;                                  // 传递UV
                o.posWS = mul(unity_ObjectToWorld, v.vertex);   // 顶点位置 OS>WS
                o.nDirWS = UnityObjectToWorldNormal(v.normal);  // 法线方向 OS>WS
                o.tDirWS = normalize(mul(unity_ObjectToWorld, float4(v.tangent.xyz, 0.0)).xyz); // 切线方向 OS>WS
                o.bDirWS = normalize(cross(o.nDirWS, o.tDirWS) * v.tangent.w);  // 副切线方向
                TRANSFER_VERTEX_TO_FRAGMENT(o)                  // 投影相关
                return o;                                           // 返回输出结构
            }

            // 输出结构>>>像素
            float4 frag(VertexOutput i) : COLOR
            {
                // 准备向量
                float3 nDirTS = UnpackNormal(tex2D(_NormTex, i.uv0)).rgb;
                float3x3 TBN = float3x3(i.tDirWS, i.bDirWS, i.nDirWS);
                float3 nDirWS = normalize(mul(nDirTS, TBN));
                float3 vDirWS = normalize(_WorldSpaceCameraPos.xyz - i.posWS.xyz);
                float3 vrDirWS = reflect(-vDirWS, nDirWS);
                float3 lDirWS = _WorldSpaceLightPos0.xyz;
                float3 lrDirWS = reflect(-lDirWS, nDirWS);

                // 准备点积结果
                float ndotl = dot(nDirWS, lDirWS);
                float vdotr = dot(vDirWS, lrDirWS);
                float vdotn = dot(vDirWS, nDirWS);

                // 采样纹理
                float4 var_MainTex = tex2D(_MainTex, i.uv0);
                float4 var_SpecTex = tex2D(_SpecTex, i.uv0);
                float3 var_EmitTex = tex2D(_EmitTex, i.uv0).rgb;
                float3 var_Cubemap = texCUBElod(_Cubemap, float4(vrDirWS, lerp(_CubemapMip, 0.0, var_SpecTex.a))).rgb;

                // 光照模型(直接光照部分)
                float3 baseCol = var_MainTex.rgb * _MainCol;
                float lambert = max(0.0, ndotl);

                float specCol = var_SpecTex.rgb;
                float specPow = lerp(1, _SpecPow, var_SpecTex.a);
                float phong = pow(max(0.0, vdotr), specPow);
               
                float shadow = LIGHT_ATTENUATION(i);

                float3 dirLighting = (baseCol * lambert + specCol * phong) * _LightColor0 * shadow;

                // 光照模型(环境光照部分)
                float upMask = max(0.0, nDirWS.g);          // 获取朝上部分遮罩
                float downMask = max(0.0, -nDirWS.g);       // 获取朝下部分遮罩
                float sideMask = 1.0 - upMask - downMask;   // 获取侧面部分遮罩
                float3 envCol = _EnvUpCol * upMask +
                _EnvSideCol * sideMask +
                _EnvDownCol * downMask;     // 混合环境色

                float fresnel = pow(max(0.0, 1.0 - vdotn), _FresnelPow);    // 菲涅尔

                float occlusion = var_MainTex.a;

                float3 envLighting = (baseCol * envCol * _EnvDiffInt + var_Cubemap * fresnel * _EnvSpecInt * var_SpecTex.a) * occlusion;

                // 光照模型(自发光部分)
                float emitInt = _EmitInt * (sin(frac(_Time.z)) * 0.5 + 0.5);
                float3 emission = var_EmitTex * emitInt;

                // 返回结果
                float3 finalRGB = dirLighting + envLighting + emission;
                return float4(finalRGB, 1.0);
            }
            ENDCG
        }
    }
    FallBack "Diffuse"
}