Skip to content

preferred method for swapping textures #16

@aferriss

Description

@aferriss

I'm running a few textures in a feed back loop like so.

  1. An initial texture is filled with image data from a file.
  2. The texture is drawn in a fbo and some shader
  3. The fbo texture is drawn to screen using a base shader ( gl_FragColor = texture2D(tex0, uv); )
  4. The initial texture is filled with what is being draw on screen
  5. Go back to step 1.

What is the best way to get what is currently being rendered to the screen back into the texture? I got things working using glCopyTexImage2D, but I think it is actually copying pixels, and I just need to move the texture data around. Right now my render loop looks like:

    shell.on('tick', function(){
        var gl = shell.gl;

        fbo.bind();
        invertShader.bind();
        invertShader.uniforms.tex0 = texture.bind();
        drawScreen(gl);
    });

    shell.on('gl-render', function(){
        var gl = shell.gl;

        shader.bind();
        shader.uniforms.tex0 = fbo.color[0].bind();
        drawScreen(gl);

        gl.bindTexture(gl.TEXTURE_2D, texture.handle);
        gl.copyTexImage2D(gl.TEXTURE_2D,0,gl.RGBA,0,0,shell.width,shell.height,0);

    });

Is this the best way to go / are there any alternate solutions?

Essentially what I want to be able to do is swap my textures so that at the end of my render loop, I can set texture = fbo.color[0]. However doing this makes webgl angry and I get back GL ERROR :GL_INVALID_OPERATION : glDrawArrays: Source and destination textures of the draw are the same.

I know that it would work by adding a temporaryFbo into the render cycle like so, but I was hoping to keep it as minimal as possible. It seems like an unnecessary step since the texture is already there and being drawn on screen.

    shell.on('tick', function(){
        var gl = shell.gl;

        fbo.bind();
            invertShader.bind();
            invertShader.uniforms.tex0 = texture.bind();
            drawScreen(gl);

        tempFbo.bind();
            shader.bind();
            shader.uniforms.tex0 = fbo.color[0].bind();
            drawScreen(gl);
    });

    shell.on('gl-render', function(){
        var gl = shell.gl;

        shader.bind();
        shader.uniforms.tex0 = tempFbo.color[0].bind();
        drawScreen(gl);

        texture = tempFbo.color[0];
    });

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions