[HTML5] How ColorMatrixFilter does terrible things to bitmaps


#1

It took us 2 days to find the cause of very strange visual bugs with transparent images… now we know!
After applying ColorMatrixFilter to a bitmap, it’s type is changed from CANVAS to DATA, making it deadly to any other bitmap. :slight_smile:
Actually, the new type (DATA) may not be the problem, but after a bitmap with applied ColorMatrixFilter is copied onto another bitmap thru copyPixels(), the victim becomes corrupted for the rest of the session (see the “bad” example).

Example of bitmaps being copied over each other without ColorMatrixFilter: http://test.neborya.ru/assets/bwf/good.html
The same example but with applying ColorMatrixFilter to one of the bitmaps: http://test.neborya.ru/assets/bwf/bad.html

class Main extends Sprite 
{
	public function new() 
	{
		super();
		
		var bmdStage:BitmapData = new BitmapData(700, 360, false);
		var bmdScreen:BitmapData = Assets.getBitmapData("img:assets/img/screen.jpg");
		bmdStage.copyPixels(bmdScreen, new Rectangle(0, 0, bmdScreen.width, bmdScreen.height), new Point());
		addChild(new Bitmap(bmdStage));
		
		var bmdFrameSource:BitmapData = Assets.getBitmapData("img:assets/img/frame.jpg");
		var bmdFrame:BitmapData = new BitmapData(bmdFrameSource.width, bmdFrameSource.height, false);
		bmdFrame.copyPixels(bmdFrameSource, new Rectangle(0, 0, bmdFrameSource.width, bmdFrameSource.height), new Point());
		bmdFrame.applyFilter(bmdFrameSource, new Rectangle(0, 0, bmdFrameSource.width, bmdFrameSource.height), new Point(), new ColorMatrixFilter([0.3, 0.6, 0.1, 0.0, 0.0, 0.3, 0.6, 0.1, 0.0, 0.0, 0.3, 0.6, 0.1, 0.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0]));//contamination
		bmdStage.copyPixels(bmdFrame, new Rectangle(0, 0, bmdFrame.width, bmdFrameSource.height), new Point((bmdStage.width - bmdFrame.width) / 2, 50));

		var bmdLayer:BitmapData = Assets.getBitmapData("img:assets/img/layer.png");
		bmdStage.copyPixels(bmdLayer, new Rectangle(0, 0, bmdLayer.width, bmdLayer.height), new Point());
	}
}