p5.js 基于 WebGL Shader 的图像滤镜重构filter()加速与createFilterShader()实战指南【免费下载链接】p5.jsp5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Processing. Looking for p5.js 2.0? http://beta.p5js.org项目地址: https://gitcode.com/GitHub_Trending/p5/p5.jsoutput_article_contentp5.js 基于 WebGL Shader 的图像滤镜重构filter()加速与createFilterShader()实战指南p5.js 在 2023 年 Google Summer of CodeGSoC期间完成了一次以性能为核心目标的图像滤镜重构把原本依赖 CPU 逐像素计算的filter()改写为基于 GPU 的 WebGL Shader 实现并新增了createFilterShader()让开发者可以用 GLSL 编写自定义滤镜。本文以仓库内 wong_gsoc_2023.md 为骨架结合filter()、createFilterShader()的源码实现与单元测试讲解这次重构的来龙去脉、新版filter()的完整参数体系、自定义滤镜的编写方法以及实测中的性能边界与已知改进空间。重构背景为什么filter()曾经很慢原文档明确指出本次工作的出发点非常单纯——filter()函数太慢了。旧版filter()走的是 CPU 路径在 src/image/filters.js 中Filters模块是一组破坏性函数集合它们直接修改传入的 canvas 像素数据而非返回副本。其核心操作流程是通过_toPixels()把 canvas 的像素读出为Uint8ClampedArray2D 上下文用getImageDataWebGL 上下文用gl.readPixels在 CPU 上对每个像素逐一执行阈值、灰度、模糊等算法把结果写回 canvas。这种方案有两个天然瓶颈逐像素串行计算模糊这类需要邻域采样的滤镜复杂度随画布尺寸与模糊半径急剧上升每一帧都要在 JavaScript 主线程上完成大量循环像素往返传输getImageData与写入回传涉及 GPU 与 CPU 之间的数据拷贝放大了性能损耗。原文档给出的直观对比是重构前在草图里执行filter()模糊能明显感受到掉帧重构后人们可以毫无察觉地使用模糊这类效果。重构方案用 Shader 把计算交给 GPU解决方案是用 Shader 替代 CPU 逐像素计算。Shader 是运行在 GPU 上的小程序可以同时处理大量像素或顶点天然适合图像处理这类数据并行任务。重构后filter()的默认实现不再触碰 CPU 像素循环而是把画布内容作为纹理texture上传到 GPU通过一次或多次全屏四边形full-screen quad绘制让片段着色器逐像素计算滤镜结果把结果绘制回画布。从当前源码看这一重构体现在两条渲染路径上WEBGL 渲染器路径filter()直接调用渲染器的filter()方法见 src/image/pixels.js内部在 src/core/p5.Renderer3D.js 中用getFilterLayer()取得离屏 framebuffer执行 shader 绘制P2D2D 默认渲染器路径由于默认 2D 渲染器本身没有 WebGL 上下文p5.js 在 src/image/filterRenderer2D.js 中实现了一个隐藏的FilterRenderer2D——它在内部创建一个 WebGL2/WebGL canvas把 2D 画布内容作为纹理传入跑完 shader 后再用drawImage把结果拷回 2D 画布。这也是原文档性能测量小节中提到从隐藏的 WEBGL 渲染器把过滤结果传回默认 P2D 渲染器这一额外开销的由来。filter()新版参数体系重构后filter()的使用方式发生了一些变化需要按调用形态区分。从 src/image/pixels.js 的 JSDoc 与parseFilterArgs()解析逻辑可以梳理出三种调用形式。形式一经典滤镜常量filter(THRESHOLD); // 阈值化 filter(GRAY); // 灰度 filter(OPAQUE); // 去透明 filter(INVERT); // 反色 filter(POSTERIZE, 4); // 色调分离 filter(BLUR, 3); // 模糊 filter(ERODE); // 腐蚀 filter(DILATE); // 膨胀各参数的解析规则见parseFilterArgs第一个参数为滤镜操作常量字符串第二个参数若为数字则作为filterParam如模糊半径、色调分离级别、阈值末尾若显式传入false则useWebGL置为false强制走旧版 CPU 像素路径Filters.apply(this.canvas, Filters[operation], value)用于在不支持 WebGL 的环境回退。各操作不带参数时的默认值定义在 src/image/const.js 的filterParamDefaults中操作默认参数BLUR3模糊半径POSTERIZE4色阶数THRESHOLD0.5阈值形式二自定义 Shader 对象filter(myFilterShader); // myFilterShader 由 createFilterShader() 创建此时parseFilterArgs检测到第一个参数是p5.Shader实例直接把shader原样交给渲染器执行WEBGL 渲染器走this._renderer.filter(shader)P2D 渲染器走filterRenderer.setOperation(operation, value, shader)即自定义滤镜优先。形式三图片对象上的filter()p5.Image.filter()同样被同步升级见 src/image/p5.Image.js对图片对象调用img.filter(myp5.THRESHOLD)等即可获得同样的 shader 加速效果。各内置滤镜的 Shader 实现细节内置滤镜的 GLSL 代码由 src/core/filterShaders.js 中的makeFilterShader(renderer, operation, p5)统一生成它是本次重构的配方文件值得逐一解读GRAY按亮度权重dot(rgb, vec3(0.2126, 0.7152, 0.0722))计算灰度保留原 alphaINVERTvec3(1.0) - color.rgb即对每个颜色通道取反THRESHOLD同样先按亮度权重算灰度再用step(threshold, gray)把结果二值化为纯黑或纯白阈值由filterParameter提供默认 0.5POSTERIZE先把颜色乘以n色阶数floor后除以n - 1.0把每个通道量化到有限个档位例如n 5时取值为0.0, 0.25, 0.50, 0.75, 1.0OPAQUEvec4(color.rgb, 1.0)把 alpha 强制设为 1BLUR最复杂的实现。它不是严格的高斯权重而是采用二次权重pow(e - abs(x), 2.0)源码注释明确说明这一点采样数上限 64采样数随半径缩放并保证为奇数超过上限时通过加大采样间距spacing防止结果偏移并引入基于random(uv * canvasSize)的抖动偏移来避免带状伪影为保证模糊质量执行水平 垂直两次 pass见下文ERODE / DILATE遍历当前像素 3×3 邻域通过texelSize计算偏移分别取邻域内亮度最小 / 最大的颜色实现经典的形态学腐蚀与膨胀。这些实现细节印证了原文档中有几个值得研究的替代模糊滤镜存在一个 issue 希望做出质量更好的高斯模糊 shader的改进建议当前 BLUR 是有意为之的近似实现而非严格高斯。两趟 pass 的模糊与全屏四边形绘制BLUR之所以要跑两次是因为真正的二维模糊需要同时沿 x、y 两个方向采样。把二维卷积拆成水平一趟 垂直一趟的两个一维卷积可以把 O(n²) 的采样量降为 O(n) 量级。在 P2D 路径的 src/image/filterRenderer2D.js 中可以看到applyFilter()的完整流程设置direction为[1, 0]执行第一次_renderPass()水平模糊结果留在隐藏 canvas 上clear()后drawImage把结果画回 2D 画布设置direction为[0, 1]执行第二次_renderPass()垂直模糊再次clear()并drawImage回写。而 WEBGL 路径src/core/p5.Renderer3D.js则用两个离屏 framebuffergetFilterLayer()与getFilterLayerTemp()分别承载水平、垂直两趟结果每趟用plane(target.width, target.height)绘制全屏四边形触发逐像素着色。_renderPass()src/image/filterRenderer2D.js展示了单趟绘制的关键细节一个由 4 个顶点组成的TRIANGLE_STRIP全屏四边形顶点数据与纹理坐标在构造时一次性上传vertexBuffer、texcoordBuffer每趟只需绑定 shader、设置 uniform、gl.drawArrays一次。这也解释了为什么 shader 滤镜快每帧只有一次 GPU 绘制调用而非 CPU 上的逐像素循环。createFilterShader()自定义滤镜的新入口原文档的第二个核心成果是createFilterShader()——让写 shader这件事的样板代码大幅减少。在 src/webgl/material.js 的实现中可以看到它的本质它相当于自带默认顶点着色器的createShader()。createFilterShader(fragSrc)接受一个 GLSL 片段着色器源码字符串自动拼接内置的默认顶点着色器defaultVertV1对应 WebGL1、defaultVertV2对应#version 300 es根据fragSrc是否包含#version 300 es自动选择然后创建并在非跳过编译检查时立刻编译p5.Shader对象。编译时若失败会抛出带友好信息的错误见 src/image/filterRenderer2D.js 的_initShader错误文案包括Yikes!、Darn!、Snap!等 p5.js 一贯的轻松风格。预置 uniform 与 varying片段着色器里可以直接使用的内置变量来自 src/webgl/material.js 与 src/webgl/shaders/filters/base.frag变量类型含义tex0sampler2D画布内容作为纹理传入canvasSizevec2画布宽高不含 pixel densitytexelSizevec2单个物理像素的尺寸即1.0 / (width * density)与1.0 / (height * density)vTexCoordvarying vec2取值 0~1 的纹理坐标描述当前像素在画布上的位置其中canvasSize、texelSize、radius、filterParameter、direction等 uniform 由渲染器在每次绘制时自动设置见 src/image/filterRenderer2D.js开发者只需在自定义 shader 中声明并使用即可自定义变量如示例中的uniform float darkness则通过shader.setUniform(darkness, 0.5)在draw()中逐帧赋值。最小可用示例下面是官方 JSDoc 示例的完整形态展示用 5 行 GLSL 生成一个纯色画布function setup() { let fragSrc precision highp float; void main() { gl_FragColor vec4(1.0, 1.0, 0.0, 1.0); }; createCanvas(100, 100, WEBGL); let s createFilterShader(fragSrc); filter(s); describe(a yellow canvas); }进阶示例纹理采样 自定义 uniformlet img, s; async function setup() { img await loadImage(assets/bricks.jpg); let fragSrc precision highp float; varying vec2 vTexCoord; uniform sampler2D tex0; uniform vec2 texelSize; uniform vec2 canvasSize; uniform float darkness; void main() { vec4 color texture2D(tex0, vTexCoord); color.b 1.0; color * darkness; gl_FragColor vec4(color.rgb, 1.0); }; createCanvas(100, 100, WEBGL); s createFilterShader(fragSrc); } function draw() { image(img, -50, -50); s.setUniform(darkness, 0.5); filter(s); describe(a image of bricks tinted dark blue); }注意createFilterShader()返回的滤镜 shader 作用于整个画布而非单个几何体这与createShader()配套shader()的用法作用于几何体填充有本质区别。文档同时提示createFilterShader面向高级用户需要手写 GLSL如果希望用 JavaScript 以更友好的方式描述滤镜逻辑可以考虑同系列新增的buildFilterShader()基于 p5.strands见 src/webgl/material.js。参数校验、缓存与降级回退从源码中可以观察到几个值得注意的工程细节Shader 缓存WEBGL 路径会把每种滤镜的 shader 缓存在defaultFilterShaderssrc/core/p5.Renderer3D.jsP2D 路径缓存在filterShaderssrc/image/filterRenderer2D.js因此同一滤镜反复调用不会重复编译 GLSLWebGL 不可用时的降级FilterRenderer2D构造时若既拿不到 webgl2 也拿不到 webgl 上下文会打印WebGL not supported, cannot apply filter.src/image/filterRenderer2D.js用户也可通过filter(op, value, false)显式回退到旧版 CPU 像素实现WEBGL 模式下禁止 CPU 回退源码中filter()检测到useWebGL false且渲染器为isP3D时会console.warn(filter() with useWebGLfalse is not supported in WEBGL)。测试验证仓库的单元测试目前将 Filters 相关用例标记为suite.todotest/unit/image/filters.js已覆盖的断言验证了 shader 滤镜的像素输出正确性例如THRESHOLD全图填充低亮度颜色color(120, 20, 40)后执行img.filter(THRESHOLD)断言所有像素的 RGB 通道均为 0变黑填充高亮度颜色color(211, 228, 250)后断言所有像素均为 255变白——分别对应阈值两侧的二值化行为GRAY与OPAQUE等同样在测试文件中覆盖。这些用例验证了重构后 GPU 路径与旧 CPU 路径在语义上保持一致滤镜行为没有回归。性能实测与已知边界原文档给出了重构后的实测性能结论这些是作者在自己机器上的真实数据应作为参考而非通用基准WEBGL 模式下滤镜表现良好作者机器上可稳定跑到 60 fpsP2D 渲染器的跨渲染器传输有损耗从隐藏 WEBGL 渲染器把过滤结果传回默认 P2D 渲染器时帧率降至约 20 fps即前文FilterRenderer2D的drawImage回写开销移动端 GPU 上性能仍不理想。后续改进方向原文档列出了三项明确的后续工作均在当前源码中可找到对应线索减少图形层的数量作者建议用 framebuffer 或更精细的 canvas 管理来削减 P2D 路径中隐藏 WebGL canvas 回写的中间层开销对应 src/image/filterRenderer2D.js 的整体设计更好的高斯模糊当前 BLUR 采用二次权重近似quadWeight见 src/core/filterShaders.js仓库中已有 issue 讨论实现能随用户输入调节的、更高质量的 Gaussian blur shader继续优化性能重点是 P2D 跨渲染器传输与移动 GPU 场景。结语这次重构把 p5.js 的filter()从CPU 逐像素循环升级为GPU 全屏四边形 Shader并配套提供了createFilterShader()降低自定义滤镜的门槛。对普通用户而言filter(BLUR, 3)这类调用现在更快了对高级用户而言一份 GLSL 片段着色器就能做出覆盖全画布的自定义效果。相关入口文件与源码均可在仓库内进一步查阅滤镜入口、P2D 滤镜渲染器、滤镜 shader 配方、WEBGL 渲染器滤镜实现 以及 单元测试。 /output_article_content【免费下载链接】p5.jsp5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Processing. Looking for p5.js 2.0? http://beta.p5js.org项目地址: https://gitcode.com/GitHub_Trending/p5/p5.js创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考