介绍5款js调用webgpu的库
随着Web应用程序变得更加复杂和需求更高，传统的JavaScript单线程执行模型在处理大规模并行计算方面显得力不从心。为了充分发挥现代GPU的强大并行计算能力，WebGPU应运而生。WebGPU是一种新兴的图形和计算API，旨在为Web浏览器提供更直接、更底层的硬件访问，以实现更高效的图形和计算处理。
JavaScript是Web开发中最常用的编程语言之一，但其传统的单线程执行模型限制了在浏览器中进行大规模并行计算的效率。为了解决这一问题，WebGPU的引入为JavaScript开发者提供了使用GPU进行并行计算的机会。通过WebGPU，开发者可以更直接地利用GPU的并行计算能力，从而在浏览器中执行更为复杂和高性能的计算任务。
在这个背景下，JavaScript调用WebGPU成为一种新兴的技术趋势。通过JavaScript调用WebGPU，开发者可以在Web应用中利用硬件加速，实现更快速、更高效的图形渲染和计算。这对于需要处理大规模数据、进行复杂图形处理或实现实时性能要求的应用场景具有重要意义。因此，深入理解并灵活运用JavaScript调用WebGPU的技术成为开发者提升Web应用性能的关键一环。
今天介绍5款js调用webgpu的库
GPU.js：JavaScript加速库
GPU.js是一款用于Web和Node.js中的通用GPU计算（GPGPU）的JavaScript加速库。它能够自动将简单的JavaScript函数转换为着色器语言并编译，以在目标GPU上运行。如果GPU不可用，这些函数仍将在常规JavaScript中运行。在GPU.js中，底层环境的选择具有完整的机制，能够在浏览器和Node.js环境中进行自动判断。例如，在Web浏览器中，当WebGL2可用时，将使用WebGL2；当WebGL2不可用时，将使用WebGL1；当WebGL1不可用时，将使用CPU。对于Node.js环境，当HeadlessGL可用时，将使用HeadlessGL；当HeadlessGL不可用时，将使用CPU。以下是使用GPU.js的简单示例：
import { GPU } from 'gpu.js';
const gpu = new GPU();
const multiplyMatrix = gpu.createKernel(function(a: number[][], b: number[][]) {
let sum = 0;
for (let i = 0; i < 512; i++) {
sum += a[this.thread.y][i] * b[i][this.thread.x];
}
return sum;
}).setOutput([512, 512]);
const c = multiplyMatrix(a, b) as number[][];
目前，GPU.js在GitHub上以MIT协议开源，拥有超过14.8k的星标、1k的派生项目，是一个备受关注的前端开源项目。Turbo.js：用于并行计算的小型库
Turbo.js是一个小型库，可以更轻松地执行并行完成的复杂计算。实际执行的计算（执行的内核）使用GPU来执行，使开发者能够同时处理一组值。Turbo.js兼容所有浏览器（甚至在不使用ES6模板字符串时的IE）以及大多数桌面和移动GPU。在低功耗CPU上，甚至是较旧的手机上，使用Turbo.js带来的性能提升将是最明显的。然而，所有客户端并行计算都可以受益于GPGPU，从图像处理到地理分析。Turbo.js的数据集可以扩展到多个数组，每个数组都有数亿个值，但可能会达到浏览器内存限制。Turbo.js目前在GitHub上以MIT协议开源，拥有2.6k的星标、0.3k的派生项目，是一个值得关注的前端开源项目。WebMonkeys：GPU上生成并行任务的库
WebMonkeys允许开发者使用最简单、最易用的API在GPU上生成数千个并行任务，适用于浏览器（使用browserify）和Node.js，同时与ES5兼容，不需要任何WebGL扩展。以下是WebMonkeys.js的示例，演示了在GPU上并行计算数组中所有数字的平方：// 创建WebMonkeys对象
const monkeys = require('WebMonkeys')(); // 在浏览器上调用WebMonkeys()而不是require
// 将数字数组发送到GPU
monkeys.set('nums', [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]);
// 雇佣16只猴子并行处理每个数字的平方任务
monkeys.work(16, 'nums(i) := nums(i) * nums(i);');
// 接收结果
console.log(monkeys.get('nums'));
// 输出: [ 1, 4, 9, 16, 25, 36, 49, 64, 81, 100, 121, 144, 169, 196, 225, 256 ]
WebMonkeys.js目前在GitHub上以MIT协议开源，拥有1.2k的星标、0.3k的派生项目，是一个值得关注的前端开源项目。weblas：GPU加速的JavaScript数值计算库
weblas是GPU加速的JavaScript库，适用于浏览器中的数值计算，其性能可与本机相媲美。weblas重点关注对神经网络和机器学习有用的数值运算。它包括数百个单元测试，可验证数亿个数据点的正确性。weblas的一些功能包括矩阵比例、矩阵乘法、矩阵下采样（用于最大池化）、矩阵钳（用于ReLU）等。以下是weblas的简单示例：// 创建数组矩阵 var height_A = 1024, width_A = 1024, height_B = 1024, width_B = 1024; var A = new Float32Array(height_A * width_A); var B = new Float32Array(height_B * width_B); // 用科学方法填充A和B var M = height_A, N = width_B, K = height_B; // 必须与width_A相匹配 var alpha = 1.0; var beta = 0.0; var C = new Float32Array(width_B); // 专为神经网络偏差计算而设计 // 结果将包含A x B的矩阵乘积（乘以alpha） result = weblas.sgemm(M, N, K, alpha, A, B, beta, C);weblas.js目前在GitHub上以MIT协议开源，拥有0.8k的星标、0.3k的派生项目，是一个值得关注的前端开源项目。
gpu-io：用于Web上物理模拟的GPU加速计算库
gpu-io是用于在Web上运行物理模拟的GPU加速计算库。它旨在使编写GPU加速的应用程序更容易，而不必过多担心底层WebGL细节。该库管理WebGL状态，实现着色器和程序缓存，并处理不同浏览器/硬件之间可用WebGL版本或规范不一致的问题。gpu-io显著减少了应用程序中执行的样板代码和状态管理的数量。同时，gpu-io为开发者提供足够的底层控制，以便为计算要求较高的应用程序编写极其高效的程序。总的来说，gpu-io是一个WebGL库（未来将逐渐支持WebGPU），可帮助开发者轻松构建GPU加速的计算工作流程。该库可用于各种应用，包括实时物理模拟、基于粒子/代理的模拟、元胞自动机、图像处理和通用GPU计算。gpu-io支持直接渲染到WebGL画布，并具有一些使交互变得容易的内置功能。截至2022年2月，WebGL2已推出到所有主要平台，但即使在WebGL2实现中，跨浏览器（尤其是移动浏览器）的行为也存在差异。gpu-io严格检查这些陷阱，并使用软件polyfill来解决问题。gpu-io还尝试自动将GLSL3着色器代码转换为GLSL1，以便在紧急情况下在WebGL1中运行。以下是在HTML中直接使用gpu-io的示例：
<html>
<head>
<script src="gpu-io.js"></script>
</head>
<body></body>
</html>导入后即可直接使用：const { GPUComposer, GPULayer, GPUProgram } = GPUIO;
// 或者通过npm
import { GPUComposer, GPULayer, GPUProgram } from 'gpu-io';参考资料：https://github.com/turbo/jshttps://github.com/VictorTaelin/WebMonkeyshttps://github.com/waylonflinn/weblashttps://github.com/amandaghassaei/gpu-iohttps://vdnieuwenhof.eu/the-need-for-a-gpu-in-vdi-sbc-environments/https://towardsdatascience.com/parallel-computing-upgrade-your-data-science-with-a-gpu-bba1cc007c24
{{collectdata}}
网友评论0