{"id":15100592,"url":"https://github.com/webgpu/webgpufundamentals","last_synced_at":"2026-02-03T11:07:10.192Z","repository":{"id":45314103,"uuid":"138106422","full_name":"webgpu/webgpufundamentals","owner":"webgpu","description":null,"archived":false,"fork":false,"pushed_at":"2025-03-11T07:07:55.000Z","size":153535,"stargazers_count":744,"open_issues_count":7,"forks_count":104,"subscribers_count":29,"default_branch":"main","last_synced_at":"2025-03-11T11:56:49.508Z","etag":null,"topics":["graphics","webgpu"],"latest_commit_sha":null,"homepage":"https://webgpufundamentals.org","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/webgpu.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-21T01:55:57.000Z","updated_at":"2025-03-11T07:06:24.000Z","dependencies_parsed_at":"2025-03-11T08:29:54.760Z","dependency_job_id":null,"html_url":"https://github.com/webgpu/webgpufundamentals","commit_stats":null,"previous_names":["webgpu/webgpufundamentals","gfxfundamentals/webgpufundamentals"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webgpu%2Fwebgpufundamentals","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webgpu%2Fwebgpufundamentals/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webgpu%2Fwebgpufundamentals/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webgpu%2Fwebgpufundamentals/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/webgpu","download_url":"https://codeload.github.com/webgpu/webgpufundamentals/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243330323,"owners_count":20274039,"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":["graphics","webgpu"],"created_at":"2024-09-25T18:00:35.308Z","updated_at":"2026-02-03T11:07:05.153Z","avatar_url":"https://github.com/webgpu.png","language":"HTML","funding_links":[],"categories":["HTML","Graphics"],"sub_categories":[],"readme":"WebGPU Fundamentals\n=====================\n\nThis is [a series of lessons or tutorials about webgpu](http://webgpufundamentals.org/).\n\nThis is work in progress. Feel free to contribute, especially localizations\n\n## Contributing\n\nOf course bug fixes are always welcome.\n\nIf you'd like to write a new article please try to always take\none step at a time. Don't do 2 or more things in a single step.\nExplain any new math in the simplest terms possible. Ideally\nwith diagrams where possible. Also it's probably best to\nask to make sure someone else isn't already working on a similar\narticle.\n\n### Translating\n\nEach translation goes in a folder under `webgpu/lessons/\u003ccountry-code\u003e`.\n\nRequired files are\n\n    langinfo.hanson\n    index.md\n    toc.html\n\n#### `langinfo.hanson`\n\nDefines various language specific options.\n[Hanson](https://github.com/timjansen/hanson) is a JSON like format but allows comments.\n\nCurrent fields are\n\n    {\n      // The language (will show up in the language selection menu)\n      language: 'English',\n\n      // Phrase that appears under examples\n      defaultExampleCaption: \"click here to open in a separate window\",\n\n      // Title that appears on each page\n      title: 'WebGPU Fundamentals',\n\n      // Basic description that appears on each page\n      description: 'Learn WebGPU',\n\n      // Link to the language root.\n      link: 'http://webgpufundamentals.org/webgpu/lessons/ja',  // replace `ja` with country code\n\n      // html that appears after the article and before the comments\n      commentSectionHeader: '\u003cdiv\u003eQuestions? \u003ca href=\"http://stackoverflow.com/questions/tagged/webgpu\"\u003eAsk on stackoverflow\u003c/a\u003e.\u003c/div\u003e\\n        \u003cdiv\u003eIssue/Bug? \u003ca href=\"http://github.com/webgpu/webgpufundamentals/issues\"\u003eCreate an issue on github\u003c/a\u003e.\u003c/div\u003e',\n\n      // markdown that appears for untranslated articles\n      missing: \"Sorry this article has not been translated yet. [Translations Welcome](https://github.com/webgpu/webgpufundamentals)! 😄\\n\\n[Here's the original English article for now]({{{origLink}}}).\",\n\n      // the phrase \"Table of Contents\"\n      toc: \"Table of Contents\",\n\n      // translation of categories\n      categoryMapping: {\n        'basics': 'Basics',\n        'solutions:' 'Solutions',\n        'webvr': 'WebVR',\n        'optimization': 'Optimization',\n        'tips': 'Tips',\n        'fundamentals': 'Fundamentals',\n        'reference': 'Reference',\n      },\n\n    }\n\n#### `index.md`\n\nThis is the template for the main page for each language\n\n#### `toc.html`\n\nThis is template for the table of contents for the language.\nIt is included on both the index and on each article. The only\nparts not auto-generated are the ending links which\nyou can translate if you want to.\nThe build system will create a placeholder for every English article for which there is no corresponding article in that language. \nIt will be filled with the `missing` message from above.\n\n#### `lang.css`\n\nThis is included if and only if it exists. I'd strongly prefer not to have to\nuse it. In particular I don't want people to get into arguments about fonts\nbut basically it's a way to choose the fonts per language. You should only set\nthe variables that are absolutely needed. Example\n\n```css\n/* lessons/ko/lang.css */\n\n/* Only comment in overrides as absolutely necessary! */\n:root {\n  --article-font-family: \"best font for korean article text\";\n  --headline-font-family: \"best font for korean headlines\";\n  /* a block of code */\n  /* --code-block-font-family: \"Lucida Console\", Monaco, monospace; */\n  /* a word in a sentence */\n  /* --code-font-family: monospace; */\n}\n```\n\nNotice 2 settings are not changed. It seems unlikely to me that code would\nneed a different font per language.\n\nPS: While we're here, I love code fonts with ligatures but they seem like a bad\nidea for a tutorial site because the ligatures hide the actual characters needed\nso please don't ask for or use a ligature code font here.\n\n#### Translation notes\n\nThe build process will make a placeholder html file for each article has an english .md file in\n`webgpu/lessons` but no corresponding .md file for the language. This is to make it easy to include\nlinks in one article that links to another article but that other article has not yet been translated.\nThis way you don't have to go back and fix already translated articles. Just translate one article\nat a time and leave the links as is. They'll link to placeholders until someone translates the missing\narticles.\n\nArticles have front matter at the top\n\n```\nTitle: Localized Title of article\nDescription: Localized description of article (used in RSS and social media tags)\nTOC: Localized text for Table of Contents\n```\n\n**DO NOT CHANGE LINKS** : For example a link to a local resources might look like\n\n    [text](link)\n\nor\n\n    \u003cimg src=\"somelink\"\u003e\n\nWhile you can add query parameters (see below) do not add \"../\" to try to make the link relative to the\n.md file. Links should stay as though the article exists at the same location as the original English.\n\n### To build\n\nThe site is built into the `out` folder\n\nSteps\n\n    git clone https://github.com/webgpu/webgpufundamentals.git\n    npm ci\n    npm run build\n    npm start\n\nnow open your browser to `http://localhost:8080`\n\n### Continuous build\n\nYou can run `npm run watch` to get continuous building.\nOnly the article .md files and files that are normally copied are supported.\nThe table of contents, templates, and index pages are not watched.\n\n### Development\n\nIf you are working on updating dependencies with `npm link` you can use\n`npm run build-ci` and/or `npm run watch-no-check` to skip the dependency check.\n\n## Building the WGSL Function Reference\n\nThe [WGSL function reference](https://webgpufundamentals.org/webgpu/lessons/webgpu-wgsl-function-reference.html)\nis currently auto-generated for English by hackily scanning the spec HTML.\nHackily means it's likely to break but it mostly works or at least seem to\nprovide something kind of useful, for now.\n\nTo scan the latest spec again use `npm run generate-wgsl-function-reference` then check that it\nworked (build and look at the page). Of particular note, check that angle brackets like\n`vec4\u003cf32\u003e` exist where where they should and also check that `\u003cpre\u003e` sections like in\n`textureGather` are correctly formatted.\n\nFor other languages you'll likely need to copy the English file and translate.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebgpu%2Fwebgpufundamentals","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebgpu%2Fwebgpufundamentals","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebgpu%2Fwebgpufundamentals/lists"}