本文介绍 JavaScript GPU 加速库 GPU.js 的完整安装和使用方法，包括 npm 与浏览器两种接入方式、createKernel 核函数的编写规范、矩阵乘法等数值计算示例、图形化输出、多核函数组合以及常见报错的排查方法，帮助你把计算密集型代码搬到 GPU 上执行。
做前端或 Node.js 开发时，偶尔会遇到计算量很大的场景：矩阵运算、图像像素处理、物理模拟、大规模数组变换。这类代码放在 CPU 上跑，数据量一大就明显卡顿。GPU.js 解决的就是这个问题——它能把普通的 JavaScript 函数自动转译成着色器语言，编译后在 GPU 上并行执行，而且没有 GPU 的环境会自动回退成普通 JavaScript 运行，代码不用改。这篇文章把安装、配置、核心写法和常见问题一次讲清楚。
一、GPU.js 是什么
GPU.js 是一个面向 Web 和 Node.js 的 JavaScript GPGPU（通用 GPU 计算）加速库，项目地址：https://github.com/gpujs/gpu.js ，官网和在线 Demo 在 http://gpu.rocks 。
它的工作方式是：你写一个普通的 JavaScript 函数，GPU.js 自动把它转译成着色器语言（GLSL）并编译到 GPU 上执行，多个线程同时并行计算，官方给出的基准测试是 512×512 矩阵乘法场景下通常能快 1～15 倍，具体取决于硬件。
主要特点：
- 写法接近原生 JavaScript：核函数就是普通 JS 函数，不需要学 GLSL。
- 自动降级：检测不到 GPU 时回退到 CPU 模式，函数照样能跑。
- 浏览器和 Node.js 通用：浏览器走 WebGL/WebGL2，Node.js 走 HeadlessGL。
- 支持图形输出：可以直接往 canvas 上画像素，做图像处理、分形渲染很方便。
-
支持 TypeScript：自带类型定义，v2 起可以直接
import { GPU } from 'gpu.js'。
适合场景：矩阵和大数组运算、图像/视频像素处理、机器学习里的部分计算、Canvas 上的实时渲染效果。如果你的代码只是一些零散的小计算，GPU 调用本身的开销可能反而更大，这种情况没必要上 GPU.js。
二、准备工作
| 项目 | 要求 |
|---|---|
| 运行环境 | Node.js 或现代浏览器（支持 WebGL/WebGL2） |
| 操作系统 | Windows / macOS / Linux 均可 |
| 包管理器 | npm 或 yarn |
| GitHub 仓库 | https://github.com/gpujs/gpu.js |
| npm 包地址 | https://www.npmjs.com/package/gpu.js |
| 官网/在线测试 | http://gpu.rocks |
Linux 用户需要注意提前装好头文件，否则 Node 下编译 HeadlessGL 会失败：
sudo apt install mesa-common-dev libxi-dev
不同发行版按实际情况调整包名。Windows 和 macOS 一般不需要这一步。
三、GPU.js 安装方法
1. Node.js 环境
npm install gpu.js --save
或者用 yarn：
yarn add gpu.js
安装完成后在代码里引入：
const { GPU } = require('gpu.js');
const gpu = new GPU();
TypeScript 项目改成这样：
import { GPU } from 'gpu.js';
const gpu = new GPU();
2. 浏览器环境
下载发行包后用 script 标签引入：
// 浏览器里 GPU 同时是构造函数和命名空间
const gpu = new GPU();
不想下载也可以直接走 CDN：
或：
两种环境后面的核函数写法完全一致，区别只在引入方式。
四、GPU.js 核心概念与基础配置
GPU.js 的核心 API 是 gpu.createKernel()。传给它的函数不是”执行一次返回一个值”的普通函数，而是描述输出中每一个位置如何计算的核函数。函数内部通过 this.thread.x / this.thread.y / this.thread.z 拿到当前线程的坐标，输出尺寸用 output 指定。
输出尺寸和线程坐标的对应关系：
| 输出维度 | output 写法 | 核函数内取值 |
|---|---|---|
| 1D | [length] |
value[this.thread.x] |
| 2D | [width, height] |
value[this.thread.y][this.thread.x] |
| 3D | [width, height, depth] |
value[this.thread.z][this.thread.y][this.thread.x] |
注意：不指定 output 尺寸的核函数无法被加速，这是必须项。
常用配置项（创建时以对象传入，或用链式方法设置）：
const kernel = gpu.createKernel(function(a, b) {
// 核函数体
}, {
output: [512, 512], // 输出尺寸，必填
constants: { size: 512 },// 编译期常量，核函数内用 this.constants.size 访问
loopMaxIterations: 1000, // 动态循环的最大迭代次数，默认 1000
graphical: false, // 是否图形化输出到 canvas
pipeline: false, // 是否启用纹理管线
precision: 'unsigned', // 'unsigned' 或 'single'
tactic: 'speed' // 'speed' | 'balanced' | 'precision'
});
链式写法等价且更常用，比如 .setOutput([100])、.setGraphical(true)、.setPipeline(true)。
另外，new GPU() 时可以传 mode 指定运行模式，默认 'gpu' 会自动选择后端；调试时用 'dev' 模式（不转译代码、保留 JS 执行环境，可以打断点），强制 CPU 运行用 'cpu'。
五、GPU.js 使用方法
1. 第一个核函数
const { GPU } = require('gpu.js');
const gpu = new GPU();
const kernel = gpu.createKernel(function() {
return this.thread.x;
}).setOutput([100]);
kernel();
// 结果：Float32Array [0, 1, 2, 3, ... 99]
输出的每一项由对应位置的线程独立计算，这就是 GPU 并行的基本模型。
2. 矩阵乘法（经典示例）
const { GPU } = require('gpu.js');
const gpu = new GPU();
const multiplyMatrix = gpu.createKernel(function(a, b) {
let sum = 0;
for (let i = 0; i
循环上限写成常量 512 也可以换成 this.constants.size，通过 constants: { size: 512 } 传入，这样同一个核函数能复用到不同尺寸。
3. 接收输入参数
核函数入参支持：数字、1~3 维数组（普通 Array 或 Float32Array、Int16Array 等类型化数组）、HTML Image、Image 数组、Video 元素（v2 新增）。
const kernel = gpu.createKernel(function(x) {
return x[this.thread.x % 3];
}).setOutput([100]);
kernel([1, 2, 3]);
// 结果：Float32Array [1, 2, 3, 1, ... 1]
大数组建议用预压平的 Input 类型上传，比多层嵌套数组快：
const { GPU, input } = require('gpu.js');
const gpu = new GPU();
const kernel = gpu.createKernel(function(a, b) {
return a[this.thread.y][this.thread.x] + b[this.thread.y][this.thread.x];
}).setOutput([3, 3]);
kernel(
input(new Float32Array([1, 2, 3, 4, 5, 6, 7, 8, 9]), [3, 3]),
input(new Float32Array([1, 2, 3, 4, 5, 6, 7, 8, 9]), [3, 3])
);
input(value, size) 是 new Input(value, size) 的简写，第一个参数是压平后的一维数组，第二个参数声明原始尺寸。
4. 图形化输出（图像处理）
把 graphical 设为 true，核函数里用 this.color(r, g, b) 输出像素颜色，结果直接画到 canvas：
const render = gpu.createKernel(function() {
this.color(0, 0, 0, 1);
})
.setOutput([20, 20])
.setGraphical(true);
render();
// 从 kernel 上取 canvas 插入页面
document.getElementsByTagName('body')[0].appendChild(render.canvas);
一个读取图片像素的例子：
const kernel = gpu.createKernel(function(image) {
const pixel = image[this.thread.y][this.thread.x];
this.color(pixel[0], pixel[1], pixel[2], pixel[3]);
})
.setGraphical(true)
.setOutput([100, 100]);
const image = document.createElement('img');
image.src = 'my/image/source.png';
image.onload = () => {
kernel(image);
document.getElementsByTagName('body')[0].appendChild(kernel.canvas);
};
动画渲染配合 requestAnimationFrame 调用核函数，官方建议不要用 setTimeout。需要拿回像素数据时调用 kernel.getPixels()，返回类似 WebGL readPixels 的压平数组。
5. 组合多个核函数
多次 GPU 计算之间来回应付 CPU↔GPU 数据搬运开销很大，combineKernels 可以把多个核函数串在一起、数据留在 GPU 上：
const add = gpu.createKernel(function(a, b) {
return a[this.thread.x] + b[this.thread.x];
}).setOutput([20]);
const multiply = gpu.createKernel(function(a, b) {
return a[this.thread.x] * b[this.thread.x];
}).setOutput([20]);
const superKernel = gpu.combineKernels(add, multiply, function(a, b, c) {
return multiply(add(a, b), c);
});
superKernel(a, b, c);
如果想在一次核计算里同时保留多个中间结果（比如机器学习里的前向传播结果还要用于反向传播），用 createKernelMap：
const megaKernel = gpu.createKernelMap({
addResult: function add(a, b) {
return a + b;
},
multiplyResult: function multiply(a, b) {
return a * b;
},
}, function(a, b, c) {
return multiply(add(a[this.thread.x], b[this.thread.x]), c[this.thread.x]);
}, { output: [10] });
megaKernel(a, b, c);
// 结果：{ addResult: Float32Array, multiplyResult: Float32Array, result: Float32Array }
6. 管线模式（Pipeline）
开启 pipeline 后，核函数的输出不再转回 JS 数组，而是以 Texture（纹理）形式留在 GPU，可以直接作为下一个核函数的入参：
const kernel1 = gpu.createKernel(function(v) {
return v[this.thread.x];
})
.setPipeline(true)
.setOutput([100]);
const kernel2 = gpu.createKernel(function(v) {
return v[this.thread.x];
}).setOutput([100]);
const result1 = kernel1(array); // 返回 Texture
console.log(result1.toArray()); // 需要时再转回 Float32Array
const result2 = kernel2(result1); // 纹理直接传入下一个核
配合 immutable: true 使用时注意释放显存：不再需要的纹理调用 texture.delete()，想清零保留的用 texture.clear()。整个实例用完调用 gpu.destroy()。
7. 注册自定义函数
核函数里可以直接调用预先注册的辅助函数：
gpu.addFunction(function mySuperFunction(a, b) {
return a - b;
});
const kernel = gpu.createKernel(function(a, b) {
return mySuperFunction(a[this.thread.x], b[this.thread.x]);
}).setOutput([20]);
addFunction 必须在 createKernel 之前调用；也可以用 kernel.addFunction() 只注册到单个核。核函数内部同样支持 const/let 声明数字、布尔值以及长度 2~4 的小数组，还支持 v2 新增的解构赋值。
六、常见问题
1. 没有 GPU 能用吗？
能。GPU.js 检测不到可用 GPU 时会自动回退到普通 JavaScript 执行，功能一致只是没有加速。也可以手动 new GPU({ mode: 'cpu' }) 强制 CPU 模式排查问题。
2. 循环执行报错或结果不对？
GPU 上循环必须有确定的最大迭代次数。三种处理方式：循环条件用固定数字；用 this.constants.xxx 编译期常量；无法写死时设置 loopMaxIterations（默认 1000）。循环次数超出设定值会导致计算错误或异常。
3. Node.js 下安装或运行失败？
Node 环境的 GPU 加速依赖 HeadlessGL，Linux 上需要先安装编译所需的头文件：sudo apt install mesa-common-dev libxi-dev。装完后重新 npm install gpu.js。如果机器确实没有可用显卡环境，库会回退 CPU 模式，代码依然可运行，只是没有加速效果。
4.Math.xxx函数不被支持怎么办？
核函数会被编译成 GLSL，不是所有 JS Math 方法都能用。支持列表包括 Math.abs、Math.floor、Math.ceil、Math.sqrt、Math.pow、Math.exp、Math.log、Math.sin/cos/tan 及其反函数和双曲函数、Math.min/Math.max、Math.round、Math.sign、Math.random 等常用方法。明确不支持的有 Math.clz32（位操作难以直接映射）和 Math.hypot（参数长度动态）。遇到不支持的函数需要手动改写成支持的组合。
5. 怎么判断当前环境支持哪些能力？
GPU 构造函数上挂了一系列静态检测属性，可以直接判断：
GPU.isGPUSupported; // 是否支持 GPU 加速 GPU.isWebGL2Supported; // 是否支持 WebGL2 GPU.isWebGLSupported; // 是否支持 WebGL GPU.isHeadlessGLSupported; // Node 下是否支持 headlessgl GPU.isOffscreenCanvasSupported;// 是否支持离屏 canvas GPU.isSinglePrecisionSupported;// 是否支持单精度浮点
6. 核函数写错了怎么调试？
推荐三步走：先用 new GPU({ mode: 'dev' }) 进入开发模式，代码不做转译、保留完整 JS 上下文，可以直接打断点；逻辑确认后在 mode: 'cpu' 下编译运行，可在核函数里写 debugger 检查编译产物的行为；最后上 GPU。真正的 GPU 核函数无法打断点，只能用提前 return 中间变量的方式观察数值，或配合 graphical: true 用 this.color() 把数据可视化出来。
7. 不用的核函数和纹理需要清理吗？
需要。长期运行的应用（尤其是开了 pipeline 和 immutable 的）应显式释放：texture.delete() 删除纹理、texture.clear() 清零复用、kernel.destroy() 销毁单个核、gpu.destroy() 销毁整个实例，否则显存会持续增长。
七、总结
以上就是 GPU.js 的完整教程。核心流程就是四步：npm install gpu.js 或 script 引入 → new GPU() 创建实例 → gpu.createKernel() 编写核函数并指定 output → 像普通函数一样调用核函数拿结果。
GPU.js 的价值在于用最小的学习成本把 JS 计算搬到 GPU：写法还是 JavaScript，没有 GPU 自动降级，浏览器和 Node 通吃。适合矩阵运算、图像处理这类数据量大、单元素计算相对独立的场景；反过来，小数据量、强依赖上下文的逻辑留在 CPU 更合适。接入项目后建议先用官方基准场景实测自己机器上的加速比，再决定哪些模块值得迁移。如果遇到其他问题，可以结合具体报错信息到项目 Issues（https://github.com/gpujs/gpu.js/issues ）中排查。
以上就是JavaScript调用GPU.js加速计算的安装配置与实战方法的详细内容，更多关于JavaScript调用GPU.js的资料请关注IT俱乐部其它相关文章！
