{"id":22356877,"url":"https://github.com/ayamflow/standalone-shader","last_synced_at":"2025-06-24T14:41:28.327Z","repository":{"id":149854559,"uuid":"138225304","full_name":"ayamflow/standalone-shader","owner":"ayamflow","description":"A native webgl wrapper for 2D shaders.","archived":false,"fork":false,"pushed_at":"2021-09-06T10:34:19.000Z","size":440,"stargazers_count":35,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-06T06:35:02.069Z","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/ayamflow.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":"2018-06-21T21:51:38.000Z","updated_at":"2024-11-14T15:17:32.000Z","dependencies_parsed_at":"2023-04-05T09:31:28.349Z","dependency_job_id":null,"html_url":"https://github.com/ayamflow/standalone-shader","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/ayamflow/standalone-shader","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ayamflow%2Fstandalone-shader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ayamflow%2Fstandalone-shader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ayamflow%2Fstandalone-shader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ayamflow%2Fstandalone-shader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ayamflow","download_url":"https://codeload.github.com/ayamflow/standalone-shader/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ayamflow%2Fstandalone-shader/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261695650,"owners_count":23195792,"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-12-04T14:12:17.681Z","updated_at":"2025-06-24T14:41:28.319Z","avatar_url":"https://github.com/ayamflow.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# standalone-shader\n\nA native webgl wrapper for 2D shaders.\n\n![standalone-shader](https://i.imgur.com/osvHp7f.jpg)\n\nSimilar to [gl-shader](https://github.com/stackgl/gl-shader) but with a smaller scope and naive approach.\nThis uses the [\"big triangle\" approach](https://michaldrobot.com/2014/04/01/gcn-execution-patterns-in-full-screen-passes/) instead of a quad.\nThis is an ES6 library.\n\n\u003e :warning: experimental package made for learning purposes\n\n### Installation :package:\n\n```bash\nnpm i ayamflow/standalone-shader -S\n```\n\n### Usage :book:\n\n#### createShader(options)\n`options {}` can contain the following parameters:\n- canvas `CanvasHTMLElement`\n- settings `{}` [passed to the context](https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/getContextAttributes)\n- uniforms `{}`\n- vertexShader `(string)`\n- fragmentShader `(string)`\n- clearColor `([r, g, b, a] array)`\n\nAll parameters are optional.\n`time` and `resolution` uniforms are automatically passed to the shader.\n\nUniform examples:\n\n```js\n    time: {\n        type: 'float',\n        value: 0\n    },\n    resolution: {\n        type: 'vec2',\n        value: [480, 320]\n    },\n    map: {\n        type: 'sampler2D',\n        value: new Image(),\n        wrapS: 'mirror', // defaults to 'clamp'\n        wrapT: 'repeat', // defaults to 'clamp'\n        filter: 'nearest' // defaults to 'linear'\n    }\n```\n\n#### shader.start\nStarts the rendering loop.\n\n#### shader.stop\nStops the rendering loop.\n\n#### shader.resize(width, height)\nResize the canvas and update the `resolution` uniform.\n\n#### shader.onTick(time)\nCalled at every frame of the loop. Override to define your custom behavior.\n\n#### shader.destroy\nUnbinds gl variables and remove the canvas from the DOM.\n\n### Example :floppy_disk:\n\n```js\n    import createShader from 'standalone-shader'\n\n    let img = new Image()\n    img.src = './texture.jpg'\n\n    let shader = createShader({\n        dpr: window.devicePixelRatio || 1,\n        canvas: document.querySelector('canvas'),\n        uniforms: {\n            map: {\n                type: 'sampler2D',\n                value: img,\n                wrapS: 'clamp',\n                filter: 'nearest'\n            }\n        },\n        fragmentShader: `\n            precision highp float;\n\n            uniform vec2 resolution;\n            uniform float time;\n            uniform sampler2D map;\n            varying vec2 vUv;\n\n            void main() {\n                vec2 st = gl_FragCoord.xy / resolution.xy;\n                st.x *= resolution.x / resolution.y;\n\n                gl_FragColor = texture2D(map, st);\n            }\n        `\n    })\n    shader.resize(600, 400)\n    shader.start()\n\n    shader.onTick = function(time) {\n        // change some uniform value\n    }\n\n    // or you could resize following browser events\n    window.addEventListener('resize', function() {\n        shader.resize(innerWidth, innerHeight)\n    })\n\n```\n[Demo.](https://ayamflow.github.io/standalone-shader/demo)\n\n### TODO\n- mipmap filters\n- uniform type detection\n- better error log\n- renderer options (alpha, ...)\n- extensions (derivatives, ...)\n- context lost/restore\n- ...\n\n### License :pencil:\n\nMIT. See [LICENSE](http://github.com/ayamflow/standalone-shader/blob/master/LICENSE) for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fayamflow%2Fstandalone-shader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fayamflow%2Fstandalone-shader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fayamflow%2Fstandalone-shader/lists"}