{"id":17481201,"url":"https://github.com/paratron/shaderboy","last_synced_at":"2025-06-19T15:36:32.242Z","repository":{"id":141688293,"uuid":"80446824","full_name":"Paratron/shaderboy","owner":"Paratron","description":"A library that makes pixel-based animation of images in websites like eating candy","archived":false,"fork":false,"pushed_at":"2017-04-11T22:30:33.000Z","size":228,"stargazers_count":21,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-10-19T01:18:40.391Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Paratron.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,"publiccode":null,"codemeta":null}},"created_at":"2017-01-30T17:50:02.000Z","updated_at":"2022-11-26T07:22:07.000Z","dependencies_parsed_at":null,"dependency_job_id":"188046ad-1f0a-433d-8a6f-620ec1e251d9","html_url":"https://github.com/Paratron/shaderboy","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Paratron%2Fshaderboy","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Paratron%2Fshaderboy/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Paratron%2Fshaderboy/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Paratron%2Fshaderboy/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Paratron","download_url":"https://codeload.github.com/Paratron/shaderboy/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250246868,"owners_count":21398951,"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":[],"created_at":"2024-10-18T22:08:52.482Z","updated_at":"2025-04-22T13:23:48.738Z","avatar_url":"https://github.com/Paratron.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Shaderboy\n=========\n\nThis library makes it easy to use GLSL shaders on your websites to create really fast, pixel-based animations for images.\n\nSimply place an `\u003cimg\u003e` tag somewhere, write a GLSL shader for it and connect them with shaderboy.\n\nHere`s a demo: https://wearekiss.com/preview/shaderboy/test.html\n\n## Changelog\n\n- __Version 1.1__: Now passing mouse-related data to the shaders\n\n## Basic usage\n\nFirst, download `shaderboy.js` or `shaderboy.min.js` and load it in your html document.\n \n````javascript\n\u003cscript src=\"shaderboy.min.js\"\u003e\u003c/script\u003e\n````\n\nYou need to write a GLSL shader to manipulate the pixeldata of your images. You can either store your shader(s) in \nseparate files on your server, or embed them in script tags into your document - its totally up to you.\n\nTo advise shaderboy which images it should manipulate and how to do that, you need to apply some `data-*` attributes\nto your `\u003cimg\u003e` elements.\n\nThe easiest way to attach a GLSL shader to an `\u003cimg\u003e` element is this:\n\n````html\n\u003cimg src=\"myimage.jpg\" alt=\"My cool animation\" data-shader=\"myshader.glsl\" /\u003e\n````\n\nShaderboy will try to load the file `./myshader.glsl` via AJAX and will start to animate the image as soon as it has been loaded.\n\nIf you have embedded your shader directly into the HTML document, you need to apply an id to the script tag and tell\nshaderboy to use the shader with the given id:\n\n````html\n\u003cscript type=\"text/glsl\" id=\"myshader\"\u003e\n\t// SHADER DATA\n\u003c/script\u003e\n\u003cimg src=\"myimage.jpg\" alt=\"My cool animation\" data-shader=\"#myshader\" /\u003e\n````\n\nThe `#` symbol tells shaderboy that `data-shader` should be treated as an id reference rather than a url.\n\n## Whats happening next\n\nShaderboy will replace the `\u003cimg\u003e` element with a `\u003ccanvas\u003e` element. If you have placed\nany css classnames on the image, they will be copied over to the canvas element.\n\nAfter the image has been replaced, the WebGL context will be created by shaderboy, any additional\ntextures are being loaded and the animation is started.\n\n## Using multiple textures\n\nA modern shader can utilize multiple textures to be used as masks or data sources to compose\ncomplicated effects. Shaderboy allows you as well to load multiple textures to be used to \nanimate _one_ image tag. Define them like so:\n\n````html\n\u003cimg\n\tsrc=\"myimage.jpg\"\n\talt=\"My cool animation\"\n\tdata-shader=\"myshader.glsl\"\n\tdata-texture0=\"a-texture.jpg\"\n\tdata-texture1=\"mymask.png\"\n /\u003e\n````\n\nCurrently, shaderboy allows you to load up to 6 additional texures (together with your original images data)\ninto your shaders. Simply place the attributes `data-texture0` to `data-texture5`.\n\nAll loaded image data - the information of your original `\u003cimg\u003e` tag, as well as any\nadditionally loaded textures are made available inside your GLSL shaders.\n\nRead more about how to access them, below.\n\n## GLSL variables\n\nShaderboy provides a couple of variables you may access inside your GLSL shaders:\n\n````glsl\nuniform sampler2D image;\nuniform sampler2D texture0;\nuniform sampler2D texture1;\n# ... up to texture5\nuniform float time;\nvarying vec2 pixelCoords;\n\nuniform vec2 mouseCoords;\nuniform int mouseDownLeft;\nuniform int mouseDownRight;\n````\n\nThe original images data is provided as a texture named `image`, all additionally loaded texures\ncan be accessed through `texture0` to `texture5`.\n\nTogether with the image data, shaderboy will pass a `time` variable to enable you to change your shaders appearance\nover time, as well as a vector named `pixelCoords` that contains the coordinates of the currently rendered pixel.\n\nMouse data has been added in version 1.1 - you can grab a vec2 with `mouseCoords` that\nare already mapped to the WebGL coordinates space (x from 0 to 1, y from 1 to 0).\n\nThe uniforms `mouseDownLeft` and `mouseDownRight` are either 0 or 1 - depending on if one of those\nmouse buttons have been pressed.\n\n## How the hell do I write GLSL shaders?\n\nWell, there are a lot of books out there that help you learn \"GLSL es\" - the version of GLSL that is used\nby WebGL.\n\nIf you want to have a free introduction into the topic, I recommend [The book of shaders](https://thebookofshaders.com/) - I also recommend you to donate something to the author,\nbecause he had a lot of work creating this great book!\n\nHave fun with shaderboy - and don't forget to share your creations with me :)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fparatron%2Fshaderboy","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fparatron%2Fshaderboy","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fparatron%2Fshaderboy/lists"}