I want to use multiple image targets with videos containing alpha layered on top of each other (similar to Magic Photos template but with videos that have transparency and two videos layered on top of each other).
I have used the Green Screen Video template as a base for my code and just duplicated the section that specifies the video files. One chroma key is set to green and one is set to black. Please see my code further down for explanation.
My problem is that the videos don’t load correctly. When the phone first finds a target, it directly displays all videos at once (iPhone 13) instead of the two once I have selected. The second time it displays it correctly on Iphone but on android it does not even seem to open the experience even. See screen shots.
I’m taking a look at the project now. Here’s a video I recorded of the experience on my device, is this the expected behavior that you’re not seeing on other devices?
Thats indeed the behavior I would expect. What phone are you using?
For me the problem occurs the first time the phone finds a target image (see video here: RPReplay_Final1736975348.mov - Google Drive). When the camera sees a target tracker initially, it will play all three of the videos at once instead of the once selected (as shown in your example).
All the following times the camera sees a target image the videos seem to play the videos correctly. On Android it does not seem to load the project at all though.
I am new to coding so wondering if there is anything wrong in the naming or structuring of the target-video section? I noticed that in the template Magic Photos template they use:
I’m using an iPhone 15 Pro Max using Google Chrome. What phone(s) are you testing with where you’re seeing the problems? Can you test with Google Chrome and see if you still see the issue?
It seems to me like your code is correct and there might be a problem with the shader’s device compatibility.
I am using iphone 13 and sadly the problem persists in Chrome. As for the other two Androids they are older than 3 years (waiting to get the exact models to be confirmed).
Do you know if there is any other way to structure the project so it works for multiple target trackers with alpha videos for more devices?
Could one potentially use other ways than chroma keying to displace the videos transparency?
I’ll be able to look into this tomorrow when I can get my hands on an iPhone 13 to test. Once I’m able to test, we can explore alternative solutions as well.
Thank you for getting back to me so quickly. That looks about right. Did you land the code? When I try the experience I still have the same issue (all videos are still showing on the first load).
How exactly should I implement the hideImage? I am new to code so sorry if it is a stupid question
Thank you for landing the changes. It still seems like it is a problem with the loading of the videos though.
Now, when you load the videos there is a black box that appears for a few seconds on the initial time the target-videos are loaded (see video attatched). Is there a way to correct this?
Thank you for the tip Evan. I landed your changes but sadly, the black screen still appears when the video first loads. See screen shot attached. Is there any other way I can use transparency in videos?
Interesting I didn’t see this on our test device but I do have a suspicion that this could be related to the speed at which the content is fetched over the network and then the shader takes some amount of time to process the video texture. If you want to test this you could try with a really small green screen video file.
I would work around this by loading the videos and positioning them out of view of the camera and then moving them to where they should be when the image target becomes visible.
