npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

fxglue

v0.2.1

Published

WebGL-based image processing library.

Downloads

75

Readme

Installation

fxGlue is available on npm, you can install it with either npm or yarn:

npm install fxglue
# or:
yarn install fxglue

Example use

// source is a HTMLImageElement, HTMLVideoElement or a HTMLCanvasElement.
// The source must be loaded.

import { GlueCanvasm, glueGetSourceDimensions } from 'fxglue';

export const fragmentShader = `
uniform float iRed;

void main()
{
  vec2 p = gl_FragCoord.xy / iResolution;
  gl_FragColor = texture2D(iTexture, p);
  gl_FragColor.r = iRed;
}`;

const glueCanvas = new GlueCanvas();
const { glue, canvas } = glueCanvas;

document.body.append(canvas);

glueCanvas.setSize(...glueGetSourceDimensions(source));
glue.registerTexture('source', source);
glue.registerProgram('filter', fragmentShader);

// In requestAnimationFrame.
glue.texture('source')?.draw();
glue.program('filter')?.uniforms.set('iRed', 0.5);
glue.program('filter')?.apply();
glue.render();

// Or, simpler...
glue.texture('source')?.draw();
glue.program('filter')?.apply({ iRed: 0.5 });
glue.render();

// If you'd like to only apply filters to one texture.
glue.texture('source')?.draw();
glue.begin(); // Opens a new drawing group.
glue.texture('source')?.draw();
glue.program('filter')?.apply({ iRed: 0.5 });
glue.end();
glue.render();

// When no longer necessary.
glue.dispose();

// Or if you only want to remove one texture/program.
glue.deregisterProgram('filter');
glue.deregisterTexture('source');

Texture and program names MUST NOT start with "~".

GLSL additions

Uniforms

fxGlue alters the GLSL syntax and adds a few uniforms and one attribute out of the box.

The shader source must not include those uniforms in the code. They're provided by fxGlue and must be used as such.

  • vec2 iResolution - resolution of the input texture, usually used to normalize gl_FragCoord as such: gl_FragCoord.xy / iResolution.
  • sampler2D iTexture - input texture, either output of the previously applied program or drawn texture.

Vertex shaders also include a position attribute. (vec3 position).

Imports

fxGlue includes a syntax for inclusion of modules.

@use math
@use wrap

The @use statement must be the only one in a given line, must only contain one space before the module name and must contain only one module name. This statement must be used outside of blocks such as functions, before the imports are utilized, ideally at the beginning of the shader source.

There are two partials included with fxGlue: math and wrap.

Partials

Custom partials can be registered by calling registerImport.

math

Includes math constants and functions.

#define PI 3.1415926538
#define PI2 6.283185307179586
#define PI_HALF 1.5707963267948966
#define RECIPROCAL_PI 0.3183098861837907
#define RECIPROCAL_PI2 0.15915494309189535
#define EPSILON 1e-6
#define E 2.718281828459045

float pow2(const in float x)
float pow3(const in float x)
float pow4(const in float x)

float atan2(const in float y, const in float x)
float atan2(const in vec2 v)

wrap

Includes functions related to accessing textures.

// Repeats a float from 0.0 to 1.0, in a mirrored tile fashion.
float mirroredRepeat(const in float a)

// Repeats the texture in a mirrored tile fashion.
vec2 mirroredRepeat(const in vec2 uv)

// Repeats a float from 0.0 to 1.0, in a tile fashion.
float repeat(const in float a)

// Repeats the texture in a tile fashion.
vec2 repeat(const in vec2 uv)

// Clips the texture within given bounds.
float clip(const in vec2 v, const in vec4 bounds)

// Clips the texture within 0.0;0.0 to 1.0;1.0.
float clip(const in vec2 v)

// Clips the texture within given bounds, smoothly, based on provided radius x.
float clipSmooth(const in vec2 v, const in vec4 bounds, const in float x)

// Clips the texture within 0.0;0.0 to 1.0;1.0, smoothly, based on provided radius x.
float clipSmooth(const in vec2 v, const in float x)

color

Includes HSL and HSV related functions.

// Converts one color value.
float hue2rgb(float f1, float f2, float hue)

// Converts vec3(h, s, l) to vec3(r, g, b).
vec3 hsl2rgb(vec3 hsl)

// Converts vec3(h, s, v) to vec3(r, g, b).
vec3 hsv2rgb(vec3 hsv)

// Converts vec3(r, g, b) to vec3(h, s, l).
vec3 rgb2hsl(vec3 rgb)

// Converts vec3(r, g, b) to vec3(h, s, v).
vec3 rgb2hsv(vec3 rgb)

noise

Contains noise functions from webgl-noise.

// Cellular 2D noise
vec2 cellular(vec2 P)

// 2D noise
float snoise(vec2 v)