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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

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