{"id":21017619,"url":"https://github.com/jinleili/learn-wgpu-zh","last_synced_at":"2025-05-15T17:03:47.224Z","repository":{"id":60954342,"uuid":"532535862","full_name":"jinleili/learn-wgpu-zh","owner":"jinleili","description":"Learn wgpu 中文版","archived":false,"fork":false,"pushed_at":"2025-04-20T06:38:09.000Z","size":584400,"stargazers_count":402,"open_issues_count":4,"forks_count":27,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-20T07:26:57.913Z","etag":null,"topics":["android-app","ios-app","rust","webgpu","wgpu","wgpu-step-by-step","wgpu-tutorial","wgsl"],"latest_commit_sha":null,"homepage":"https://jinleili.github.io/learn-wgpu-zh/","language":"Rust","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/jinleili.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.MIT","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":"2022-09-04T12:36:34.000Z","updated_at":"2025-04-20T06:27:37.000Z","dependencies_parsed_at":"2023-02-18T21:46:08.817Z","dependency_job_id":"8f3553d2-3a40-4a89-97bb-6c7a992a0bf0","html_url":"https://github.com/jinleili/learn-wgpu-zh","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jinleili%2Flearn-wgpu-zh","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jinleili%2Flearn-wgpu-zh/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jinleili%2Flearn-wgpu-zh/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jinleili%2Flearn-wgpu-zh/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jinleili","download_url":"https://codeload.github.com/jinleili/learn-wgpu-zh/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254384982,"owners_count":22062422,"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":["android-app","ios-app","rust","webgpu","wgpu","wgpu-step-by-step","wgpu-tutorial","wgsl"],"created_at":"2024-11-19T10:20:10.440Z","updated_at":"2025-05-15T17:03:47.198Z","avatar_url":"https://github.com/jinleili.png","language":"Rust","funding_links":[],"categories":[],"sub_categories":[],"readme":"# [《学习 wgpu》中文版](https://jinleili.github.io/learn-wgpu-zh/)\n\n![Minimum Rust Version](https://img.shields.io/badge/min%20rust-1.85-green.svg)\n[![Build Status](https://github.com/jinleili/learn-wgpu-zh/workflows/Build/badge.svg)](https://github.com/jinleili/learn-wgpu-zh/actions)\n[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/jinleili/learn-wgpu-zh/blob/master/LICENSE.MIT)\n\n_为了便于读者的理解，译者选择性的添加了一些内容，并对原文中有歧义或错误的地方进行重新表述。所有的添加与修改均不会做单独标记。_\n\n_翻译时采用了第一人称视角，故，除了带 🆕 标记的章节，教程中的**我**主要指的是原作者 [@sotrh](https://github.com/sotrh)。_\n\n_另外，专有名词在一个段落中第一次出现时做了**加粗**处理，同一段落里反复出现时就不再加粗。_\n\n## 什么是 WebGPU\n\n**WebGPU** 是由 W3C [GPU for the Web](https://www.w3.org/community/gpu/) 社区组所发布的规范，目标是允许网页代码以高性能且安全可靠的方式访问 GPU 功能。它通过借鉴 Vulkan API，并将其转换为宿主硬件上使用的各式 API（如 DirectX、Metal、Vulkan）来实现这一目标。\n\n## wgpu 与 WebGPU 的关系\n\n[wgpu](https://github.com/gfx-rs/wgpu) 是基于 [WebGPU API 规范](https://gpuweb.github.io/gpuweb/)的、跨平台的、安全的、纯 Rust 图形 API。它是 Firefox、Servo 和 Deno 中 WebGPU 整合的核心。\n\n**wgpu** 不仅可以在 Web 环境运行，还可以在 macOS / iOS、Android、Window 和 Linux 等系统上原生运行。\n\n## 为什么选择 Rust\n\nwgpu 实际上提供了 C 语言绑定 ([wgpu-native](https://github.com/gfx-rs/wgpu-native))，你可以写 C/C++ 或其他能与 C 互通的语言来使用它。尽管如此，wgpu 本身是用 Rust 实现的，它便利的 Rust 绑定能减少你使用中的阻碍。更重要的是，Rust 是一门高性能，内存和线程安全且极具生产力的现代底层语言。\n\n在学习本教程之前你需要先熟悉 Rust，因为这里不会详细介绍 Rust 的语法知识。如果对 Rust 还不太熟悉，可以回顾一下 [Rust 教程](https://www.rust-lang.org/zh-CN/learn)或 [Rust 语言圣经](https://course.rs/about-book.html)。另外还需要熟悉 Rust 包管理工具 [Cargo](https://rustwiki.org/zh-CN/cargo/getting-started/index.html)。\n\n## 为什么要学习 wgpu，直接用 JS/TS 搞 WebGPU 开发不香吗？\n\n从 wgpu 及 dawn 这两个主要的 WebGPU 标准的实现库的开发动向可以看出，大量的扩展特性目前只有在 Native 端（Windows、macOS、Linux、iOS、Android）原生运行才能支持。wgpu 更是将 Native 端运行做为首要目标，WebGPU 是做为最低支持的特性集而存在。\n\n使用 wgpu 在桌面及移动端做跨平台原生应用开发的体验极好，甚至我偏向于认为：**WebGPU 更容易在 Native 端得到普及**。因为不用受限于 1.0 标准啥时候发布，用户的浏览器是否支持等问题，现在就可以发布采用了 wgpu 的商业应用。\n\n学习 wgpu 还有另一个重要的优势，那就是可以利用各种强大的桌面端 GPU 调试工具。在开发大型 2D/3D 应用时，通过使用命令记录/回放、帧捕捉、Buffer 视图等功能，可以快速定位 GPU 层代码/数据的性能瓶颈和程序缺陷。相较于仅依靠浏览器提供的有限调试能力，这些工具能够事半功倍，帮助开发者更快地解决问题。\n\n## wgpu/WebGPU 的学习资料是不是很少？\n\n其实不用纠结于 WebGPU 方面的直接学习资料的多少。\n\nWebGPU 就是一套图形接口，绝大部分概念都是各图形接口里通用的，任何一本经典图形学书籍都是我们的学习资料。\n要利用好这些经典资料，前提仅仅就是要先学习一套图形接口。因为图形学的书不是使用统一的特定图形接口所写，先学会一个图形接口及常见的概念，然后再去深入学习某个方面的资料就会事半功倍。\n\n## 现在学习 wgpu 是不是为时尚早？\n\nWebGPU 1.0 API 已经稳定，[Google 已经在 2023/4/6 宣布从 Chrome 113 版本开始正式支持 WebGPU](https://developer.chrome.com/blog/webgpu-release/)。\n\n\u003e \u003cimg src=\"docs/public/res/WebGPU-1.0.png\" alt=\"WebGPU Spec 1.0\" /\u003e\n\u003e 补充一下 @Kangz 的话: Web 规范有点滑稽，因为“草案”或“推荐”之类的名称在很大程度上是一个管理细节，实际上\u003cb\u003e对规范是否稳定可用\u003c/b\u003e没有任何影响。事实上，W3C 程序建议至少有两个浏览器在规范通过“草案”之前已经发布了兼容的实现，但显然这些浏览器会认为规范相当稳定,然后才愿意发布实现。然而，这确实令开发人员感到困惑，我们对此深表歉意。\n\n## 如何运行示例代码\n\n本教程的示例代码大部分放在 [`code/`](https://github.com/jinleili/learn-wgpu-zh/tree/master/code) 目录下，且示例程序的名称与程序目录同名。\n比如，第一章 **依赖与窗口** 所有在的目录是 **code/beginner/`tutorial1-window`**, 此示例程序的名称也叫 `tutorial1-window`:\n\n```sh\n# 在桌面环境本地运行\ncargo run --bin tutorial1-window\n\n# 在浏览器中运行\n# 需要先安装 Rust WebAssembly target\nrustup target add wasm32-unknown-unknown\n# 使用 WebGPU（需要使用 Chrome/Edge 113+，Arc 或 Safari 18）\ncargo run-wasm --bin tutorial1-window\n# 使用 WebGL 2.0\ncargo run-wasm --bin tutorial1-window --features webgl\n```\n\n**调试与集成** 部分的代码是 2 个独立的项目：\n[wgpu-in-app](https://github.com/jinleili/wgpu-in-app) 和 [bevy-in-app](https://github.com/jinleili/bevy-in-app)\n\n[**simuverse**](https://github.com/jinleili/simuverse) 是基于 wgpu + [egui](https://github.com/emilk/egui) 的扩展示例，提供了粒子矢量场，流体场及 GPU 程序化纹理的实现。\n\n## 如何开启浏览器 WebGPU 功能支持\n\n### Chrome\n\nChrome 113+、Microsoft Edge 113+ 及 Arc 浏览器均已默认支持 WebGPU 功能。\n\n### Safari\n\nSafari 18 (macOS 15) 已经默认开启了 WebGPU 功能。\n\nmacOS 14- 系统上，需安装 [Safari Technology Preview 185+](https://www.webkit.org/blog/14879/webgpu-now-available-for-testing-in-safari-technology-preview/)，从顶部菜单栏选择 `开发 -\u003e 功能标志` , 搜索并勾选 `WebGPU`:\n\u003cimg src=\"docs/public/res/safari.png\" alt=\"Safari Technology Preview\"\u003e\n\n### Firefox\n\n安装 Nightly 版本，在地址栏中输入 `about:config` , 将 `dom.webgpu.enabled` 设置为 `true`:\n\u003cimg src=\"docs/public/res/firefox.png\" alt=\"Firefox Nightly\"\u003e\n\n## 关于译者\n\n我是一名移动端架构师, 有多年使用 OpenGL / WebGL, Metal 的实践经验。2018 年开始接触 WebGPU，目前正积极地参与到 [wgpu 开源项目的开发与完善](https://github.com/gfx-rs/wgpu/commits?author=jinleili)之中，并且已于 2020 年在 AppStore 上架了基于 wgpu 实现的毛笔书法模拟 App [字习 Pro](https://apps.apple.com/cn/app/字习-pro/id1507339788)。\n\n## 加入 wgpu 微信学习交流群\n\n\u003cdiv style=\"text-align: left\"\u003e\n    \u003cimg src=\"docs/public/res/wx.jpg\" style=\"width: 312px; margin-top: 24px;\"\u003e\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjinleili%2Flearn-wgpu-zh","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjinleili%2Flearn-wgpu-zh","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjinleili%2Flearn-wgpu-zh/lists"}