Canvas object & WebGL - memory issue [solved]

I am making a new post with an issue I was already talking about here, because I don't think it a browser specific issue anymore.

Alright, so the problem I am facing is: I am trying to make an erase effect or fog of war effect using the canvas object and a sprite with destination out effect. Here is the capx. What I am noticing is that with WebGL on, there is a huge increase in the use of memory. Memory keeps accumulating to a point where the game would stop briefly and then the memory is flushed out and the game resumes to do the same again.

What I have tried is to disable all actions on the canvas but as long as the canvas is visible the same trend is observed. And this is going to worsen with increasing canvas size.

Also the erase effect works very well with just canvas2D rendering.

I am wondering if this is a bug or if there could be room for some kind of optimization in webGL.

I am planning to make a plugin/a behavior for this effect. So if this is issue can be fixed, it would help greatly. Thanks.

Increasing memory followed by a pause and reduction in memory is normal behavior for javascript, because it uses garbage-collected memory and the pause/reduction is the garbage collection running. However, it shouldn't be much worse when you enable WebGL.

In this case I think there's a big memory leak in R0J0hound's Canvas object in WebGL mode:

    instanceProto.drawGL = function(glw)

     {

          glw.setBlend(this.srcBlend, this.destBlend);

          glw.setTexture(this.runtime.glwrap.loadTexture(this.canvas, false, this.runtime.linearSampling));

It's loading a copy of the entire canvas in to memory every tick which is going to waste something like 70mb of memory every second, and eventually the garbage collector realises most of them aren't being used any more and throws them away. It's a bug in the plugin, the developer needs to fix it (@R0J0Hound: glw.deleteTexture()), but it is still inefficient, it may be best simply to leave WebGL off when using the Canvas plugin.

FYI creating and destroying objects a lot is inefficient - why not use one 'eraser' object and change its position?

Danijerry

Re-download the canvas plugin, that memory leak should now be fixed.

I also second Ashley's suggestion to leave WebGL off when using the canvas plugin. The webgl portion of it needs to be rewritten so it is more efficient. As it is now it's sort of a hack that uses a 2d canvas as a backend.

Ashley Thanks for the reply and suggestions.

R0J0hound Thanks for the fix, it works. And thanks for the plugin it is an essential addition.

I understand how it works now and I shall follow your suggestions.

Ashley

Actually that's my mistake not r0j0's (: (I sent him this change some month ago 'cause I wanted to use a webGL compliant canvas)

Is there a way to have a canvas plugin for webgl... without using 2D canvas then?

Yann - it can be done but you'd have to reimplement every canvas 2D function in WebGL, which is a lot of work really, and you'll lose the ability to draw text. TBH I think advising to turn WebGL off is the best solution in this case.

Even without the ability to draw text, which I don't think is that important anyway, I hope someone will make it work with webGL someday. It would be great to have webGL speed and canvas at the same time!

Well, even if it's not super fast as it could be, it I observed better performances with webGL than without it. That was mostly why I did add this modification.

can u do eraser for drawing