Gpu.js在医学检查影像显示-Web版的运用

本文转载自微信公众号「微医大前端技术」，作者杨广。转载本文请联系微医大前端技术公众号。

创新互联建站服务项目包括市中网站建设、市中网站制作、市中网页制作以及市中网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，市中网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到市中省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！

前言

医学检查影像显示里边，调窗是一个基础的常用操作：通过滑动鼠标来改变窗宽窗位的大小，窗宽(宽度)、窗位(中心点)其实就是一个像素数值的区间，图像的所有像素点的像素值在这个区间的就显示，不在区间的就不显示。

在 web 版阅片器(图像显示工具)的开发工程中发现，在对 dr、dx 这种大图(图像普遍是 2000px 左右宽高的图像，每个像素大小是 16 位或者 32 位的)进行调窗时，浏览器直接卡死，图像显示变化有很大延迟。后来查阅资料，使用 gpujs 来实现调窗时图像的处理，结果：调窗时图像显示变化变得比较线性，性能估计提升 5/6 倍，能满足业务需求。当然，图像的一些高级处理，都是可以用 gpujs 来实现，调窗只是一个点。

使用前效果：

使用后效果：

什么是 GPU.js?

GPU.js 是用于 Web 和 Node.js 中的 GPGPU(GPU 上的通用计算)的 JavaScript 加速库。GPU.js 自动将简单的 JavaScript 函数转换为着色器语言并编译它们，以便它们在您的 GPU 上运行。使用 GPU 执行大规模并行 GPGPU 计算，当 GPU 不可用时，优雅的纯 JavaScript 回退。

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.js 编写的矩阵乘法(对大小为 512 x 512 的 2 个矩阵执行矩阵乘法)。把计算 512 x 512 矩阵(2D 数组)的单个元素的 javascript 函数转换而来的 GPU 加速内核。内核函数在 GPU 上串联运行，通常会导致非常快速的计算!你可以在这里运行一个基准测试。通常，它的运行速度会快 1-15 倍，具体取决于您的硬件。

由于架构设计不一样，GPU 很适合做简单的并发计算，应用于图像处理、深度学习等领域能大大加快速度。当然直接用 gpu 去开发程序很难编写，一般都是由特殊编译器将代码编译成可以在 gpu 上执行的代码。本文提到的 gpu.js 就是在前端将 js 的一个子集编译成能在 webgl 上执行的一个编译器。更多使用场景 demo 请参照官网 https://gpu.rocks/#/examples。

在使用上遇到的坑

使用 npm 引入 gpu.js 包，发现项目运行不起来，可能和机器有关系，后来改成直接用 browser 方式引入 js 文件

我们是使用 canvas 方式来直接输出像素数据的，对不同大小的图像要使用不同大小的 canvas，使用同一个 canvas 会有些像素清不掉，试用了其他方法清除：没有起到效果

canvas 方式像素数据的原点位置，原点是在左下角

创建内核，内核里边的函数或者自定义函数，在打包过程中被压缩、简化处理后会出现问题：被转换后的某些运算符 gpu.js 不支持。所以 js 的压缩转化规则要做具体的设置

因为每个设备的 gpu 特性不一样，使用 gpujs 库可能有未知异常，总之加上 try { } catch () { 普通处理 cpu } 能解决大多数问题。

 
 
 
 
    
  
  
  
  
  1. # 在 index.html 中引入 gpu.js
    2. 
  
  
  
  
    3. 
  
  
  
  
  3. # 开始使用
    4. 
  
  
  
  
  4. var  gpu = new GPU();
    5. 
  
  
  
  
  5. gpu.addFunction(function1) # 添加自定义函数
    6. 
  
  
  
  
  6. gpu.addFunction(function12) # 添加自定义函数
    7. 
  
  
  
  
  7. # 创建 Kernel
    8. 
  
  
  
  
  8. var kernel =  gpu.createKernel(function(参数 1，参数 2,...) {
    9. 
  
  
  
  
  9.     # 调窗实现算法
    10. 
  
  
  
  
  10.     #
    11. 
  
  
  
  
  11.     #
    12. 
  
  
  
  
  12.     #
    13. 
  
  
  
  
  13. },
    14. 
  
  
  
  
  14. {  
    15. 
  
  
  
  
  15.   graphical: true,
    16. 
  
  
  
  
  16.   output: outputsize
    17. 
  
  
  
  
  17. })
    18. 
  
  
  
  
  18. # 执行 Kernel
    19. 
  
  
  
  
  19. kernel(入参数 1，入参数 2,...);
    20. 
  
  
  
  
  20. var canvasRender = kernel.canvas;
    21. 
  
  
  
  
  21. # 直接显示 canvasRender， ....
    22.

