# fragl-displace

> Webgl plugin for layered, displaced images

Latest version **1.0.14** (published 2019-02-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install fragl-displace
pnpm add fragl-displace
yarn add fragl-displace
bun add fragl-displace
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.14 |
| Published | 2019-02-10 |
| First published | 2019-02-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 23.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | William Hamlin |
| Maintainers | williamhamlin |

## Links

- npm: https://www.npmjs.com/package/fragl-displace
- Repository: https://github.com/williamgladeye/fragl-displace
- Homepage: https://github.com/williamgladeye/fragl-displace#readme
- Issues: https://github.com/williamgladeye/fragl-displace/issues
- npm.io page: https://npm.io/package/fragl-displace

## Dependencies (2)

- [fragl](https://npm.io/package/fragl.md) ^1.0.9
- [@gladeye/af](https://npm.io/package/@gladeye/af.md) ^1.0.4

## Recent versions

- 1.0.14 (latest) — 2019-02-10
- 1.0.13 — 2019-02-07
- 1.0.12 — 2019-02-07
- 1.0.11 — 2019-02-05
- 1.0.10 — 2019-02-04
- 1.0.8 — 2019-02-04
- 1.0.7 — 2019-02-04
- 1.0.6 — 2019-02-04
- 1.0.5 — 2019-02-04
- 1.0.4 — 2019-02-04
- 1.0.3 — 2019-02-04
- 1.0.2 — 2019-02-04

## README

```
___________               ________.____                
\_   _____/___________   /  _____/|    |               
 |    __) \_  __ \__  \ /   \  ___|    |       ______  
 |     \   |  | \// __ \\    \_\  \    |___   /_____/  
 \___  /   |__|  (____  /\______  /_______ \           
     \/               \/        \/        \/           
________  .__               .__                        
\______ \ |__| ____________ |  | _____    ____  ____   
 |    |  \|  |/  ___/\____ \|  | \__  \ _/ ___\/ __ \  
 |    `   \  |\___ \ |  |_> >  |__/ __ \\  \__\  ___/  
/_______  /__/____  >|   __/|____(____  /\___  >___  > 
        \/        \/ |__|             \/     \/    \/  
```
---

Webgl plugin for layered, displaced images using the fragl lib.


# Usage
  

```javascript
    import Displace from 'fragl-displace';

    import bgDisp from '+/images/bg-disp.jpg';
    import bg from '+/images/bg.jpg';

    import fgDisp from '+/images/fg-disp.jpg';
    import fgMask from '+/images/fg-mask.jpg';
    import fg from '+/images/fg.jpg';

    const canvas = document.querySelector('.canvas');
    const imageSize = { // this is to get the ratio for sizing the images
        width:1920,
        height:1080
    }
    const args = {
        canvas,
        imageSize
    }

    const displace = new Displace(args)

    displace.addLayer({
        displace:bgDisp,
        main:bg
    })

    displace.addLayer({
        displace:fgDisp,
        main:fg,
        mask:fgMask
    })


    // stop and start again
    displace.stop()
    displace.start()
    

```

An example of a depth map to use as a displacement image :
<https://www.researchgate.net/profile/Gwang_Park/publication/220235505/figure/fig1/AS:378614760656897@1467280201631/Real-image-and-its-depth-map-in-Ballet-sequence.png>

<br>
If you wish to mask out a layer use a black and white image,  black will be full transparency.
<br>


That's it...

---
_Source: https://npm.io/package/fragl-displace · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._