is
image-shader
npm i image-shader
is

image-shader

Run WebGL shaders on an image or canvas.

by Mathias Paumgarten

0.2.6 (see all)License:MITTypeScript:Built-In
npm i image-shader
Readme

Shader Image

experimental

Tool to simplify writing shaders for HTML Image and Canvas elements.

Written in Typescript and ships with all types.

This class class creates a webgl context and texture from a given HTMLImageElement or HTMLCanvasElement as well as a fragment shader.

The shader is wrapped with the necessery definitions and functions to render the image.

import { ImageShader } from "image-shader";

const source = new Image();
source.src = "some/url.png";

// Shader to only render the red channel of the image.
const shader = `
    void main() {
        vec4 pixel = getPixel();

        gl_FragColor = vec4( pixel.r, 0, 0, 1 );
    }
`;

const image = new ImageShader( source, shader );

document.body.appendChild( image.domElement );

Api

Constructor

new ImageShader( source, shader ) where source is either a HTMLImageElement or a HTMLCanvasElement and the shader is a string in form of webgl shader. This means it has to include a void main() method in which or subsequently from which the gl_FragColor is set.

For a list of available variables and methods within the shader see below.

Fields

  • domElement: Returns a HTMLCanvasElement in the size of the source image containing the shaded image.
  • width: Returns the width of the content.
  • height: Returns the height of the content.
  • uniforms: Returns a readonly object which contains all uniforms. Setting additional uniforms is enabled by adding more values on this object:
const image = new ImageShader( source, fragment );

image.uniforms.time = 2340;
image.uniforms.anchor = [ 23, 45 ];

image.render();

Methods

  • dispose(): Releases all memory. Since it uses WebGL internally, simply losing the reference will not clear all memory.
  • render(): Re-renders the image. Should only be used after uniforms have been changed. Calling the method otherwise is safe, but potentially wasteful.

Shader Helpers

The passed in shader, used as a fragment shader for the image, ships with some uniforms and helper methods:

Uniforms and Varying

  • sampler2D image: The image/canvas in question as texture.
  • vec2 resolution: The size of the image.
  • vec2 uv: The UV coordinates of the current fragment.

Methods

  • vec4 getPixel(): Returns the pixel for the current fragment. For instance: gl_FragColor = getPixel() simply renders the image unaltered.
  • vec4 getPixel( vec2 uv ): Returns the image pixel at the given UV coordineats.
  • vec4 getPixelXY( vec2 coords ): Returns the image pixel at the given coordinates in pixels.

Downloads/wk

2

GitHub Stars

0
No data available

LAST COMMIT

NaNyrs ago

MAINTAINERS

1

CONTRIBUTORS

0

OPEN ISSUES

0

OPEN PRs

0
No data available
VersionTagPublished
0.2.6
latest
4yrs ago
No alternatives found
No tutorials found
Add a tutorial