seng-effectrenderer
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.11 • Public • Published

    Travis Coveralls npm npm

    seng-effectrenderer

    Provides functionality for easily insert WebGL shaders in your application.

    Provides an ImageEffectRenderer that can handle simple WebGL shaders. The ImageEffectRenderer has a method to add up to 4 images on layers, which you can use to create effects with.

    ImageEffectRenderer supports the most common variables used in Shadertoy. This makes it easy to use base effects from that website.

    Installation

    yarn add seng-effectrenderer
    npm i -S seng-effectrenderer

    Basic usage

    Simple shader rendering on canvas.

    import { ImageEffectRenderer } from 'seng-effectrenderer';
    import shader from './shader.glsl';
     
    const renderer = ImageEffectRenderer.createTemporary(
      wrapperElement,
      shader,
      true,
    );

    Add an image you can apply the shader to. This can have 4 layers of images to read from the shader (make sure the images are preloaded first).

    import { ImageEffectRenderer } from 'seng-effectrenderer';
    import shader from './shader.glsl';
     
    const renderer = ImageEffectRenderer.createTemporary(
      wrapperElement,
      shader,
      false,
    );
     
    renderer.addImage(image, 0);
    renderer.play();

    Shared WebGL Context

    All ImageEffectRenderers share by default one WebGLContext. If you have only one ImageEffectRenderer on a page, or if you create a large ImageEffectRenderer (i.e. fullscreen), the ImageEffectRenderer will probably run faster if you create it having its own WebGLContext:

    const renderer = ImageEffectRenderer.createTemporary(
      wrapperElement,
      shader,
      true,
      true, // Create a separate WebGLContext for this specific ImageEffectRenderer
    );

    For more examples, please check the examples directory.

    Panorama Renderer

    If you want to render a (lightweight) panorama in WebGL, you can use the seng-panoramarenderer(https://github.com/mediamonks/seng-panoramarenderer). The seng-panoramarenderer is a wrapper around seng-effectrenderer and provides basic panorama functionality.

    Building

    In order to build seng-event, ensure that you have Git and Node.js installed.

    Clone a copy of the repo:

    git clone https://github.com/mediamonks/seng-effectrenderer.git

    Change to the seng-effectrenderer directory:

    cd seng-effectrenderer

    Install dev dependencies:

    yarn

    Use one of the following main scripts:

    yarn build            # build this project 
    yarn dev              # run compilers in watch mode, both for babel and typescript 
    yarn test             # run the unit tests incl coverage 
    yarn test:dev         # run the unit tests in watch mode 
    yarn lint             # run eslint and tslint on this project 
    yarn doc              # generate typedoc documentation 

    When installing this module, it adds a pre-commit hook, that runs lint and prettier commands before committing, so you can be sure that everything checks out.

    Contribute

    View CONTRIBUTING.md

    Authors

    View AUTHORS.md

    LICENSE

    MIT © MediaMonks

    Install

    npm i seng-effectrenderer

    DownloadsWeekly Downloads

    19

    Version

    1.0.11

    License

    MIT

    Unpacked Size

    59 kB

    Total Files

    14

    Last publish

    Collaborators

    • devmonk