精彩明星前端模板JS调用WebGPU并行
发布时间：2024年05月27日 点击：[10]人次
大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发!
GPU.jsGPU.js 是一个 JavaScript 加速库，用于 Web 和 Node.js 中的 GPGPU（General purpose computing on GPUs）。 GPU.js 自动将简单的 JavaScript 函数转换为着色器语言并编译以便在目标 GPU 上运行。如果 GPU 不可用，这些函数仍将在常规 JavaScript 中运行。
于 GPU.js 而言，对于底层环境的选择有一套完整的机制，从而能在浏览器和 NodeJS 环境中自行判断。比如，对于 Web 浏览器而言：
当 WebGL2 可用时，使用 WebGL2当 WebGL2 不可用时，将使用 WebGL1当 WebGL1 不可用时，将使用 CPU对于 NodeJS 环境而言：
当 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 的 star、1k 的 fork、妥妥的前端优质开源项目。
turbo.jsTurbo.js 是一个小型库，可以更轻松地执行并行完成的复杂计算,实际执行的计算（执行的内核）使用 GPU 来执行，从而开发者能够同时处理一组值。
Turbo.js 与所有浏览器（甚至不使用 ES6 模板字符串时的 IE）以及大多数桌面和移动 GPU 兼容。
在具有集成显卡的低功耗 CPU 上，甚至是较旧的手机上，使用 Turbo.js 带来的性能提升将是最明显的。 然而，所有客户端并行计算都可以受益于 GPGPU，从图像处理到地理分析。 从技术上讲，turbo.js 的数据集可以扩展到多个数组，每个数组都有数亿个值，但在耗尽 GPU 的功能之前，可能会达到浏览器内存限制。
遗憾的是，一些手机制造商选择在其设备上使用较旧的 GPU 型号，这些型号不支持 Turbo.js 所需的纹理格式。 这就是为什么 Turbo.js 适用于使用 Qualcomm Adreno 530 的三星 S7 型号，但不适用于使用 ARM Mali-T880 MP12 的型号。
目前 Turbo.js 在 Github 上通过 MIT 协议开源，有 2.6k 的 star、0.3k 的 fork、是一个值得关注的前端开源项目。
WebMonkeysWebMonkeys 允许开发者使用最简单、最易用的 API 在 GPU 上生成数千个并行任务，适用于浏览器（使用 browserify）和 Node.js，同时与 ES5 兼容，不需要任何 WebGL 扩展。
下面的示例使用 GPU 并行计算数组中所有数字的平方：
// Creates a WebMonkeys objectconst monkeys = require('WebMonkeys')(); // on the browser, call WebMonkeys() instead// Sends an array of numbers to the GPUmonkeys.set('nums', [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]);// Employs 16 monkeys to work in parallel on the task of squaring each numbermonkeys.work(16, 'nums(i) := nums(i) * nums(i);');// Receives the result backconsole.log(monkeys.get('nums'));// output: [ 1, 4, 9, 16, 25, 36, 49, 64, 81, 100, 121, 144, 169, 196, 225, 256 ]
目前 WebMonkeys.js 在 Github 上通过 MIT 协议开源，有 1.2k 的 star、0.3k 的 fork、是一个值得关注的前端开源项目。
weblasweblas 是 GPU 加速的 JavaScript，适用于浏览器中的数值计算性能可与本机相媲美。 目前包括数百个单元测试，可验证数亿个数据点的正确性。
weblas 的重点是对神经网络和机器学习有用的数值运算。 到目前为止，已经获得了其中每一个的 32 位版本：
sscal - 矩阵（和矢量）比例（带加法）sgemm - 矩阵乘法sdwns - 矩阵（和图像）下采样（用于最大池化）sclmp - 矩阵钳（用于 ReLU）下面是 weblas 的简单示例：
// create Matrices as arraysvar 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);// fill A and B with sciencevar M = height_A, N = width_B, K = height_B; // must match width_Avar alpha = 1.0;var beta = 0.0;var C = new Float32Array(width_B); // specialized for neural net bias calculation// result will contain matrix multiply of A x B (times alpha)result = weblas.sgemm(M, N, K, alpha, A, B, beta, C);
目前 weblas.js 在 Github 上通过 MIT 协议开源，有 0.8k 的 star、0.3k 的 fork、是一个值得关注的前端开源项目。
gpu-iogpu-io 用于在 Web 上运行物理模拟的 GPU 加速计算库。主要动机是让编写 GPU 加速的应用程序变得更容易，而不必过多担心底层 WebGL 细节。 该库管理 WebGL 状态，实现着色器和程序缓存，并处理不同浏览器/硬件之间可用 WebGL 版本或规范不一致的问题。
gpu-io 显著减少需要在应用程序中执行的样板代码和状态管理的数量。 同时，gpu-io 又为开发者提供足够的底层控制，以便为计算要求较高的应用程序编写极其高效的程序。
总之，gpu-io 是一个 WebGL 库（未来也会逐渐支持 WebGPU），可帮助开发者轻松构建 GPU 加速的计算工作流程。 该库可用于各种应用，包括：实时物理模拟、基于粒子/代理的模拟、元胞自动机、图像处理和通用 GPU 计算。 gpu-io 支持直接渲染到 WebGL 画布，并具有一些使交互变得容易的内置功能。
截至 2022 年 2 月，WebGL2 现已推出到所有主要平台（包括移动 Safari 和 Microsoft Edge） ， 但即使在 WebGL2 实现中，跨浏览器（尤其是移动浏览器）的行为也存在差异。 此外，可能仍会在一段时间内遇到不支持 WebGL2 的浏览器。 gpu-io 严格检查这些陷阱，并使用软件 polyfill 来 patch 问题。 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;// 或者通过npmimport { GPUComposer, GPULayer, GPUProgram } from 'gpu-io';
参考资料https://github.com/turbo/js
https://github.com/VictorTaelin/WebMonkeys
https://github.com/waylonflinn/weblas
https://github.com/amandaghassaei/gpu-io
https://vdnieuwenhof.eu/the-need-for-a-gpu-in-vdi-sbc-environments/
https://towardsdatascience.com/parallel-computing-upgrade-your-data-science-with-a-gpu-bba1cc007c24