# fragl

> Small WebGL lib for shader compositions

Latest version **1.0.11** (published 2019-05-21) · MIT license · 0 weekly downloads

## Install

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

## 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.11 |
| Published | 2019-05-21 |
| First published | 2019-02-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 61.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | William Hamlin |
| Maintainers | williamhamlin |

## Links

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

## Recent versions

- 1.0.11 (latest) — 2019-05-21
- 1.0.10 — 2019-03-13
- 1.0.9 — 2019-02-07
- 1.0.8 — 2019-02-07
- 1.0.7 — 2019-02-05
- 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.1 — 2019-02-01
- 1.0.0 — 2019-02-01

## README

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

This is a small lib for WebGl shader effects. 

- It is not intended for moving vertices or 3d work. 
- It is good for creating animated and interactive graphics within fragment shaders and rendering to frame buffers for multiple shader passes and also stacking graphical layers for compositions.


# Usage
  

```javascript
    // import the fragl lib
    import FraGL from 'FraGL'

    // get canvas
    const canvas = document.querySelector('.canvas');

    // pass canvas to fragl constructor
    const fragl = new FraGL(args)
```


So thats the basic setup, contructor args are all optional, if no canvas is given then it will create a canvas element and it will be stored at `fragl.domElement`

```javascript

    // defautls
    const args = {
        canvas: canvasDomEl, 
        clearColor: [0,0,0,0], 
        imageLoadColor = [255, 150, 150, 255], 
        size:{
            width: window.innerWidth, 
            height: window.innerHeight 
        },
        trasparent: false, 
        premultipliedAlpha: false,         
        antialias: false
        depth: false
    }
```

- canvas
  - canvas dom el
- clearColor
  - 4 part array (rgba) values between 0 and 1
- imageLoadColor 
  - 4 part array (rgba) values between 0 and 255;
- size
  - object of width and height
- trasparent
  - Boolean that indicates if the canvas contains an alpha buffer.
- premultipliedAlpha
  - Boolean that indicates that the page compositor will assume the drawing buffer contains colors with pre-multiplied 
- antialias
  - Boolean that indicates whether or not to perform anti-aliasing.
- depth
  - Boolean that indicates that the drawing buffer has a depth buffer of at least 16 bits.


### And to resize the FraGL renderer

```javascript
    fragl.setSize(width,height)
```


### Creating render layers


```javascript

    //.createRenderLayer( 'name'= String, args = Object );

    const renderLayer = fragl.createRenderLayer('render-layer', {
        uniforms:{ 
            // dummy uniforms made up for the sake of demonstration
            u_res:{
                value: [ width, height ] // vec2
            },
            u_texture:{
                value: texture // texture
            },
            u_val:{
                value: 1. // float
            }
        },
        vertex:vertexShader, // string
        fragment:fragmentShader // string
    })
```
### Updating uniforms

```javascript
    renderLayer.uniforms['u_res'].value = [ width, height ]
```

### Create a texture from an image

```
    const texture = fragl.textureFromImage('./path/to/image.jpg');
```



### Creating render texture

```javascript
    const renderTexture = fragl.createRenderTexture({
        width: window.innerWidth,
        height: window.innerHeight
    });

    renderLayer.uniforms['u_texture'].value = renderTexture.texture
```

and to resize  

```javascript
    renderTexture.setSize(w,h)
```


### Rendering

```javascript
    // render to canvas
    renderLayer.render()

    // render to renderTexture
    renderLayer.render(renderTexture)
```

an example

```javascript
    render(){
        renderLayer1.render(renderTexture)

        renderLayer2.uniforms['u_texure'].value = renderTexture.texture

        renderLayer2.render()
    }
```

### Vertex Shader

Something like this should be the base for your vertex shader

```glsl
precision highp float;
attribute vec2 a_position;
attribute vec2 a_texcoord;

varying vec2 vUv;

void main() {
    vUv = a_texcoord;
    gl_Position = vec4(a_position, 0, 1);;
}
```

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