使用 alpha 通道在 AR 中播放视频的好方法？

Question

我正在尝试使用 AFrame 在视频上启用 Alpha 通道。

我正在使用设置为 true 的“透明”，但这似乎没有任何作用。

有什么想法吗？

a-scene>
  <a-assets timeout="30000">
    <video id="lyrics" autoplay loop="true" transparent="true" src="https://cdn.glitch.com/d70cd89d-5883-430e-aa23-db6ffd90c2e4%2Fconverted.webm?v=1610981890345">
    
  </a-assets>
  
  <a-camera position="0 1.2 0"></a-camera>
  
  <!-- Environment for 2D and VR viewing. It's auto-hidden in AR mode. -->
  <a-entity environment="preset: forest; lighting: none; shadow: none; lightPosition: 0 2.15 0"
            hide-in-ar-mode></a-entity>
  
  <a-video src="#lyrics" width="2" height="1.375" position="0 -1 -2"></a-video>
  
  <a-entity light="type: ambient; intensity: 0.5;"></a-entity>
  <a-light type="directional"
           light="castShadow: true;
                  shadowMapHeight: 1024;
                  shadowMapWidth: 1024;
                  shadowCameraLeft: -7;
                  shadowCameraRight: 5;
                  shadowCameraBottom: -5;
                  shadowCameraTop: 5;"
           id="light"
           target="dino"
           position="-5 3 1.5"></a-light>

  <!-- This shadow-receiving plane is only visible in AR mode. -->
  <a-plane height="15" width="15" position="0 0 -3" rotation="-90 0 0"
           shadow="receive: true"
           ar-shadows="opacity: 0.3"
           visible="false"></a-plane>
</a-scene>

Answer 1

您可以明确告诉材质使用 THREE.RGBAFormat - 因此使用 .webm 中的 alpha 通道。很简单：

// after the entity is loaded, eg. el.addEventListener("loaded", e => {})
// grab the meshes material.
let material = this.el.getObject3D("mesh").material;

// switch the format to THREE.RGBAFormat
material.map.format = THREE.RGBAFormat;

// force an material update
material.map.needsUpdate = true;

如果一切顺利，您应该会看到 .webm 被正确渲染：

您可以查看 here - 适用于 Windows10 和移动设备 (android)。

---

我强烈建议通过使用原版 arjs 重新创建场景来对 a-frame 进行故障排除。问题可能是共享的，根据我的经验，调试更容易。例如，here 是与 webm 视频相同的场景。