Transparent videos (webm) are not rendered correctly.

[bp74]

Problem 1: Currently transparent WebM videos are only supported in Chrome. Problem 2: Even in Chrome transparent videos are not correctly rendered.

Example: http://playground.test02.atomik-gaming.be/video_tests/transparency.html

[bp74]

Transparent videos are correctly rendered in the current Dartium browser.

[bp74]

Tested in Chrome Canary (currently at version 42) and finally transparent WebM videos look fine! Unfortunately Firefox nightly still doesn't support it - same with IE of course.

[sebgeelen]

Because we use the html5 video element as a buffer for StageXL video, I'm afraid it's the duty of the browser to support the .webm ... Nothing can really be done in StageXL right

[bp74]

Yes. It's impossible to get the transparent video to a WebGL texture without the help of the browser. There are two possible solutions to this problem. The first one is the chroma key filter you were using in the past, or a technique where the RGB and Alpha channels are split and a specialized shader renders the video. If you can produce videos like this, it would be easy to integrate it in StageXL.

If you have a transparent video which is 320x240 pixels in size, you have to create a video which is 320x480 pixels in size. The upper 240 pixels show the RGB values of the video. The lower 240 pixels are just a grayscale version of the alpha-channel. The shader will render a video which is 320x240 pixels in size, the RGB values are taken from the upper half of the video and the Alpha value is taken from the lower half of the video.

[bp74]

Here is a picture of the technique i tried to explain in my previous post. A picture is worth a thousand words, right?

http://stackoverflow.com/questions/5055962/how-to-create-an-h264-video-with-an-alpha-channel-for-use-with-html5-canvas

[meibegger]

I want to implement this using StageXL. I'm new to this and started with trying to get a transparent stage for your "Getting started" example - so that the HTML in the background is seen. But the stage is always rendered in white ... I tried StageXL.stageOptions.backgroundColor = Color.Transparent; StageXL.stageOptions.transparent = true; and stageOptions.backgroundColor = Color.Transparent; stageOptions.transparent = true; var stage = new Stage(canvas, width: 800, height: 600, options: stageOptions); but it doesn't seem to work. Is there an easy way to get a transparent stage?

[bp74]

Hi, thanks for the question. You did everything right but i just found out that there is a bug in StageXL, sorry about that. I have opened a new issue with the problem, see issue #207. There is also a simple workaround for a quick fix.

[bp74]

@meibegger I woud recommend to take a look at the current implementation of AlphaMaskFilter. The technique shown above is pretty similar to the AlphaMaskFilter. You just need to change the "fragmentShaderSource" to use the "mskColor.r" instead of "mskColor.a".

https://github.com/bp74/StageXL/blob/master/lib/src/filters/alpha_mask_filter.dart#L121

The AlphaMaskFilter uses BitmapDatas and you can get two BitmapDatas from the video (one for the colors, one for the alpha channel) like this:

var videoBitmapData = new BitmapData.fromVideoElement(videoElement);
var colorBitmapData = new BitmapData.fromBitmapData(videoBitmapData , new Rectangle(0,0,320,240));
var alphaBitmapData = new BitmapData.fromBitmapData(videoBitmapData , new Rectangle(0,240,320,240));

var transparentVideo = new Bitmap(colorBitmapData);
transparentVideo.filters = [new VideoMaskFilter(alphaBitmapData)];
stage.addChild(transparentVideo);

[meibegger]

impressed!!!

[meibegger]

Hei :)

i just read your post to Microsoft about IE11 switching to software rendering mode for WebGL, so i thought, i share my findings ...

Concerning frame-rates this is a nuisance of course, but this switch also has an effect on the HTML5-Video-Colors-Bug - with hardware-acceleration IE displays white as light gray and black as dark gray :/ (see this post as an example http://stackoverflow.com/questions/19478909/html5-mp4-video-ie-issue-turns-white-into-gray). So if you use 2D-Canvas (IE<11) to implement the alpha-strategy described above, you get a light gray background and a slightly transparent "opaque" area (uaaaaaaaa).

And on pages with WebGL-Elements, normal videos are also displayed in the correct colors - so the above strategy works.

With software-rendering the transparency is OK, but the frame-rate is low ... width hardware-acceleration the frame-rate is high, but transparency s***s ...

Any ideas? kopfschüttel