遊戲中因為有時怪物太多，常常需要對攻擊的怪物高亮，對於遊戲體驗都有很大的提升，也增加了玄幻色彩，如下所示：

網上也有不少實現這種效果的例子，《introduce  to DirectX3D game programming》 書中介紹有法線放大的方法，這種方法對於規則模型，比如茶壺(teapot)是有很好的效果，見部落格中所示， 但是遊戲中也有不少NPC 是穿有衣服，衣袂飄飄， 此時這種片狀的模型在邊緣是沒有法線的，所以往往無法描邊，最後的效果必然是不完整的。

鑑於此，重新思考法線放大方法。因為法線放大最終的效果就是為了實現把單色渲染的模型背景圖沿周圍擴大，我們可以採用別的方法達到同樣的效果。對影象熟悉的應該會想到膨脹(inflation)。所以下面所講的模糊高亮效果就是通過下面幾個步驟實現：

1. 單色渲染模型到一張RTT_1

2.  設定currentTarget 為RTT_2,  getTargetTexture(RTT_1),   進行膨脹

3. 設定currentTarget 為RTT_1,  getTargetTexture(RTT_2),   進行高斯模糊

3. 最後一步就是把處理後的紋理貼到遊戲中

下面具體講解下shader 書寫：

1. 單色渲染pass， 在頂點pass 中，主要是做座標轉換

// rimback pass

struct Rimback_VS_OUTPUT
{
	float4 pos : POSITION0;
	float2 uv  : TEXCOORD0;
};

Rimback_VS_OUTPUT Rimback_vs(VertexInput input)
{
	// localspace轉換到worldspace，並且蒙皮
	WorldVertex wv = VertexInputToWorld(input);
	Rimback_VS_OUTPUT output;

	float3 pos = wv.worldPos.xyz;

	output.pos = mul(float4(pos, 1), vp_mat);
	output.uv = input.uv0;
	return output;
}

float4 Rimback_ps(float2 uv : TEXCOORD0): color0   
{
	float4 color = tex2D(modelTex, uv);
	clip(color.a-0.5);  
	color.xyz= edgeColor.xyz;
	//clip(color.a);  
	return float4(color.rgb,1);
}
 

其中 VertexInputToWorld(VertexInput input) 函式實現描邊隨人物移動而移動，相當於給描邊加上骨骼，函式中主要也是實現input 和 骨骼矩陣 之間的運算

2. 膨脹，關於膨脹原理，就是通過周圍搜尋，增加畫素，填補空白。本例子中，是通過求取周圍畫素的alpha 值，因為步驟1得到單色渲染紋理的alpha為1，周圍取到的alpha值是0，這樣通過計算，得到邊緣部分的alpha 在0~1 之間。通過閾值可以控制膨脹效果。

float4 pengzhang_ps(float2 uv : TEXCOORD0) : color0
{
	const float2 flation[25] =
	{
		-2.70,-2.70,
		-2.70,-1.70,
		-2.70, 0.70,
		-2.70, 1.70,
		-2.70, 2.70,
		-1.70,-2.70,
		-1.70,-1.70,
		-1.70, 0.70,
		-1.70, 1.70,
		-1.70, 2.70,
		0.70,-2.70,
		0.70,-1.70,
		0.70, 0.70,
		0.70, 1.70,
		0.70, 2.70,
		1.70,-2.70,
		1.70,-1.70,
		1.70, 0.70,
		1.70, 1.70,
		1.70, 2.70,
		2.70,-2.70,
		2.70,-1.70,
		2.70, 0.70,
		2.70, 1.70,
		2.70, 2.90,
	};
	float4 outColor = tex2D(blurTex, uv);

		for(int i = 0; i< 25; i++)
		{
			float4 color = tex2D(blurTex, uv + flation[i].xy * viewport_inv_size.xy);
				// add color to flation
				if(color.a >= 0.98)
					outColor = color;
		}

		return outColor;
}
 

float4 edegblur_ps(float2 uv : TEXCOORD0) : color0
{
    // 0.7 is for pixel bias
	const float4 samples[9] = {
		-3.70, -3.70, 0, 1.0/16.0,
		-3.70,  3.70, 0, 1.0/16.0,
		3.70, -3.70, 0, 1.0/16.0,
		3.70,  3.70, 0, 1.0/16.0,
		-3.70,  0.70, 0, 2.0/16.0,
		3.70,  0.70, 0, 2.0/16.0,   
		0.70, -3.70, 0, 2.0/16.0,
		0.70,  3.70, 0, 2.0/16.0,
		0.70,  0.70, 0, 4.0/16.0
	};

	float4 col = float4(0, 0, 0, 0);
		//Sample and output the averaged colors
		for(int i=0;i<9;i++)
			col += samples[i].w * tex2D(blurTex, uv + samples[i].xy * viewport_inv_size.xy);
	return float4(edgeColor.r,edgeColor.g,edgeColor.b,col.a);
}

struct SceneBlend_VS_OUTPUT
{
	float4 pos	: POSITION0;
	float2 uv	: TEXCOORD0;
	float4 uvProj : TEXCOORD1;
};

VS_OUTPUT  scene_blend__vs(VS_INPUT vert)
{
	VS_OUTPUT vsout;

	vsout.pos = float4(vert.pos,1);
	vsout.uv  = vert.uv;

	vsout.pos.z = 1.0f;

	return vsout;
}


float4 scene_blend_ps(VS_OUTPUT input):color0
{
	float alpha = tex2D(blurTex,input.uv).a;
	clip(1.0 - (alpha + 0.2f));// 此處是實現顯示輪廓邊緣，中間部分alpha>0.8 的不顯示
	return tex2D(blurTex, input.uv);
}

最後，關於遮擋描邊的效果，在步驟1，即單色渲染的時候，只需要開啟深度檢測，這樣渲染的紋理，僅僅是模型可見部分，而不可見部分就沒有渲染進去，當然後面的膨脹，模糊都沒有它們的事情了。最後的效果圖，如下所示：

關於pass最後的效率情況，如果bur效果不明顯，可以通過重複blur。如果pass影響遊戲幀數，耗記憶體太多，可以考慮對blur 進行橫向以及縱向分開pass。

以上思路僅供參考，希望對遊戲中開發有所啟示。

參考資訊：

http://www.gamedev.net/topic/655543-outline-glow-effect/

http://wiki.unity3d.com/index.php/Silhouette-Outlined_Diffuse

https://software.intel.com/en-us/blogs/2014/07/15/an-investigation-of-fast-real-time-gpu-based-image-blur-algorithms