有啥方法可以使用 three.js 渲染 Uint8ClampedArray imageData？

Posted 2023-03-24

【中文标题】有啥方法可以使用 three.js 渲染 Uint8ClampedArray imageData？

【英文标题】：is there any way to Uint8ClampedArray imageData render using three.js?有什么方法可以使用 three.js 渲染 Uint8ClampedArray imageData？

【发布时间】：2017-02-17 11:08:45

【问题描述】：

program-image

我正在做 windows RDP（远程桌面协议）Web 浏览器。

我想实时（每 100 毫秒）将 ImageData(Uint8ClampedArray) 流式传输到浏览器，并且 我使用服务器端渲染（节点画布）成功了。

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

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

服务器端

第 1 步：挂钩 rdp imageData（到压缩 RLE 算法） 第二步：解压imagedata（压缩RLE算法）（制作Uint8ClampedArray） 第 3 步：画布 putImageData 第四步：获取dataUrl并剪切'data:image/png;base64' 第五步：将缓冲区设为base64，所以是同一个图片文件缓冲区，保存即可。 第 5 步：expree 将制作图片网址（如 https://localhost/10-1.png#timestamp） 第 5 步：使用 socket.io 将 imageurl 发送到客户端

客户端

第 1 步：网站加载后，在 div 中创建 64x64 图像标签（如谷歌地图） 第二步：接收图片url，解析图片名称('10-1.png'->x:640,y:64) 第三步：修改图片标签src为接收图片的url。

它目前的性能很差（当分辨率很小时实际上并没有那么糟糕）。

问题

Uint8ClampedArray imagedata 有什么方法可以使用three.js 来纹理化吗？ 是否可以在three.js中使用GPU进行RLE算法压缩数据提取？

【参考方案1】：

我不相信有办法使用 three.js 直接绘制图像数据。

但在我看来，您还有其他选择：

首先我不明白你不只是通过 websockets 发送 jpg 或 png 数据。然后你可以实际使用 png 并将其绘制为 sprite，并在 three.js 中。

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

总而言之，我想说你最好的选择是使用 arraybuffers 通过 websockets 发送 png 图像。在客户端将其绘制到画布元素。

这是一个指向 webgl 内容的链接，它解释了如何将它用于图像处理：WebGl Fundamentals: Image Processing

【讨论】：

嗯..谢谢！无论如何，现在我正在寻找 OpenCL！