# seng-effectrenderer

> Description

Latest version **1.0.11** (published 2020-07-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install seng-effectrenderer
pnpm add seng-effectrenderer
yarn add seng-effectrenderer
bun add seng-effectrenderer
```

## Health

**Score 35/100 (D)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 1.0.11 |
| Published | 2020-07-30 |
| First published | 2018-11-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 57.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 27 |
| Author | René Drieënhuizen |
| Maintainers | devmonk |
| Keywords | seng, mediamonks |

## Links

- npm: https://www.npmjs.com/package/seng-effectrenderer
- Repository: https://github.com/mediamonks/seng-effectrenderer
- Homepage: https://www.mediamonks.com/
- Issues: https://github.com/mediamonks/seng-effectrenderer/issues
- npm.io page: https://npm.io/package/seng-effectrenderer

## Dependencies (1)

- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.10.5

## Recent versions

- 1.0.11 (latest) — 2020-07-30
- 1.0.10 — 2020-07-24
- 1.0.9 — 2020-07-24
- 1.0.8 — 2020-07-23
- 1.0.7 — 2020-07-23
- 1.0.6 — 2020-03-09
- 1.0.5 — 2019-11-25
- 1.0.4 — 2019-11-04
- 0.4.3 — 2019-11-01
- 0.4.2 — 2019-10-24
- 0.4.1 — 2019-10-22
- 0.3.1 — 2019-02-12
- 0.3.0 — 2019-02-12
- 0.2.3 — 2018-11-27
- 0.2.2 — 2018-11-19
- … 3 more at https://npm.io/package/seng-effectrenderer/versions

## README

[![Travis](https://img.shields.io/travis/mediamonks/seng-effectrenderer.svg?maxAge=2592000)](https://travis-ci.org/mediamonks/seng-effectrenderer)
[![Coveralls](https://img.shields.io/coveralls/mediamonks/seng-effectrenderer.svg?maxAge=2592000)](https://coveralls.io/github/mediamonks/seng-effectrenderer?branch=master)
[![npm](https://img.shields.io/npm/v/seng-effectrenderer.svg?maxAge=2592000)](https://www.npmjs.com/package/seng-effectrenderer)
[![npm](https://img.shields.io/npm/dm/seng-effectrenderer.svg?maxAge=2592000)](https://www.npmjs.com/package/seng-effectrenderer)

# 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](https://www.shadertoy.com).
This makes it easy to use base effects from that website.


## Installation

```sh
yarn add seng-effectrenderer
```

```sh
npm i -S seng-effectrenderer
```

## Basic usage

Simple shader rendering on canvas.
```ts
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).
```ts
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:

```ts
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](http://git-scm.com/downloads)
and [Node.js](http://nodejs.org/) installed.

Clone a copy of the repo:
```sh
git clone https://github.com/mediamonks/seng-effectrenderer.git
```

Change to the seng-effectrenderer directory:
```sh
cd seng-effectrenderer
```

Install dev dependencies:
```sh
yarn
```

Use one of the following main scripts:
```sh
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](./CONTRIBUTING.md)


## Authors

View [AUTHORS.md](./AUTHORS.md)


## LICENSE

[MIT](./LICENSE) © MediaMonks

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