Как заставить JavaScript летать на видеокарте с помощью GPU.js

Представьте, что вам нужно перемножить две огромные матрицы размером 512x512. Обычный цикл в JavaScript на процессоре (CPU) будет честно перебирать элементы один за другим. Это долго, скучно и заставляет кулер вашего ноутбука надрывно жужжать. А теперь вспомните, что в вашем компьютере есть видеокарта, которая специально создана для того, чтобы делать тысячи мелких вычислений одновременно.

Тут появляется GPU.js. Это библиотека, которая берет ваш обычный JavaScript-код и «на лету» превращает его в шейдеры для видеокарты. Самое приятное здесь то, что вам не нужно учить GLSL или разбираться в тонкостях работы графических конвейеров. Вы пишете на JS, а магия происходит под капотом.

Зачем это нужно обычному разработчику

Я часто вижу, как коллеги пытаются оптимизировать тяжелые вычисления в браузере через Web Workers. Это помогает не фризить основной поток, но общая скорость вычислений не меняется. GPU.js работает иначе. Библиотека ускоряет математические операции в 1–15 раз. Это критично, если вы занимаетесь машинным обучением, обработкой изображений в реальном времени или сложной физической симуляцией прямо в браузере.

Кстати, если у пользователя нет дискретной видеокарты или WebGL почему-то не завёлся, библиотека не сломает приложение. Она просто «откатится» обратно на CPU и выполнит код как обычный JavaScript.

Как это работает на практике

Основная концепция здесь — «ядро» (kernel). Это функция, которую вы запускаете параллельно для каждого элемента выходного массива.

Давайте посмотрим на классический пример с умножением матриц:

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; i++) {
        sum += a[this.thread.y][i] * b[i][this.thread.x];
    }
    return sum;
}).setOutput([512, 512]);

// Вызываем как обычную функцию
const result = multiplyMatrix(matrixA, matrixB);

Внутри функции мы используем this.thread.x и this.thread.y. Это координаты «потока» или конкретного пикселя/ячейки в итоговом результате. Видеокарта запустит эту функцию одновременно для всех 262 144 ячеек нашей матрицы 512x512.

Что умеет GPU.js

Библиотека за годы разработки обросла массой полезных штук, которые делают её полноценным инструментом для продакшена, а не просто игрушкой.

Работа с графикой напрямую

Если выставить флаг graphical: true, библиотека позволит рисовать на Canvas через метод this.color(r, g, b). Это удобно для создания фильтров обработки видео или процедурной генерации текстур. Вы вычисляете цвет пикселя на GPU и тут же его отображаете, минуя затратную передачу данных из видеопамяти обратно в оперативную.

Конвейеры (Pipelining)

В сложных вычислениях, например в нейросетях, результат одной операции часто становится входом для другой. Обычно это узкое место: данные нужно забрать из GPU, превратить в массивы JS и отправить обратно. GPU.js умеет оставлять результат на видеокарте в виде текстуры. Вы просто передаете результат одной функции в другую, и данные вообще не покидают видеопамять.

Поддержка Node.js

Проект отлично работает на сервере через HeadlessGL. Это открывает интересные возможности для бэкенд-разработчиков, которым нужно быстро обсчитывать статистику или графику, не переходя на Python или C++.

Пара нюансов, о которых стоит знать

Не всё так безоблачно. Поскольку JS-код транслируется в GLSL (язык шейдеров), у вас есть ограничения. Вы не можете использовать любые объекты или методы JS внутри ядра.

Список поддерживаемых математических функций ограничен стандартным набором Math (abs, sin, cos, exp и так далее). Также есть лимит на итерации циклов, чтобы видеокарта не «зависла» навсегда.

Ещё один важный момент — типизация. Внутри видеокарты всё должно быть строго определено. GPU.js неплохо угадывает типы данных сам, но в сложных случаях (особенно в TypeScript) лучше помогать ему явно.

Кому стоит попробовать

Если ваше приложение делает что-то из этого списка, GPU.js может стать спасением:

1. Обработка или фильтрация изображений и видео на клиенте.
2. Визуализация больших объемов данных (Heatmaps, Voronoi diagrams).
3. Простые нейросети или алгоритмы машинного обучения.
4. Физические движки и симуляции частиц.

Проект живой, у него больше 15 тысяч звезд на GitHub и огромное количество демо-примеров — от игры «Жизнь» Конвея до рендеринга фракталов Мандельброта.

Начать можно с установки через npm: npm install gpu.js. Если вы работаете в браузере, достаточно подключить скрипт через CDN, и объект GPU станет доступен глобально. Это один из тех инструментов, который заставляет по-новому взглянуть на возможности языка, который мы привыкли использовать только для кнопок и форм.