{"id":20426001,"url":"https://github.com/seleb/webglazy","last_synced_at":"2025-04-12T19:03:26.137Z","repository":{"id":42287784,"uuid":"97677647","full_name":"seleb/WebGLazy","owner":"seleb","description":"Responsive + configurable WebGL canvas replacement","archived":false,"fork":false,"pushed_at":"2024-09-27T12:39:35.000Z","size":498,"stargazers_count":18,"open_issues_count":0,"forks_count":1,"subscribers_count":4,"default_branch":"main","last_synced_at":"2024-11-09T01:48:49.878Z","etag":null,"topics":["canvas","javascript","webgl"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/webglazy","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/seleb.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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-07-19T05:50:19.000Z","updated_at":"2024-09-27T12:39:38.000Z","dependencies_parsed_at":"2024-06-21T16:53:03.660Z","dependency_job_id":"5bd87661-9fdd-4b2b-8e3f-46ecd559e734","html_url":"https://github.com/seleb/WebGLazy","commit_stats":{"total_commits":94,"total_committers":3,"mean_commits":"31.333333333333332","dds":0.1063829787234043,"last_synced_commit":"c3e88e6e3fa7a06726c6715a781227e19d901ded"},"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seleb%2FWebGLazy","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seleb%2FWebGLazy/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seleb%2FWebGLazy/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seleb%2FWebGLazy/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/seleb","download_url":"https://codeload.github.com/seleb/WebGLazy/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224742382,"owners_count":17362232,"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":["canvas","javascript","webgl"],"created_at":"2024-11-15T07:14:55.980Z","updated_at":"2024-11-15T07:14:56.694Z","avatar_url":"https://github.com/seleb.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# WebGLazy\n\nResponsive + configurable WebGL canvas replacement\n\n![example](https://seans.site/stuff/WebGLazy/example.gif \"example\")\n\n## How to Use\n\n### Browser\n\n1. Download [./dist/WebGLazy.min.js](WebGLazy.min.js) and add it to your project's files\n1. Add `\u003cscript src='WebGLazy.min.js'\u003e\u003c/script\u003e` to your page's `\u003chead\u003e`\n\n### Node\n\n1. `npm install webglazy --save`\n1. `import WebGLazy from 'webglazy';`\n\n### Use\n\nAdd `new WebGLazy();` somewhere in your code after your game's canvas has been initialized. If you're not sure where/when that happens, alternatively add a new tag that calls the same code after a short delay (e.g. `\u003cscript\u003esetTimeout(function(){new WebGLazy();}, 1000);\u003c/script\u003e`).\n\n### Configuration\n\n`WebGLazy` behaviour can be configured by passing an options object into the constructor; e.g.:\n\n```js\nnew WebGLazy({\n    background: 'white',\n    scaleMode: WebGLazy.SCALE_MODES.COVER,\n    source: document.getElementById('myGameCanvas')\n});\n```\n\n* `source`\n  : Element to treat as a source for output; default: see `sources`\n* `sources`\n  : If `source` isn't provided, finds the first tag from this list of possible tags; default: `['canvas', 'video', 'img']`\n* `hideSource`\n  : If `true`, extra CSS is used to hide everything except the output canvas; default: `true`\n* `background`\n  : Background CSS applied to HTML, BODY, and canvasContainer element; default: `'black'`\n* `scaleMultiplier`\n  : Multiplier applied to size of source canvas; default: `1`\n* `scaleMode`\n  : Defines the scaling behaviour of the output canvas; see [Scale Modes](#scale-modes) for possible settings; default: `WebGLazy.SCALE_MODES.FIT`\n* `allowDownscaling`\n  : Allow scaling the output canvas smaller than the original size * `scaleMultiplier` (only applies when scaleMode is `FIT` or `COVER`); default: `false`\n* `autoInit`\n  : Call `this.init` in constructor; default: `true`\n* `timestep`\n  : Target duration between frames (in milliseconds); default: `1 / 60 * 1000`, i.e. 60fps\n* `pixelate`\n  : If `true`, uses `GL_NEAREST` and `image-rendering: pixelated`; default: `true`\n* `disableFeedbackTexture`\n  : Disables a second texture, which contains a copy of the WebGL output; default: `false`\n* `disableMouseEvents`\n  : if `true`, MouseEvents triggered on the output canvas will not be dispatched on the source element; default: `false`\n* `vertex`\n  : Vertex shader source; default: a functional pass-through\n* `fragment`\n  : Frament shader source; default: a functional pass-through\n\n### Scale Modes\n\nScale modes define how the output canvas is scaled in relation to the screen size. Available scale modes are:\n\n* `WebGLazy.SCALE_MODES.FIT`\n  : scale output canvas to fit screen (i.e. largest possible size with all content visible)\n* `WebGLazy.SCALE_MODES.COVER`\n  : scale output canvas to cover screen (i.e. smallest possible size with no background visible)\n* `WebGLazy.SCALE_MODES.MULTIPLES`\n  : scale up in multiples of original size (e.g. if the source's original size was 256x256 and the screen size is 1920x1080, the output canvas will be 1024x1024). This mode is particularly useful for upscaling pixel-art without artifacts.\n* `WebGLazy.SCALE_MODES.NONE`\n  : output canvas size doesn't scale with screen\n\n![handy-dandy scaleMode diagram](https://seans.site/stuff/WebGLazy/scaleModes.svg \"handy-dandy scaleMode diagram\")\n\n### Post-processing\n\nSince `WebGLazy` renders to a WebGL canvas, simple post-processing shader support is made trivially easy!\nUse the `vertex` and `fragment` options to override the default shaders.\n\nAvailable uniforms:\n\n```glsl\nuniform sampler2D tex0;  // source\nuniform sampler2D tex1;  // output from last frame\nuniform vec2 resolution; // size of output (uv coordinates = gl_FragCoord.xy / resolution)\nuniform float time;      // milliseconds since initialization (equal to performance.now())\n```\n\nExample vertex shader:\n\n```glsl\n// pass-through vertex shader\nattribute vec4 position;\nvoid main(){\n\tgl_Position = position;\n}\n```\n\nExample fragment shader:\n\n```glsl\n// uv-wave fragment shader\nprecision mediump float;\nuniform sampler2D tex0;\nuniform sampler2D tex1;\nuniform float time;\nuniform vec2 resolution;\n\nvoid main(){\n\tvec2 coord = gl_FragCoord.xy;\n\tvec2 uv = coord.xy / resolution.xy;\n\tuv.x += sin(uv.y * 10.0 + time / 200.0) / 60.0;\n\tuv.y += cos(uv.x * 10.0 + time / 200.0) / 60.0;\n\tvec3 col = texture2D(tex0,uv).rgb;\n\tgl_FragColor = vec4(col, 1.0);\n}\n```\n\n## Limitations\n\n* Behaviour with multiple instances of `WebGLazy` on a single page is undefined\n* If WebGL is not supported, `WebGLazy` will fallback to 2D canvas rendering, which does not support shaders\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fseleb%2Fwebglazy","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fseleb%2Fwebglazy","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fseleb%2Fwebglazy/lists"}