Showing transparent WebM Video in an a-video element (8-frame)

🧑‍💻 Technical Support
1

Hi there, we are facing a rendering issue in our self hosted 8th wall project, using 8-frame framework. We have created some WebM videos with transparency / alpha layer, which we successfully tested by playing in mobile web browser. However, when played in an a-video entity, the videos don’t render the alpha at all. The video appears with black or white bars instead, so the alpha layer is not decoded or applied to the output.

How can we resolve this? For example, one of the video tags:

<a-video
                    src="/03/content_video.webm"
                    width="2"
                    height="1.125"
                    position="0 1 1"
                    rotation="0 45 0"
                ></a-video>

Adding transparent=true did not make it work.

2

If you check out our green screen video sample project, you’ll notice the video surface uses a custom shader to make green areas transparent. You can use similar logic to create a custom shader that targets the alpha channel instead of green. You can view the custom shader from the sample project here: