有没有任何方法可以使用three.js渲染Uint8ClampedArray imageData

is there any way to Uint8ClampedArray imageData render using three.js?

本文关键字：js 渲染 Uint8ClampedArray imageData three 任何 方法 可以使 有没有      更新时间：2023-09-26

程序图像

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

我想将ImageData(Uint8ClampedArray(流式传输到实时浏览器(每100ms(，并且我成功地使用了服务器端渲染(nodecanvas(。

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

我第一次这样做，(我将跳过身份验证过程的描述(

服务器端

  • 步骤1：挂接rdp-imageData的(到压缩的RLE算法(
  • 步骤2：解压缩图像数据(它压缩了RLE算法((使Uint8ClampedArray(
  • 步骤3：canvas putImageData
  • 步骤4：获取dataUrl并剪切"data:image/png；base64'
  • 步骤5：使缓冲区base64，使其与图像文件缓冲区相同，保存以表示
  • 步骤5：expree将生成图像url(类似于https://localhost/10-1.png#timestamp)
  • 步骤5：使用socket.io将imageurl发送到客户端

客户端

  • 步骤1：当站点加载时，在div中创建64x64图像标记(类似于谷歌地图(
  • 步骤2：接收图像url并使用解析图像名称获取图像坐标("10-1.png"->x:640，y:64(
  • 步骤3：将图像标签src更改为已接收的图像url

它当前的性能很差(当分辨率很小时，实际上并没有那么差(。

问题

  • Uint8ClampedArray图像数据是否有任何方法可以使用three.js进行纹理处理
  • 在three.js中使用GPU进行RLE算法压缩数据提取可能吗

我不相信有一种方法可以使用three.js.直接绘制图像数据

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

首先，我不明白你不仅仅是通过网络套接字发送jpg或png数据。然后你可以实际使用png，并在three.js.中将其绘制为精灵

也就是说，我不认为瓶颈是将数据实际绘制到画布上，即使是这样，webgl也不会帮你。我只是使用webgl和使用putImageData((进行了比较。对于HD图像(1920x1080(，在1000张图纸中，putImageData((平均耗时14ms，WebGL平均耗时70ms。现在，当你因为想在图像处理(如边缘检测(方面做一些事情而需要遍历像素时，情况就完全不同了。webgl肯定会在上面。原因如下：WebGl使用GPU，这意味着当你想对图像进行处理时，你必须首先将所有数据加载到GPU，这相当慢。但处理数据的速度相当快。比在javascript中循环遍历图像的像素要快得多。

所以最后我想说，你最好的选择是通过使用数组缓冲区的websocket发送png图像。在客户端，将其绘制为画布元素。

这里有一个指向webgl的链接，解释了如何使用它进行图像处理：webgl Fundamentals:image processing

相关文章：