https://github.com/nikolaiwarner/aframe-chromakey-material

A chromakey material for green screening in A-Frame. Perfect for blockbuster hollywood effects in VR! 🤗🎬💚
https://github.com/nikolaiwarner/aframe-chromakey-material

a-frame chroma-key video vr webvr

Last synced: 10 months ago
JSON representation

A chromakey material for green screening in A-Frame. Perfect for blockbuster hollywood effects in VR! 🤗🎬💚

• Host: GitHub
• URL: https://github.com/nikolaiwarner/aframe-chromakey-material
• Owner: nikolaiwarner
• License: mit
• Created: 2017-03-18T22:02:30.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2021-09-14T14:47:19.000Z (over 4 years ago)
• Last Synced: 2024-10-25T03:13:44.321Z (over 1 year ago)
• Topics: a-frame, chroma-key, video, vr, webvr
• Language: JavaScript
• Homepage:
• Size: 991 KB
• Stars: 69
• Watchers: 5
• Forks: 22
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
## aframe-chromakey-material

[![Version](http://img.shields.io/npm/v/aframe-chromakey-material.svg?style=flat-square)](https://npmjs.org/package/aframe-chromakey-material)

[![License](http://img.shields.io/npm/l/aframe-chromakey-material.svg?style=flat-square)](https://npmjs.org/package/aframe-chromakey-material)

A chromakey material for green screen effects in [A-Frame](https://aframe.io). Provided a color, this material will remove

that color from the video or image source. Perfect for blockbuster hollywood effects in VR!

![chasevr](https://cloud.githubusercontent.com/assets/40796/24076948/2158fba4-0c14-11e7-8bee-72507f4339fa.jpg)

### API

| Property | Description | Default Value |

| -------- | ----------- | ------------- |

| color    | Color to key from source. This is a vec3 of rgb values. Default is greenish. | 0.1 0.9 0.2 |

### Installation

#### Browser

Install and use by directly including the [browser files](dist):

```html

  

```

See [this example](example/index.html) for usage.

#### npm

Install via npm/yarn:

```bash

npm install aframe-chromakey-material

```

Then require and use.

```js

import 'aframe';

import 'aframe-chromakey-material';

```

#### Credits

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