mountainstorm Posted April 30, 2016 Share Posted April 30, 2016 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) thanks Link to comment Share on other sites More sharing options...
Recommended Posts