Ar.js: Augment A Transpirant(Alpha) Video on HIRO

[jamess922]

Hi there:
I have been searching for how to augment a Transparent (Alpha) Video on HIRO with AR.js for a while,but still don't know how to make that happen, is that even possible to augment a Transparent (Alpha) Video on HIRO with AR.js ,any demo ?

[kalwalt]

@jamess922 you can do with Three.js, you can found many resources googling, for example: https://github.com/SunriseFox/Three-Transparent-Video
basically you should use a glsl shader and a texture with an alpha channel. I have not tested that code, it' is just an idea.
Instead If you want to use i think you can do the same passing the video texture to a shader.
Hope that this can be useful...

[agusalex]

In a-frame, there is a property for your object material called alphaTest if you set that to less than 1 eg. 0.9 you can play an alpha channel enabled transparent video on ar.js too. I used it to make a futuristic HUD, the problem is AR.js is too flickery for that (at least when I tried). Something like this if I remember correctly (sintax may be wrong im on my phone atm) <a-video material="alphaTest:'0.9'"></a-video>

[jamess922]

Thank you I will give a try

[jamess922]

@agusalex which video format you were using? I just try with webmmaterial='transparent:true;alphaTest:0;src:#video'video just playing with black background

[agusalex]

Got it working, there is an issue on a-frame 0.9. On 0.8 works just fine you don't even need to set transparency. I used webm for the video, try this one
https://glitch.com/edit/#!/a-frame-alpha-test

[agusalex]

Sorry forgot to set it up for ar.js, its quite the pain don't ask how I found out a while back.
https://github.com/agusalex/arjs-alphachannel-video
So yes its confirmed a-frame 1.9 breaks alpha channel

[jamess922]

I find another problem,the transparent video(.webm) i used has different background from the video in your example,my video has a black background ,looks not right for A-frame,so could you show me how to make a right transparent video for A-frame.

[agusalex]

I'm sorry, I don't make them myself they were designed for a project but I only did the coding.

[jamess922]

OK I will try to find out how
and you were using with an Android cellphone right ? because i tried with my iphone 7(Safari) ,not working

[jamess922]

Looks at present Safari doesn't support WebM video format.

[droid001]

There's a lot of video related things which desktop/mobil Safari doesn't handle. Take for instance just serving .mp4 video you have to have the server configured to handle byte ranges. In the development environment it's also tricky as your default express or php server doesn't output video which is Safari compatible.

[nicolocarpignoli]

close as no discussion is going over here, or at least no more