Three.js实现模糊效果

实现这种效果还是比较容易的,下面简单的说一下实现的思路。顶点着色器没有什么好说的,主要是片段着色器来进行计算。在片段着色器中首先计算出每一个像素在纹理坐标的比例,在当前纹理坐标设置一个采集颜色的区域,这个区域设置的越大越模糊,原因很简单,就是将设置采集区域内的颜色值rgb累加再取其平均值,就获得了当前片元的颜色值。采集区域越大,就越偏离原本的颜色值,就会越模糊。下面给出原理图
Three.js实现模糊效果
就是将采集区域的颜色是取平均赋值给当前片元,即采集范围越大越模糊。
给出运行效果图
Three.js实现模糊效果
Three.js实现模糊效果
还有什么实现效果欢迎大佬指点一二,一起学习进步。