aframe-alphavideo-shader v1.0.0
aframe-alphavideo-material
Alpha video effects in A-Frame. Provided a "src" video, and (option) a second "alpha" video, this material will render the src transparent from the lightness of the src or alpha video image.
It permit many effects and transitions with videos, including 360 or composite screens, backgrounds, interface animation, etc...
lame fork of the ChromaKey AFrame component of Nick Warner https://github.com/nikolaiwarner/aframe-chromakey-material
REM/Todo
- only works for video textures at the moment > Add option for basic images as alpha source in the shader
- need to be packaged correctly for aframe components, or replaced by proper alpha support in basic material
API
| Shader | Property | Description |
|---|---|---|
| alphavideomap | src | base video texture |
| " | alpha | alpha video texture |
| alphavideopremul | src | base video texture |
Installation
Browser
use by directly including the files alongside your scene :
<head>
<title>My A-Frame Scene</title>
<script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
<script src="aframe-alphavideomap-material.min.js"></script>
</head>
<body>
<a-scene>
<a-assets>
<video id="video" src="video.mp4" loop autoplay muted />
<video id="alphavideo" src="alphavideo.mp4" loop autoplay muted />
</a-assets>
<a-entity material="shader: alphavideomap; src: #video; alpha: #alphavideo" geometry="primitive: box"></a-entity>
<a-entity material="shader: alphavideopremul; src: #video" geometry="primitive: box" position="3 0 3"></a-entity>
</a-scene>
</body>Credits
All goes to prior coders lame fork of chromakey component by Nick Warner https://github.com/nikolaiwarner/aframe-chromakey-material A big thanks to the prior research on chromakey shaders in WebGL and Three.js by: https://github.com/makc/makc.github.io/tree/master/three.js/chromakey https://github.com/hawksley/Threex.chromakey
3 years ago