前端高效能運算之四：GPU加速計算

發表於2017-10-21

人工智慧是最近兩年絕對的熱點，而這次人工智慧的復興，有一個很重要的原因就是計算能力的提升，主要依賴於GPU。去年Nvidia的股價飆升了幾倍，市面上好點的GPU一般都買不到，因為全被做深度學習以及挖比特幣的人買光了。

GPU，全稱Graphics Processing Unit，即影象處理器，早期主要用於顯示影象使用。因為影象處理主要偏簡單的矩陣運算，邏輯判斷等很少，因此GPU的設計跟CPU架構不一樣，也因此做到一個GPU上可以有很多計算單元，可以進行大量平行計算。網上找到一個視訊，應該是Nvidia某年的產品釋出會，形象地演示了CPU跟GPU的區別。http://v.youku.com/vshow/idXNDcyNTc1MjQ4==.html 。知乎上也有對CPU和GPU的對比https://www.zhihu.com/question/19903344

後來人們逐漸發現，GPU的這種特性還可以用於神經網路的訓練，因為神經網路訓練中也是大量的矩陣運算，然後原來的訓練速度提高了幾十倍，原來需要一週訓練的模型，現在幾個小時就可以出結果，於是神經網路飛速發展。。。

GPU雖快，但是寫起來很難寫，要用自己特殊的語言GLSL – OpenGL Shading Language編寫，一般都是是將其它語言編譯過來或者有很多庫封裝好了直接使用。經過搜尋發現了gpu.js這個庫。

gpu.js is a JavaScript library for GPGPU (General purpose computing on GPUs) in the browser. gpu.js will automatically compile specially written JavaScript functions into shader language and run them on the GPU using the WebGL API. In case WebGL is not available, the functions will still run in regular JavaScript.

也就是說gpu.js這個庫會把你寫的js編譯成GLSL然後在GPU上執行，以達到加速的效果。並且，如果電腦不支援GPU，它還會當成普通的js執行。可以先到gpu.js官網上體驗一下，能達到5-10倍的提速。根據不同的電腦gpu配置，提速可能更多，這篇文章裡面 https://hackernoon.com/introducing-gpu-js-gpu-accelerated-javascript-ba11a6069327 提到的Chrome提高了23倍，Firefox提高了125倍！

支援的語法

一開始說了，GPU的設計跟CPU差別很大，只適合做簡單的計算，不適合太多複雜的邏輯。所以gpu.js也只支援js的一個很小的子集：

1D, 2D, 3D array of numbers or just numbers as kernel input
1D, 2D, 3D array of numbers as kernel output
Number variables
Custom and custom native functions
Arithmetic operations (+, +=, -, *, /, %)
Javascript Math functions (Math.floor() and etc.)
Loops
if and else statements
const and let
No variables captured by a closure

Show Me Code

https://github.com/abhisheksoni27/gpu.js-demo

const c = document.getElementById('c');
const gpu = new GPU({
    mode: 'gpu'
});

// Generate Matrices
const matrices = generateMatrices();
const A = matrices.A;
const B = matrices.B;

const gpuMatMult = gpu.createKernel(function (A, B) {
    var sum = 0;
    for (var i = 0; i < 512; i++) {
        sum += A[this.thread.y][i] * B[i][this.thread.x];
    }
    return sum;
})
    .setDimensions([A.length, B.length])
// .setOutputToTexture(true);

function cpuMatMult(m, n) {
    var result = [];
    for (var i = 0; i < m.length; i++) {
        result[i] = [];
        for (var j = 0; j < n[0].length; j++) {
            var sum = 0;
            for (var k = 0; k < m[0].length; k++) {
                sum += m[i][k] * n[k][j];
            }
            result[i][j] = sum;
        }
    }
    return result;
}

function sumMatrix(m) {
    let total = 0;
    for (let i = 0; i < m.length; i += 1) {
        for (let j = 0; j < m[i].length; j += 1) {
            total += m[i][j];
        }
        return total;
    }
}

