Have you ever tried to run a complex calculation, only to find that it takes forever and slows your process down?

There are many ways to solve this problem, such as using Web workers or background threads. The GPU reduces the processing load on the CPU, giving it more space to process other processes. Meanwhile, the Web worker is still running on the CPU, but on a different thread.

In this beginner’s guide, we’ll demonstrate how to use gpu.js to perform complex mathematical calculations and improve the performance of JavaScript applications.

What is gpu.js?

Gpu.js is a JavaScript accelerated library built for the Web and Node.js for general-purpose programming on graphics processing units (GPGpus). It allows you to transfer complex and time-consuming computations to the GPU rather than the CPU for faster computations and operations. There is an alternate option: in the absence of a GPU on the system, these features will still run on a regular JavaScript engine.

When you perform complex calculations, you essentially shift the burden to the system’s GPU rather than the CPU, increasing processing speed and time.

High-performance computing is one of the main advantages of using GPU.js. If you want to do parallel computing in a browser and don’t know WebGL, gpu.js is the library for you.

Why use gpu.js

The reasons why you should use gpus to perform complex calculations are too numerous to cover in a single article. Here are some of the most notable benefits of using gpus.

  • Gpus can be used to perform massively parallel GPGPU calculations. This is the type of computation that needs to be done asynchronously
  • When there is no GPU in the system, it gracefully falls back to JavaScript
  • Gpus currently run on browsers and Node.js and are perfect for speeding up websites with lots of computation
  • Gpu.js is built with JavaScript in mind, so these features use legitimate JavaScript syntax

If you think your processor is up to the task and you don’t need gpu.js, take a look at the results of the GPU and CPU running the calculation below.

As you can see, the GPU is 22.97 times faster than the CPU.

How gpu.js works

Given this level of speed, the JavaScript ecosystem gets a rocket to ride on. Gpus can help websites load faster, especially those that must perform complex calculations on the home page. You no longer need to worry about using background threads and loaders, because the GPU can run the computation 22.97 times faster than a normal CPU.

The gpu.createKernel method creates a GPU-accelerated kernel that is ported from a JavaScript function.

Running kernel functions in parallel with the GPU results in faster computations — 1-15 times faster, depending on your hardware.

GPU. Introduction to js

To show you how to compute complex calculations faster using gpu.js, let’s jumpstart an actual demonstration.

The installation

sudo apt install mesa-common-dev libxi-dev  // using Linux
Copy the code

npm

npm install gpu.js --save
// OR
yarn add gpu.js
Copy the code

Import gpu.js into your Node project.

import { GPU } from ('gpu.js')

// OR
const { GPU } = require('gpu.js')

const gpu = new GPU();
Copy the code

Multiplication demonstrate

In the following example, the computation is done in parallel on the GPU.

First, generate a lot of data.

const getArrayValues = () = > {

  // Create 2D arrary here
  const values = [[], []]

  // Insert values into the first array
  for (let y = 0; y < 600; y++){
    values[0].push([])
    values[1].push([])

    // Insert values into the second array
    for (let x = 0; x < 600; x++){
      values\[0\][y].push(Math.random())
      values\[1\][y].push(Math.random())
    }
  }

  // Return the populated array
  return values
}
Copy the code

Create a kernel (another word for a function that runs on a GPU).

const gpu = new GPU();

// Multiply the array using the 'createKernel()' method
const multiplyLargeValues = gpu.createKernel(function(a, b) {
  let sum = 0;
  for (let i = 0; i < 600; i++) {
    sum += a\[this.thread.y\][i] * b\[i\][this.thread.x];
  }
  return sum;
}).setOutput([600.600])
Copy the code

Call the kernel with a matrix as an argument.

const largeArray = getArrayValues()
const out = multiplyLargeValues(largeArray[0], largeArray[1])
Copy the code

The output

console.log(out\[y\][x]) // Record the elements in row x and column y of the array
console.log(out\[10\] [12]) // Record the elements in rows 10 and 12 of the output array
Copy the code

Run the GPU benchmark

You can follow the steps specified on GitHub to run the benchmark.

npm install @gpujs/benchmark

const benchmark = require('@gpujs/benchmark')

const benchmarks = benchmark.benchmark(options);
Copy the code

The Options object contains various configurations that can be passed to the benchmark.

Head over to the gpu.js official website to see the full computing benchmark, which will help you understand how much speed you can get for complex calculations using gpu.js.

The end of the

In this tutorial, we explore gpu.js in detail, analyze how it works, and demonstrate how to do parallel computing. We also demonstrated how to set up gpu.js in your Node.js application.

Blog.zhangbing. Site source: Solomon Eseme

Open Source Recommended Series

  • Open source recommended | 10 amazing CSS suite of restoring ancient ways
  • Open source recommended | Vue. Js shuffling hot selected library
  • Open source recommended | 19 front-end developer survival tool
  • Open source recommended | 10 + a cool Vue. Js components, templates and demo sample
  • Open source recommended | JSONsite: using JSON file creation SPA page
  • Open source recommended | using GPU. Js JavaScript performance
  • Open source recommended | how to convert the HTML form into elegant PDF, several schemes comparison
  • Open source recommended | I can not live without the five Vue. Js library
  • Open source recommended | 8 JavaScript library can better deal with the local store
  • Open source recommended | Node development artifact: use the Llama Node error Logs real-time visualization
  • Open source recommended | you should know about 23 very useful NodeJS library
  • Open source recommended | 10 beautiful VSCode Light color (Light)
  • Open source recommended | 2019 six JavaScript library user authentication
  • Open source recommended | UI library which support dark pattern?
  • Open source recommended | 5 you don’t know JavaScript string processing library
  • Open source recommended | 9 CSS tools for Web developers
  • Open source recommended | in addition to ali iconfont icon library, and the 10 open source SVG icon library
  • 7 great JavaScript product step bootstrap libraries that you don’t need