{"id":25601395,"url":"https://github.com/magnusthor/demolishedwebgpu","last_synced_at":"2026-05-19T09:31:38.691Z","repository":{"id":45495095,"uuid":"414119761","full_name":"MagnusThor/demolishedWebGPU","owner":"MagnusThor","description":"demolishedWebGPU is a shader rendering engine based on WebGPU","archived":false,"fork":false,"pushed_at":"2024-06-26T09:48:51.000Z","size":22239,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-02-21T15:55:08.753Z","etag":null,"topics":["demoscene","glsl","javascript","shaders","spir-v","typescript","webgl","webgpu","webgpu-api"],"latest_commit_sha":null,"homepage":"https://MagnusThor.github.io/demolishedWebGPU/example","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MagnusThor.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2021-10-06T07:53:38.000Z","updated_at":"2024-12-10T15:43:36.000Z","dependencies_parsed_at":"2024-06-12T12:24:57.651Z","dependency_job_id":"3b92eaa1-1078-4453-b1e5-2462837ec9c6","html_url":"https://github.com/MagnusThor/demolishedWebGPU","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/MagnusThor/demolishedWebGPU","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MagnusThor%2FdemolishedWebGPU","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MagnusThor%2FdemolishedWebGPU/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MagnusThor%2FdemolishedWebGPU/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MagnusThor%2FdemolishedWebGPU/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MagnusThor","download_url":"https://codeload.github.com/MagnusThor/demolishedWebGPU/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MagnusThor%2FdemolishedWebGPU/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263628953,"owners_count":23491086,"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":["demoscene","glsl","javascript","shaders","spir-v","typescript","webgl","webgpu","webgpu-api"],"created_at":"2025-02-21T15:54:25.410Z","updated_at":"2026-05-19T09:31:38.563Z","avatar_url":"https://github.com/MagnusThor.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# demolishedWebGPU\n\n\ndemolishedWebGPU is a shader rendering engine based on WebGPU. WebGPU is a new web API that exposes modern computer graphics capabilities, specifically Direct3D 12, Metal, and Vulkan, for performing rendering and computation operations on a GPU.\n\nThis project; demolishedWebGPU is an WebGPU implementation of the existing demolishedRenderer engine (https://github.com/MagnusThor/demolishedRenderer).\n\nThis an early version, but the following features is available now \n\n1. Multi-pass/1-n shader programs/buffers \n2. 1-n textures \u0026 samplers\n3. Custom uniforms\n4. Custom geometrys\n5. Multipass rendering using WebGPU compute shaders \n\n## Using WebGPU Fragment shader only\n\n```\nconst canvas = document.querySelector('canvas') as HTMLCanvasElement;\n\n \n  const renderer = new Renderer(canvas);\n  const device = await renderer.getDevice();\n\n  const scene = new Scene(\"myScene\", device, canvas);\n  \n  const material = new Material(device, raymarchShader);    \n\n  const geometry = new Geometry(device, rectGeometry);\n \n  const textures: Array\u003cITexture\u003e = [\n    {\n      key: \"iChannel0\",\n      source: \"assets/channel0.jpg\", \n      type: TextureType.IMAGE,\n    },\n\n    {\n      key: \"iChannel1\",\n      source: \"assets/channel1.jpg\",\n      type: TextureType.IMAGE\n    },\n  ];\n\n  const mesh = new Mesh(device, geometry, material,[textures[0],textures[1]]); \n  \n  await scene.addAssets(textures);\n\n  scene.addMesh(\"myMesh\", mesh);\n\n  await renderer.addScene(scene)\n\n  renderer.start(0,200,(frameNo) =\u003e {\n    // noop\n  });\n\n```\n\n## Using WebGPU ComputeShaders + Fragmentshaders\n\n```\n\n  const renderer = new ComputeRenderer(document.querySelector(\"canvas\"));\n    \n  await renderer.init();\n  renderer.addComputeRenderPass(\"iChannel0\", computeRaymarchShader);\n\n  const material = new Material(renderer.device, mainShader);\n\n  renderer.addRenderPass(material);\n        renderer.start(0, 200, (frame) =\u003e {\n            fps.frame();\n  });\n\n\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmagnusthor%2Fdemolishedwebgpu","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmagnusthor%2Fdemolishedwebgpu","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmagnusthor%2Fdemolishedwebgpu/lists"}