//CPU
const startCPU = window.performance.now();
const cpuResult = cpuMatMult(A, B);
const endCPU = window.performance.now();
const cpuTime = endCPU - startCPU;
console.log(`CPU: ${cpuTime}ms, total: ${sumMatrix(cpuResult)}`);

// //GPU
const startGPU = window.performance.now();
const result = gpuMatMult(A, B);
console.log('gpuResult: ', result);
const endGPU = window.performance.now();
const gpuTime = endGPU - startGPU;
console.log(`GPU: ${gpuTime}ms, total: ${sumMatrix(result)}`);

//Diff
const diff = (cpuTime - gpuTime) / (gpuTime);
console.log(`%c ${diff}`, 'color: red;', `times faster!`)


function generateMatrices() {
    const matSize = 512;
    let A = [];
    let B = [];
    for (let i = 0; i < matSize; i += 1) {
        A[i] = [];
        B[i] = [];
        for (let j = 0; j < matSize; j += 1) {
            A[i][j] = i * matSize + (j + 1);
            B[i][j] = i * matSize + (j + 1);
        }
    }

    return {
        A,
        B
    };
}

const c = document.getElementById('c');

const gpu = new GPU({

mode: 'gpu'

});

// Generate Matrices

const matrices = generateMatrices();

const A = matrices.A;

const B = matrices.B;

const gpuMatMult = gpu.createKernel(function (A, B) {

var sum = 0;

for (var i = 0; i < 512; i++) {

sum += A[this.thread.y][i] * B[i][this.thread.x];

}

return sum;

})

.setDimensions([A.length, B.length])

// .setOutputToTexture(true);

