Novel Personal Mantras
Learn how companies like Phone2Action are using npm in their front-end developmentJoin the conversation »

seng-effectrenderer

1.0.5 • Public • Published

Travis Code Climate 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.

Documentation

View the generated documentation.

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

Changelog

View CHANGELOG.md

Authors

View AUTHORS.md

LICENSE

MIT © MediaMonks

Install

npm i seng-effectrenderer

DownloadsWeekly Downloads

36

Version

1.0.5

License

MIT

Unpacked Size

218 kB

Total Files

9

Last publish

Collaborators

  • avatar