Enable "willReadyFrequently" for lime's canvas

#1

Hello!

I am implementing isometric game with OpenFL targeting HTML5, so initialization process requires creating plenty of animations from SWFs MovieClips(500+) by rendering them into BitmapData for isometric needs (hit testing; fast rendering 10000+ objects; clipping, etc.), but it takes 12 seconds on my desktop and >1minute on good phone.

I would like to speed it up and, fortunately, Chrome complains about it too:

Canvas2D: Multiple readback operations using getImageData are faster with the willReadFrequently attribute set to true. See: HTML Standard

It seems that it’s impossible to append property “willReadFrequently” to canvas(context?) AFTER it was already created.
Is there a way to add properties to canvas/context upon creation?
And also I would take any advice on speeding up MovieClips → BitmapData transformation ^^

Thanks in advance!

#2

At the moment Lime’s API doesn’t offer a property to set that option. Furthermore it’s not guaranteed that this will indeed give you a performance boost.

However you might want to test this by navigating to your Lime’s installation folder src/lime/_internal/graphics and modify the following two lines of ImageCanvasUtil.hx

to include { willReadFrequently: true }

2 Likes
#3

@obscure Thank you! Indeed, silly me, I can just alter the existing code or the one that was generated which I actually now tried.
That particular step (422 MovieClip frames → 2647 Bitmaps rendering) went from 10 seconds to 6 seconds. Also got rid of ChromeDevTools warning which is also cool.
So what should be my next step? Switch from “haxelib install openfl” to using download OpenFL repo with my modifications or nag OpenFL developers to introduce an option to alter context creation from client code?

#4

We use software rendering for HTML5 and were very disappointed with the performance of filters. We were almost ready to switch everything to rasterized images, but after digging into the code, we found the possibility to activate the willReadFrequently attribute. This change increased the performance of filter application and removal several times over.

We don’t use WebGL for HTML5 rendering because, on Windows, fonts become blurry when system scaling is above 100%. For those who rely on software rendering, this is an excellent solution.

Here is our implementation of mentioned part of code:

	public static function createCanvas(image:Image, width:Int, height:Int):Void
	{
		#if (js && html5)
		var buffer = image.buffer;

		if (buffer.__srcCanvas == null)
		{
			buffer.__srcCanvas = cast Browser.document.createElement("canvas");
			buffer.__srcCanvas.width = width;
			buffer.__srcCanvas.height = height;

			if (!image.transparent)
			{
				buffer.__srcCanvas.setAttribute("moz-opaque", "true");
			}

            buffer.__srcContext = buffer.__srcCanvas.getContext("2d", {willReadFrequently: true, alpha: image.transparent});
		}
		#end
	}

I can create a pull request for this. However, we haven’t conducted exhaustive testing, especially in cases where WebGL is used.

That said, for software rendering with filters, this is a must-have.