glsl效果2——灰度图

1. 原始图及代码
- 1.1. 原始图
- 1.2. 原始代码
1. 灰度图效果图及glsl代码
- 2.1. 效果图
- 2.2. glsl代码
1. 加权的灰度图的效果图和glsl代码
- 3.1. 效果图
- 3.2. glsl代码
1. 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);}}