HTML5 中的高性能像素操作

Question

我是新嘗試在 HTML5/JS 中進行高速圖像顯示。 我對 HTML5/JS 相當陌生，正在嘗試評估可用於將圖像渲染到屏幕上的選項。

輸入是一個像素數組。

我玩弄了 CanvasRenderingContext2D，並使用了畫布和 putImageData 將像素渲染到屏幕上，但隨着圖像尺寸的增加，我的 FPS 變慢了。 我要解決的用例是將原始像素陣列渲染到屏幕上，而不是繪制形狀/繪圖。 我的目標是以盡可能高的 FPS 進行渲染。

        var imageCanvas = document.getElementById('imageCanvas');
        var imageContext = imageCanvas.getContext('2d', { alpha: false });
        var pixelData = imageContext.createImageData(imageWidth, imageWidth);
        // ---------------------------------------------------------
        // here: Fill up pixelData with image pixels to be rendered
        // ---------------------------------------------------------
        imageContext.putImageData(pixelData , 0, 0);

1. 對於這樣的用例，我應該如何進行？ 我在很多地方讀到 putImageData 是這里的瓶頸，更好的方法是使用 DrawImage。 是否可以避免使用 putImageData 並使用 DrawImage 從 pixelData 讀取並渲染？

2. 我可以如何有效地使用 GPU？

3. WebGLRenderingContext 是否適合這種情況？

Answer 1

用於 html 畫布上的高性能圖形。 只有一種方法可以做到。 它通過使用由 glES 提供的 webgl。

使用核心 opengl 可能很煩人，所以你可能想使用一些庫，如Three.js或pixijs