由 Demi 于 星期四, 2018-09-06 16:10 發(fā)表

一、什么是Javascript實(shí)現(xiàn)GPU加速？

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ù)類型統(tǒng)一，且相互無(wú)依賴的計(jì)算。
所以，我們?cè)赪eb上實(shí)現(xiàn)3D場(chǎng)景時(shí)，通常使用WebGL利用GPU運(yùn)算（大量頂點(diǎn)）。
但是，如果只是通用的計(jì)算場(chǎng)景呢？比如處理圖片中大量像素信息，我們有辦法使用GPU資源嗎？這正是本文要講的，GPU通用計(jì)算，簡(jiǎn)稱GPGPU。

二、實(shí)例演示：色塊識(shí)別。

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

2.1、實(shí)例地址（打開頁(yè)面后，依次點(diǎn)擊按鈕“使用CPU計(jì)算”、“使用GPU計(jì)算”）：

2.2、運(yùn)行代碼：

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次

2.3、測(cè)試結(jié)論：

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

2.4、使用GPGPU意義：

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

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

三、如何實(shí)現(xiàn)GPU通用計(jì)算？

3.1、首先，我們通過一張流程圖，演示原理：

3.2、實(shí)現(xiàn)：

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ū)ο?，變量code是我們要傳入的用于計(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è)畫布。

// 頂點(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);