Shader 學習筆記 (二)：FX Composer 片段插入與貼圖實作

步驟 1：插入貼圖與取樣器片段

在 FX Composer 的 Empty Effect 編輯器中，於 float4x4 WorldViewProj : WorldViewProjection; 之後右鍵選擇 Insert Snippets → Texture and Sampler。在彈出對話框將 Name 改為 diffuse，工具自動生成完整宣告：

texture diffuse <
    string ResourceName = "";
    string UIName = "diffuse Texture";
    string ResourceType = "2D";
>;

sampler2D diffuseSampler = sampler_state {
    Texture = <diffuse>;
    MinFilter = Linear; MagFilter = Linear; MipFilter = Linear;
    AddressU = Wrap; AddressV = Wrap;
};

<...> 內的中繼資料供 FX Composer 識別參數並顯示於屬性面板，不影響 HLSL 編譯。

步驟 2：完整 Shader 程式碼

struct VS_OUTPUT {
    float4 pos : POSITION;
    float2 tex : TEXCOORD0;
};

VS_OUTPUT mainVS(float4 pos : POSITION, float2 tex : TEXCOORD0) {
    VS_OUTPUT vsOut;
    vsOut.pos = mul(pos, WorldViewProj);
    vsOut.tex = tex;
    return vsOut;
}

float4 mainPS(float2 tex : TEXCOORD0) : COLOR {
    return tex2D(diffuseSampler, tex);  // 依 UV 取樣貼圖
}

technique technique0 {
    pass p0 {
        VertexShader = compile vs_3_0 mainVS();
        PixelShader  = compile ps_3_0 mainPS();
    }
}

步驟 3：指定貼圖資源

選擇 Effect 檔案，在右側 Properties 面板的 Parameters → diffuse Texture 下拉選單選擇所需圖片檔（.dds/.png/.jpg 等）。

步驟 4：編譯與套用

按 Ctrl+F7 編譯 Shader，將 Effect 從 Materials 面板拖曳至場景物件（如茶壺、球體）即可即時預覽。

核心指令解析

• tex2D(sampler, uv)：依取樣器狀態（過濾、定址模式）對貼圖進行雙線性插值取樣，回傳 float4 色彩。
• sampler_state 區塊定義 GPU 取樣硬體行為，對應 D3DSAMPLERSTATETYPE 列舉。