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.
yarn add seng-effectrenderer
npm i -S seng-effectrenderer
Simple shader rendering on canvas.
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).
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:
For more examples, please check the examples directory.
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.
Clone a copy of the repo:
git clone https://github.com/mediamonks/seng-effectrenderer.git
Change to the seng-effectrenderer directory:
Install dev dependencies:
Use one of the following main scripts:
yarn build # build this projectyarn dev # run compilers in watch mode, both for babel and typescriptyarn test # run the unit tests incl coverageyarn test:dev # run the unit tests in watch modeyarn lint # run eslint and tslint on this projectyarn 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.
MIT © MediaMonks