{"id":19670369,"url":"https://github.com/mat-sz/fxglue","last_synced_at":"2025-08-10T22:16:44.557Z","repository":{"id":57243526,"uuid":"373876117","full_name":"mat-sz/fxGlue","owner":"mat-sz","description":"💥 WebGL-based image effects library. (TypeScript)","archived":false,"fork":false,"pushed_at":"2024-03-02T16:42:13.000Z","size":172,"stargazers_count":13,"open_issues_count":0,"forks_count":4,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-05T12:02:52.069Z","etag":null,"topics":["2d","canvas","effects","fx","glitch-art","image-effects","image-processing","javascript","javascript-library","library","opengl","shader","shaders","typescript","typescript-library","webgl"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause-clear","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mat-sz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2021-06-04T14:57:48.000Z","updated_at":"2025-03-16T08:03:01.000Z","dependencies_parsed_at":"2023-12-08T15:00:01.052Z","dependency_job_id":"ddea4a0d-2cda-4eec-a66b-53e3262c1a52","html_url":"https://github.com/mat-sz/fxGlue","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mat-sz%2FfxGlue","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mat-sz%2FfxGlue/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mat-sz%2FfxGlue/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mat-sz%2FfxGlue/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mat-sz","download_url":"https://codeload.github.com/mat-sz/fxGlue/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251220029,"owners_count":21554514,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["2d","canvas","effects","fx","glitch-art","image-effects","image-processing","javascript","javascript-library","library","opengl","shader","shaders","typescript","typescript-library","webgl"],"created_at":"2024-11-11T17:06:03.038Z","updated_at":"2025-04-29T00:31:42.514Z","avatar_url":"https://github.com/mat-sz.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003efxGlue\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\nWebGL-based 2D image processing/effects library.\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n\u003ca href=\"https://npmjs.com/package/fxglue\"\u003e\n\u003cimg alt=\"npm\" src=\"https://img.shields.io/npm/v/fxglue\"\u003e\n\u003cimg alt=\"npm\" src=\"https://img.shields.io/npm/dw/fxglue\"\u003e\n\u003cimg alt=\"NPM\" src=\"https://img.shields.io/npm/l/fxglue\"\u003e\n\u003c/a\u003e\n\u003c/p\u003e\n\n## Installation\n\nfxGlue is available on [npm](https://www.npmjs.com/package/fxglue), you can install it with either npm or yarn:\n\n```sh\nnpm install fxglue\n# or:\nyarn install fxglue\n```\n\n## Example use\n\n```ts\n// source is a HTMLImageElement, HTMLVideoElement or a HTMLCanvasElement.\n// The source must be loaded.\n\nimport { GlueCanvasm, glueGetSourceDimensions } from 'fxglue';\n\nexport const fragmentShader = `\nuniform float iRed;\n\nvoid main()\n{\n  vec2 p = gl_FragCoord.xy / iResolution;\n  gl_FragColor = texture2D(iTexture, p);\n  gl_FragColor.r = iRed;\n}`;\n\nconst glueCanvas = new GlueCanvas();\nconst { glue, canvas } = glueCanvas;\n\ndocument.body.append(canvas);\n\nglueCanvas.setSize(...glueGetSourceDimensions(source));\nglue.registerTexture('source', source);\nglue.registerProgram('filter', fragmentShader);\n\n// In requestAnimationFrame.\nglue.clear();\nglue.texture('source')?.draw();\nglue.program('filter')?.uniforms.set('iRed', 0.5);\nglue.program('filter')?.apply();\nglue.render();\n\n// Or, simpler...\nglue.clear();\nglue.texture('source')?.draw();\nglue.program('filter')?.apply({ iRed: 0.5 });\nglue.render();\n\n// If you'd like to only apply filters to one texture.\nglue.clear();\nglue.texture('source')?.draw();\nglue.begin(); // Opens a new drawing group.\nglue.texture('source')?.draw();\nglue.program('filter')?.apply({ iRed: 0.5 });\nglue.end();\nglue.render();\n\n// When no longer necessary.\nglue.dispose();\n\n// Or if you only want to remove one texture/program.\nglue.deregisterProgram('filter');\nglue.deregisterTexture('source');\n```\n\n**Texture and program names MUST NOT start with \"~\".**\n\n## GLSL additions\n\n### Uniforms\n\nfxGlue alters the GLSL syntax and adds a few uniforms and one attribute out of the box.\n\nThe shader source **must not** include those uniforms in the code. They're provided by fxGlue and must be used as such.\n\n- _vec2_ iResolution - resolution of the input texture, usually used to normalize gl_FragCoord as such: `gl_FragCoord.xy / iResolution`.\n- _sampler2D_ iTexture - input texture, either output of the previously applied program or drawn texture.\n\nVertex shaders also include a `position` attribute. (_vec3_ position).\n\n### Imports\n\nfxGlue includes a syntax for inclusion of modules.\n\n    @use math\n    @use wrap\n\nThe `@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.\n\nThere are two partials included with fxGlue: math and wrap.\n\n## Partials\n\nCustom partials can be registered by calling `registerImport`.\n\n### math\n\nIncludes math constants and functions.\n\n```glsl\n#define PI 3.1415926538\n#define PI2 6.283185307179586\n#define PI_HALF 1.5707963267948966\n#define RECIPROCAL_PI 0.3183098861837907\n#define RECIPROCAL_PI2 0.15915494309189535\n#define EPSILON 1e-6\n#define E 2.718281828459045\n\nfloat pow2(const in float x)\nfloat pow3(const in float x)\nfloat pow4(const in float x)\n\nfloat atan2(const in float y, const in float x)\nfloat atan2(const in vec2 v)\n```\n\n### wrap\n\nIncludes functions related to accessing textures.\n\n```glsl\n// Repeats a float from 0.0 to 1.0, in a mirrored tile fashion.\nfloat mirroredRepeat(const in float a)\n\n// Repeats the texture in a mirrored tile fashion.\nvec2 mirroredRepeat(const in vec2 uv)\n\n// Repeats a float from 0.0 to 1.0, in a tile fashion.\nfloat repeat(const in float a)\n\n// Repeats the texture in a tile fashion.\nvec2 repeat(const in vec2 uv)\n\n// Clips the texture within given bounds.\nfloat clip(const in vec2 v, const in vec4 bounds)\n\n// Clips the texture within 0.0;0.0 to 1.0;1.0.\nfloat clip(const in vec2 v)\n\n// Clips the texture within given bounds, smoothly, based on provided radius x.\nfloat clipSmooth(const in vec2 v, const in vec4 bounds, const in float x)\n\n// Clips the texture within 0.0;0.0 to 1.0;1.0, smoothly, based on provided radius x.\nfloat clipSmooth(const in vec2 v, const in float x)\n```\n\n### color\n\nIncludes HSL and HSV related functions.\n\n```glsl\n// Converts one color value.\nfloat hue2rgb(float f1, float f2, float hue)\n\n// Converts vec3(h, s, l) to vec3(r, g, b).\nvec3 hsl2rgb(vec3 hsl)\n\n// Converts vec3(h, s, v) to vec3(r, g, b).\nvec3 hsv2rgb(vec3 hsv)\n\n// Converts vec3(r, g, b) to vec3(h, s, l).\nvec3 rgb2hsl(vec3 rgb)\n\n// Converts vec3(r, g, b) to vec3(h, s, v).\nvec3 rgb2hsv(vec3 rgb)\n```\n\n### noise\n\nContains noise functions from [webgl-noise](https://github.com/ashima/webgl-noise).\n\n```glsl\n// Cellular 2D noise\nvec2 cellular(vec2 P)\n\n// 2D noise\nfloat snoise(vec2 v)\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmat-sz%2Ffxglue","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmat-sz%2Ffxglue","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmat-sz%2Ffxglue/lists"}