在 Node Video 里做粒子特效，有个前提必须先讲清楚：只支持 v3.8.0 及以上版本。

通过 ParticleCanvas 创建画布。加载用 GLSL 300 es 编写的着色器。片元着色器里必须带 precision 声明。

把 Float32Array 格式的位置数据按顺序喂进去。再调用 setParticles（注意 count 必须是整数）和 start()，粒子才能跑起来。

这套机制底层直接调用了 Node Video 内置的 WebGL 渲染管线和自定义着色器能力。说白了，全靠 GPU 加速计算粒子，不再依赖第三方 JS 库。

好处是性能稳、帧率高，但代价是需要自己编写着色器。

确认 Node Video 版本支持粒子系统

先打开终端，输入 node-video --version。检查版本号是不是 v3.8.0 或更高。

如果版本低于这个值，系统里就没有 particle-renderer 模块。强行调用会导致 WebGL 初始化失败，而且连报错都没有——直接黑屏静音。这一步千万别跳过。

版本太低时，用 npm install -g node-video@latest 升级。然后重启终端，再验证一遍。花不了半分钟，但能省下大量排查时间。

创建基础粒子画布

新建 particles.js 文件，写入以下代码：

const { ParticleCanvas } = require('node-video');
const canvas = new ParticleCanvas({ width: 1920, height: 1080, fps: 60 });

注意一个容易踩的坑： require('node-video') 之后必须立即执行这段代码。因为 ParticleCanvas 实例会绑定全局 WebGL 上下文。如果拖到后面才创建，上下文可能被其他模块占用，导致后续粒子节点注册失败。经验表明，很多人在这卡了半天。

加载 GPU 粒子着色器

Node Video 的粒子系统只认 GLSL 300 es 编写的着色器，不接受任何 JavaScript 模拟逻辑。你需要准备两个文件：

• shader.vert —— 顶点着色器
• shader.frag —— 片元着色器

把这两个文件放到项目新建的 shaders/ 目录下，然后调用：

canvas.loadShader('shaders/shader.vert', 'shaders/shader.frag');

特别容易被忽视的细节：片元着色器文件末尾必须有 precision highp float; 声明。如果少了这行，在 iOS 设备上所有粒子都会渲染成纯黑色，而且控制台不给出任何警告。到时候排查起来特别头疼。

注入粒子数据并启动

整个流程分三步，必须严格按顺序来。中间不能插入任何异步操作（如 setTimeout、fetch），否则粒子坐标缓冲区还没准备好，画面就会卡死在第一帧。

第一步：生成粒子位置数组。格式是 Float32Array，每三个值代表一个粒子的 xyz 坐标。

第二步：调用 canvas.setParticles(positions, count)。注意 count 必须是整数。千万不要写成 positions.length / 3 这种浮点结果——传入小数会触发静默崩溃，进程直接退出，连日志都不会留下。

第三步：执行 canvas.start()，启动渲染循环。之后粒子就会在 GPU 上跑起来。

《夸克》非常好用的免费AI浏览器

下载APP查看