glsl效果2——灰度圖

glsl效果2——灰度圖

• 1. 原始圖及代碼
  • 1.1. 原始圖
  • 1.2. 原始代碼
• 2. 灰度圖效果圖及glsl代碼
  • 2.1. 效果圖
  • 2.2. glsl代碼
• 3. 加權的灰度圖的效果圖和glsl代碼
  • 3.1. 效果圖
  • 3.2. glsl代碼
• 4. git地址

以下的效果建立在使用幀緩衝，渲染到紋理後進行的相關操作，具體代碼可以看git項目裏的源代碼。灰度圖就是吧原來的顏色都變成了灰色

1. 原始圖及代碼

1.1. 原始圖

1.2. 原始代碼

void main()
{
	FragColor = texture(screenTexture, TexCoords);
}

2. 灰度圖效果圖及glsl代碼

2.1. 效果圖

2.2. glsl代碼

//灰度圖
void main()
{
	vec3 col = vec3(texture(screenTexture, TexCoords));
	float average = (col.x+col.y+col.z)/3.0f;
	FragColor = vec4(average,average,average,1.0);
}

可以看到，這裏的處理很簡單就是吧，圖像的rgb三個值均值了一下，這已經能創造很好的結果了，但人眼會對綠色更加敏感一些，而對藍色不那麼敏感，所以爲了獲取物理上更精確的效果，我們需要使用加權的(Weighted)通道。

3. 加權的灰度圖的效果圖和glsl代碼

3.1. 效果圖

3.2. glsl代碼

//加權灰度圖
void main()
{
	vec3 col = vec3(texture(screenTexture, TexCoords));
	float average = 0.2126 * FragColor.r + 0.7152 * FragColor.g + 0.0722 * FragColor.b;
	if(col.x!=1.0f&&col.y!=1.0f&&col.z!=1.0f){
		FragColor = vec4(average,average,average,1.0);
	}else{
		FragColor = texture(screenTexture, TexCoords);
	}
	
}

具體rgb相對應的數值爲什麼是這樣，我也不知道。

4. git地址

項目地址