Using GPU.js in Angular
Compute matrix calculation using GPU in browser and Angular
As usual, I have built a demo web application for matrix multiplication using GPU.js and Angular to see how it pans out. You can checkout the live demo here:
CPU matrix multiplication
Here is the CPU multiplication code which runs three nested for loops to calculate product of two matrices.
GPU matrix multiplication
Here is the code for GPU version of matrix multiplication. In the gist below, on line number 3, we define a kernel (a function to be called for input data) and hold its reference. On line number 13, we are passing two matrices and matrix size and it returns a result matrix. If you compare CPU vs GPU code, you will find we don’t have three nested for loops here and some weird variables have been used like
this.thread.y. This is because in GPU programming, we follow Single Instruction Multiple Data (SIMD) approach where each input dataset get their own thread to run same piece of code. And these threads get’s their own variables (
thread.z (if 3D matrix)) to distinguish current input data. You can read more about it in GPU.js GitHub documentations.
Writing GPU code is not that straight forward; you can’t simply convert your CPU code GPU and not all problem statements will fit GPU solution space. Having said that, we can use GPU code for in-memory calculation in browser for big data visualisation, parsing and validating big text files before sending to server, and so on. This opens up a new way of thinking and building powerful web application and reduce load on servers.
I am excited and looking forward to see how in future web developers will use client’s GPU functionalities to change the web development the way we know it!
You can find the source code in GitHub repository.
This project was generated with Angular CLI version 11.0.6. Run ng serve for a dev server. Navigate to…