[HTML5] Switch between Canvas and WebGL through code


#1

Hello,

is it possible to define through Javascript code (or other means) whether the openfl project will run in webgl or canvas? We would like to offer a canvas mode to our users based on some soft factors like performance or user choice and I assume this should be possible without uploading a second build.

Any input is appreciated, thanks in advance.


#2

We support this in our NPM builds, I forget if choice of the runtime renderer is exposed right now in the Haxelib version.

If you use cacheAsBitmap or bitmapData.draw to force software rendering, then you could certainly do it using a custom parameter. In your lime.embed, set parameters: { } as an object with your own values, such as parameters: { forceCanvas: "true" } then use loaderInfo.parameters.forceCanvas == "true"; to check at runtime


#3

Any chance you would expose the setting in haxelib for us? Setting cacheAsBitmap = true; on each object sounds like some overkill that we would like to avoid for now. We tried a simple cacheAsBitmap = true; on our bottom Sprite, but the performance impact is too heavy and we lose all the advantage of performance boost that we see when we use -Dcanvas.

Thanks in advance


#4

What about doing it once on your top sprite, or calling bitmapData.draw once per frame, with all your other content off-stage?


#5

Hey,

thanks for your reply. I am not sure I understand that correctly, can you clarify? We tried cacheAsBitmap = true on the topmost Sprite (i.e. the Main Sprite) but we see 20 FPS then instead of the 60 FPS that we see in -Dcanvas. (Could be the same 20 FPS that we also see in WebGL without cacheAsBitmap = true).

How would bitmapData.draw on an empty stage help? Does it mean a single call to bitmapData.draw forces the whole scene to be rendered on the Canvas? What about all the textures that (I assume) have been created on the GPU to be rendered in WebGL, they would be useless overhead, no?

Thanks


#6

It might actually be possible to force canvas at runtime by doing { hardware: "false" } or { renderer: "canvas" } in the options within the lime.embed call. I’m doing a refactor of Lime that may help make this simpler, but I think these options may be respected even outside of NPM