aframe-transparent-video-shader-corrected
v1.0.0
Published
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
Downloads
47
Maintainers
vadimtiReadme
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
- 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/[email protected]/dist/transparent-video-shader.js"></script>
</head>NPM Installation
- Install the package:
npm i aframe-transparent-video-shader- Import after aframe:
import 'aframe'
import 'aframe-transparent-video-shader-corrected'Usage
Create a video element into
a-assetstag and declare an id.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/[email protected]/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>