Javascript如何實現GPU加速？

susheng 發布于2019-08-22 18:29 / 2753人閱讀

摘要：綁定并編譯著色器程序創建程序對象傳入頂點數據，創建一個面覆蓋整個畫布。有無現成類庫大家可以看到，我實現的中，并沒有將轉換成著色器語言類，而是用戶直接傳入著色器代碼。但是上已有將轉換為著色器語言的庫。

歡迎大家前往騰訊云+社區，獲取更多騰訊海量技術實踐干貨哦~

本文由騰訊Bugly發表于云+社區專欄

1. 什么是Javascript實現GPU加速？

CPU與GPU設計目標不同，導致它們之間內部結構差異很大。 CPU需要應對通用場景，內部結構非常復雜。而GPU往往面向數據類型統一，且相互無依賴的計算。所以，我們在Web上實現3D場景時，通常使用WebGL利用GPU運算（大量頂點）。但是，如果只是通用的計算場景呢？比如處理圖片中大量像素信息，我們有辦法使用GPU資源嗎？這正是本文要講的，GPU通用計算，簡稱GPGPU。

2. 實例演示：色塊識別

如下圖所示，我們識別圖片中彩虹糖色塊，給糖果添加表情。

2.1 實例地址（打開頁面后，依次點擊按鈕“使用CPU計算”、“使用GPU計算”）

http://tgideas.qq.com/2018/br...

2.2 運行代碼

var rgb2hsv = function(r, g, b) {
    var max = Math.max(r, g, b), min = Math.min(r, g, b),
        d = max - min,
        h,
        s = (max === 0 ? 0 : d / max),
        v = max / 255;
        switch (max) {        
        case min: h = 0; break;        
        case r: h = (g - b) + d * (g < b ? 6: 0); h /= 6 * d; break;        
        case g: h = (b - r) + d * 2; h /= 6 * d; break;        
        case b: h = (r - g) + d * 4; h /= 6 * d; break;
    }    
     return {
        h: self.hueIndexs[parseInt(h*360)],
        s: s,
        v: v
    }
};

運行次數：262144次

2.3 測試結論

實例中，我們分別使用GPU和CPU進行色相轉換（防止光線影響識別準確度），其余步驟均一致。

2.4 使用GPGPU意義

GPU與CPU數據傳輸過程，與GPU實際運算耗時相當，所以使用GPU運算傳輸成本過高，實測在Android中具有較大優勢。

本測試案例是從webAR項目中抽取，需要實時跟蹤用戶攝像頭處理視頻流（256*256），使用GPU計算意義非常大，否則無法實現實時跟蹤。

3. 如何實現GPU通用計算？ 3.1 首先，我們通過一張流程圖，演示原理

3.2 實現

3.2.1 創建頂點著色器，只是傳遞了貼圖坐標。

attribute vec4 position;
varying vec2 vCoord;void main() {
    vCoord = position.xy * 0.5 + 0.5;
    gl_Position = position;
}

3.2.2 創建片元著色器，根據貼圖坐標貼圖。

precision highp float;
varying vec2 vCoord;
uniform sampler2D map;void main(void) {
    vec4 color = texture2D(map, vCoord);
    gl_FragColor = color;
}

3.3.3 根據如上著色器代碼，創建程序對象，變量code是我們要傳入的用于計算的代碼。

// 綁定并編譯著色器程序var vertexShaderSource = "...";
var fragmentShaderSource = "..." + code + "...";
var vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);
var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);  
              
// 創建程序對象
var program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);

3.3.4 傳入頂點數據，創建一個面覆蓋整個畫布。

// 頂點數據傳輸
var vertices = new Float32Array([-1.0, 1.0, -1.0, -1.0, 1.0, -1.0, 1.0, 1.0]);
var vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
var aPosition = gl.getAttribLocation(program, "position");
gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(aPosition);

3.3.5 傳入原始數據，本例中傳入我要處理的圖像數據，作為貼圖，最終繪制到屏幕。

var gl = this.gl;
var program = this.program;
var texture = gl.createTexture();
var uMap = gl.getUniformLocation(program, "map");

gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, texture);

gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, canvas);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.generateMipmap(gl.TEXTURE_2D);

gl.uniform1i(uMap, 0);      
          
// 繪制
gl.clearColor(0, 0, 0, 1);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);

3.3.6 從最終繪制的畫面上，獲取顏色信息作為最終處理結果數據。

var pixels = new Uint8Array(gl.drawingBufferWidth * gl.drawingBufferHeight * 4);
gl.readPixels(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight, gl.RGBA, gl.UNSIGNED_BYTE, pixels);

3.3.7 完整代碼： http://tgideas.qq.com/2018/br...