官方使用场景 demo

地址：https://gpu.rocks/#/examples

An example with the shiny new v2 of GPU.js, "Cosmic Jellyfish"

A simple example to load an image into GPU.js.

GPU Accelerated Heatmap using GPU.js

A simple example wherein colors slowly fade in and fade out.

Browser

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
    3.

Node

 
 
 
 
    
  
  
  
  
  1. const { GPU } = require('gpu.js');
    2. 
  
  
  
  
  2. const gpu = new GPU();
    3. 
  
  
  
  
  3. const multiplyMatrix = gpu.createKernel(function(a, b) {
    4. 
  
  
  
  
  4.     let sum = 0;
    5. 
  
  
  
  
  5.     for (let i = 0; i < 512; i++) {
    6. 
  
  
  
  
  6.         sum += a[this.thread.y][i] * b[i][this.thread.x];
    7. 
  
  
  
  
  7.     }
    8. 
  
  
  
  
  8.     return sum;
    9. 
  
  
  
  
  9. }).setOutput([512, 512]);
    10. 
  
  
  
  
  10. 
  
  
  
  
  11. const c = multiplyMatrix(a, b);
    12.

示例

在本例中，两个 512x512 矩阵(二维数组)相乘。计算是在 GPU 上并行完成的。

1.生成矩阵

 
 
 
 
    
  
  
  
  
  1. const generateMatrices = () => {
    2. 
  
  
  
  
  2.    const matrices = [[], []]
    3. 
  
  
  
  
  3.    for (let y = 0; y < 512; y++){
    4. 
  
  
  
  
  4.      matrices[0].push([])
    5. 
  
  
  
  
  5.      matrices[1].push([])
    6. 
  
  
  
  
  6.      for (let x = 0; x < 512; x++){
    7. 
  
  
  
  
  7.        matrices[0][y].push(Math.random())
    8. 
  
  
  
  
  8.        matrices[1][y].push(Math.random())
    9. 
  
  
  
  
  9.      }
    10. 
  
  
  
  
  10.    }
    11. 
  
  
  
  
  11.    return matrices
    12. 
  
  
  
  
  12.  }
    13.

2.创建“内核”

 
 
 
 
    
  
  
  
  
  1. const gpu = new GPU();
    2. 
  
  
  
  
  2.  const multiplyMatrix = gpu.createKernel(function(a, b) {
    3. 
  
  
  
  
  3.    let sum = 0;
    4. 
  
  
  
  
  4.    for (let i = 0; i < 512; i++) {
    5. 
  
  
  
  
  5.      sum += a[this.thread.y][i] * b[i][this.thread.x];
    6. 
  
  
  
  
  6.    }
    7. 
  
  
  
  
  7.    return sum;
    8. 
  
  
  
  
  8.  }).setOutput([512, 512])
    9.

3.以矩阵为参数调用内核

 
 
 
 
    
  
  
  
  
  1. const matrices = generateMatrices()
    2. 
  
  
  
  
  2. const out = multiplyMatrix(matrices[0], matrices[1])
    3.

4.输出矩阵

console.log(out[y][x]) // Logs the element at the xth row and the yth column of the matrix

console.log(out[10][12]) // Logs the element at the 10th row and the 12th column of the output matri

小结

gpu.js 是在前端将 js 的一个子集编译成能在 webgl 上执行的一个编译器，简单、实用，能快速出结果，在对性能要求高、又耗时的运算可以考虑使用 gpu.js 来实现。

参考资料

官网 https://gpu.rocks/#/

github https://github.com/gpujs/gpu.js

更多例子 https://gpu.rocks/#/examples

杨广: 微医前端技术部前端工程师。有志成为一名全栈开发工程师甚至架构师，路漫漫，吾求索。生活中通过健身释放压力，思考问题。

网页标题：Gpu.js在医学检查影像显示-Web版的运用
URL地址：http://www.gawzjz.com/qtweb2/news47/4247.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

域名注册知识

同城分类信息

成都网站设计　　 　定制网站建设　　 　成都名片印刷厂　　 　梦港之夜　　 　中国（西部）云计算中心　　 　公路打桩机　　 　成都小程序开发　　 　成都导视系统设计　　 　成都app软件开发　　 　成都做网站　　 　手机网站制作　　 　成都酒店服定制　　 　关键词优化　　 　上市集团网站建设　　 　网络推广公司　　 　网络口碑营销　　 　成都微商城　　 　成都小程序开发　　 　防护网厂　　 　微信小程序