UPDATED: [HTML5][webGL] Mask not working

#1

Hi,
When using -Dwebgl The mask stops working.
The following code:

	var ct:Shape = new Shape();
	ct.graphics.beginFill(0);
	ct.graphics.drawRect(10, 10, 310, 310);
	ct.graphics.endFill();
	addChild(ct);
	
	var maskShape:Shape = new Shape();
	maskShape.graphics.beginFill(0xFF0000);
	maskShape.graphics.drawRect(20, 20, 80, 80);
	maskShape.graphics.endFill();
	addChild(maskShape);
	
	ct.mask = maskShape;

works fine without -Dwebgl, but when adding it I get no mask.
(tried -Ddom, didn’t help)

am I missing something?

1 Like
#2

UPDATE:

Converting the masked Shape to Bitmap, and adding it as a child to a Sprite,
will make the mask work with -Dwebgl:

	var ct:Shape = new Shape();
	ct.graphics.beginFill(0);
	ct.graphics.drawRect(10, 10, 310, 310);
	ct.graphics.endFill();
	
	var bmd:BitmapData = new BitmapData(300, 300);
	bmd.draw(ct);
	var b:Bitmap = new Bitmap(bmd);
	var s:Sprite = new Sprite();
	s.addChild(b);
	addChild(s);
	
	var maskShape:Shape = new Shape();
	maskShape.graphics.beginFill(0xFF0000);
	maskShape.graphics.drawRect(20, 20, 80, 80);
	maskShape.graphics.endFill();
	
	s.mask = maskShape;

but this doesn’t resolve my problem since in my project this shape is animated.

#3

Tried it myself, seems like masks work only on bitmaps with webgl…
the real issue i see here is that Android also aligns to this,
That means, Android’s Masks work only on bitmap targets…

Frustrating… maybe someone here knows of a trick to make masking work on shapes as well ?

1 Like
#4

This means that masks need to be improved in the OpenFL GL renderer, that’s why there’s consistency between Android and WebGL. After getting the skew matrix transform code in, I’d like to look at some of the code we’ve had for scrollRect improvements, then masks.

I wonder if it has something to do with using Cairo for shapes. We might just need to revisit how GL masking works