demo:http://www.artvily.com/sample?sample=depthBlur

移动端Demo: http://www.artvily.com/sample?sample=depthBlur3

WebGL实现的一个Depth Blur(深度模糊/或景深模糊)的动态效果_IT

实现原理: 在渲染到贴图(RTT)的过程记录下深度值(最好用float texture format)，然后不同的深度取不同的模糊值(这里只做了距离摄像机越远，越模糊)，这里使用了比较耗性能的方式: 整个屏幕大小的RTT Texture实现模糊，整个模糊的纹理和原来清晰的纹理对应的像素之间通过响应的深度值来混合，得到比较平滑的效果。