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

A shader to display videos with transparency (alpha channel) for A-Frame.
https://github.com/balataca/aframe-transparent-video-shader

aframe aframe-vr shader threejs webvr webxr

Last synced: 2 days ago
JSON representation

A shader to display videos with transparency (alpha channel) for A-Frame.

• Host: GitHub
• URL: https://github.com/balataca/aframe-transparent-video-shader
• Owner: balataca
• License: mit
• Created: 2020-01-29T14:40:59.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-10-19T12:06:15.000Z (12 months ago)
• Last Synced: 2024-09-22T04:10:53.742Z (14 days ago)
• Topics: aframe, aframe-vr, shader, threejs, webvr, webxr
• Language: JavaScript
• Size: 313 KB
• Stars: 40
• Watchers: 2
• Forks: 3
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Aframe Transparent Video Shader

This is a shader to display videos with transparency (Alpha Channel) such as WebM and HEVC H265.

## Demo

https://aframe-transparent-video.glitch.me/

## Browser Installation

1. Install by declaring this [script](./dist/aframe-transparent-video-shader.umd.js) after aframe

```

  My Scene

  

  

```

## NPM Installation

1. Install the package:

```

npm i aframe-transparent-video-shader

```

2. Import after aframe:

```

import 'aframe'

import 'aframe-transparent-video-shader'

```

## 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"` attribute

```

  

    My Scene

    

    

  

  

    

      

        

          

          

          

          

        

      

      

      

      

    

  

```

## Notes

### Video autoplay

On the latest chrome versions, the autoplay is blocked by default until there is an user interaction.

You can read more [here](https://aframe.io/docs/1.2.0/components/material.html#video-textures).

Some solutions you can use:

* Add a button to play the video:  

You can find a full example [here](https://github.com/aframevr/aframe/blob/master/examples/test/video/index.html).  

Or use the [play-on-click](https://github.com/aframevr/aframe/blob/master/examples/js/play-on-click.js) component.

* Add a `click` event listener to the whole page:

```

document.addEventListener('click', () => {

    video = document.querySelector('video');

    video.play();

});

``` 

### Safari Support

Safari doesn't currently support `webm` videos with transparency, so you will need to add an extra `.mp4` or `.mov` video file with the `HEVC H.265` codec encoded with transparency enabled. See the demo code [here](https://glitch.com/edit/#!/aframe-transparent-video) for an example implementation.