Node Video如何使用粒子系统？炫酷粒子特效制作教程

说到在 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 上跑起来了。