iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 9
0
自我挑戰組

初見Unity Shader系列 第 9

紋理貼圖,又或是叫做Texture

使用Unity 2019 LTS

目標

  • 認識紋理貼圖(Texture)
  • 程式與美術口中的Texture

當匯入一張圖到Unity...

當我們匯入一張圖進入Unity時,點擊圖片會在Inspector看到圖(1)這些資訊。


圖(1)

注意: 使用不同版本,面板資訊會有所不同

下面介紹三個重要且常見的屬性:Texture TypeWrap ModeFilter Mode

Texture Type


圖(2)

最常用的是Default、Normal map、Sprite、Lightmap,筆者目前只用過Default、Normal map、Sprite,Lightmap沒用過,所以先講講其他三個。

  • Default是最基本的紋理貼圖類型。
  • Sprite則是在UI的時候會用到,記得以前筆者剛學Unity時,發現圖片怎麼沒辦法附在UI上,通常都是因為沒有轉化他的類型。
  • Normal map最常見是用在「法線貼圖」這項視覺效果技術,如果讀者在網路上下載3D模型的時候,常會看到這個模型的紋理貼圖中,有一張「藍藍的」貼圖,那個就是法線貼圖。

Wrap Mode


圖(3)

載進Unity的圖片有各式各樣的大小,可能是256x256、1024x1024,最終都會被歸一化(Normalized)至[0, 1]這個區間,但紋理再進行取樣的時候,可能不會在這個區間,這時Wrap Mode就是決定當座標超過[0, 1]的時候,要使用甚麼方式進行延展。通常會用兩種方式,一種是Repeat,另一種是Clamp。

Filter Mode


圖(4)

Filter Mode有三種類型,Point、Bilinear、Trilinear,效果會依序提升,同時消耗的效能也會提高。濾波會影響到紋理放大縮小時的圖片品質。


圖(5)
對於紋理的縮放與品質,就得說到一種技術,多級漸遠紋理(mipmapping)。試想一下以下這個問題:

假若一張紋理貼圖離相機很遠,遠到從相機看只有一個點,那需不需要繪製這種高清的貼圖呢?

很明顯的,為了效能,這是不用的,而多級漸遠紋理就是在解決這樣資源浪費(繪製時間)的問題,但根據等價交換原則,有了時間,必須犧牲空間,多級漸遠紋理必須耗費空間去存儲這些不同層級的紋理。

開始撰寫!

以下配合Day8的Blinn-phong來實作我們的紋理映射(Texture mapping),會像之前一樣,在新出現的地方寫上註解,這邊我選了我的頭貼都作範例:


圖(6)

Shader "Learning/TextureMapping"
{
    Properties
    {
        _Color ("Color", Color) = (1,1,1,1)
        // 紋理貼圖預設值為"white{}"
        _MainTex ("Texture", 2D) = "white" {}
        _Specular ("Specular Color", Color) = (1,1,1,1)
        _Gloss ("Gloss", Range(8, 256)) = 32
    }
    SubShader
    {
        Tags { "RenderType"="ForwardBase" }

        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag

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

            struct v2f
            {
                float4 pos : SV_POSITION;
                // 新增一個紋理座標屬性
                // 在fragment shader中會利用這個座標對貼圖取樣
                float2 uv : TEXCOORD0;
                // worldPos並不是第二組紋理座標
                // 而是利用它個空間存取頂點的世界座標
                float3 worldPos : TEXCOORD1;
                float3 worldNormal : NORMAL;
            };

            sampler2D _MainTex;
            
            // ST表示_MainTex的縮放(scale)、位移(translation)
            // 圖(7)可以看到MainTex對映著ST的屬性,Tiling & Offset
            // 對使用的紋理屬性加上"_ST",可以直接獲取他的Tiling、Offset屬性
            float4 _MainTex_ST;
            fixed4 _Color;
            fixed4 _Specular;
            float _Gloss;

            v2f vert (appdata_base v)
            {
                v2f o;
                o.pos = UnityObjectToClipPos(v.vertex);
                o.uv = v.texcoord.xy * _MainTex_ST.xy + _MainTex_ST.zw;
                o.worldPos = mul(unity_ObjectToWorld, v.vertex).xyz;
                o.worldNormal = UnityObjectToWorldNormal(v.normal);
                return o;
            }

            fixed4 frag (v2f i) : SV_Target
            {
                // tex2D(texture, uv) <- 對貼圖取樣
                fixed3 albedo = tex2D(_MainTex, i.uv).rgb * _Color;
                // 以下為 Blinn-phong
                fixed3 ambient = UNITY_LIGHTMODEL_AMBIENT * albedo;

                fixed3 worldNormalDir = normalize(i.worldNormal);

                fixed3 worldLightDir = normalize(_WorldSpaceLightPos0.xyz);

                fixed diffIntensity = saturate(dot(worldNormalDir, worldLightDir));

                fixed3 diffuse = _LightColor0.rgb * albedo * diffIntensity;

                fixed3 viewDir = normalize(_WorldSpaceCameraPos.xyz - i.worldPos);

                fixed3 halfwayDir = normalize(worldLightDir + viewDir);

                fixed specIntensity = pow(saturate(dot(worldNormalDir, halfwayDir)), _Gloss);

                fixed3 specular = _LightColor0.rgb * _Specular.rgb * specIntensity;

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


圖(7)


圖(8)

怎麼貼上去的?

下面的一張圖,我認為很清楚地描述,一張2D的圖是怎麼貼上凹凸不平的複雜模型的:

from Texture Mapping Real-World Objects with Hydrographics

你的Texture不是我的Texture

在還沒入門遊戲開發的時候,就有聽過「Texture」或是「紋理」一詞,當時的對它們的解釋是「一張圖」,沒了。

後來,開始入門遊戲開發的時候,除了Texture一詞還碰到了Sprite(註1),到這時都只認為是「一張圖」,直到遇到了「RenderTexture」,才意識到美術與程式口中說的「Texture」或許是不同的東西,我以前所知道的Texture是美術所認識的Texture,而程式口中的Texture最直白的講就是一段連續的資料儲存在GPU的空間,包括長、寬、RGB通道數這些屬性。

註1: 我查到的翻譯不是小精靈就是某知名碳酸汽水,感覺都不對,所以我之後都會直接叫做sprite

Reference


上一篇
高光反射與Blinn-Phong Shading
下一篇
深度緩衝,又或是Z緩衝
系列文
初見Unity Shader30

尚未有邦友留言

立即登入留言