Самый быстрый способ визуализации Uint8Array на холст

Question

Я получаю Uint8Array с RGBA значениями, а также некоторые сведения о том, какая часть изображения была обновлена. Каков самый быстрый способ вернуть эту необработанную информацию растрового изображения на холст? Я использую 2D контекст рендеринга вручную цикл, хотя массив и установить информацию пикселей, но это невероятно медленно:

let imageData = new ImageData(1920, 1080); 
for (var i=0;i < args.frameBuffer.length; i+=4) { 
    imageData.data[i] = args.frameBuffer[i]; 
    imageData.data[i+1] = args.frameBuffer[i+1]; 
    imageData.data[i+2] = args.frameBuffer[i+2]; 
    imageData.data[i+3] = args.frameBuffer[i+3]; 
} 
context.putImageData(imageData, 0, 0, args.dirtyX, args.dirtyY, args.dirtyWidth, args.dirtyHeight); 

Что бы более эффективный способ сделать это? Будет ли WebGL более реалистичным, чем 2D-контекст? Родной или через что-то вроде Three.js?

Answer 1

Вы можете использовать gl.TexSubImage2D для обновления текстуры, а затем размыть текстуру целиком. Но у TexSubImage2D есть проблемы с производительностью, потому что он должен подождать, пока предыдущий рендеринг завершится до обновления текстуры для следующего кадра.

Лучший способ может использовать бит saveDrawingBuffer для webgl, а затем использовать две текстуры в круговом режиме с TexImage2D. Чтобы отобразить только грязную область, вам нужно настроить данные вершин для DrawArrays на основе грязных координат.

WebGL все равно придется копировать данные по множеству, но, возможно, эти пути копирования лучше оптимизированы, чем putImageData. Но существует серьезная опасность того, что webgl может быть медленнее, потому что драйверы часто оптимизируют для использования, когда текстурные изображения статичны и используются для нескольких визуализаций. Это ускоряет рендеринг, но медленнее загружает данные текстуры.

Чтобы решить проблему дорогостоящей загрузки текстур, OpenGL имеет несколько расширений, поддерживающих быструю загрузку изображений, но немного медленную визуализацию. Слишком плохо, что эти расширения не подходят для webgl.

Но ваш цикл копирования очень похож на то, что вы получаете весь буфер кадра каждый раз, даже жестко, он только частично обновляется.

Если бы вы могли сделать что-то вроде

let imageData = new ImageData(args.frameBuffer, args.dirtyWidth, args.dirtyHeight); 
context.putImageData(imageData, args.dirtyX, args.dirtyY); 

Конечно текущий интерфейс может быть повторен с

let imageData = new ImageData(args.frameBuffer, 1920, Math.floor((args.frameBuffer.length + 4*1919)/(4*1920))); 
context.putImageData(imageData, 0,0, args.dirtyX, args.dirtyY, args.dirtyWidth, args.dirtyHeight);