1. 程式人生 > >Directx11教程十一之AlphaMap(混合貼圖)

Directx11教程十一之AlphaMap(混合貼圖)

先看看本次教程的構架吧,

構架其實與前兩個教程差不多,就是前兩個教程的紋理資源為兩個,這次變為三個.

一,AlphaMap(混合貼圖)的簡介.

AlphaMap(混合貼圖)用於實現貼圖的混合效果,其實AlphaMap跟黑白色的光照貼圖差不多, 如圖:                    假設還有另外兩張紋理圖, 一張為:
另外一張為:
最終的混合的結果是: 那麼結果是如何實現的呢?其實很簡單,下面慢慢道來. 白色畫素為(1.0f,1.0f,1.0f)  //這裡忽略第四個引數alpha 黑色畫素為  (0.0f,0.0f,0.0f)     //這裡忽略第四個引數alpha 假設第一張紋理圖(AlphaMap)畫素顏色為AlphaColor(ra,ba,ga),
第二張紋理圖的畫素 顏色為PixelColor2=(r1,b1,g1),
第三張紋理圖的畫素 顏色為PixelColor2=(r2,b2,g2),  假設輸出最終混合顏色為color(r,g,b) 建立起公式: color=PixelColor1*AlphaColor+PixelColor2*(1.0f-AlphaColor); 先前說過,AlphaMap上的畫素顏色要不就是白色(1.0f,1.0f,1.0f),要不就是黑色(0.0f,0.0f,0.0f) 兩種情況: 第一種情況,當提取的畫素為黑色時,即AlphaColor(ra,ba,ga)=(0.0f,0.0f,0.0f) 此時color=(r1*0.0f,b1*0.0f,g1*0.0f)+(r2,b2,g2)*(1.0f,1.0f,1.0f)=(r2,b2,g2);
第二種情況,當提取的畫素為黑色時,即AlphaColor(ra,ba,ga)=(1.0f,1.0f,1.0f)
color=(r1,b1,g1)*(1.0f,1.0f,1.0f)+(r2*0.0f,b2*0.0f,g2*0.0f)=(r1,b1,g1);
這樣AlphaMap就完美的把另外兩張紋理圖合併為一張一部分畫素來自第二張紋理圖,一部分畫素來自第三張紋理圖的圖. 貼出我的Shader程式碼
Texture2D ShaderTexture[3];  //紋理資源陣列
SamplerState SampleType:register(s0);   //取樣方式

//VertexShader
cbuffer CBMatrix:register(b0)
{
	matrix World;
	matrix View;
	matrix Proj;
};

struct VertexIn
{
	float3 Pos:POSITION;
	float2 Tex:TEXCOORD0;  //多重紋理可以用其它數字
};


struct VertexOut
{
	float4 Pos:SV_POSITION;
	float2 Tex:TEXCOORD0;
};


VertexOut VS(VertexIn ina)
{
	VertexOut outa;
	outa.Pos = mul(float4(ina.Pos,1.0f), World);
	outa.Pos = mul(outa.Pos, View);
	outa.Pos = mul(outa.Pos, Proj);
	outa.Tex= ina.Tex;
	return outa;
}


float4 PS(VertexOut outa) : SV_Target
{
	float4 BasePixel;
    float4 ColorPixel;
	float4 AlphaPixel;
	float4 color;
    BasePixel = ShaderTexture[0].Sample(SampleType, outa.Tex);
	ColorPixel= ShaderTexture[1].Sample(SampleType, outa.Tex);
	AlphaPixel= ShaderTexture[2].Sample(SampleType, outa.Tex);
	//	color = BasePixel*AlphaPixel + ColorPixel*(float4(1.0f,1.0f,1.0f,1.0f) - AlphaPixel);
	color = BasePixel*AlphaPixel + ColorPixel*(1.0f - AlphaPixel);
	color = saturate(color);
	return color;
}

我的原始碼連結如下: