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?

Thanks!

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?

Example: https://playcanvas.com/project/984940/overview/f-video-textures-transparency

2 Likes

thaaaanks. You’re amazing!