Получение изображения из WebGLTexture?

Question

[Vitaliy]

Рисую в FrameBuffer, чтобы потом это использовать в дальнейшем как текстуру.

const fb = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
gl.framebufferTexture2D(gl.FRAMEBUFFER,  gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, targetTexture, level);

drawAnything();

gl.bindFramebuffer(gl.FRAMEBUFFER, null);

Все отлично, нужное изображение рисуется в targetTexture, которую я в дальнейшем использую.
Но проблема в том, что содержимое этой текстуры нужно вынести как отдельное изображение.
В WebGL обычно полотно можно преобразовать в изображение, получив toDataURL(). Но полотно то на самом деле остается нетронутым, все пошло в текстуру, и чтобы таким же путем мне получить текстуру на этом полотне, нужно ее туда отрендерить, а далее все тем же toDataURL().
Вроде бы неплохой метод, учитывая что все равно большую часть производительности заберет именно toDataURL(), но есть ли другие методы?

Answer 1

[Vitaliy]

Изначально был вопрос о получении текстуры из того, что было отрендерено. Как выход - рендерил в frame buffer. Из-за этого появилась другая проблема - нужно отрендеренное отобразить на canvas. Выход - рисовать текстуру (в которую рисуется из другого FBO) в дефолтный frame buffer.

Разумеется, потом потребовалось копировать текстуру, так как нельзя ее использовать и рисовать в нее же.

Source and destination textures of the draw are the same.

Окей, нашел методы. Еще один фрейм буфер создавать не вариант, все таки много кода получится. Есть метод
copyTexSubImage2D() - он копирует данные из текущего frame buffer в активную текстуру. То что нужно! Получается, что потребность в FBO сразу отпадает, так как можно получить текстуру из дефолтного буфера.

var texture = gl.createTexture();

gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, element.width, element.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
gl.copyTexSubImage2D(gl.TEXTURE_2D, 0, 0, 0, 0, 0, element.width, element.height);