Playing animation sequences on 3D Mesh (texture and alpha) | PlayCanvas x Zapworks

Help & Support
1

Hi!

I’m currently developing an experience for a big brand using playcanvas in combination with Zapworks. In this experience we have to use a lot of video footage on 3D meshes to set the scene.
I was wondering if this was possible and if so how to do this. I watched a lot of projects on this forum but can’t seem to find something that works for me (watched a lot of falling tv projects). (getting a lot of “cannot parse audio file” errors).

My second question is if you are able to use a video or sequence as an animated opacity mask. We want to do a grand reveal of the background using the opacity to animate an image.

Looking forward to hearing from you guys, thanks in advance!

2

Hi @DampedFred and welcome,

Did you try the official example here, does this work for you?

https://developer.playcanvas.com/en/tutorials/video-textures/

About this yes it will work, though I may vaguely remember some compatibility issues on iOS. It may have been fixed on the OS side
(Safari) though. You can give it a try.

3

Hey Leonidas!
I’ve tried that tutorial several times now but the problem here is that I keep getting the error: "Error loading audio URL: “Unable to decode audio data”. Now that I’m typing this error, i’ve come to the realisation that the video itself probably doesnt have audio. Is that an issue for the use of this mp4 you think?

4

That’s a strange error, this may be related:

Can you try on another browser / update your existing browser?

5

There’s also this example
http://playcanvas.github.io/#/graphics/video-texture

1 Like
6

My main browser is chrome, this one is up to date. I’ve tried it on the Safari browser and this gives a network error when trying to find the mp4 file. The video is set on preload as are the scripts so I guess the script has to see the video and that that’s not the problem.

7

Are you using the example .mp4 video file provided with the example?

8

Looks like this example works on safari, but doesn’t work on chrome for me.

9

I will try this now!

1 Like
10

The video doesn’t have any audio which is probably why the error comes up.

There’s an issue with Safari and security where it doesn’t like playing it in the launch tab. It works fine when you publish though

1 Like
11

Odd that it doesn’t work on Chrome, I’ve just tried on Mac and Windows with no issues using Chrome :thinking:

12

Yeah on Chrome I have a grey screen (on the github site) and on safari the animation starts playing :sweat_smile:

13

Hmm, I can confirm it doesn’t start autoplay (Chrome, Ubuntu) if the link opens the example directly, or refreshed on it. However it starts, if I pick some other example, then click on video texture example.

14

I’ve seen the grey screen few times last week as well when doing some cleanup to the examples. Sometimes I had to open new tab to get it to work, sometimes switch to different example and then back to the video one. Sometimes it felt like it could play only one time and needed some reset somewhere. I assumed it was only my local built … but managed to see it on that link above just now few times as well.

15

Hmm… I will have to another look if auto play isn’t working. Just need a way to repro this :thinking:

Edit: I can’t seem to reproduce this issue across different browsers (Chrome or Firefox). Do you have any extensions that could be causing issues? Adblock etc?

Can you try incognito?

16

No autoplay when turning off adblock or browsing in incognito for me.

17

I’ve just made a change to the code, can you try again please?

18

still the same on this link: PlayCanvas Examples :grinning_face_with_smiling_eyes:

19

I’ve tried importing my 3D model into the example project and the video starts playing there without any issues. Could it be that it’s because I have to try this on mobile because of the Zapworks connection? or shouldn’t this be a problem?

20

Ok if I turn of “mobile only” on the zapparBrowserUtil script the animation starts playing! But for some reason this doens’t happen on mobile, since it will be a mobile filter to use in stores we really need this to work on mobile devices too… :confused: