针对 GLSL 的优化单次通道模糊着色器
demo - 源码 针对 GLSL 优化的可分离高斯模糊。此模块源自 高效的线性采样高斯模糊。
该函数只在单个方向上进行模糊处理。为了获得正确的结果,纹理应使用 gl.LINEAR 过滤器。
#pragma glslify: blur = require('glsl-fast-gaussian-blur')
uniform vec2 iResolution;
uniform sampler2D iChannel0;
uniform vec2 direction;
void main() {
vec2 uv = vec2(gl_FragCoord.xy / iResolution.xy);
gl_FragColor = blur(iChannel0, uv, iResolution.xy, direction);
}该模块提供三个"抽头"级别(模糊效果所需的像素数量),可单独设置。默认值为 9。
#pragma glslify: blur1 = require('glsl-fast-gaussian-blur/13')
#pragma glslify: blur2 = require('glsl-fast-gaussian-blur/9')
#pragma glslify: blur3 = require('glsl-fast-gaussian-blur/5')由于此方法是可分离的,因此需要多次迭代才能在两个方向上模糊图像。有关详细信息,请参阅 这里;或者查看 示例 以了解实现细节。
使用 npm 安装,使用 glslify 在着色器中使用该函数。
在某些设备(尤其是 PowerVR)上,还可以通过使用非依赖的纹理读取来进一步优化。可以通过在顶点着色器中计算纹理坐标,并将其作为变量传递给片段着色器来实现此操作。为了保持本模块的简单性,此操作已作为阅读者的练习留给读者。您可以在 这里 阅读更多相关信息。
暂无开放 Issues,或尚未同步最近议题。