Transparent (webm) Video

Hi… I’m keen to know if anyone has managed to cast a content-accurate shadow from a webm video?

I ask, as so far I’ve only been able to get the video to cast a shadow of the ‘plane’ shape of the mesh that the vid is on; instead of what I’m hoping for which is an animated shadow of the video content.

Extra Note
The webm format seems to work fine on desktop and some mobile devices, but not in Oculus Browser (using a Quest 2). So in addition to the above question, if anyone knows of a file format that allows for animated content with alpha transparency which casts accurate shadows and which can be used with Needle Tools and is supported by Oculus, please shout :grinning:

Okay, I think that’s ‘all’ :sweat_smile: for now.

Big thanks, in advance, for any help and advice :slightly_smiling_face:

Original Post on Discord

by user 908977119781060648

Hi! So what should work pretty easily is cutout shadows - that is, not 0…1 transparency but with a threshold at 0.5 or so (like cutout materials).

Transparent shadows seem to still not be available in three.js; I bumped the relevant PR, maybe we can merge it in our fork for Needle Engine (Add Shadows for Transparent Objects by gkjohnson · Pull Request #15999 · mrdoob/three.js · GitHub for reference)

I believe webm should also work on Oculus Browser, but not 100% sure to be honest

Awesome, many thanks for that @herbst​:cactus: , I’ll give it a go :+1:

Just for general reference re: the Oculus (sorry, Meta :slightly_smiling_face:) browser… unfortunately there appear to be a few formats it doesn’t fully support just at the moment. For example, as well as the webm issue it seems that lotties fail to animate when in it. It’s probably all on Meta’s to-do list somewhere :slightly_smiling_face:

by user 908977119781060648

Seems currently a customDepthMaterial needs to be set up in some cases when transparency is used; opened a three issue here (Objects with alphaClip render opaque shadows when `map` is used instead of `alphaMap` · Issue #24995 · mrdoob/three.js · GitHub) and also asked with Meta Browser about transparent video support, as I was able to reproduce those videos not playing.

A workaround that should always work is using a classic RGB video with color + alpha information in separate places (e.g. top half of the video: color, bottom half: transparency) and then setting that as alphaMap on the material (need to do that via script)

Cool… and thanks, once again! Looking into the suggested workaround right now :+1:

by user 908977119781060648