Alpha Channel Video transparency broken since version 0.9

[agusalex]

Description:
As reported by @jamess922 on
jeromeetienne/AR.js#480
Alpha channel video does not seem to be working, however, this is not the case on version 0.8

• A-Frame Version: 0.9
• Platform / Device: Chromium
  Version 72.0.3626.121 (Official Build) Built on Ubuntu , running on Ubuntu 18.04 (64-bit)
• Reproducible Code Snippet or URL:
  Here it is broken:
  https://glitch.com/edit/#!/aframe-alpha-0-9
  Here it works:
  https://glitch.com/edit/#!/aframe-alpha-0-8

[ghost]

Hi,
I reproduce the issue too, has anyone found a workaround? Is it related to a-frame or threejs?
There aren't any warnings in the console so it's hard to guess where the problem lies.

[duasfh]

So, any changes?

[jean-barre]

My webapp is developed using v0.9.2 and I meet the same issue.
@dmarcos , @ngokevin would you know the reason for this?

[Mugen87]

Just wanted to share a live example to demonstrates that the latest three.js version (R112) supports webm video textures with transparency.

https://glitch.com/edit/#!/windy-rocket

[dmarcos]

@Mugen87 Thanks. Great news. A-Frame latest release is on r111. We will take on the fix for 1.1.0

[Mugen87]

It should also work with R111: https://legendary-planet.glitch.me

[ghost]

@Mugen87 thanks! I tried the code from the glitch you just shared and used the mesh on a a-entity, it works perfectly indeed.

[gftruj]

It seems the texture format is set to THREE.RGBFormat(1022) instead of THREE.RGBAFormat(1023) - seems to do the trick

From what i can tell the VideoTexture has its format set to THREE.RGBFormat if not specified (source), and the material system only changes the format to THREE.RGBAFormat for some IOS / HLS hacks (source)

[balataca]

Hello,

I had the same issues as you, and I made a shader package to solve this problem.
It works on versions > 0.9.0

check it out:
https://github.com/balataca/aframe-transparent-video-shader

[cyango]

Hello,

I had the same issues as you, and I made a shader package to solve this problem.
It works on versions > 0.9.0

check it out:
https://github.com/balataca/aframe-transparent-video-shader

I've tried on Aframe 1.0.4, and it doesn't remove the background...
Can you confirm it still works on your side?

[cyango]

Hello,
I had the same issues as you, and I made a shader package to solve this problem.
It works on versions > 0.9.0
check it out:
https://github.com/balataca/aframe-transparent-video-shader

I've tried on Aframe 1.0.4, and it doesn't remove the background...
Can you confirm it still works on your side?

Seems like the material component needs the attribute "transparent:true;". Now it's working.

[HawkenKing]

Hello,
I had the same issues as you, and I made a shader package to solve this problem.
It works on versions > 0.9.0
check it out:
https://github.com/balataca/aframe-transparent-video-shader

I've tried on Aframe 1.0.4, and it doesn't remove the background...
Can you confirm it still works on your side?

Seems like the material component needs the attribute "transparent:true;". Now it's working.

I got this working Chrome desktop no problems.

Doesn't work on the Oculus Quest or Mozilla XR, video comes up blank

[stevestavropoulos]

Is this bug ever going to be (properly) fixed? Does anyone know what has to be done?

[shubhamraghav1]

this issue is still there , the transparent video plays on desktop but it goes completely black on my android samsung m21..
Does anyone know how to resolve this

[omegastripes]

This helps me to solve the problem.