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

Question

Есть ли способ получить необработанные данные пикселей из буфера рендеринга WebGL или кадрового буфера, который находится за пределами экрана?

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

Спасибо.

Answer 1

Это очень старый вопрос, но я недавно искал то же самое в three.js. Нет прямого способа рендеринга в буфер кадров, но на самом деле это делается процессом рендеринга в текстуру (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);

Answer 2

readPixels() должен делать то, что вы хотите. Подробнее читайте в спецификации WebGL на http://www.khronos.org/registry/webgl/specs/latest/