摘要：綁定并編譯著色器程序創(chuàng)建程序?qū)ο髠魅腠旤c(diǎn)數(shù)據(jù)，創(chuàng)建一個(gè)面覆蓋整個(gè)畫(huà)布。有無(wú)現(xiàn)成類(lèi)庫(kù)大家可以看到，我實(shí)現(xiàn)的中，并沒(méi)有將轉(zhuǎn)換成著色器語(yǔ)言類(lèi)，而是用戶(hù)直接傳入著色器代碼。但是上已有將轉(zhuǎn)換為著色器語(yǔ)言的庫(kù)。

歡迎大家前往騰訊云+社區(qū)，獲取更多騰訊海量技術(shù)實(shí)踐干貨哦~

本文由騰訊Bugly發(fā)表于云+社區(qū)專(zhuān)欄

CPU與GPU設(shè)計(jì)目標(biāo)不同，導(dǎo)致它們之間內(nèi)部結(jié)構(gòu)差異很大。 CPU需要應(yīng)對(duì)通用場(chǎng)景，內(nèi)部結(jié)構(gòu)非常復(fù)雜。 而GPU往往面向數(shù)據(jù)類(lèi)型統(tǒng)一，且相互無(wú)依賴(lài)的計(jì)算。 所以，我們?cè)赪eb上實(shí)現(xiàn)3D場(chǎng)景時(shí)，通常使用WebGL利用GPU運(yùn)算（大量頂點(diǎn)）。 但是，如果只是通用的計(jì)算場(chǎng)景呢？比如處理圖片中大量像素信息，我們有辦法使用GPU資源嗎？這正是本文要講的，GPU通用計(jì)算，簡(jiǎn)稱(chēng)GPGPU。

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

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

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
    }
};

運(yùn)行次數(shù)：262144次

實(shí)例中，我們分別使用GPU和CPU進(jìn)行色相轉(zhuǎn)換（防止光線影響識(shí)別準(zhǔn)確度），其余步驟均一致。

GPU與CPU數(shù)據(jù)傳輸過(guò)程，與GPU實(shí)際運(yùn)算耗時(shí)相當(dāng)，所以使用GPU運(yùn)算傳輸成本過(guò)高，實(shí)測(cè)在Android中具有較大優(yōu)勢(shì)。

本測(cè)試案例是從webAR項(xiàng)目中抽取，需要實(shí)時(shí)跟蹤用戶(hù)攝像頭處理視頻流（256*256），使用GPU計(jì)算意義非常大，否則無(wú)法實(shí)現(xiàn)實(shí)時(shí)跟蹤。

3.2.1 創(chuàng)建頂點(diǎn)著色器，只是傳遞了貼圖坐標(biāo)。

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

3.2.2 創(chuàng)建片元著色器，根據(jù)貼圖坐標(biāo)貼圖。

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

3.3.3 根據(jù)如上著色器代碼，創(chuàng)建程序?qū)ο螅兞縞ode是我們要傳入的用于計(jì)算的代碼。

// 綁定并編譯著色器程序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);  
              
// 創(chuàng)建程序?qū)ο?var program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);

3.3.4 傳入頂點(diǎn)數(shù)據(jù)，創(chuàng)建一個(gè)面覆蓋整個(gè)畫(huà)布。

// 頂點(diǎn)數(shù)據(jù)傳輸
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 傳入原始數(shù)據(jù)，本例中傳入我要處理的圖像數(shù)據(jù)，作為貼圖，最終繪制到屏幕。

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 從最終繪制的畫(huà)面上，獲取顏色信息作為最終處理結(jié)果數(shù)據(jù)。

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...

其實(shí)清楚原理后，整體實(shí)現(xiàn)比較簡(jiǎn)單。 但是對(duì)于不了解WebGL的同學(xué)來(lái)說(shuō)，理解上有一定難度，我后續(xù)準(zhǔn)備寫(xiě)一個(gè)系列的WebGL教程，有興趣的同學(xué)可以關(guān)注。

大家可以看到，我實(shí)現(xiàn)的gpu.js中，并沒(méi)有將javascript轉(zhuǎn)換成著色器語(yǔ)言（類(lèi)C），而是用戶(hù)直接傳入著色器代碼。但是github上已有將javascript轉(zhuǎn)換為著色器語(yǔ)言的庫(kù)。 https://github.com/gpujs/gpu.js

為什么我沒(méi)有直接使用呢？

簡(jiǎn)單的使用，2k可以實(shí)現(xiàn)的代碼，不想引入200k的庫(kù)；

數(shù)據(jù)輸入輸出可以由自己靈活控制；

著色器語(yǔ)言很簡(jiǎn)單，特別只是使用基礎(chǔ)運(yùn)算邏輯的代碼，沒(méi)必要由庫(kù)從Javascript轉(zhuǎn)換。

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

問(wèn)答
是否有一種方法以編程方式測(cè)試瀏覽器GPU加速？
相關(guān)閱讀
有哪些主流的科學(xué)計(jì)算可以利用GPU加速？
如何使用JavaScript實(shí)現(xiàn)GPU加速神經(jīng)網(wǎng)絡(luò)
CPU與GPU區(qū)別大揭秘

此文已由作者授權(quán)騰訊云+社區(qū)發(fā)布，原文鏈接：https://cloud.tencent.com/dev...

歡迎大家前往騰訊云+社區(qū)或關(guān)注云加社區(qū)微信公眾號(hào)（QcloudCommunity），第一時(shí)間獲取更多海量技術(shù)實(shí)踐干貨哦~