WebGL copy texture framebuffer to texture framebuffer?

Question

I am trying to copy a texture framebuffer to another one in WebGL, and so far it just gives an black screen. I am able to render in the texture framebuffer without problems.

Here is the code I thought that would work (it currently works on iOS):

// bind source fbo while we remember current fbo
glGetIntegerv(GL_FRAMEBUFFER_BINDING, &current_fbo);
glBindFramebuffer(GL_FRAMEBUFFER, src_framebuffer);

// setup source fbo attachments
glFramebufferTexture2D(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_TEXTURE_2D, src_handle, 0);
//glReadBuffer(GL_COLOR_ATTACHMENT0); <- commented out because it is not available in WebGL

// bind destination fbo
glActiveTexture(GL_TEXTURE0 + i);
glBindTexture(dest_target, dest_handle);

// copy from source to dest
glCopyTexImage2D(dest_target, 0, dest_format, 0, 0, dest_width, dest_height, 0);

// set back original fbo
//glReadBuffer(GL_NONE); 
glBindFramebuffer(GL_FRAMEBUFFER, current_fbo);

WebGL doesn't support glReadBuffer so I can't specify it, however with the WEBGL_draw_buffers extension it support multiple render targets so we can set attachments no problem (hence why the render to texture framebuffer work flawless).

I realize that since I can't specify the read buffer, perhaps this technique just can't work? Any thoughts or work-arounds?

@gman Yes, it is because I am compiling my code through Emscripten, so it still ends up being WebGL after all. — Deathicon

Deathicon Deathicon · Accepted Answer · 2017-05-30T16:00:22

If you can use WebGL 2.0, you can simply do:

gl.bindFramebuffer(GL_READ_FRAMEBUFFER, src);
gl.bindFramebuffer(GL_DRAW_FRAMEBUFFER, dst);
gl.blitFramebuffer(src_left, src_bottom, src_right, src_top, 0, 0, dst_width, dst_height, mask, GL_NEAREST);

Otherwise I suppose it is right to use gl.copyTexImage2D. A more detailed answer can be found here.

WebGL copy texture framebuffer to texture framebuffer?

2 Answers