{"id":20735240,"url":"https://github.com/satelllte/wgsl-canvas","last_synced_at":"2025-04-23T23:42:30.631Z","repository":{"id":262020262,"uuid":"866205129","full_name":"satelllte/wgsl-canvas","owner":"satelllte","description":"Simple way to run WebGPU shaders on HTML Canvas","archived":false,"fork":false,"pushed_at":"2024-11-10T00:11:15.000Z","size":800,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-11-10T00:21:54.478Z","etag":null,"topics":["gpu","webgpu","webgpu-shaders","wgsl","wgsl-canvas","wgsl-shader"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@wgsl-canvas/core","language":"TypeScript","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/satelllte.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":"2024-10-01T20:35:20.000Z","updated_at":"2024-11-10T00:11:18.000Z","dependencies_parsed_at":"2024-11-10T00:22:00.989Z","dependency_job_id":"c1f1420a-dbdc-41c6-8f2c-0807dbe86c9f","html_url":"https://github.com/satelllte/wgsl-canvas","commit_stats":null,"previous_names":["satelllte/wgsl-canvas"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/satelllte%2Fwgsl-canvas","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/satelllte%2Fwgsl-canvas/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/satelllte%2Fwgsl-canvas/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/satelllte%2Fwgsl-canvas/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/satelllte","download_url":"https://codeload.github.com/satelllte/wgsl-canvas/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224036441,"owners_count":17245034,"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":["gpu","webgpu","webgpu-shaders","wgsl","wgsl-canvas","wgsl-shader"],"created_at":"2024-11-17T05:35:02.177Z","updated_at":"2024-11-17T05:35:02.729Z","avatar_url":"https://github.com/satelllte.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# wgsl-canvas\n\nSimple way to run WebGPU shaders on HTML Canvas.\n\n## Install\n\nTo install, run:\n\n```sh\nnpm i --save-exact @wgsl-canvas/core\n```\n\n### With TypeScript (Recommended)\n\nIf you're using [TypeScript](https://www.typescriptlang.org/), it would be helpful to add [@webgpu/types](https://github.com/gpuweb/types), so your codebase will be aware of WebGPU-related types. \n\nTo install them, run:\n\n```sh\nnpm i --save-dev @webgpu/types\n```\n\nThen add them into your `tsconfig.json`:\n\n```jsonc\n{\n  // ...\n  \"compilerOptions\": {\n    // ...\n    \"types\": [\"@webgpu/types\"]\n  }\n}\n```\n\n## Get started\n\nHere's the base example for you to get started:\n\n```ts\nimport { WGSLCanvas } from \"@wgsl-canvas/core\";\n\n// 1. Check WebGPU support\nif (!WGSLCanvas.isSupported()) {\n  alert(\"WebGPU is not supported in this browser\");\n  return;\n}\n\n// 2. Create a canvas\nconst canvas = document.createElement(\"canvas\");\ncanvas.width = 500;\ncanvas.height = 500;\ndocument.body.appendChild(canvas);\n\n// 3. Create an instance of \"WGSLCanvas\" and initialize it\nconst wgslCanvas = new WGSLCanvas({ canvas });\nawait wgslCanvas.init();\n\n// 4. Make your first render\nwgslCanvas.render();\n```\n\nIf everything is set up correctly, you should see this picture (which is the default fragment shader located under `WGSLCanvas.SHADER_FRAGMENT_DEFAULT` static field):\n\n\u003cimg alt=\"Default fragment shader\" src=\"./README.shader-default.png\" width=\"250\" height=\"250\" /\u003e\n\n### Passing custom shader\n\nTo pass your custom shader, define it as a string of WGSL code.\n\n```ts\nconst shaderFragment = /* wgsl */`\nstruct FragmentOutput {\n  @location(0) color: vec4\u003cf32\u003e,\n}\n\n@fragment\nfn fragment_main() -\u003e FragmentOutput {\n  var output: FragmentOutput;\n  output.color = vec4\u003cf32\u003e(0.1, 0.2, 0.25, 1.0);\n  return output;\n}\n`;\n```\n\nAnd then pass it to `WGSLCanvas` instance via `shaderFragment` property:\n\n```ts\nwgslCanvas.shaderFragment = shaderFragment;\n```\n\n\u003e [!TIP]\n\u003e If you want to store your WGSL code under `.wgsl` files, you should configure your bundler to be able to resolve them as strings. The easiest way is to start with Vite, which can do this out of the box via [`?raw` suffix](https://vite.dev/guide/assets#importing-asset-as-string).\n\nSee full example here:\n- [apps/examples/src/examples/Example01Color.ts](./apps/examples/src/examples/Example01Color.ts)\n- [apps/examples/src/examples/Example01Color.wgsl](./apps/examples/src/examples/Example01Color.wgsl)\n\n### Passing uniforms\n\nTo pass uniforms to your shader, you should first define them in `uniformsKeys` array in your `WGSLCanvas` instance:\n\n```ts\nwgslCanvas.uniformsKeys = [\"time\", \"color1\", \"color2\"];\n```\n\nThen, you can pass the values in `uniforms` object:\n\n```ts\nwgslCanvas.uniforms.time = 0.0;\nwgslCanvas.uniforms.color1 = [1.0, 0.0, 0.0];\nwgslCanvas.uniforms.color2 = [0.0, 0.0, 1.0];\n```\n\nThen, they'll be available under `var\u003cuniform\u003e` object at `@group(0)`, `@binding(0)` in your WGSL shader:\n\n```wgsl\n@group(0) @binding(0) var\u003cuniform\u003e uniforms: Uniforms;\n\nstruct Uniforms {\n  time: f32,\n  color1: vec3\u003cf32\u003e,\n  color2: vec3\u003cf32\u003e,\n}\n```\n\n\u003e [!IMPORTANT]  \n\u003e The order of keys in `struct Uniforms` must be the same as defined in `uniformsKeys` array!\n\nSee full example here:\n- [apps/examples/src/examples/Example02Uniforms.ts](./apps/examples/src/examples/Example02Uniforms.ts)\n- [apps/examples/src/examples/Example02Uniforms.wgsl](./apps/examples/src/examples/Example02Uniforms.wgsl)\n\n### Passing textures\n\nMake sure you have your texture file served under some URL (can be absolute or relative).\n\nThen, you can load it via `WGSLCanvas.loadTexture` static method to get an `ImageBitmap` image:\n\n```ts\nconst textureUrl = \"https://example.com/YOUR_TEXTURE.jpg\";\nconst texture = await WGSLCanvas.loadTexture(textureUrl);\n```\n\nThen, pass it into `textures` array of your `WgslCanvas` instance:\n\n```ts\nwgslCanvas.textures = [texture];\n```\n\nIn WGSL shader, it'll appear under the following vars:\n\n```wgsl\n@group(0) @binding(0) var texture_sampler: sampler;\n@group(0) @binding(1) var texture: texture_2d\u003cf32\u003e;\n```\n\n\u003e [!NOTE]  \n\u003e If you have uniforms, they'll appear at `@binding(0)`, but `sampler` and `textures` will appear under their bindings incremented by 1.\n\nSee full example here:\n- [apps/examples/src/examples/Example03Texture.ts](./apps/examples/src/examples/Example03Texture.ts)\n- [apps/examples/src/examples/Example03Texture.wgsl](./apps/examples/src/examples/Example03Texture.ts)\n\n## Examples\n\nSee various examples at [apps/examples/src/examples](./apps/examples/src/examples).\n\nTo run them live, you can clone this repository, install dependencies via `npm install` and then run \n\n```sh\nnpm run dev\n```\n\nwhich will open the dev server at http://localhost:5173 by [Vite](https://vite.dev/).\n\n## API\n\nCheck out auto-generated docs here: [tsdocs.dev:@wgsl-canvas/core](https://tsdocs.dev/docs/@wgsl-canvas/core)\n\n## Version history\n\nSee [CHANGELOG.md](./CHANGELOG.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsatelllte%2Fwgsl-canvas","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsatelllte%2Fwgsl-canvas","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsatelllte%2Fwgsl-canvas/lists"}