资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/Javascript如何实现GPU加速？

Javascript如何实现GPU加速？

susheng / 2599人阅读

摘要：绑定并编译着色器程序创建程序对象传入顶点数据，创建一个面覆盖整个画布。有无现成类库大家可以看到，我实现的中，并没有将转换成着色器语言类，而是用户直接传入着色器代码。但是上已有将转换为着色器语言的库。

欢迎大家前往腾讯云+社区，获取更多腾讯海量技术实践干货哦~

本文由腾讯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裸金属 GPU服务器 javascript如何实现继承 如何实现cdn加速 cdn技术如何实现加速 cdn 服务如何实现网络加速?

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95912.html

相关文章

  • 浏览器之硬件加速机制

    摘要：书接上文浏览器内核之渲染基础硬件加速基础概念硬件加速技术是指使用的硬件能力为帮助渲染网页，在为的作用主要是用来绘制图形并且性能特别好。包含的节点表示的是使用硬件加速的元素或者技术。 showImg(https://segmentfault.com/img/remote/1460000016348971); 微信公众号：爱写bugger的阿拉斯加如有问题或建议，请后台留言，我会尽力解决你...

    mengera88 评论0 收藏0

  • 硬件加速

    摘要：但硬件加速是把双刃剑，过渡的使用硬件加速会适得其反。所以，一定要牢记不要让页面的每个元素都使用硬件加速，当且仅当需要的时候才为元素创建渲染层。参考文档无线性能优化动画及硬件加速高性能动画与页面渲染渲染优化层模型 前言 谈起浏览器的硬件加速，想必大家都知道的一个技巧就是在用CSS3做动画时，给元素添加transform: translateZ(0)或者transform: transla...

    mo0n1andin 评论0 收藏0

  • 硬件加速

    摘要：但硬件加速是把双刃剑，过渡的使用硬件加速会适得其反。所以，一定要牢记不要让页面的每个元素都使用硬件加速，当且仅当需要的时候才为元素创建渲染层。参考文档无线性能优化动画及硬件加速高性能动画与页面渲染渲染优化层模型 前言 谈起浏览器的硬件加速，想必大家都知道的一个技巧就是在用CSS3做动画时，给元素添加transform: translateZ(0)或者transform: transla...

    xiaotianyi 评论0 收藏0

  • 浏览器渲染简述

    摘要：而浏览器渲染与密切相关，因此只有了解其中工作原理才能让更好地工作。浏览器也称为布局渲染方式瓦片渲染流畅动画总结参考文章浏览器用户界面包括地址栏前进后退按钮书签菜单等。浏览器引擎在用户界面和渲染引擎之间传送指令。渲染引擎负责显示请求的内容。 singsong: 文本是自己看了一些不错资料整理出来的，对该知识点感兴趣的同学可以查看参考文章小节。 ✏️最新内容请以github上的为准❗️ 为...

    Yang_River 评论0 收藏0

  • 浏览器渲染简述

    摘要：而浏览器渲染与密切相关，因此只有了解其中工作原理才能让更好地工作。浏览器也称为布局渲染方式瓦片渲染流畅动画总结参考文章浏览器用户界面包括地址栏前进后退按钮书签菜单等。浏览器引擎在用户界面和渲染引擎之间传送指令。渲染引擎负责显示请求的内容。 singsong: 文本是自己看了一些不错资料整理出来的，对该知识点感兴趣的同学可以查看参考文章小节。 ✏️最新内容请以github上的为准❗️ 为...

    shuibo 评论0 收藏0

发表评论

登陆后可评论

0条评论

susheng

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<