# aframe-hologram-shader
> An A-Frame shader for creating stylized holograms from images and videos
Latest version **1.0.1** (published 2021-04-02) · MIT license · 0 weekly downloads
## Install
```sh
npm install aframe-hologram-shader
pnpm add aframe-hologram-shader
yarn add aframe-hologram-shader
bun add aframe-hologram-shader
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.0.1 |
| Published | 2021-04-02 |
| First published | 2021-04-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 313.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 32 |
| Author | Travis Dick |
| Maintainers | travis.barry.dick |
## Links
- npm: https://www.npmjs.com/package/aframe-hologram-shader
- Repository: https://github.com/TravisBarryDick/aframe-hologram-shader
- Homepage: https://github.com/TravisBarryDick/aframe-hologram-shader#readme
- Issues: https://github.com/TravisBarryDick/aframe-hologram-shader/issues
- npm.io page: https://npm.io/package/aframe-hologram-shader
## Recent versions
- 1.0.1 (latest) — 2021-04-02
- 1.0.0 — 2021-04-01
## README
# A-Frame Hologram Shader
Interactive Demo
## Description of Effect
This shader corrupts an image or video texture to make it look like a hologram. There are three main effects applied:
1. The texture can be made transparent and desaturated.
1. Scan lines (dark horizontal lines) are drawn on the image. These scanlines slowly drift down the hologram.
1. Glitch effect: The texture is broken up vertically into equal-height "glitch bars". Each glitch bar is randomly shifted horizontally to create a jittering effect. After the horizontal shift, each of the RGBA components of the glitch bar are further randomly shifted to create a "glitch" effect. The boundaries between glitch bars slowly drift down the hologram.
## Installation
You can use `aframe-hologram-shader` in your project in two ways. First, you can simply include the following script tag after the script that loads a-frame:
```html
```
This will automatically register the hologram shader.
Alternatively, you can install the package using npm by executing
```
npm install aframe-hologram-shader
```
and then in your project you will need to either `include` or `require` the `aframe-hologram-shader` package.
## Example Usage
Once `aframe-hologram-shader` is installed, you can apply the shader to an image or video in your a-frame scene by setting the `material`'s `shader` attribute to be `hologram`. The other parameters of the shader (described below) are also set on the `material` component. For example:
```html
Hologram
```
## Configurable Parameters
The following parameters can be used to customize the effect. You can play with their values in the interactive demo.
| Parameter | Type | Description |
| -------------- | ----- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| src | map | Texture to display on the hologram. Can be an image or video. |
| numScanLines | int | The number of scan lines to draw on the texture. |
| scanLineDrift | float | The speed that the scanlines move down the texture. Should be a number in `[0,1]` which is the fraction of the hologram each scanline moves per second |
| saturation | float | The saturation of each fragment in the HSV color space is scaled by this value. A value of `0` makes the hologram grayscale, while a value of `1` leaves the saturation unmodified. |
| alpha | float | The alpha value of each fragment is multiplied by this parameter. Values of `0` and `1` result in completely transparent and opaque holograms, respectively. |
| numGlitchBars | int | The number of glitch bars to use in the effect. |
| glitchOffset | float | Maximum horizontal offset for each glitch bar. Should be a number in `[0,1]`, which is the maximum fraction of the holgoram width that each glitch bar can move. |
| glitchBarDrift | float | Similar to the scan line drift, except it causes the boundaries of the glitch bars to move. |
| rgbSeparation | float | Similar to glitchOffset, except this is the maximum shift for each of the RGBA components. |
| glitchRate | float | How many times per second to update the glitch effect. |
---
_Source: https://npm.io/package/aframe-hologram-shader · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._