Home › Forums › Programming › webm video alpha test demo
- This topic has 17 replies, 7 voices, and was last updated 2 years, 11 months ago by Avier3D.
-
AuthorPosts
-
2021-12-10 at 11:53 am #47912GLiFTeKCustomer
Hi all,
So I’m pretty psyched about the new ‘use canvas/video alpha’ settings option on the replace texture puzzle.
There’s a lot of potential with using this to create incredibly immersive effects, whether it’s just straight video, OR.. animated menus and interactive motion graphics effects.using this simple node setup i got it to work correctly…
I headed over to actionvfx.com and snagged some free cartoon style animations with ALPHA channels (what i was looking for to test).
Using Adobe After Effects, then exporting through Adobe MEDIA ENCODER, I converted these .mov files into .webm files (one of the alpha-channel compatible formats that verge3d can use).
Made sure I exported with alpha channel, then messed with resolution and bitrate to get a very low KB size for the resulting files.
in the demo i link here, – the full-screen cartoon smoke is 131KB
, while the small puff cartoon smoke video is only 68KB!Check out a very bare bones simple demo I made of this in action HERE!
I’d like your feedback on whatever mobile browser you may using.
I found the playback quality choppy on duck duck go’s mobile browser, but nice and smooth on Chrome and Firefox mobile.Fun stuff!
Attachments:
You must be logged in to view attached files.Visit the GLIFTEK Verge3D Plugins Store!
GLIFTEK.com for Plugin Documentation & LIVE DEMOS!
LIKE The GLIFTEK Facebook Page for updates!
Join the Verge 3D Discord Server!
plz share Discord link & on your signature!2021-12-10 at 4:38 pm #47963xeonCustomerMac OSX – Safari and Chrome – works fine
iOS – webm is not compatible.Xeon
Route 66 Digital
Interactive Solutions - https://www.r66d.com
Tutorials - https://www.xeons3dlab.com2021-12-11 at 1:34 am #47973GLiFTeKCustomerMac OSX – Safari and Chrome – works fine
iOS – webm is not compatible.However, I’m seeing this…
Another update to Safari 14 on macOS also added support for the WebM video codec, but this was never added to the iOS version of Safari. Now, with the WebM audio codec available in iOS, it’s probably only a matter of time before Apple adds WebM video support to its mobile operating system.
From link
So, if webm audio is already supported and webm video hopefully around the corner, it’s always good to be ahead of the curve, having production ready if and when that hopefully occurs.
In the meantime….
Also yuri stated “WebM and HEVC/MOV will work”
So I’ll try reducing the initially large filesize of the original animation files for a .mov example.
(Though probably won’t get near the same)Visit the GLIFTEK Verge3D Plugins Store!
GLIFTEK.com for Plugin Documentation & LIVE DEMOS!
LIKE The GLIFTEK Facebook Page for updates!
Join the Verge 3D Discord Server!
plz share Discord link & on your signature!2021-12-11 at 5:19 am #47974GLiFTeKCustomerI’m finding that https://www.ffmpeg.org/
Is something that should be able to encode HEVC(h.265) within an .mov container.So i tried https://www.shutterencoder.com/en/ with no good results.
So I’m going on with these experiments with WebM until any successful suggestions provide for the HEVC/MOV are available.
I’ll be updating the demo.
ie: flashy “menu” item above the gold cube…
https://v3d.net/6nVisit the GLIFTEK Verge3D Plugins Store!
GLIFTEK.com for Plugin Documentation & LIVE DEMOS!
LIKE The GLIFTEK Facebook Page for updates!
Join the Verge 3D Discord Server!
plz share Discord link & on your signature!2021-12-11 at 1:52 pm #47983Alexander KovelenovStaffBTW, we created a Wiki article on using video textures with transparency. Feel free to add your own recipes here.
2021-12-11 at 11:43 pm #47990GLiFTeKCustomerAwesome!
Visit the GLIFTEK Verge3D Plugins Store!
GLIFTEK.com for Plugin Documentation & LIVE DEMOS!
LIKE The GLIFTEK Facebook Page for updates!
Join the Verge 3D Discord Server!
plz share Discord link & on your signature!2021-12-12 at 3:41 am #47992JohnsonCustomerThis stackoverflow topic outlines how to encode webm with alpha that works in iOS when libvpx is enabled.
I haven’t tested it yet as I just found this today and I haven’t encoded a video as posting this– but let me know if it works on your end:
2021-12-12 at 4:48 am #47993GLiFTeKCustomerhmmm, I’m not on a mac, so don’t have direct access to Videotoolbox to encode.(used a mac with dual.. actually triple boot for ios / windows / ubuntu for a decade ).. messing with this… BrowserStack for cross browser compatibility testing.
webm videos didn’t play on my demo site i checked.Wonder if there’s another option for containing H.265 in an .mov…
So strange since apple’s discontinued quicktime support yet it’s the only way for their browsers to support it.i’m also making a “lotties files” plugin for the lottieLoader in three.js.
there’s so many limitations as to what after-effects modes and elements can be used in it though.exporting straight video for effects-heavy menus and other things is great with the webm route however.
Visit the GLIFTEK Verge3D Plugins Store!
GLIFTEK.com for Plugin Documentation & LIVE DEMOS!
LIKE The GLIFTEK Facebook Page for updates!
Join the Verge 3D Discord Server!
plz share Discord link & on your signature!2021-12-13 at 11:02 am #48014GLiFTeKCustomerupdated demo with new menu effects flare test (doesn’t support ios yet)
linkVisit the GLIFTEK Verge3D Plugins Store!
GLIFTEK.com for Plugin Documentation & LIVE DEMOS!
LIKE The GLIFTEK Facebook Page for updates!
Join the Verge 3D Discord Server!
plz share Discord link & on your signature!2021-12-13 at 12:10 pm #48016Yuri KovelenovStaff2021-12-14 at 5:08 pm #48036webCustomerI had to deal with videos containing alpha channels last year. The application had to run on pretty much every device (mobile and desktop). I researched that topic quite heavily at that time.
I’ve not directly used these videos in verge3d, but as part of a microsite. For pretty much every device which isnt that old webm as vp8 or vp9 works with alpha channel right out the box. Except apple, who whould have guessed that . I think the webm versions were also running on MacOS but not in Safari.
For apple devices you need to use .mov as a container and h265 as the codec.
Now the fun part: Encoding on windows the webm versions is quite easy with the adobe mediaencoder. Back then I needed to install an addon/hack in order to render webm out of mediaencoder. Dont know if this is still the case. h265: the only way back at that time was using a mac. Possible way one is using an encoder which comes prebuilt into the MacOS at a specific version. But sadly you dont have much control over bitrates and stuff. The better but the be paid option is to use compressor, there you got better control over the different encoding settings.
I dont know if this still applies today or if there is anything different when using the videos directly in verge.
Hopes this help
2021-12-17 at 1:50 pm #48121GLiFTeKCustomeryeah thanks web,
that’s the case.
looks like i’m gonna have to do a hackintosh macOS alternate boot just to do that h265 compression with videotoolkit.in the meantime.. made a new update with curved surfaces to the demo.
Visit the GLIFTEK Verge3D Plugins Store!
GLIFTEK.com for Plugin Documentation & LIVE DEMOS!
LIKE The GLIFTEK Facebook Page for updates!
Join the Verge 3D Discord Server!
plz share Discord link & on your signature!2021-12-19 at 7:12 am #48155GLiFTeKCustomerfinally got the lotties files plugin working after many many tries.
heres a simple demo of it working.
should be up for sale soon!click cube to change animations.
animations will show on cube and screen planethe star animation is a JSON file that’s 30kb.
the circle and text animation is 4k.
EDIT: Firefox was slightly choppy, while Chrome was not.
the plugin which contains the necessary libraries within it is 271kb.
just weighing out the file size efficiencies of the transparent very compressed webm video files vs lottie.
Visit the GLIFTEK Verge3D Plugins Store!
GLIFTEK.com for Plugin Documentation & LIVE DEMOS!
LIKE The GLIFTEK Facebook Page for updates!
Join the Verge 3D Discord Server!
plz share Discord link & on your signature!2021-12-20 at 7:14 am #48167Yuri KovelenovStaff2021-12-27 at 12:36 am #48312GLiFTeKCustomerawesome news!
Updated to the demo its user docs demo will have with a carousel…
Link
Just rotate with side buttons and press play /pause
Visit the GLIFTEK Verge3D Plugins Store!
GLIFTEK.com for Plugin Documentation & LIVE DEMOS!
LIKE The GLIFTEK Facebook Page for updates!
Join the Verge 3D Discord Server!
plz share Discord link & on your signature! -
AuthorPosts
- You must be logged in to reply to this topic.