有使用Uint8ClampedArray imageData呈现three.js的方法吗？
程序-图像
我正在制作windows RDP(远程桌面协议) Web浏览器。
我希望将ImageData(Uint8ClampedArray)流到使用live的浏览器(每100 it )，并使用服务器端呈现(节点-画布)来成功。
但是目前我的源代码非常低性能。因为CPU渲染无法处理它。(太多了。)因此，我想尝试在客户端使用WebGL进行GPU并行计算。(有可能吗？)
我第一次这样做，(我将跳过对认证过程的描述)
服务器端
- 步骤1:挂起rdp imageData(到压缩RLE算法)
- 步骤2:解压缩imagedata(它压缩了RLE算法)(生成Uint8ClampedArray)
- 步骤3:画布putImageData
- 步骤4:获取dataUrl并剪切'data:image/png;base64‘64’
- 第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算法压缩数据提取？
回答 1
Stack Overflow用户
发布于 2016-10-09 11:53:49
我不相信有一种使用three.js直接绘制imagedata的方法。
但在我看来，你还有其他选择：
首先，我不明白您不只是通过websockets发送jpg或png数据。然后，您可以实际使用png并将其绘制为three.js中的雪碧。
尽管如此，我并不认为瓶颈是将数据实际绘制到画布上，即使是这样，webgl也不会帮助您。我只是尝试使用webgl仅仅使用putImageData()。对于average (1920x1080)，在1000幅图纸中，putImageData()平均花费14 HD，WebGL平均花费70 HD。现在，当你需要循环通过像素，因为你想在图像处理方面做一些事情，比如边缘检测，这是一个完全不同的故事。在那里webgl肯定会高居榜首。这就是为什么: WebGl正在使用GPU，这意味着当您想要对图像做一些事情时，您首先必须将所有数据加载到gpu，这是相当慢的。但是处理数据的速度相当快。比在javascript中遍历图像的像素要快得多。
因此，最后，我要说，您最好的选择是使用arraybuffers通过websockets发送png图像。在客户端，将其绘制到一个画布元素。
这里有一个指向webgl内容的链接，它解释了如何将它用于图像处理：WebGl基本原理:图像处理
https://stackoverflow.com/questions/39934376
复制相似问题
腾讯云开发者
