javascript - 通过 Websocket 将图像传输到 WebGL Vs Canvas 并可能与工人一起传输

Question

我通过 Websocket 上的 ArrayBuffer 接收图像并将其发布在画布上。每秒大约 10 张图片（比如 500x500 PNG）

实际上发布到 WEBGL 会更快。同样，我不会进行任何旋转/转换。

只是简单地一个接一个地显示很多图像。

因为它使用 GPU/Shaders，WebGl 会是一种更快的方式吗？

Answer 1

Most canvas2d implementations already use hardware-acceleration, so when you only want to place simple images on a canvas, WebGL will only introduce much more technical complexity without gaining you anything.

It can make sense to use WebGL for 2d graphics when you want to do some complex image filtering operations, because a shader can perform them on the GPU while your only way to do pixel-level operations with canvas2d is to load the graphic to the RAM with getImageData, do the operation on the CPU, and load it back to the GPU with setImageData.

When you have performance problems, I think that your bottleneck might be here: "about 10 images a sec (say 500x500 PNGs) via Websocket". A 500x500 PNG is at least 200kb, but can be a lot larger depending on content and how well the compression algorithm is chosen. 10 images per second take at least 2MB per second which are at least 16 MBit/s of bandwidth. Do you have that much bandwidth?