Three.js实现模糊效果

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

就是将采集区域的颜色是取平均赋值给当前片元，即采集范围越大越模糊。
给出运行效果图


还有什么实现方式欢迎大佬指点一二，一起学习进步。3D的世界里山高水长，还得继续默默前行。

生活不只有诗和远方，还有面包和牛奶。