Circular mask on html5 target

#1

I build circular mask on .swf demo and it works great. But I have problem on html5 and Android target.
You can see results on video mask (left is flash, right is html5 webGl target). It works correctly with -Dcanvas target but I would like to run it on webGl. Is there solution?

#2

Are you tweening the mask? If you are using the the new-tween, then try using the classic tween. In some cases I converted the tween to frame by frame animation, to make it work on html5.

#3

No I don’t use tween. I use EnterFrame event, set mask and use

 sprite.graphic.draw()

to dynamically draw circle.

#4

I believe it’s supported in HTML5 -Dcanvas or native -Dcairo, but in OpenGL we need a shader-based masking solution. We’ve made progress so far (with the addition of cacheAsBitmap support in the renderer) and hope to support this in the future

#5

I’ll definitely need OpenGL for this feature because on Android it acts same as on WebGL target.

#6

Here’s a shader-based mask for bitmaps that may be helpful:

    public static function maskBitmap(bitmap:Bitmap, mask:DisplayObject):Void {
        #if flash

        bitmap.mask = mask;

        #else
        var shader = new Shader ();
        shader.glFragmentSource =
            "varying float vAlpha;
            varying vec2 vTexCoord;
            uniform sampler2D uImage0;
            uniform sampler2D uImage1;

            void main(void) {

                vec4 color = texture2D (uImage0, vTexCoord);
                float mask = texture2D (uImage1, vTexCoord).a;

                if (color.a == 0.0 || mask == 0.0) {

                    gl_FragColor = vec4 (0.0, 0.0, 0.0, 0.0);

                } else {

                    gl_FragColor = vec4 (color.rgb / color.a, mask * color.a * vAlpha);

                }

            }";


        var alphaBitmapData = new BitmapData(bitmap.bitmapData.width, bitmap.bitmapData.height, true, 0);
        alphaBitmapData.draw(mask, bitmap.transform.matrix.invert());
        shader.data.uImage1.input = alphaBitmapData;
        bitmap.filters = [ new ShaderFilter (shader) ];

        #end
    }
#7

This might also work with bitmap.shader = shader; in OpenFL 6

#8

Here’s some changes that may also work, but it’s a work-in-progress

#9

So I created this circular mask using Shader as @craigr suggested. Mask is OK but it’s little bit slow and doesn’t “circle” smoothly as you can see: http://test.dfabrik.cz/digitcrush/. Any advices?