aframe-transparent-video-shader-corrected

A shader to display videos with transparency (alpha channel) for A-Frame. Based on https://github.com/balataca/aframe-transparent-video-shader/. Using sRGB color space. Use `transparent: true` in material property

Usage no npm install needed!

<script type="module">
  import aframeTransparentVideoShaderCorrected from 'https://cdn.skypack.dev/aframe-transparent-video-shader-corrected';
</script>

README

Aframe Transparent Video Shader

This is fork of https://github.com/balataca/aframe-transparent-video-shader/ Using sRGB color correction, so video will have natural color. This is a shader to display videos with transparency (Alpha Channel) such as WebM.

Browser Installation

  1. Install by declaring this script after aframe
<head>
  <title>My Scene</title>
  <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
  <script src=""https://unpkg.com/aframe-transparent-video-shader-corrected@1.0.0/dist/transparent-video-shader.js"></script>
</head>

NPM Installation

  1. Install the package:
npm i aframe-transparent-video-shader
  1. Import after aframe:
import 'aframe'
import 'aframe-transparent-video-shader-corrected'

Usage

  1. Create a video element into a-assets tag and declare an id.

  2. Create an entity and assign a material="shader: transparent-video; src: #videoId; transparent: true" attribute

<html>
  <head>
    <title>My Scene</title>
    <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
    <script src=""https://unpkg.com/aframe-transparent-video-shader-corrected@1.0.0/dist/transparent-video-shader.js"></script>
  </head>

  <body>
    <a-scene>
      <a-assets>
        <video id="videoId" src="https://video-src-url" muted autoplay loop="true"></video>
      </a-assets>
      
      <a-entity
        material="shader: transparent-video; src: #videoId; transparent: true"
        geometry="primitive: plane;
                  width: 1;
                  height: 1.8"
        position="0 1 -2">
      </a-entity>
    </a-scene>
  </body>
</html>