function cpuMatMult(m, n) {

var result = [];

for (var i = 0; i < m.length; i++) {

result[i] = [];

for (var j = 0; j < n[0].length; j++) {

var sum = 0;

for (var k = 0; k < m[0].length; k++) {

sum += m[i][k] * n[k][j];

}

result[i][j] = sum;

}

return result;

}

function sumMatrix(m) {

let total = 0;

for (let i = 0; i < m.length; i += 1) {

for (let j = 0; j < m[i].length; j += 1) {

total += m[i][j];

}

return total;

}

//CPU

const startCPU = window.performance.now();

const cpuResult = cpuMatMult(A, B);

const endCPU = window.performance.now();

const cpuTime = endCPU - startCPU;

console.log(`CPU: ${cpuTime}ms, total: ${sumMatrix(cpuResult)}`);

// //GPU

const startGPU = window.performance.now();

const result = gpuMatMult(A, B);

console.log('gpuResult: ', result);

const endGPU = window.performance.now();

const gpuTime = endGPU - startGPU;

console.log(`GPU: ${gpuTime}ms, total: ${sumMatrix(result)}`);

//Diff

const diff = (cpuTime - gpuTime) / (gpuTime);

console.log(`%c ${diff}`, 'color: red;', `times faster!`)

function generateMatrices() {

const matSize = 512;

let A = [];

let B = [];

for (let i = 0; i < matSize; i += 1) {

A[i] = [];

B[i] = [];

for (let j = 0; j < matSize; j += 1) {

A[i][j] = i * matSize + (j + 1);

B[i][j] = i * matSize + (j + 1);

}

return {

};

}

deeplearn.js

另外還有一個庫是最近Google剛開源的deeplearn.js，如果要做深度學習的話是很好的工具。後面我們會找時間單獨介紹。

總結

由於架構設計不一樣，GPU很適合做簡單的併發計算，應用於影象處理、深度學習等領域能大大加快速度，也直接引爆了這一次人工智慧的發展。當然直接用gpu去開發程式很難編寫，一般都是由特殊編譯器將程式碼編譯成可以在gpu上執行的程式碼。本文提高的gpu.js就是在前端將js的一個子集編譯成能在webgl上執行的一個編譯器。

當然我們的業務邏輯比較複雜，發現很難把程式碼改寫成能在GPU上加速執行的，最後我們採用的是之前講過的WebWorkers+WebAssembly的方式，提速也能達到數十倍，程式碼還簡單很多，易於維護。當然不是說複雜的問題不能轉化到GPU上執行，這篇文章 https://amoffat.github.io/held-karp-gpu-demo/ 就講怎麼用GPU加速去解決TSP問題，方法很巧妙，有興趣的可以看看。

==============

話說我們後來根據對問題的深入分析，將問題的複雜度簡化了，瞬間提速100倍，所以說做優化工程之前，一定要先確保演算法已經沒有什麼優化的空間了。演算法對速度的提升是遠大於程式語言等的，當然演算法的提速是可以跟工程優化疊加的，將兩者結合起來我們的專案相比最之前的演算法有將近3000倍的提速，完全解決了問題。

Refers

Tesla™ GPU高效能運算應用案例
2010-12-23
GPU
GPU加速DiffuseCubeMap經典計算(轉)
2007-08-12
GPU
高效能運算GPU解決方案系列教程二–高效能運算叢集效能指標
2018-03-06
GPU指標
四則運算計算器
2020-12-23
網格計算與高效能運算
2011-11-24
前端高效能運算之一：WebWorkers
2017-10-21
前端Web
高效能運算&CUDA | 使用numba對三維矩陣在gpu上進行運算
2020-10-26
矩陣GPU
軟體工程設計之四則運算
2015-12-16
軟體工程
四則運算之總結
2015-12-17
Object-C，四則運算計算器
2015-11-15
Object
HPC高效能運算知識: 異構平行計算
2018-04-23
HPC高效能運算知識: GPU的工作原理(含視訊)
2018-04-18
GPU
邊緣計算、量子計算和高效能運算HPC浮出水面與雲端計算互補
2016-12-07
雲端計算還有多久能夠替代高效能運算？
2021-07-06
HPC高效能運算知識: 計算架構演進
2018-04-18
架構
前端高效能運算之二：asm.js & webassembly
2017-10-21
前端ASMJSWeb
GPU：平行計算利器
2015-06-28
GPU
四則運算
2024-03-22
棧的應用——計算器的四則運算
2017-12-04
PostgreSQLGPU加速(HeteroDBpg_strom)(GPU計算,GPU-DIO-NvmeSSD,列存,GPU記憶體快取)
2018-07-28
SQLGPU記憶體快取
前端高效能運算之三：Rust -> asm.js & webassembly
2017-10-21
前端RustASMJSWeb
作業6--四則運算APP之Sprint計劃
2015-05-20
APP
cuda程式設計與gpu平行計算（四）：cuda程式設計模型
2020-12-31
程式設計GPU模型
結對程式設計-四則運算
2024-04-15
程式設計
北鯤雲超算平臺如何將雲端計算與高效能運算結合
2021-09-30
前端元件設計--位運算的妙用
2018-10-25
前端元件
NVDIA CUDA ---------GPU計算的革命
2010-01-28
GPU
四則運算GUI版本
2016-10-19
GUI
四則運算小程式
2015-03-26
四則運算----封裝
2015-04-30
封裝
安卓版四則運算
2015-05-28
安卓
四則運算——安卓版
2016-04-01
安卓
四則運算專案
2024-03-26
四則運算手冊
2024-03-26
加速基因測序程式，北鯤雲高效能運算平臺再發力
2021-07-24
用位運算為你的程式加速
2022-07-31
C++ AMP 加速大規模平行計算-GPU和CPU的效能比較
2013-09-21
C++GPU
英偉達GPU顯示卡計算能力評估
2020-04-06
GPU

前端高效能運算之四：GPU加速計算

支援的語法

Show Me Code

deeplearn.js

總結

Refers

相關文章