fragl

    1.0.11 • Public • Published
    ___________               ________.____     
    \_   _____/___________   /  _____/|    |    
     |    __) \_  __ \__  \ /   \  ___|    |    
     |     \   |  | \// __ \\    \_\  \    |___ 
     \___  /   |__|  (____  /\______  /_______ \
         \/               \/        \/        \/
    

    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

        // 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

     
        // 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

        fragl.setSize(width,height)

    Creating render layers

     
        //.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

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

    Create a texture from an image

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

    Creating render texture

        const renderTexture = fragl.createRenderTexture({
            width: window.innerWidth,
            height: window.innerHeight
        });
     
        renderLayer.uniforms['u_texture'].value = renderTexture.texture

    and to resize

        renderTexture.setSize(w,h)

    Rendering

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

    an example

        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

    precision highp float;
    attribute vec2 a_position;
    attribute vec2 a_texcoord;
     
    varying vec2 vUv;
     
    void main() {
        vUv = a_texcoord;
        gl_Position = vec4(a_position, 01);;
    }

    Keywords

    none

    Install

    npm i fragl

    DownloadsWeekly Downloads

    2

    Version

    1.0.11

    License

    MIT

    Unpacked Size

    63.2 kB

    Total Files

    5

    Last publish

    Collaborators

    • avatar