stackgl/gl-fbo

WebGL framebuffer wrapper

gl-fbo's Issues

Repo URL in package.json is incorrect

It currently points to https://github.com/stackgl/fbo/ instead of https://github.com/stackgl/gl-fbo/.

API for changing mag-filter of render target texture?

Right now, you cannot specify the mag-filter of the render target color texture of the fbo in the API. But I think it would be useful if you could do that. My use case of that would be the following: In order to save performance, I am rendering to an FBO that is half the size of the screen(instead of the full screen size). I then use that FBO in a fullscreen pass in a shader. But since the mag-filter is always GL_NEAREST, this results in terrible artefacts(notice the artefacts in the bottom):

But if I change the mag-filter to GL_LINEAR, the problem is solved:

For this reason, I think it would be good if you could change the mag-filter through the API. Is it possible to add this feature to the API?

Depth extension not working with UNSIGNED_SHORT

When extension is present, FBO rendering is not including depth information. However, switching the texture format to UNSIGNED_INT works fine.

Will investigate and put together a reproducible example..

Multiple render target support

Need to update interface to take advantage of http://www.khronos.org/registry/webgl/extensions/WEBGL_draw_buffers/ when possible.

Extracting a texture before dispose

I have a use case where I want to render to a texture for later use, but I don't need the fbo object to stick around. Since dispose also wipes the texture, I've been doing this:

var texture = fbo.color[0];
fbo.color = [];
fbo.dispose();

This allows me to keep the texture object and still call dispose on the fbo, but is a little hacky. Is there a better pattern for this? If not, what would an acceptable API for this behavior be? Something like the following?

var texture = fbo.color[0];
fbo.dispose({preserveColor: true});

I'm happy to make a PR if we can find consensus.

preferred method for swapping textures

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];
    });

Framebuffer incomplete attachment in Safari

var createFBO = require("gl-fbo")
var gl = document.createElement('canvas').getContext('webgl')

createFBO(gl, [512, 512], {preferFloat: true})

Gives

Error: gl-fbo: Framebuffer incomplete attachment

That is one of the reasons why plotly does not plot in iOS plotly/plotly.js#280.
Possibly related to #14.

Support for half float textures

Like the title says, It would be really handy to add support for half float textures. This would be really beneficial for mobile devices

I'm not sure how the api would look, however the current preferFloat, float is a bit error prone and ambiguous if you consider { float:false, preferFloat:true }. Could it be better to just pass int gl.FLOAT or ext.HALF_FLOAT_OES directly?

fbo.js:47 Uncaught Error: gl-fbo: Framebuffer incomplete attachment

Recently I started getting this error by running example/example.js in budo/node@6/chrome/win7:

fbo.js:47 Uncaught Error: gl-fbo: Framebuffer incomplete attachment

It is related with gl-vis/gl-plot2d#1