Experience

Code Location

You may test by yourself.
@yhyddr/images-by-gpu
@yhyddr/images

Performance

Kapture 2020-02-11 at 18.10.15.mp4 (5.58MB) It is foreseeable that the larger the image, the higher the GPU advantage.

Key Code

First get GPU

  1. adapter = navigator.gpu.requestAdapter()
  2. device = adapter.requestDevice()

image.png

Compute shader code

A syntax based on the C programming language. The following code is used in GPU to compute matrix.

  1. const computeShaderCode = `#version 450
  3.   layout(std430, set = 0, binding = 0) readonly buffer FirstMatrix {
  4.       vec2 size;
  5.       float numbers[];
  6.   } firstMatrix;
  8.   layout(std430, set = 0, binding = 1) readonly buffer SecondMatrix {
  9.       vec2 size;
  10.       float numbers[];
  11.   } secondMatrix;
  13.   layout(std430, set = 0, binding = 2) buffer ResultMatrix {
  14.       vec2 size;
  15.       float numbers[];
  16.   } resultMatrix;
  18.   void main() {
  19.     resultMatrix.size = vec2(firstMatrix.size.x, secondMatrix.size.y);
  21.     ivec2 resultCell = ivec2(gl_GlobalInvocationID.x, gl_GlobalInvocationID.y);
  22.     float result = 0.0;
  23.     for (int i = 0; i < firstMatrix.size.y; i++) {
  24.       int a = i + resultCell.x * int(firstMatrix.size.y);
  25.       int b = resultCell.y + i * int(secondMatrix.size.y);
  26.       result += firstMatrix.numbers[a] * secondMatrix.numbers[b];
  27.     }
  29.     int index = resultCell.y + resultCell.x * int(secondMatrix.size.y);
  30.     resultMatrix.numbers[index] = result;
  31.   }
  32. `;

Compiler

This is a GLSL-to-SPIR-V compiler for the Web and Node.js. It is a WebAssembly build of glslang.

  1. const glslangModule = await import('https://unpkg.com/@webgpu/glslang@0.0.13/dist/web-devel/glslang.js')
  2. const glslang = await glslangModule.default();

detail code link

Benchmark

Without GPU

image.png

With GPU

image.png

Test from get-started-with-gpu-compute-on-the-web

gpu-cpu-benchmark.jpg

Reference