ColorMatrixFilter on non-webgl html5 targets

#1

I’m playing with the new ColorMatrixFilter and it works great using -Dwebgl, but it does not on other (canvas&dom) renderers.

I see in the source that it has a software implementation. that should run on that renderers.

Applying that filter manually to BitmapData via applyFilter actually causes the software implementation to run, but it does not update the target bitmapData.

Applying through bitmap.filters = [filter] works great on webgl but does not trigger the software implementation…

Please help :slight_smile:

Ps. May be related to this: Applying a ColorMatrixFilter to Sprites in HTML5

#2

In hardware, there’s a way to run a color matrix change with a shader, without making very expensive calls. In canvas (AFAIK) there is no way to do it without a costly duplicate of the canvas in order to make the change. That is why (currently) the color transform and color transform matrix values are disabled in the canvas renderer, but if you bitmapData.draw then applyFilter you should be able to get the same effect (though with awareness of sort of what’s required to make it happen – not ideal for constant frame-by-frame changes)

#3

I’m aware that software filters require a copy of original pixels, but I need a software fallback for dom & canvas.

Here is the code I’ve tried earlier. I’ve added the draw call you suggested but it didn’t help… I can see in the running code, that the filter loop is doing its thing, but the displayed bitmap is not updated on screen.

	var originalBitmapData:BitmapData = bitmap.bitmapData.clone();
	var filteredBitmapData:BitmapData = bitmap.bitmapData.clone();

	filteredBitmapData.draw(originalBitmapData);
	filteredBitmapData.applyFilter(originalBitmapData, originalBitmapData.rect, new Point(), filter);

	bitmap.bitmapData = filteredBitmapData;
#4

Oh, looks like it’s bitmapData.colorTransform that I was using, working in a couple production projects at the moment

#5

Yeah, ColorTransform works, but it uses only one channel as input…

Actually, I got around the problem by calculating look-up-tables for a transform and applying them with setPixels - it is even faster then ColorMatrixFilter even if it worked :slight_smile:

#6

How did you do it? I am not very used to this kind of operations, but I should implement color transform (saturation, hue, brightness…) for my project

#7

I’m using a small, 16bit pallet, so I was able to generate LookUp Tables for all pixel values in my case. Then applying those LUTs to bitmapData is super fast.

For bigger color depths you can’t do LUTs, they take too much memory. If software filters are too slow, and you are targeting OpenGL then you can use super-fast Shaders: