How can I play a video with transparency?

Hi guys. I am aware of these 2 posts: Video Texture With Alpha Channel and Alpha don’t work on iOS Safari. However, I still can’t figure out how to do it.

I have a video that was created using these steps. You can find attached the sample video


Then there’s this tutorial that uses the video above, by creating a color texture and a mask texture and messing with their position and scale to make the alpha video work . I suppose this can be done in PlayCanvas as well? How?


Not sure if the shader still works in today’s engine but it sounds like you are looking for this approach: Video Chromakey Shader

It’s not a shader at all. If you look at the tutorial, it’s just using 2 textures, a color texture and a mask texture, and then configuring the position and scale of these textures. But I don’t know how to apply this on PlayCanvas. Unless there is shader working behind the scenes.

I don’t know what Zappar is doing under the hood. Looks like they are using texture on the opacity map of the material.

I don’t see how they are animating the mask texture unless that’s another video.

Given that the original video in their example is a green screen: Studio | Preparing Alpha Video

You can use the shader approach in the link I’ve given before

Oh, they do a side by side video:

That’s interesting, in which case on the material, you can untick offset and tiling to all:

Then on each property that has a texture, you can change the tiling (effectively scale) and offset (position)

And apply the video texture to both the opacity and the diffuse/emissive

1 Like

Ok thanks I’ll check this later

@yaustar I created an example project. I want to play the video on the screen. There is no material here, what should I do?



thaaaanks. You’re amazing!