https://github.com/hughsk/post-process

A generic GLSL post-processing module for applying super-speedy GPU effects to img/video/canvas elements.
https://github.com/hughsk/post-process

Last synced: 3 months ago
JSON representation

A generic GLSL post-processing module for applying super-speedy GPU effects to img/video/canvas elements.

• Host: GitHub
• URL: https://github.com/hughsk/post-process
• Owner: hughsk
• License: other
• Created: 2013-09-15T01:30:53.000Z (almost 12 years ago)
• Default Branch: master
• Last Pushed: 2017-08-20T08:00:22.000Z (almost 8 years ago)
• Last Synced: 2025-02-28T09:42:13.642Z (4 months ago)
• Language: JavaScript
• Homepage: http://hughsk.github.io/post-process
• Size: 160 KB
• Stars: 28
• Watchers: 6
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# post-process [![deprecated](http://hughsk.github.io/stability-badges/dist/deprecated.svg)](http://github.com/hughsk/stability-badges) #

[![post-process](https://nodei.co/npm/post-process.png?mini=true)](https://nodei.co/npm/post-process)

**Deprecated: you may find this useful as a reference, but it's otherwise more worthwhile writing your own implementation :)**

A generic GLSL post-processing module for applying super-speedy GPU effects to

any ``, `` or `` element. If you're already working with a

3D scene you're better off using

[an FBO](http://github.com/mikolalysenko/gl-fbo), but this is useful for cases

where you've already got a 2D canvas/video thing and just want to add some

niceties.

## Usage ##

### `post = pp(gl, element, frag[, vert])` ###

Takes the following and returns a new post-processing object:

* `gl` is a WebGL canvas context.

* `element` is a canvas element, video or image.

* `frag` is a fragment shader, which may either be specified as a string or

  as a [gl-shader](http://github.com/mikolalysenko/gl-shader).

* `vert` is a vertex shader, and optional - you'll only need to specify this

  in special cases.

Your shader is supplied the following uniforms:

* `float width`: the width of the element in pixels.

* `float height`: the height of the element in pixels.

* `sampler2D map`: the `element` you specified as a texture.

### `post.render([width, height])` ###

Renders `element` to `gl`, using the shader specified above. You can

optionally pass a `width` and `height` value to override the defaults,

which are the dimensions of `element`.