WebGL - чтение пиксельных данных из буфера визуализации

Есть ли способ получить необработанные пиксельные данные из буфера визуализации WebGL или буфера кадра, который выключен?

Я использую WebGL для обработки некоторых изображений, например. размытие изображения, настройка цвета и т.д. Я использую фрейм-буферы для рендеринга текстур при полном размере изображения, а затем используя эту текстуру для отображения в области просмотра меньшего размера. Могу ли я получить пиксельные данные из буфера или текстуры, чтобы я мог работать с ним в обычном контексте canvas 2d? Или я застрял в изменении области просмотра до полного размера изображения и захвата данных с помощью canvas.toDataURL()?

Спасибо.

ОТВЕТЫ

Ответ 1

Это очень старый вопрос, но я искал то же самое в three.js в последнее время. Прямого способа визуализации для буфера кадров нет, но на самом деле это выполняется обработкой render to texture (RTT). Я проверяю исходный код рамки и вычисляю следующий код:

renderer.render( rttScene, rttCamera, rttTexture, true );

// ...

var width = rttTexture.width;
var height = rttTexture.height;
var pixels = new Uint8Array(4 * width * height); // be careful - allocate memory only once

// ...

var gl = renderer.context;
var framebuffer = rttTexture.__webglFramebuffer;
gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);        
gl.viewport(0, 0, width, height);
gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
gl.bindFramebuffer(gl.FRAMEBUFFER, null);

Ответ 3

Да, вы можете читать необработанные данные пикселей. Установите preserveDrawingBuffer в true при получении контекста webgl, а затем используйте readPixels для WebGL.

var context = canvasElement.getContext("webgl", {preserveDrawingBuffer: true}
var pixels = new Uint8Array(4 * width * height);
context.readPixels(x, y, width, height, context.RGBA, context.UNSIGNED_BYTE, pixels)