Jump to content

Filter and gl_FragData


Recommended Posts

I'm trying to draw a trail on a bitmap which shows where a sprite has been.  I can do this on the Canvas renderer pretty easily by just changing bitmap data - but I'd like to use filters; blur, bloom etc

Originally I thought I might be able to just use a filter and set the type to 'Phaser.CANVAS_FILTER', but that does't work.  

Using WebGL I can't draw the trail onto the bitmap as uploading the new bitmap to the graphics card kills the frame rate.  So I thought I'd try doing the trail drawing in a filter - should be much faster anyway.  My filter looks like this:

precision mediump float;

uniform vec2 topLeft;
uniform vec2 bottomRight;

varying vec2 vTextureCoord;
uniform sampler2D uSampler;

void main( void ) {
    vec4 color = texture2D(uSampler, vTextureCoord);
    if (gl_FragCoord.x > topLeft.x && gl_FragCoord.x < bottomRight.x &&
        gl_FragCoord.y > topLeft.y && gl_FragCoord.y < bottomRight.y) {
/*            if (gl_FragData[0][3] != 0.0) {
                gl_FragData[0] = vec4(1.0, 0.0, 0.0, 1.0);
*/            gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
    } else {
        gl_FragColor = color;

I basically update topLeft and bottomRight from Phaser using a uniform and it draws a red circle where my sprite is.  Unfortunately as it redraws 'each frame' I don't get a trail, just a small square.

By my thinking to get a trail I need some way of changing the original texture; which from what I read you can't do; or writing the changes into a FBO and then merging that with the original texture to get the display image.  From what I've read I think I need to use gl_FragData to save/read content from a FBO - but it doesn't work, and I suspect I'm missing some setup.

Does anyone have any examples or other solutions for this kind of problem?

For what it's worth I'm actually trying to erase a trail from an image (revealing the layer below)


Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...