是否有任何方法可以使用three.js对Uint8ClampedArray imageData进行渲染？

Question

program-image

我正在制作Windows RDP（远程桌面协议）Web浏览器。

我想将带有实时（每1​​00毫秒）的ImageData（Uint8ClampedArray）流式传输到浏览器，并且 我使用服务器端渲染（node-canvas）来成功。

但是目前我的源代码性能非常低。因为CPU渲染无法处理它。 （它太多了。）所以我想尝试在客户端使用WebGL进行GPU并行计算。 （有可能吗？）

我第一次这样做，（我将跳过描述验证程序）

了Serverside

• 步骤1：挂钩rdp imageData（到压缩的RLE算法）
• 第2步：解压缩imagedata（压缩RLE算法）（make Uint8ClampedArray）
• 第3步：画布putImageData
• 第4步：获取dataUrl并剪切'data：image / png; base64'
• 步骤5：制作缓冲区base64，使其与图像文件缓冲区相同，保存即可。
• 第5步：expree将成为图片网址（如https://localhost/10-1.png#timestamp）
• 步骤5：使用socket.io
将imageurl发送到客户端

客户端

• 第1步：当网站加载时，在div中创建64x64图像标记（如谷歌地图）
• 第2步：接收图片网址并使用解析图片名称获取图片坐标（'10 -1.png' - ＆gt; x：640，y：64）
• 第3步：将图片标签src更改为收到的图片网址。

当前性能不好（当分辨率大小很小时实际上并不那么糟糕）。

问题

• 有没有办法使用three.js将Uint8ClampedArray imagedata设置为纹理？
• 是否有可能在three.js中使用GPU进行RLE算法压缩数据提取？

Answer 1

我不相信有一种方法可以使用three.js直接绘制imagedata。

但是我看到你还有其他选择：

首先，我不知道你不只是通过websockets发送jpg或png数据。那么你实际上可以使用png并将其绘制为带有three.js的精灵。

那就是说，我不认为瓶颈是将数据实际绘制到画布上，即使它是，webgl也不会帮助你。我只是尝试使用webgl而不是使用putImageData（）。对于高清图像（1920x1080），使用putImageData（）平均花费14ms，使用1000个绘图中的WebGL花费70ms。现在当你需要遍历像素时，因为你想要像边缘检测这样的图像处理方面做一些事情而不是一个完全不同的故事。 webgl肯定会在上面。这就是为什么：WebGl正在使用GPU，这意味着当您想要对图像执行某些操作时，您首先必须将所有数据加载到gpu，这是相当慢的。但处理数据的速度非常快。比在javascript中循环遍历图像的像素要快得多。

总而言之，我认为最好的办法是使用arraybuffers通过websockets发送png图像。在客户端，将其绘制到canvas元素。

以下是webgl内容的链接，说明如何将其用于图像处理：WebGl Fundamentals: Image Processing