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 上持续运算与绘制。