其實清楚原理后，整體實現比較簡單。但是對于不了解WebGL的同學來說，理解上有一定難度，我后續準備寫一個系列的WebGL教程，有興趣的同學可以關注。

4. 有無現成類庫？

大家可以看到，我實現的gpu.js中，并沒有將javascript轉換成著色器語言（類C），而是用戶直接傳入著色器代碼。但是github上已有將javascript轉換為著色器語言的庫。 https://github.com/gpujs/gpu.js

為什么我沒有直接使用呢？

簡單的使用，2k可以實現的代碼，不想引入200k的庫；

數據輸入輸出可以由自己靈活控制；

著色器語言很簡單，特別只是使用基礎運算邏輯的代碼，沒必要由庫從Javascript轉換。

沒有WebGL基礎的同學，建議直接使用https://github.com/gpujs/gpu.js ，從本文理解整體邏輯；有一定基礎的同學，建議由http://tgideas.qq.com/2018/br... 自己定制，更為靈活。

問答
是否有一種方法以編程方式測試瀏覽器GPU加速？
相關閱讀
有哪些主流的科學計算可以利用GPU加速？
如何使用JavaScript實現GPU加速神經網絡
CPU與GPU區別大揭秘

此文已由作者授權騰訊云+社區發布，原文鏈接：https://cloud.tencent.com/dev...

歡迎大家前往騰訊云+社區或關注云加社區微信公眾號（QcloudCommunity），第一時間獲取更多海量技術實踐干貨哦~

GPU云服務器 javascript如何實現繼承如何實現cdn加速 cdn技術如何實現加速 cdn 服務如何實現網絡加速?

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/95912.html

瀏覽器之硬件加速機制

摘要：書接上文瀏覽器內核之渲染基礎硬件加速基礎概念硬件加速技術是指使用的硬件能力為幫助渲染網頁，在為的作用主要是用來繪制圖形并且性能特別好。包含的節點表示的是使用硬件加速的元素或者技術。 showImg(https://segmentfault.com/img/remote/1460000016348971); 微信公眾號：愛寫bugger的阿拉斯加如有問題或建議，請后臺留言，我會盡力解決你...

mengera88 2019-08-23 11:54 評論0 收藏0
硬件加速

摘要：但硬件加速是把雙刃劍，過渡的使用硬件加速會適得其反。所以，一定要牢記不要讓頁面的每個元素都使用硬件加速，當且僅當需要的時候才為元素創建渲染層。參考文檔無線性能優化動畫及硬件加速高性能動畫與頁面渲染渲染優化層模型前言談起瀏覽器的硬件加速，想必大家都知道的一個技巧就是在用CSS3做動畫時，給元素添加transform: translateZ(0)或者transform: transla...

mo0n1andin 2019-08-22 15:34 評論0 收藏0
硬件加速

摘要：但硬件加速是把雙刃劍，過渡的使用硬件加速會適得其反。所以，一定要牢記不要讓頁面的每個元素都使用硬件加速，當且僅當需要的時候才為元素創建渲染層。參考文檔無線性能優化動畫及硬件加速高性能動畫與頁面渲染渲染優化層模型前言談起瀏覽器的硬件加速，想必大家都知道的一個技巧就是在用CSS3做動畫時，給元素添加transform: translateZ(0)或者transform: transla...

xiaotianyi 2019-08-01 18:43 評論0 收藏0
瀏覽器渲染簡述

摘要：而瀏覽器渲染與密切相關，因此只有了解其中工作原理才能讓更好地工作。瀏覽器也稱為布局渲染方式瓦片渲染流暢動畫總結參考文章瀏覽器用戶界面包括地址欄前進后退按鈕書簽菜單等。瀏覽器引擎在用戶界面和渲染引擎之間傳送指令。渲染引擎負責顯示請求的內容。 singsong: 文本是自己看了一些不錯資料整理出來的，對該知識點感興趣的同學可以查看參考文章小節。 ??最新內容請以github上的為準?? 為...

Yang_River 2019-08-22 16:56 評論0 收藏0
瀏覽器渲染簡述

摘要：而瀏覽器渲染與密切相關，因此只有了解其中工作原理才能讓更好地工作。瀏覽器也稱為布局渲染方式瓦片渲染流暢動畫總結參考文章瀏覽器用戶界面包括地址欄前進后退按鈕書簽菜單等。瀏覽器引擎在用戶界面和渲染引擎之間傳送指令。渲染引擎負責顯示請求的內容。 singsong: 文本是自己看了一些不錯資料整理出來的，對該知識點感興趣的同學可以查看參考文章小節。 ??最新內容請以github上的為準?? 為...

shuibo 2019-08-29 15:18 評論0 收藏0