Yang Guang: Front End engineer of Wedoctor Front End Technology Department. Aspiring to become a full stack development engineer or even architect, I have a long way to go. Exercise in your life to release stress and think about problems.

preface

Medical examination image shows the inside, and the window is a basis for common operations: by sliding the mouse to change the width of window size, window width (width), window (center) is a pixel value range, the image pixel values of all pixels in the interval of the show, are not in the range will not display.

In the development project of the Web version reader (image display tool), it was found that the browser would freeze directly when the large images such as Dr And DX (images are generally about 2000px wide and high, and each pixel size is 16 or 32 bits) were adjusted, and the changes of image display would be greatly delayed. Later, I looked up the data and used GPUJS to realize the image processing during window adjustment. The results showed that the image display changes became relatively linear during window adjustment, and the performance was estimated to be improved by 5/6 times, which could meet the business needs. Of course, the image of some advanced processing, can be used to achieve gPUJS, window is just a point.

Effect before use:

Effect after use:

What is GPU.js?

Gpu.js is a JavaScript accelerated library for GPGpus (general-purpose computing on gpus) in Web and Node.js. Gpu.js automatically converts simple JavaScript functions into a shader language and compiles them so that they run on your GPU. Perform massively parallel GPGPU computations using gpus, elegant pure JavaScript fallback when the GPU is unavailable.

GPU, full name Graphics Processing Unit, that is, image processor, early mainly used to display images. Since image processing mainly involves simple matrix calculation with little logical judgment, the design of GPU is different from CPU architecture. Therefore, a GPU can have many computing units and carry out a large number of parallel computing. I found a video on the Internet, probably from Nvidia’s product launch in one year, which vividly demonstrated the difference between CPU and GPU. V.youku.com/vshow/idXNDcyNTc1MjQ4==.html. Zhihu on CPU and GPU contrast on www.zhihu.com/question/19…

Example is matrix multiplication written in GPU.js (performing matrix multiplication on two matrices of size 512 x 512). A GPU-accelerated kernel that converts javascript functions that compute individual elements of 512 x 512 matrices (2D arrays). Kernel functions run in series on the GPU, often resulting in very fast calculations! You can run a benchmark here. Typically, it runs 1-15 times faster, depending on your hardware.

Due to the different architectural design, GPU is very suitable for simple concurrent computing, which can greatly speed up the application in image processing, deep learning and other fields. Of course, it is difficult to develop programs directly on the GPU. In general, special compilers compile the code into code that can be executed on the GPU. The GPU.js mentioned in this article is a compiler that compiles a subset of JS in the front end to run on WebGL. See gpu.rocks/#/examples for more usage scenarios.

Potholes encountered in use

  1. Using NPM to introduce the gpu.js package, I found that the project could not run, which might be related to the machine, so I changed to directly introduce JS files in browser mode

  2. We use canvas to directly output pixel data. For images of different sizes, we need to use canvas of different sizes. Some pixels cannot be cleared when using the same canvas

  3. The origin position of canvas pixel data is in the lower left corner

  4. When creating a kernel, functions or custom functions in the kernel are compressed and simplified in the packaging process, problems may occur: some converted operators gPU.js are not supported. So js compression transformation rules to do specific Settings

  5. Since each device’s GPU features are different, there may be unknown exceptions using the GpuJS library, but adding a try {} catch () {common processing CPU} will solve most of the problems.

    Javascript <script type="text/javascript" SRC ="./static/gpu-browser.min new GPU(); Gpu.addfunction (function1) # add a custom function # add a custom function # create Kernel var Kernel = Gpu. CreateKernel (function(1, 2...) {# #}, {graphical: true, output: outputsize}) ; var canvasRender = kernel.canvas; # Directly display canvasRender,....Copy the code

Official application scenario Demo

Address: gpu. Rocks / # / examples

An example with the shiny new v2 of GPU.js, “Cosmic Jellyfish”

A simple example to load an image into GPU.js.

GPU Accelerated Heatmap using GPU.js

A simple example wherein colors slowly fade in and fade out.

Browser

<script src="dist/gpu-browser.min.js"></script>
<script>
    // GPU is a constructor and namespace for browser
    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 c = multiplyMatrix(a, b);
</script>
Copy the code

Node

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 c = multiplyMatrix(a, b);
Copy the code

The sample

In this case, two 512×512 matrices (two-dimensional arrays) are multiplied. The computation is done in parallel on the GPU.

1. Generate matrix

 const generateMatrices = () => {
    const matrices = [[], []]
    for (let y = 0; y < 512; y++){
      matrices[0].push([])
      matrices[1].push([])
      for (let x = 0; x < 512; x++){
        matrices[0][y].push(Math.random())
        matrices[1][y].push(Math.random())
      }
    }
    return matrices
  }
Copy the code

2. Create a kernel.

 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])
Copy the code

3. Call kernel with matrix as argument

const matrices = generateMatrices()
const out = multiplyMatrix(matrices[0], matrices[1])
Copy the code

4. Output matrix

  console.log(out[y][x]) // Logs the element at the xth row and the yth column of the matrix
  console.log(out[10][12]) // Logs the element at the 10th row and the 12th column of the output matri
Copy the code

summary

Gpu.js is a compiler that compiles a subset of JS in the front end into a compiler that can be executed on WebGL. It is simple, practical and can produce results quickly. It can be considered to use GPU.js to realize operations that require high performance and are time-consuming.

The resources

  • Website gpu. Rocks / # /

  • Making github.com/gpujs/gpu.j…

  • Gpu.rocks /#/examples

Go to the online diagnosis and treatment platform of Wedoctor Internet hospital, make a quick consultation, and find a top three doctor for you in 3 minutes.