opengl glsl 计算模糊(Blur) WebGL实现(glsl源码)

模糊前:

模糊后(WebGL实现: 点击打开链接):

一般的采样模糊方式达不到上述效果，这里给出个人实现的glsl代码:

void main()
{
	vec4 color = vec4(0.0);
	int seg = 5;
	int i = -seg;
	int j = 0;
	float f = 0.0f;
	float dv = 2.0f/512.0f;
	float tot = 0.0f;
	for(; i <= seg; ++i)
	{
		for(j = -seg; j <= seg; ++j)
		{
			f = (1.1 - sqrt(i*i + j*j)/8.0);
			f *= f;
			tot += f;
			color += texture( texSampler, vec2(uv.x + j * dv, uv.y + i * dv) ).rgba * f;
		}
	}
	color /= tot;
	FragColor = color;
}

这里主要展示了计算类似于正态分布的方案，还有很多其他的(还有pow,三角函数等)。当然这些计算结果可以先在cpu计算好，然后直接传给gpu，免得浪费计算资源

关于模糊的一些建议:

还有一种方案: 一张模糊的 tex(例如rtt得到的)，和一张对应的清晰的图之间对每个"像素"执行混合操作，这个插值的参数是可变的，会达到不错的效果
还有一种高效的模糊数据的来源: 就是将一个小的Texture放大到一张大图(通过draw)

使用 texture2DLod()函数，然后设置合适的lod值也可以得到近似的模糊效果。

两次小范围查找临近像素多次迭代blur(draw)获得的blur效果在很多情况下要优于较大范围查找临近像素的单次迭代blur计算

关于正态分布技术:点击打开链接

代码截图:

还有这篇文章:http://rastergrid.com/blog/2010/09/efficient-gaussian-blur-with-linear-sampling/