Why are text objects more intensive with webgl?

I've been developing loot pursuit with webgl turned off for a while (I think it was for testing purposes or something, forgot to turn it back on), and when I set it back to webgl mode I was surprised - performance was utterly hammered. CPU use was way up, framerate was down, and the disk activity was maxed from the system page file increasing by gigs, getting to the point where the entire computer was locking up for seconds between rendered frames.

I went through the project and discovered it was the text objects. Admittedly I was using them in a very inefficient manner (it was only for debugging purposes so it didn't matter), doing lots of operations to destroy and create them each tick because I was having some difficulty placing them for a reason that I discovered later, but I was using them that way because there was no problem when webgl was turned off.

Why are text boxes so much harder for a computer in webgl mode?

I had other issue, custom webfonts won't apply texts while webgl is enabled. Otherwise, canvas mode worked custom webfonts.

WebGL can't actually render text like the canvas2D renderer can. So, to render text in WebGL mode, this happens:

1. Each text object creates its own canvas2D surface

2. Text is drawn to canvas2D

3. The canvas2D is copied to a WebGL texture

4. The WebGL renderer draws the texture in place of the Text object

If the text changes, steps 2 and 3 are done again. If the text doesn't change, it merely has a static WebGL texture to draw, which is about as fast as rendering a single sprite.

However there are two things which get really bad performance out of this, which I think you've already discovered:

1) If you create & destroy text objects every tick, it will be creating a canvas2D surface and WebGL texture every tick. The browser should garbage collect these to prevent it running out of RAM, but I guess it's not a well tested part of browsers because they don't expect anyone to be doing that! Also C2 is smart enough not to create a canvas or texture if the text object is not drawn, so you will only get bad performance if you create lots of on-screen text objects; off-screen ones should not ever create anything.

2) If you change the content of a text object every tick, it has to keep re-rendering then copying to a texture. Note this is only required in the WebGL renderer: the canvas2D renderer can just draw the text directly. For small objects this is fine, but when debugging games some people use window-size text objects printing loads of data. This can be pretty slow on some systems. It might be better to try using lots of separate text objects. For example, if a single text object is set every tick to "Object count: " & objectcount, then C2 is smart enough to only re-render the WebGL texture when the object count changes. If that's a single line in a giant text object that's continually changing, it will include that line in the re-rendering every tick.

Point 1 should be an easy fix (don't create and destroy lots of text!) and point 2 should not affect production releases (since you would generally only use large, constantly changing text objects for debugging). Very few people have noticed it really works like this, so I think for 99% of projects it's working perfectly well. But for certain edge cases it does help to be aware how text rendering in WebGL works.

I had other issue, custom webfonts won't apply texts while webgl is enabled. Otherwise, canvas mode worked custom webfonts.

You might want to see this thread

1) If you create & destroy text objects every tick, it will be creating a canvas2D surface and WebGL texture every tick. The browser should garbage collect these to prevent it running out of RAM, but I guess it's not a well tested part of browsers because they don't expect anyone to be doing that! Also C2 is smart enough not to create a canvas or texture if the text object is not drawn, so you will only get bad performance if you create lots of on-screen text objects; off-screen ones should not ever create anything.

2) If you change the content of a text object every tick, it has to keep re-rendering then copying to a texture. Note this is only required in the WebGL renderer: the canvas2D renderer can just draw the text directly. For small objects this is fine, but when debugging games some people use window-size text objects printing loads of data. This can be pretty slow on some systems. It might be better to try using lots of separate text objects. For example, if a single text object is set every tick to "Object count: " & objectcount, then C2 is smart enough to only re-render the WebGL texture when the object count changes. If that's a single line in a giant text object that's continually changing, it will include that line in the re-rendering every tick.

Lol agh

Not only was I destroying and creating a bunch of them every tick, they were all around 2000 x 2000 pixels, too. XD Thanks for the info, that helps a lot!

Thanks for the info! I found out that the text object was the "rotten apple" in my app. Deleting it set the fps in cocoon back to the 60's :D..

Anyways, I was trying to do a non-game app.. To be specific, a fabulous egg timer!! And it would a most helpful feature in a timing app to actually see the time left.

Isn't there any workaround for this at the moment?

My app isn't doing anything else at the moment, than setting the timer knob sprite angle and updating one text object(timer) every tick.. Still I get 4fps on cocoon when the text is updating, actually the fps drops only when I touch drag on screen to set the time..

**EDIT**

I should really stop being so hasty with my questions.. It says it in the topic: it's the webGL.. Disabling it keeps the fps up...

Move along <img src="smileys/smiley9.gif" border="0" align="middle" />

chef try sprite font instead. That should work with webgl. If you're on iOS though, using webgl causes some unrelated framerate problems through cocoonjs.

Sure I'll give it a shot.. I don't think ill be needing webGL for this app though.. Im getting good performance with webGL and iOS on other projects that are games and have a lot more goong on in the code.