iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 21
0
自我挑戰組

初見Unity Shader系列 第 21

立方體貼圖、Skybox、環境貼圖

文章內使用Unity 2019 LTS

原本標題是想叫做環境貼圖(Enviroment mapping),結果發現題目比想像中的還要大,原是緊急轉彎,換了一個在環境貼圖中的其中一個方法,立方體貼圖(Cube Mapping)。

目標

  • 認識立方體貼圖(Cube Mapping)

立方體貼圖

最開始說過,立方體貼圖是環境貼圖的一種,顧名思義就是用立方體的六個面,圍繞在玩家視角中,營造出身歷其境的感覺

from LearnOpenGL

在Unity中要完成立方體貼圖很簡單:

新增Material -> 下拉選單 -> Skybox/6 Sided

然後將這六張圖填上,記得這六張貼圖的Wrap Mode選為Clamp,壁面在圖與圖之間的隙縫出現問題。

之後開啟Lighting Setting,把剛剛的Material附加至Skybox Material中。

找不到Lighting Setting的話,他是在:

Window -> Rendering -> Light Setting

以下是Unity預設立方體環境貼圖的Shader,我用註解標示Shader會講解的地方:

Shader "Learning/Ch10/Skybox-cube" {
    Properties {
        _Tint ("Tint Color", Color) = (.5, .5, .5, .5)
        // (1)
        [Gamma] _Exposure ("Exposure", Range(0, 8)) = 1.0
        _Rotation ("Rotation", Range(0, 360)) = 0
        [NoScaleOffset] _FrontTex ("Front [+Z]   (HDR)", 2D) = "grey" {}
        [NoScaleOffset] _BackTex ("Back [-Z]   (HDR)", 2D) = "grey" {}
        [NoScaleOffset] _LeftTex ("Left [+X]   (HDR)", 2D) = "grey" {}
        [NoScaleOffset] _RightTex ("Right [-X]   (HDR)", 2D) = "grey" {}
        [NoScaleOffset] _UpTex ("Up [+Y]   (HDR)", 2D) = "grey" {}
        [NoScaleOffset] _DownTex ("Down [-Y]   (HDR)", 2D) = "grey" {}
    }

    SubShader {
        // (2)
        Tags { "Queue"="Background" "RenderType"="Background" "PreviewType"="Skybox" }
        Cull Off ZWrite Off

        CGINCLUDE
        #include "UnityCG.cginc"
        
        // (3)
        half4 _Tint;
        half _Exposure;
        float _Rotation;
        
        // 水平旋轉整個場景
        float3 RotateAroundYInDegrees (float3 vertex, float degrees)
        {
            float alpha = degrees * UNITY_PI / 180.0;
            float sina, cosa;
            sincos(alpha, sina, cosa);
            float2x2 m = float2x2(cosa, -sina, sina, cosa);
            return float3(mul(m, vertex.xz), vertex.y).xzy;
        }

        struct appdata_t {
            float4 vertex : POSITION;
            float2 texcoord : TEXCOORD0;
            // (4)
            UNITY_VERTEX_INPUT_INSTANCE_ID
        };
        struct v2f {
            float4 vertex : SV_POSITION;
            float2 texcoord : TEXCOORD0;
            // (4)
            UNITY_VERTEX_OUTPUT_STEREO
        };
        v2f vert (appdata_t v)
        {
            v2f o;
            // (4)
            UNITY_SETUP_INSTANCE_ID(v);
            // (4)
            UNITY_INITIALIZE_VERTEX_OUTPUT_STEREO(o);
            float3 rotated = RotateAroundYInDegrees(v.vertex, _Rotation);
            o.vertex = UnityObjectToClipPos(rotated);
            o.texcoord = v.texcoord;
            return o;
        }
        half4 skybox_frag (v2f i, sampler2D smp, half4 smpDecode)
        {
            half4 tex = tex2D (smp, i.texcoord);
            // (5)
            half3 c = DecodeHDR (tex, smpDecode);
            c = c * _Tint.rgb * unity_ColorSpaceDouble.rgb;
            c *= _Exposure;
            return half4(c, 1);
        }
        ENDCG

        Pass {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #pragma target 2.0
            sampler2D _FrontTex;
            half4 _FrontTex_HDR;
            half4 frag (v2f i) : SV_Target { return skybox_frag(i,_FrontTex, _FrontTex_HDR); }
            ENDCG
        }
        Pass{
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #pragma target 2.0
            sampler2D _BackTex;
            half4 _BackTex_HDR;
            half4 frag (v2f i) : SV_Target { return skybox_frag(i,_BackTex, _BackTex_HDR); }
            ENDCG
        }
        Pass{
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #pragma target 2.0
            sampler2D _LeftTex;
            half4 _LeftTex_HDR;
            half4 frag (v2f i) : SV_Target { return skybox_frag(i,_LeftTex, _LeftTex_HDR); }
            ENDCG
        }
        Pass{
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #pragma target 2.0
            sampler2D _RightTex;
            half4 _RightTex_HDR;
            half4 frag (v2f i) : SV_Target { return skybox_frag(i,_RightTex, _RightTex_HDR); }
            ENDCG
        }
        Pass{
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #pragma target 2.0
            sampler2D _UpTex;
            half4 _UpTex_HDR;
            half4 frag (v2f i) : SV_Target { return skybox_frag(i,_UpTex, _UpTex_HDR); }
            ENDCG
        }
        Pass{
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #pragma target 2.0
            sampler2D _DownTex;
            half4 _DownTex_HDR;
            half4 frag (v2f i) : SV_Target { return skybox_frag(i,_DownTex, _DownTex_HDR); }
            ENDCG
        }
    }
}

from Unity-Builtin-Shader

講解開始!

  1. 在變數前面加上這個 -> [],想必在Unity中C#寫過的朋友一定知道,這個就是Attribute。[NoScaleOffset]表示不在面板顯示Tiling跟Offset的資訊,[Gamma]是將值指定為sRGB。
  2. PreviewType表示在面板中,要怎麼顯示該Material,可以選擇"Plane"或"Skybox",一般看到的Material會是以材質「球」的形式。
  3. 之前的範例都是用fixedfloathalf也是浮點數的一種,精確度高於fixed,低於float
  4. 這些巨集是與GPU InstancingVR相關的,將他們註解掉也可以正常運作。
  5. DecodeHDR(tex, hdr)解碼至HDR編碼,一般顏色為RGB,HDR為RGBM。

坑阿!

今天想說來嘗試講解看看內建的Shader是怎麼寫的,但這樣看來,我越挖越多坑啦~

一直覺得按照於原理來說,立方體貼圖應該是最簡單的,結果一看,多了很多我不知道的東西:

  • Gamma
  • GPU Instancing
  • HDR
  • VR(我應該會有很長的時間不會去碰這主題)

Reference


上一篇
透明物體的陰影
下一篇
不是真的反射
系列文
初見Unity Shader30

尚未有邦友留言

立即登入留言