diff --git a/404.html b/404.html index e5b168b2b..c942dfe58 100644 --- a/404.html +++ b/404.html @@ -6,10 +6,10 @@ 404 | 学习 wgpu - + - + @@ -17,7 +17,7 @@
- + \ No newline at end of file diff --git a/GLOSSARY_OF_TERMS.html b/GLOSSARY_OF_TERMS.html index bc1e7b37e..8f407390e 100644 --- a/GLOSSARY_OF_TERMS.html +++ b/GLOSSARY_OF_TERMS.html @@ -6,21 +6,21 @@ 术语中英对照表 | 学习 wgpu - + - + - - - + + + -
学习 wgpu

中文

English

中文

English

Appearance

术语中英对照表 ​

译者在翻译时使用了一些尚未统一的中文术语译词，统一罗列如下：

Rust 术语 ​

术语中文翻译
Build构建
crate包，项目（需基于上下文来区分）
feature特性
lifetime生命周期
panic恐慌
Range<_>范围
struct结构体
Vec动态数组
workspace⼯作空间（指在⼀个根包（crate）下包含了多个⼦包（crate）的项目）

WebGPU 术语 ​

术语中文翻译
Buffer缓冲区
BindGroup绑定组
Device逻辑设备（区别于物理设备）
Fragment片元
Frame帧
Frame Buffer帧缓冲区
Instance Buffer实例缓冲区
wgpu::InstanceGPU 实例（简称为：实例）
PresentMode呈现模式
Queue命令队列
Sample采样
Sampler采样器
Slot插槽
Staging Buffer中继缓冲区
Surface展示平面（区别于 Canvas 画布，服务于帧画面的呈现）
Texture纹理
TextureView纹理视图
Texel纹素
Uniform Buffer统一缓冲区
Vec2, Vec3, Vec4向量
Vertex顶点

其它术语 ​

术语中文翻译
Camera虚拟摄像机（简称为：摄像机，相机）
Controller控制器
Instancing实例化绘制
Mapping映射
Matrice矩阵
Material材质
Mesh网格
Normal法向量（又称为：法线）
Object绘制对象，对象
Quaternion四元数
View视图
VSync垂直同步
- +
学习 wgpu

中文

English

中文

English

Appearance

术语中英对照表 ​

译者在翻译时使用了一些尚未统一的中文术语译词，统一罗列如下：

Rust 术语 ​

术语中文翻译
Build构建
crate包，项目（需基于上下文来区分）
feature特性
lifetime生命周期
panic恐慌
Range<_>范围
struct结构体
Vec动态数组
workspace⼯作空间（指在⼀个根包（crate）下包含了多个⼦包（crate）的项目）

WebGPU 术语 ​

术语中文翻译
Buffer缓冲区
BindGroup绑定组
Device逻辑设备（区别于物理设备）
Fragment片元
Frame帧
Frame Buffer帧缓冲区
Instance Buffer实例缓冲区
wgpu::InstanceGPU 实例（简称为：实例）
PresentMode呈现模式
Queue命令队列
Sample采样
Sampler采样器
Slot插槽
Staging Buffer中继缓冲区
Surface展示平面（区别于 Canvas 画布，服务于帧画面的呈现）
Texture纹理
TextureView纹理视图
Texel纹素
Uniform Buffer统一缓冲区
Vec2, Vec3, Vec4向量
Vertex顶点

其它术语 ​

术语中文翻译
Camera虚拟摄像机（简称为：摄像机，相机）
Controller控制器
Instancing实例化绘制
Mapping映射
Matrice矩阵
Material材质
Mesh网格
Normal法向量（又称为：法线）
Object绘制对象，对象
Quaternion四元数
View视图
VSync垂直同步
+ \ No newline at end of file diff --git a/assets/GLOSSARY_OF_TERMS.md.CP9uI_8g.js b/assets/GLOSSARY_OF_TERMS.md.xT_8t-H3.js similarity index 93% rename from assets/GLOSSARY_OF_TERMS.md.CP9uI_8g.js rename to assets/GLOSSARY_OF_TERMS.md.xT_8t-H3.js index aa19d3a50..a84458f0d 100644 --- a/assets/GLOSSARY_OF_TERMS.md.CP9uI_8g.js +++ b/assets/GLOSSARY_OF_TERMS.md.xT_8t-H3.js @@ -1 +1 @@ -import{_ as d,c as r,a1 as e,o as a}from"./chunks/framework.DdYVMT1V.js";const b=JSON.parse('{"title":"术语中英对照表","description":"","frontmatter":{},"headers":[],"relativePath":"GLOSSARY_OF_TERMS.md","filePath":"GLOSSARY_OF_TERMS.md","lastUpdated":1730902479000}'),n={name:"GLOSSARY_OF_TERMS.md"};function o(i,t,l,h,c,s){return a(),r("div",null,t[0]||(t[0]=[e('

术语中英对照表 ​

译者在翻译时使用了一些尚未统一的中文术语译词，统一罗列如下：

Rust 术语 ​

术语中文翻译
Build构建
crate包，项目（需基于上下文来区分）
feature特性
lifetime生命周期
panic恐慌
Range<_>范围
struct结构体
Vec动态数组
workspace⼯作空间（指在⼀个根包（crate）下包含了多个⼦包（crate）的项目）

WebGPU 术语 ​

术语中文翻译
Buffer缓冲区
BindGroup绑定组
Device逻辑设备（区别于物理设备）
Fragment片元
Frame帧
Frame Buffer帧缓冲区
Instance Buffer实例缓冲区
wgpu::InstanceGPU 实例（简称为：实例）
PresentMode呈现模式
Queue命令队列
Sample采样
Sampler采样器
Slot插槽
Staging Buffer中继缓冲区
Surface展示平面（区别于 Canvas 画布，服务于帧画面的呈现）
Texture纹理
TextureView纹理视图
Texel纹素
Uniform Buffer统一缓冲区
Vec2, Vec3, Vec4向量
Vertex顶点

其它术语 ​

术语中文翻译
Camera虚拟摄像机（简称为：摄像机，相机）
Controller控制器
Instancing实例化绘制
Mapping映射
Matrice矩阵
Material材质
Mesh网格
Normal法向量（又称为：法线）
Object绘制对象，对象
Quaternion四元数
View视图
VSync垂直同步
',8)]))}const f=d(n,[["render",o]]);export{b as __pageData,f as default}; +import{_ as d,o as r,c as e,a1 as a}from"./chunks/framework.DyadSNS9.js";const b=JSON.parse('{"title":"术语中英对照表","description":"","frontmatter":{},"headers":[],"relativePath":"GLOSSARY_OF_TERMS.md","filePath":"GLOSSARY_OF_TERMS.md","lastUpdated":1731720800000}'),n={name:"GLOSSARY_OF_TERMS.md"};function o(i,t,l,h,c,s){return r(),e("div",null,t[0]||(t[0]=[a('

术语中英对照表 ​

译者在翻译时使用了一些尚未统一的中文术语译词，统一罗列如下：

Rust 术语 ​

术语中文翻译
Build构建
crate包，项目（需基于上下文来区分）
feature特性
lifetime生命周期
panic恐慌
Range<_>范围
struct结构体
Vec动态数组
workspace⼯作空间（指在⼀个根包（crate）下包含了多个⼦包（crate）的项目）

WebGPU 术语 ​

术语中文翻译
Buffer缓冲区
BindGroup绑定组
Device逻辑设备（区别于物理设备）
Fragment片元
Frame帧
Frame Buffer帧缓冲区
Instance Buffer实例缓冲区
wgpu::InstanceGPU 实例（简称为：实例）
PresentMode呈现模式
Queue命令队列
Sample采样
Sampler采样器
Slot插槽
Staging Buffer中继缓冲区
Surface展示平面（区别于 Canvas 画布，服务于帧画面的呈现）
Texture纹理
TextureView纹理视图
Texel纹素
Uniform Buffer统一缓冲区
Vec2, Vec3, Vec4向量
Vertex顶点

其它术语 ​

术语中文翻译
Camera虚拟摄像机（简称为：摄像机，相机）
Controller控制器
Instancing实例化绘制
Mapping映射
Matrice矩阵
Material材质
Mesh网格
Normal法向量（又称为：法线）
Object绘制对象，对象
Quaternion四元数
View视图
VSync垂直同步
',8)]))}const f=d(n,[["render",o]]);export{b as __pageData,f as default}; diff --git a/assets/GLOSSARY_OF_TERMS.md.CP9uI_8g.lean.js b/assets/GLOSSARY_OF_TERMS.md.xT_8t-H3.lean.js similarity index 93% rename from assets/GLOSSARY_OF_TERMS.md.CP9uI_8g.lean.js rename to assets/GLOSSARY_OF_TERMS.md.xT_8t-H3.lean.js index aa19d3a50..a84458f0d 100644 --- a/assets/GLOSSARY_OF_TERMS.md.CP9uI_8g.lean.js +++ b/assets/GLOSSARY_OF_TERMS.md.xT_8t-H3.lean.js @@ -1 +1 @@ -import{_ as d,c as r,a1 as e,o as a}from"./chunks/framework.DdYVMT1V.js";const b=JSON.parse('{"title":"术语中英对照表","description":"","frontmatter":{},"headers":[],"relativePath":"GLOSSARY_OF_TERMS.md","filePath":"GLOSSARY_OF_TERMS.md","lastUpdated":1730902479000}'),n={name:"GLOSSARY_OF_TERMS.md"};function o(i,t,l,h,c,s){return a(),r("div",null,t[0]||(t[0]=[e('

术语中英对照表 ​

译者在翻译时使用了一些尚未统一的中文术语译词，统一罗列如下：

Rust 术语 ​

术语中文翻译
Build构建
crate包，项目（需基于上下文来区分）
feature特性
lifetime生命周期
panic恐慌
Range<_>范围
struct结构体
Vec动态数组
workspace⼯作空间（指在⼀个根包（crate）下包含了多个⼦包（crate）的项目）

WebGPU 术语 ​

术语中文翻译
Buffer缓冲区
BindGroup绑定组
Device逻辑设备（区别于物理设备）
Fragment片元
Frame帧
Frame Buffer帧缓冲区
Instance Buffer实例缓冲区
wgpu::InstanceGPU 实例（简称为：实例）
PresentMode呈现模式
Queue命令队列
Sample采样
Sampler采样器
Slot插槽
Staging Buffer中继缓冲区
Surface展示平面（区别于 Canvas 画布，服务于帧画面的呈现）
Texture纹理
TextureView纹理视图
Texel纹素
Uniform Buffer统一缓冲区
Vec2, Vec3, Vec4向量
Vertex顶点

其它术语 ​

术语中文翻译
Camera虚拟摄像机（简称为：摄像机，相机）
Controller控制器
Instancing实例化绘制
Mapping映射
Matrice矩阵
Material材质
Mesh网格
Normal法向量（又称为：法线）
Object绘制对象，对象
Quaternion四元数
View视图
VSync垂直同步
',8)]))}const f=d(n,[["render",o]]);export{b as __pageData,f as default}; +import{_ as d,o as r,c as e,a1 as a}from"./chunks/framework.DyadSNS9.js";const b=JSON.parse('{"title":"术语中英对照表","description":"","frontmatter":{},"headers":[],"relativePath":"GLOSSARY_OF_TERMS.md","filePath":"GLOSSARY_OF_TERMS.md","lastUpdated":1731720800000}'),n={name:"GLOSSARY_OF_TERMS.md"};function o(i,t,l,h,c,s){return r(),e("div",null,t[0]||(t[0]=[a('

术语中英对照表 ​

译者在翻译时使用了一些尚未统一的中文术语译词，统一罗列如下：

Rust 术语 ​

术语中文翻译
Build构建
crate包，项目（需基于上下文来区分）
feature特性
lifetime生命周期
panic恐慌
Range<_>范围
struct结构体
Vec动态数组
workspace⼯作空间（指在⼀个根包（crate）下包含了多个⼦包（crate）的项目）

WebGPU 术语 ​

术语中文翻译
Buffer缓冲区
BindGroup绑定组
Device逻辑设备（区别于物理设备）
Fragment片元
Frame帧
Frame Buffer帧缓冲区
Instance Buffer实例缓冲区
wgpu::InstanceGPU 实例（简称为：实例）
PresentMode呈现模式
Queue命令队列
Sample采样
Sampler采样器
Slot插槽
Staging Buffer中继缓冲区
Surface展示平面（区别于 Canvas 画布，服务于帧画面的呈现）
Texture纹理
TextureView纹理视图
Texel纹素
Uniform Buffer统一缓冲区
Vec2, Vec3, Vec4向量
Vertex顶点

其它术语 ​

术语中文翻译
Camera虚拟摄像机（简称为：摄像机，相机）
Controller控制器
Instancing实例化绘制
Mapping映射
Matrice矩阵
Material材质
Mesh网格
Normal法向量（又称为：法线）
Object绘制对象，对象
Quaternion四元数
View视图
VSync垂直同步
',8)]))}const f=d(n,[["render",o]]);export{b as __pageData,f as default}; diff --git a/assets/app.BHrPp7uO.js b/assets/app.BHrPp7uO.js new file mode 100644 index 000000000..558862341 --- /dev/null +++ b/assets/app.BHrPp7uO.js @@ -0,0 +1 @@ +import{R as i}from"./chunks/theme.CcfFSRVj.js";import{R as o,a2 as u,a3 as c,a4 as l,d as f,u as d,v as m,s as h,a5 as g,a6 as A,a7 as v,a8 as P,a9 as R,aa as w,ab as y,ac as C,ad as b,ae as E,af as S}from"./chunks/framework.DyadSNS9.js";function p(e){if(e.extends){const a=p(e.extends);return{...a,...e,async enhanceApp(t){a.enhanceApp&&await a.enhanceApp(t),e.enhanceApp&&await e.enhanceApp(t)}}}return e}const s=p(i),T=f({name:"VitePressApp",setup(){const{site:e,lang:a,dir:t}=d();return m(()=>{h(()=>{document.documentElement.lang=a.value,document.documentElement.dir=t.value})}),e.value.router.prefetchLinks&&g(),A(),v(),s.setup&&s.setup(),()=>P(s.Layout)}});async function D(){globalThis.__VITEPRESS__=!0;const e=j(),a=_();a.provide(R,e);const t=w(e.route);return a.provide(y,t),a.component("Content",C),a.component("ClientOnly",b),Object.defineProperties(a.config.globalProperties,{$frontmatter:{get(){return t.frontmatter.value}},$params:{get(){return t.page.value.params}}}),s.enhanceApp&&await s.enhanceApp({app:a,router:e,siteData:E}),{app:a,router:e,data:t}}function _(){return l(T)}function j(){let e=o,a;return u(t=>{let n=c(t),r=null;return n&&(e&&(a=n),(e||a===n)&&(n=n.replace(/\.js$/,".lean.js")),r=import(n)),o&&(e=!1),r},s.NotFound)}o&&D().then(({app:e,router:a,data:t})=>{a.go().then(()=>{S(a.route,t.site),e.mount("#app")})});export{D as createApp}; diff --git a/assets/app.Erzg4p0l.js b/assets/app.Erzg4p0l.js deleted file mode 100644 index f53f32d2a..000000000 --- a/assets/app.Erzg4p0l.js +++ /dev/null @@ -1 +0,0 @@ -import{R as i}from"./chunks/theme.Co5BiKAQ.js";import{R as o,a2 as u,a3 as c,a4 as l,a5 as f,a6 as d,a7 as m,a8 as h,a9 as g,aa as A,ab as v,d as P,u as R,v as w,s as y,ac as C,ad as b,ae as E,af as S}from"./chunks/framework.DdYVMT1V.js";function p(e){if(e.extends){const a=p(e.extends);return{...a,...e,async enhanceApp(t){a.enhanceApp&&await a.enhanceApp(t),e.enhanceApp&&await e.enhanceApp(t)}}}return e}const s=p(i),T=P({name:"VitePressApp",setup(){const{site:e,lang:a,dir:t}=R();return w(()=>{y(()=>{document.documentElement.lang=a.value,document.documentElement.dir=t.value})}),e.value.router.prefetchLinks&&C(),b(),E(),s.setup&&s.setup(),()=>S(s.Layout)}});async function D(){globalThis.__VITEPRESS__=!0;const e=j(),a=_();a.provide(c,e);const t=l(e.route);return a.provide(f,t),a.component("Content",d),a.component("ClientOnly",m),Object.defineProperties(a.config.globalProperties,{$frontmatter:{get(){return t.frontmatter.value}},$params:{get(){return t.page.value.params}}}),s.enhanceApp&&await s.enhanceApp({app:a,router:e,siteData:h}),{app:a,router:e,data:t}}function _(){return g(T)}function j(){let e=o,a;return A(t=>{let n=v(t),r=null;return n&&(e&&(a=n),(e||a===n)&&(n=n.replace(/\.js$/,".lean.js")),r=import(n)),o&&(e=!1),r},s.NotFound)}o&&D().then(({app:e,router:a,data:t})=>{a.go().then(()=>{u(a.route,t.site),e.mount("#app")})});export{D as createApp}; diff --git a/assets/beginner_tutorial1-window.md.Bbz9ciJb.lean.js b/assets/beginner_tutorial1-window.md.ByC2IG_l.js similarity index 99% rename from assets/beginner_tutorial1-window.md.Bbz9ciJb.lean.js rename to assets/beginner_tutorial1-window.md.ByC2IG_l.js index 68abad588..7da3531bb 100644 --- a/assets/beginner_tutorial1-window.md.Bbz9ciJb.lean.js +++ b/assets/beginner_tutorial1-window.md.ByC2IG_l.js @@ -1,4 +1,4 @@ -import{_ as p,c as h,a1 as e,G as i,B as a,o as k}from"./chunks/framework.DdYVMT1V.js";const F=JSON.parse('{"title":"依赖与窗口","description":"","frontmatter":{},"headers":[],"relativePath":"beginner/tutorial1-window.md","filePath":"beginner/tutorial1-window.md","lastUpdated":1730902479000}'),t={name:"beginner/tutorial1-window.md"};function r(d,s,E,g,y,c){const n=a("WasmExample"),l=a("AutoGithubLink");return k(),h("div",null,[s[0]||(s[0]=e(`

依赖与窗口 ​

部分读者可能已经熟悉如何在 Rust 中打开窗口程序，且有自己偏好的窗口管理库。但本教程是为所有人设计的，所以不免要涉及这部分的内容。所幸你可以跳过这部分，但有一点值得了解，即无论使用什么样的窗口解决方案，都需要实现 raw-window-handle 里定义的 HasWindowHandle 及 HasDisplayHandle 两个抽象接口。如果有兴趣自己动手来为 wgpu 实现一个基础的窗口，可以参考 wgpu-in-app，与 Android App 集成这一章节也有详情的介绍。

我们要使用哪些包? ​

我将尽量保持基础部分的简单性。后续会逐渐添加依赖，先列出相关的 Cargo.toml 依赖项如下：

toml
[dependencies]
+import{_ as p,C as i,o as h,c as e,a1 as k,G as a}from"./chunks/framework.DyadSNS9.js";const F=JSON.parse('{"title":"依赖与窗口","description":"","frontmatter":{},"headers":[],"relativePath":"beginner/tutorial1-window.md","filePath":"beginner/tutorial1-window.md","lastUpdated":1731720800000}'),t={name:"beginner/tutorial1-window.md"};function r(d,s,E,g,y,c){const n=i("WasmExample"),l=i("AutoGithubLink");return h(),e("div",null,[s[0]||(s[0]=k(`
依赖与窗口 ​
部分读者可能已经熟悉如何在 Rust 中打开窗口程序，且有自己偏好的窗口管理库。但本教程是为所有人设计的，所以不免要涉及这部分的内容。所幸你可以跳过这部分，但有一点值得了解，即无论使用什么样的窗口解决方案，都需要实现 raw-window-handle 里定义的 HasWindowHandle 及 HasDisplayHandle 两个抽象接口。如果有兴趣自己动手来为 wgpu 实现一个基础的窗口，可以参考 wgpu-in-app，与 Android App 集成这一章节也有详情的介绍。
我们要使用哪些包? ​
我将尽量保持基础部分的简单性。后续会逐渐添加依赖，先列出相关的 Cargo.toml 依赖项如下：
toml
[dependencies]
 env_logger = "0.11"
 log = "0.4"
 parking_lot = "0.12"
@@ -171,4 +171,4 @@ import{_ as p,c as h,a1 as e,G as i,B as a,o as k}from"./chunks/framework.DdYVMT
       }
     </style>
   </body>
-</html>

点击下面的按钮查看示例代码运行!

`,55)),i(n,{example:"tutorial1_window"}),i(l)])}const b=p(t,[["render",r]]);export{F as __pageData,b as default}; +</html>

点击下面的按钮查看示例代码运行!

`,55)),a(n,{example:"tutorial1_window"}),a(l)])}const b=p(t,[["render",r]]);export{F as __pageData,b as default}; diff --git a/assets/beginner_tutorial1-window.md.Bbz9ciJb.js b/assets/beginner_tutorial1-window.md.ByC2IG_l.lean.js similarity index 99% rename from assets/beginner_tutorial1-window.md.Bbz9ciJb.js rename to assets/beginner_tutorial1-window.md.ByC2IG_l.lean.js index 68abad588..7da3531bb 100644 --- a/assets/beginner_tutorial1-window.md.Bbz9ciJb.js +++ b/assets/beginner_tutorial1-window.md.ByC2IG_l.lean.js @@ -1,4 +1,4 @@ -import{_ as p,c as h,a1 as e,G as i,B as a,o as k}from"./chunks/framework.DdYVMT1V.js";const F=JSON.parse('{"title":"依赖与窗口","description":"","frontmatter":{},"headers":[],"relativePath":"beginner/tutorial1-window.md","filePath":"beginner/tutorial1-window.md","lastUpdated":1730902479000}'),t={name:"beginner/tutorial1-window.md"};function r(d,s,E,g,y,c){const n=a("WasmExample"),l=a("AutoGithubLink");return k(),h("div",null,[s[0]||(s[0]=e(`

依赖与窗口 ​

部分读者可能已经熟悉如何在 Rust 中打开窗口程序，且有自己偏好的窗口管理库。但本教程是为所有人设计的，所以不免要涉及这部分的内容。所幸你可以跳过这部分，但有一点值得了解，即无论使用什么样的窗口解决方案，都需要实现 raw-window-handle 里定义的 HasWindowHandle 及 HasDisplayHandle 两个抽象接口。如果有兴趣自己动手来为 wgpu 实现一个基础的窗口，可以参考 wgpu-in-app，与 Android App 集成这一章节也有详情的介绍。

我们要使用哪些包? ​

我将尽量保持基础部分的简单性。后续会逐渐添加依赖，先列出相关的 Cargo.toml 依赖项如下：

toml
[dependencies]
+import{_ as p,C as i,o as h,c as e,a1 as k,G as a}from"./chunks/framework.DyadSNS9.js";const F=JSON.parse('{"title":"依赖与窗口","description":"","frontmatter":{},"headers":[],"relativePath":"beginner/tutorial1-window.md","filePath":"beginner/tutorial1-window.md","lastUpdated":1731720800000}'),t={name:"beginner/tutorial1-window.md"};function r(d,s,E,g,y,c){const n=i("WasmExample"),l=i("AutoGithubLink");return h(),e("div",null,[s[0]||(s[0]=k(`
依赖与窗口 ​
部分读者可能已经熟悉如何在 Rust 中打开窗口程序，且有自己偏好的窗口管理库。但本教程是为所有人设计的，所以不免要涉及这部分的内容。所幸你可以跳过这部分，但有一点值得了解，即无论使用什么样的窗口解决方案，都需要实现 raw-window-handle 里定义的 HasWindowHandle 及 HasDisplayHandle 两个抽象接口。如果有兴趣自己动手来为 wgpu 实现一个基础的窗口，可以参考 wgpu-in-app，与 Android App 集成这一章节也有详情的介绍。
我们要使用哪些包? ​
我将尽量保持基础部分的简单性。后续会逐渐添加依赖，先列出相关的 Cargo.toml 依赖项如下：
toml
[dependencies]
 env_logger = "0.11"
 log = "0.4"
 parking_lot = "0.12"
@@ -171,4 +171,4 @@ import{_ as p,c as h,a1 as e,G as i,B as a,o as k}from"./chunks/framework.DdYVMT
       }
     </style>
   </body>
-</html>

点击下面的按钮查看示例代码运行!

`,55)),i(n,{example:"tutorial1_window"}),i(l)])}const b=p(t,[["render",r]]);export{F as __pageData,b as default}; +</html>

点击下面的按钮查看示例代码运行!

`,55)),a(n,{example:"tutorial1_window"}),a(l)])}const b=p(t,[["render",r]]);export{F as __pageData,b as default}; diff --git a/assets/beginner_tutorial2-surface_index.md.B0LLDve_.js b/assets/beginner_tutorial2-surface_index.md.VbtTnFiz.js similarity index 99% rename from assets/beginner_tutorial2-surface_index.md.B0LLDve_.js rename to assets/beginner_tutorial2-surface_index.md.VbtTnFiz.js index 13b01bcff..77264913c 100644 --- a/assets/beginner_tutorial2-surface_index.md.B0LLDve_.js +++ b/assets/beginner_tutorial2-surface_index.md.VbtTnFiz.js @@ -1,4 +1,4 @@ -import{_ as e,c as k,a1 as t,G as i,j as n,a as r,B as a,o as d}from"./chunks/framework.DdYVMT1V.js";const E="/learn-wgpu-zh/assets/cleared-window.10li6dW0.png",g="/learn-wgpu-zh/assets/no-clear.K5Wk4781.png",D=JSON.parse('{"title":"展示平面 (Surface)","description":"","frontmatter":{},"headers":[],"relativePath":"beginner/tutorial2-surface/index.md","filePath":"beginner/tutorial2-surface/index.md","lastUpdated":1730902479000}'),c={name:"beginner/tutorial2-surface/index.md"};function y(F,s,o,u,b,m){const p=a("WasmExample"),l=a("AutoGithubLink"),h=a("JoinWeiChatGroup");return d(),k("div",null,[s[0]||(s[0]=t(`

展示平面 (Surface) ​

封装 State ​

为方便起见，我们将所有字段封装在一个结构体内，并在其上添加一些函数：

rust
// lib.rs
+import{_ as e,C as i,o as k,c as t,a1 as r,G as a,j as n,a as d}from"./chunks/framework.DyadSNS9.js";const E="/learn-wgpu-zh/assets/cleared-window.10li6dW0.png",g="/learn-wgpu-zh/assets/no-clear.K5Wk4781.png",D=JSON.parse('{"title":"展示平面 (Surface)","description":"","frontmatter":{},"headers":[],"relativePath":"beginner/tutorial2-surface/index.md","filePath":"beginner/tutorial2-surface/index.md","lastUpdated":1731720800000}'),c={name:"beginner/tutorial2-surface/index.md"};function y(F,s,o,u,b,m){const p=i("WasmExample"),l=i("AutoGithubLink"),h=i("JoinWeiChatGroup");return k(),t("div",null,[s[0]||(s[0]=r(`
展示平面 (Surface) ​
封装 State ​
为方便起见，我们将所有字段封装在一个结构体内，并在其上添加一些函数：
rust
// lib.rs
 use winit::window::Window;
 
 struct State {
@@ -247,4 +247,4 @@ import{_ as e,c as k,a1 as t,G as i,j as n,a as r,B as a,o as d}from"./chunks/fr
         }),
         store: wgpu::StoreOp::Store
     },
-})
RenderPassColorAttachment 有一个 view 字段，用于通知 wgpu 将颜色保存到什么纹理。这里我们指定使用 surface.get_current_texture() 创建的 view，这意味着向此附件（Attachment）上绘制的任何颜色都会被绘制到屏幕上。
resolve_target 是接收多重采样解析输出的纹理。除非启用了多重采样, 否则不需要设置它，保留为 None 即可。
ops 字段需要一个 wpgu::Operations 对象。它告诉 wgpu 如何处理屏幕上的颜色（由 view 指定）。load 字段告诉 wgpu 如何处理存储在前一帧的颜色。目前，我们正在用蓝色清屏。store 字段告诉 wgpu 是否要将渲染的结果存储到纹理视图后面的纹理上（在这个例子中是 SurfaceTexture ）。我们希望存储渲染结果，所以设置为 true。
当屏幕被场景对象完全遮挡，那么不清屏是很常见的。但如果你的场景没有覆盖整个屏幕，就会出现类似下边的情况：
./no-clear.png
验证错误? ​
如果你的机器上运行的是 Vulkan SDK 的旧版本， wgpu 在你的机器上使用 Vulkan 后端时可能会遇到验证错误。至少需要使用 1.2.182 及以上版本，因为旧版本可能会产生一些误报。如果错误持续存在，那可能是遇到了 wgpu 的错误。你可以在 https://github.com/gfx-rs/wgpu 上提交此问题。
挑战 ​
修改 input() 函数以捕获鼠标事件，并使用该函数来更新清屏的颜色。提示：你可能需要用到 WindowEvent::CursorMoved。
',88)),i(p,{example:"tutorial2_surface"}),i(l),s[1]||(s[1]=n("h2",{id:"加入-wgpu-微信学习交流群",tabindex:"-1"},[r("加入 wgpu 微信学习交流群 "),n("a",{class:"header-anchor",href:"#加入-wgpu-微信学习交流群","aria-label":'Permalink to "加入 wgpu 微信学习交流群"'},"​")],-1)),i(h)])}const C=e(c,[["render",y]]);export{D as __pageData,C as default};
+})

RenderPassColorAttachment 有一个 view 字段，用于通知 wgpu 将颜色保存到什么纹理。这里我们指定使用 surface.get_current_texture() 创建的 view，这意味着向此附件（Attachment）上绘制的任何颜色都会被绘制到屏幕上。

resolve_target 是接收多重采样解析输出的纹理。除非启用了多重采样, 否则不需要设置它，保留为 None 即可。

ops 字段需要一个 wpgu::Operations 对象。它告诉 wgpu 如何处理屏幕上的颜色（由 view 指定）。load 字段告诉 wgpu 如何处理存储在前一帧的颜色。目前，我们正在用蓝色清屏。store 字段告诉 wgpu 是否要将渲染的结果存储到纹理视图后面的纹理上（在这个例子中是 SurfaceTexture ）。我们希望存储渲染结果，所以设置为 true。

当屏幕被场景对象完全遮挡，那么不清屏是很常见的。但如果你的场景没有覆盖整个屏幕，就会出现类似下边的情况：

./no-clear.png

验证错误? ​

如果你的机器上运行的是 Vulkan SDK 的旧版本， wgpu 在你的机器上使用 Vulkan 后端时可能会遇到验证错误。至少需要使用 1.2.182 及以上版本，因为旧版本可能会产生一些误报。如果错误持续存在，那可能是遇到了 wgpu 的错误。你可以在 https://github.com/gfx-rs/wgpu 上提交此问题。

挑战 ​

修改 input() 函数以捕获鼠标事件，并使用该函数来更新清屏的颜色。提示：你可能需要用到 WindowEvent::CursorMoved。

',88)),a(p,{example:"tutorial2_surface"}),a(l),s[1]||(s[1]=n("h2",{id:"加入-wgpu-微信学习交流群",tabindex:"-1"},[d("加入 wgpu 微信学习交流群 "),n("a",{class:"header-anchor",href:"#加入-wgpu-微信学习交流群","aria-label":'Permalink to "加入 wgpu 微信学习交流群"'},"​")],-1)),a(h)])}const C=e(c,[["render",y]]);export{D as __pageData,C as default}; diff --git a/assets/beginner_tutorial2-surface_index.md.B0LLDve_.lean.js b/assets/beginner_tutorial2-surface_index.md.VbtTnFiz.lean.js similarity index 99% rename from assets/beginner_tutorial2-surface_index.md.B0LLDve_.lean.js rename to assets/beginner_tutorial2-surface_index.md.VbtTnFiz.lean.js index 13b01bcff..77264913c 100644 --- a/assets/beginner_tutorial2-surface_index.md.B0LLDve_.lean.js +++ b/assets/beginner_tutorial2-surface_index.md.VbtTnFiz.lean.js @@ -1,4 +1,4 @@ -import{_ as e,c as k,a1 as t,G as i,j as n,a as r,B as a,o as d}from"./chunks/framework.DdYVMT1V.js";const E="/learn-wgpu-zh/assets/cleared-window.10li6dW0.png",g="/learn-wgpu-zh/assets/no-clear.K5Wk4781.png",D=JSON.parse('{"title":"展示平面 (Surface)","description":"","frontmatter":{},"headers":[],"relativePath":"beginner/tutorial2-surface/index.md","filePath":"beginner/tutorial2-surface/index.md","lastUpdated":1730902479000}'),c={name:"beginner/tutorial2-surface/index.md"};function y(F,s,o,u,b,m){const p=a("WasmExample"),l=a("AutoGithubLink"),h=a("JoinWeiChatGroup");return d(),k("div",null,[s[0]||(s[0]=t(`

展示平面 (Surface) ​

封装 State ​

为方便起见，我们将所有字段封装在一个结构体内，并在其上添加一些函数：

rust
// lib.rs
+import{_ as e,C as i,o as k,c as t,a1 as r,G as a,j as n,a as d}from"./chunks/framework.DyadSNS9.js";const E="/learn-wgpu-zh/assets/cleared-window.10li6dW0.png",g="/learn-wgpu-zh/assets/no-clear.K5Wk4781.png",D=JSON.parse('{"title":"展示平面 (Surface)","description":"","frontmatter":{},"headers":[],"relativePath":"beginner/tutorial2-surface/index.md","filePath":"beginner/tutorial2-surface/index.md","lastUpdated":1731720800000}'),c={name:"beginner/tutorial2-surface/index.md"};function y(F,s,o,u,b,m){const p=i("WasmExample"),l=i("AutoGithubLink"),h=i("JoinWeiChatGroup");return k(),t("div",null,[s[0]||(s[0]=r(`
展示平面 (Surface) ​
封装 State ​
为方便起见，我们将所有字段封装在一个结构体内，并在其上添加一些函数：
rust
// lib.rs
 use winit::window::Window;
 
 struct State {
@@ -247,4 +247,4 @@ import{_ as e,c as k,a1 as t,G as i,j as n,a as r,B as a,o as d}from"./chunks/fr
         }),
         store: wgpu::StoreOp::Store
     },
-})
RenderPassColorAttachment 有一个 view 字段，用于通知 wgpu 将颜色保存到什么纹理。这里我们指定使用 surface.get_current_texture() 创建的 view，这意味着向此附件（Attachment）上绘制的任何颜色都会被绘制到屏幕上。
resolve_target 是接收多重采样解析输出的纹理。除非启用了多重采样, 否则不需要设置它，保留为 None 即可。
ops 字段需要一个 wpgu::Operations 对象。它告诉 wgpu 如何处理屏幕上的颜色（由 view 指定）。load 字段告诉 wgpu 如何处理存储在前一帧的颜色。目前，我们正在用蓝色清屏。store 字段告诉 wgpu 是否要将渲染的结果存储到纹理视图后面的纹理上（在这个例子中是 SurfaceTexture ）。我们希望存储渲染结果，所以设置为 true。
当屏幕被场景对象完全遮挡，那么不清屏是很常见的。但如果你的场景没有覆盖整个屏幕，就会出现类似下边的情况：
./no-clear.png
验证错误? ​
如果你的机器上运行的是 Vulkan SDK 的旧版本， wgpu 在你的机器上使用 Vulkan 后端时可能会遇到验证错误。至少需要使用 1.2.182 及以上版本，因为旧版本可能会产生一些误报。如果错误持续存在，那可能是遇到了 wgpu 的错误。你可以在 https://github.com/gfx-rs/wgpu 上提交此问题。
挑战 ​
修改 input() 函数以捕获鼠标事件，并使用该函数来更新清屏的颜色。提示：你可能需要用到 WindowEvent::CursorMoved。
',88)),i(p,{example:"tutorial2_surface"}),i(l),s[1]||(s[1]=n("h2",{id:"加入-wgpu-微信学习交流群",tabindex:"-1"},[r("加入 wgpu 微信学习交流群 "),n("a",{class:"header-anchor",href:"#加入-wgpu-微信学习交流群","aria-label":'Permalink to "加入 wgpu 微信学习交流群"'},"​")],-1)),i(h)])}const C=e(c,[["render",y]]);export{D as __pageData,C as default};
+})

RenderPassColorAttachment 有一个 view 字段，用于通知 wgpu 将颜色保存到什么纹理。这里我们指定使用 surface.get_current_texture() 创建的 view，这意味着向此附件（Attachment）上绘制的任何颜色都会被绘制到屏幕上。

resolve_target 是接收多重采样解析输出的纹理。除非启用了多重采样, 否则不需要设置它，保留为 None 即可。

ops 字段需要一个 wpgu::Operations 对象。它告诉 wgpu 如何处理屏幕上的颜色（由 view 指定）。load 字段告诉 wgpu 如何处理存储在前一帧的颜色。目前，我们正在用蓝色清屏。store 字段告诉 wgpu 是否要将渲染的结果存储到纹理视图后面的纹理上（在这个例子中是 SurfaceTexture ）。我们希望存储渲染结果，所以设置为 true。

当屏幕被场景对象完全遮挡，那么不清屏是很常见的。但如果你的场景没有覆盖整个屏幕，就会出现类似下边的情况：

./no-clear.png

验证错误? ​

如果你的机器上运行的是 Vulkan SDK 的旧版本， wgpu 在你的机器上使用 Vulkan 后端时可能会遇到验证错误。至少需要使用 1.2.182 及以上版本，因为旧版本可能会产生一些误报。如果错误持续存在，那可能是遇到了 wgpu 的错误。你可以在 https://github.com/gfx-rs/wgpu 上提交此问题。

挑战 ​

修改 input() 函数以捕获鼠标事件，并使用该函数来更新清屏的颜色。提示：你可能需要用到 WindowEvent::CursorMoved。

',88)),a(p,{example:"tutorial2_surface"}),a(l),s[1]||(s[1]=n("h2",{id:"加入-wgpu-微信学习交流群",tabindex:"-1"},[d("加入 wgpu 微信学习交流群 "),n("a",{class:"header-anchor",href:"#加入-wgpu-微信学习交流群","aria-label":'Permalink to "加入 wgpu 微信学习交流群"'},"​")],-1)),a(h)])}const C=e(c,[["render",y]]);export{D as __pageData,C as default}; diff --git a/assets/beginner_tutorial3-pipeline_index.md.RyuYhpMP.js b/assets/beginner_tutorial3-pipeline_index.md.CjsoUGLf.js similarity index 99% rename from assets/beginner_tutorial3-pipeline_index.md.RyuYhpMP.js rename to assets/beginner_tutorial3-pipeline_index.md.CjsoUGLf.js index 831ed3254..04a2d9735 100644 --- a/assets/beginner_tutorial3-pipeline_index.md.RyuYhpMP.js +++ b/assets/beginner_tutorial3-pipeline_index.md.CjsoUGLf.js @@ -1,4 +1,4 @@ -import{_ as l,c as e,a1 as h,G as i,B as a,o as k}from"./chunks/framework.DdYVMT1V.js";const t="/learn-wgpu-zh/assets/tutorial3-pipeline-vertices.Cmi0J73P.png",r="/learn-wgpu-zh/assets/tutorial3-pipeline-triangle.4hahlChO.png",b=JSON.parse('{"title":"管线 (Pipeline)","description":"","frontmatter":{},"headers":[],"relativePath":"beginner/tutorial3-pipeline/index.md","filePath":"beginner/tutorial3-pipeline/index.md","lastUpdated":1730902479000}'),d={name:"beginner/tutorial3-pipeline/index.md"};function E(g,s,c,y,o,F){const n=a("WasmExample"),p=a("AutoGithubLink");return k(),e("div",null,[s[0]||(s[0]=h('

管线 (Pipeline) ​

什么是管线? ​

管线 （ComputePipeline、RenderPipeline）由一系列资源绑定、可编程阶段（着色器）设置及固定功能状态组成。它代表了由 GPU 硬件、驱动程序和用户代理组合而成的完整功能对象，描述了 GPU 将对一组数据执行的所有操作。在本节中，我们将具体创建一个渲染管线（RenderPipeline）。

什么是着色器? ​

着色器（Shader）是你发送给 GPU 的微型程序，用于对数据进行操作。有三种主要类型的着色器：顶点（Vertex）、片元（Fragment）和计算（Compute）着色器。另外还有其他的如几何着色器，但它们属于进阶话题。现在，我们只需要使用顶点和片元着色器。

什么是顶点和片元？ ​

顶点（Vertex）就是三维（或二维）空间中的一个点。这些顶点会两个一组以构成线段集合，或者三个一组以构成三角形集合。

Vertices Graphic

从简单的立方体到复杂的人体结构，大多数现代渲染系统都使用三角形来建模所有图形。这些三角形被存储为构成三角形角的顶点。

我们使用顶点着色器来操作顶点，以便按我们想要的样子做图形的变换。

然后顶点经过光栅化（rasterization）后流转到片元着色阶段，片元着色器决定了片元的颜色。渲染结果图像中的每个像素至少对应一个片元，每个片元可输出一个颜色，该颜色会被存储到其相应的像素上（准确的说，片元的输出是存储到 Color Attachment 的纹素上）。

WebGPU 着色器语言: WGSL ​

WGSL (WebGPU Shading Language) 是 WebGPU 的着色器语言。 WGSL 的开发重点是让它轻松转换为与后端对应的着色器语言；例如，Vulkan 的 SPIR-V、Metal 的 MSL、DX12 的 HLSL 和 OpenGL 的 GLSL。 这种转换是在内部完成的，我们不需要关心这些细节。 就 wgpu 而言，它是由名为 naga 的包完成的。

在 WGSL 着色器语言 一章中，有对 WGSL 的由来及语法的更详细介绍。

WGSL 规范及其在 WGPU 中的应用仍在开发中。如果在使用中遇到问题，你或许希望 https://app.element.io/#/room/#wgpu:matrix.org 社区的人帮忙看一下你的代码。

编写着色器 ​

在 main.rs 所在的目录中创建一个 shader.wgsl 文件。在其中写入以下代码：

rust
// 顶点着色器
+import{_ as l,C as i,o as e,c as h,a1 as k,G as a}from"./chunks/framework.DyadSNS9.js";const t="/learn-wgpu-zh/assets/tutorial3-pipeline-vertices.Cmi0J73P.png",r="/learn-wgpu-zh/assets/tutorial3-pipeline-triangle.4hahlChO.png",b=JSON.parse('{"title":"管线 (Pipeline)","description":"","frontmatter":{},"headers":[],"relativePath":"beginner/tutorial3-pipeline/index.md","filePath":"beginner/tutorial3-pipeline/index.md","lastUpdated":1731720800000}'),d={name:"beginner/tutorial3-pipeline/index.md"};function E(g,s,c,y,o,F){const n=i("WasmExample"),p=i("AutoGithubLink");return e(),h("div",null,[s[0]||(s[0]=k('
管线 (Pipeline) ​
什么是管线? ​
管线 （ComputePipeline、RenderPipeline）由一系列资源绑定、可编程阶段（着色器）设置及固定功能状态组成。它代表了由 GPU 硬件、驱动程序和用户代理组合而成的完整功能对象，描述了 GPU 将对一组数据执行的所有操作。在本节中，我们将具体创建一个渲染管线（RenderPipeline）。
什么是着色器? ​
着色器（Shader）是你发送给 GPU 的微型程序，用于对数据进行操作。有三种主要类型的着色器：顶点（Vertex）、片元（Fragment）和计算（Compute）着色器。另外还有其他的如几何着色器，但它们属于进阶话题。现在，我们只需要使用顶点和片元着色器。
什么是顶点和片元？ ​
顶点（Vertex）就是三维（或二维）空间中的一个点。这些顶点会两个一组以构成线段集合，或者三个一组以构成三角形集合。
Vertices Graphic
从简单的立方体到复杂的人体结构，大多数现代渲染系统都使用三角形来建模所有图形。这些三角形被存储为构成三角形角的顶点。
我们使用顶点着色器来操作顶点，以便按我们想要的样子做图形的变换。
然后顶点经过光栅化（rasterization）后流转到片元着色阶段，片元着色器决定了片元的颜色。渲染结果图像中的每个像素至少对应一个片元，每个片元可输出一个颜色，该颜色会被存储到其相应的像素上（准确的说，片元的输出是存储到 Color Attachment 的纹素上）。
WebGPU 着色器语言: WGSL ​
WGSL (WebGPU Shading Language) 是 WebGPU 的着色器语言。 WGSL 的开发重点是让它轻松转换为与后端对应的着色器语言；例如，Vulkan 的 SPIR-V、Metal 的 MSL、DX12 的 HLSL 和 OpenGL 的 GLSL。 这种转换是在内部完成的，我们不需要关心这些细节。 就 wgpu 而言，它是由名为 naga 的包完成的。
在 WGSL 着色器语言 一章中，有对 WGSL 的由来及语法的更详细介绍。
WGSL 规范及其在 WGPU 中的应用仍在开发中。如果在使用中遇到问题，你或许希望 https://app.element.io/#/room/#wgpu:matrix.org 社区的人帮忙看一下你的代码。
编写着色器 ​
在 main.rs 所在的目录中创建一个 shader.wgsl 文件。在其中写入以下代码：
rust
// 顶点着色器
 
 struct VertexOutput {
     @builtin(position) clip_position: vec4f,
@@ -120,4 +120,4 @@ import{_ as l,c as e,a1 as h,G as i,B as a,o as k}from"./chunks/framework.DdYVMT
     render_pass.set_pipeline(&self.render_pipeline); // 2.
     render_pass.draw(0..3, 0..1); // 3.
 }
-// ...
上面代码所做的少量修改：
  1. 把 _render_pass 声明为可变变量并重命名为 render_pass。
  2. 在 render_pass 上设置刚刚创建的管线。
  3. 告诉 wgpu 用 3 个顶点和 1 个实例（实例的索引就是 @builtin(vertex_index) 的由来）来进行绘制。
修改完代码后，运行程序应该就能看到一个可爱的棕色三角形：
可爱的棕色三角形
挑战 ​
创建第二个管线，使用三角形顶点的位置数据来创建一个颜色并发送给片元着色器。当你按下空格键时让应用程序交替使用两个管线。提示：你需要修改 VertexOutput。
',59)),i(n,{example:"tutorial3_pipeline"}),i(p)])}const m=l(d,[["render",E]]);export{b as __pageData,m as default};
+// ...

上面代码所做的少量修改：

  1. 把 _render_pass 声明为可变变量并重命名为 render_pass。
  2. 在 render_pass 上设置刚刚创建的管线。
  3. 告诉 wgpu 用 3 个顶点和 1 个实例（实例的索引就是 @builtin(vertex_index) 的由来）来进行绘制。

修改完代码后，运行程序应该就能看到一个可爱的棕色三角形：

可爱的棕色三角形

挑战 ​

创建第二个管线，使用三角形顶点的位置数据来创建一个颜色并发送给片元着色器。当你按下空格键时让应用程序交替使用两个管线。提示：你需要修改 VertexOutput。

',59)),a(n,{example:"tutorial3_pipeline"}),a(p)])}const m=l(d,[["render",E]]);export{b as __pageData,m as default}; diff --git a/assets/beginner_tutorial3-pipeline_index.md.RyuYhpMP.lean.js b/assets/beginner_tutorial3-pipeline_index.md.CjsoUGLf.lean.js similarity index 99% rename from assets/beginner_tutorial3-pipeline_index.md.RyuYhpMP.lean.js rename to assets/beginner_tutorial3-pipeline_index.md.CjsoUGLf.lean.js index 831ed3254..04a2d9735 100644 --- a/assets/beginner_tutorial3-pipeline_index.md.RyuYhpMP.lean.js +++ b/assets/beginner_tutorial3-pipeline_index.md.CjsoUGLf.lean.js @@ -1,4 +1,4 @@ -import{_ as l,c as e,a1 as h,G as i,B as a,o as k}from"./chunks/framework.DdYVMT1V.js";const t="/learn-wgpu-zh/assets/tutorial3-pipeline-vertices.Cmi0J73P.png",r="/learn-wgpu-zh/assets/tutorial3-pipeline-triangle.4hahlChO.png",b=JSON.parse('{"title":"管线 (Pipeline)","description":"","frontmatter":{},"headers":[],"relativePath":"beginner/tutorial3-pipeline/index.md","filePath":"beginner/tutorial3-pipeline/index.md","lastUpdated":1730902479000}'),d={name:"beginner/tutorial3-pipeline/index.md"};function E(g,s,c,y,o,F){const n=a("WasmExample"),p=a("AutoGithubLink");return k(),e("div",null,[s[0]||(s[0]=h('

管线 (Pipeline) ​

什么是管线? ​

管线 （ComputePipeline、RenderPipeline）由一系列资源绑定、可编程阶段（着色器）设置及固定功能状态组成。它代表了由 GPU 硬件、驱动程序和用户代理组合而成的完整功能对象，描述了 GPU 将对一组数据执行的所有操作。在本节中，我们将具体创建一个渲染管线（RenderPipeline）。

什么是着色器? ​

着色器（Shader）是你发送给 GPU 的微型程序，用于对数据进行操作。有三种主要类型的着色器：顶点（Vertex）、片元（Fragment）和计算（Compute）着色器。另外还有其他的如几何着色器，但它们属于进阶话题。现在，我们只需要使用顶点和片元着色器。

什么是顶点和片元？ ​

顶点（Vertex）就是三维（或二维）空间中的一个点。这些顶点会两个一组以构成线段集合，或者三个一组以构成三角形集合。

Vertices Graphic

从简单的立方体到复杂的人体结构，大多数现代渲染系统都使用三角形来建模所有图形。这些三角形被存储为构成三角形角的顶点。

我们使用顶点着色器来操作顶点，以便按我们想要的样子做图形的变换。

然后顶点经过光栅化（rasterization）后流转到片元着色阶段，片元着色器决定了片元的颜色。渲染结果图像中的每个像素至少对应一个片元，每个片元可输出一个颜色，该颜色会被存储到其相应的像素上（准确的说，片元的输出是存储到 Color Attachment 的纹素上）。

WebGPU 着色器语言: WGSL ​

WGSL (WebGPU Shading Language) 是 WebGPU 的着色器语言。 WGSL 的开发重点是让它轻松转换为与后端对应的着色器语言；例如，Vulkan 的 SPIR-V、Metal 的 MSL、DX12 的 HLSL 和 OpenGL 的 GLSL。 这种转换是在内部完成的，我们不需要关心这些细节。 就 wgpu 而言，它是由名为 naga 的包完成的。

在 WGSL 着色器语言 一章中，有对 WGSL 的由来及语法的更详细介绍。

WGSL 规范及其在 WGPU 中的应用仍在开发中。如果在使用中遇到问题，你或许希望 https://app.element.io/#/room/#wgpu:matrix.org 社区的人帮忙看一下你的代码。

编写着色器 ​

在 main.rs 所在的目录中创建一个 shader.wgsl 文件。在其中写入以下代码：

rust
// 顶点着色器
+import{_ as l,C as i,o as e,c as h,a1 as k,G as a}from"./chunks/framework.DyadSNS9.js";const t="/learn-wgpu-zh/assets/tutorial3-pipeline-vertices.Cmi0J73P.png",r="/learn-wgpu-zh/assets/tutorial3-pipeline-triangle.4hahlChO.png",b=JSON.parse('{"title":"管线 (Pipeline)","description":"","frontmatter":{},"headers":[],"relativePath":"beginner/tutorial3-pipeline/index.md","filePath":"beginner/tutorial3-pipeline/index.md","lastUpdated":1731720800000}'),d={name:"beginner/tutorial3-pipeline/index.md"};function E(g,s,c,y,o,F){const n=i("WasmExample"),p=i("AutoGithubLink");return e(),h("div",null,[s[0]||(s[0]=k('
管线 (Pipeline) ​
什么是管线? ​
管线 （ComputePipeline、RenderPipeline）由一系列资源绑定、可编程阶段（着色器）设置及固定功能状态组成。它代表了由 GPU 硬件、驱动程序和用户代理组合而成的完整功能对象，描述了 GPU 将对一组数据执行的所有操作。在本节中，我们将具体创建一个渲染管线（RenderPipeline）。
什么是着色器? ​
着色器（Shader）是你发送给 GPU 的微型程序，用于对数据进行操作。有三种主要类型的着色器：顶点（Vertex）、片元（Fragment）和计算（Compute）着色器。另外还有其他的如几何着色器，但它们属于进阶话题。现在，我们只需要使用顶点和片元着色器。
什么是顶点和片元？ ​
顶点（Vertex）就是三维（或二维）空间中的一个点。这些顶点会两个一组以构成线段集合，或者三个一组以构成三角形集合。
Vertices Graphic
从简单的立方体到复杂的人体结构，大多数现代渲染系统都使用三角形来建模所有图形。这些三角形被存储为构成三角形角的顶点。
我们使用顶点着色器来操作顶点，以便按我们想要的样子做图形的变换。
然后顶点经过光栅化（rasterization）后流转到片元着色阶段，片元着色器决定了片元的颜色。渲染结果图像中的每个像素至少对应一个片元，每个片元可输出一个颜色，该颜色会被存储到其相应的像素上（准确的说，片元的输出是存储到 Color Attachment 的纹素上）。
WebGPU 着色器语言: WGSL ​
WGSL (WebGPU Shading Language) 是 WebGPU 的着色器语言。 WGSL 的开发重点是让它轻松转换为与后端对应的着色器语言；例如，Vulkan 的 SPIR-V、Metal 的 MSL、DX12 的 HLSL 和 OpenGL 的 GLSL。 这种转换是在内部完成的，我们不需要关心这些细节。 就 wgpu 而言，它是由名为 naga 的包完成的。
在 WGSL 着色器语言 一章中，有对 WGSL 的由来及语法的更详细介绍。
WGSL 规范及其在 WGPU 中的应用仍在开发中。如果在使用中遇到问题，你或许希望 https://app.element.io/#/room/#wgpu:matrix.org 社区的人帮忙看一下你的代码。
编写着色器 ​
在 main.rs 所在的目录中创建一个 shader.wgsl 文件。在其中写入以下代码：
rust
// 顶点着色器
 
 struct VertexOutput {
     @builtin(position) clip_position: vec4f,
@@ -120,4 +120,4 @@ import{_ as l,c as e,a1 as h,G as i,B as a,o as k}from"./chunks/framework.DdYVMT
     render_pass.set_pipeline(&self.render_pipeline); // 2.
     render_pass.draw(0..3, 0..1); // 3.
 }
-// ...
上面代码所做的少量修改：
  1. 把 _render_pass 声明为可变变量并重命名为 render_pass。
  2. 在 render_pass 上设置刚刚创建的管线。
  3. 告诉 wgpu 用 3 个顶点和 1 个实例（实例的索引就是 @builtin(vertex_index) 的由来）来进行绘制。
修改完代码后，运行程序应该就能看到一个可爱的棕色三角形：
可爱的棕色三角形
挑战 ​
创建第二个管线，使用三角形顶点的位置数据来创建一个颜色并发送给片元着色器。当你按下空格键时让应用程序交替使用两个管线。提示：你需要修改 VertexOutput。
',59)),i(n,{example:"tutorial3_pipeline"}),i(p)])}const m=l(d,[["render",E]]);export{b as __pageData,m as default};
+// ...

上面代码所做的少量修改：

  1. 把 _render_pass 声明为可变变量并重命名为 render_pass。
  2. 在 render_pass 上设置刚刚创建的管线。
  3. 告诉 wgpu 用 3 个顶点和 1 个实例（实例的索引就是 @builtin(vertex_index) 的由来）来进行绘制。

修改完代码后，运行程序应该就能看到一个可爱的棕色三角形：

可爱的棕色三角形

挑战 ​

创建第二个管线，使用三角形顶点的位置数据来创建一个颜色并发送给片元着色器。当你按下空格键时让应用程序交替使用两个管线。提示：你需要修改 VertexOutput。

',59)),a(n,{example:"tutorial3_pipeline"}),a(p)])}const m=l(d,[["render",E]]);export{b as __pageData,m as default}; diff --git a/assets/beginner_tutorial4-buffer_index.md.CXGa3RfS.js b/assets/beginner_tutorial4-buffer_index.md.DUPN0C2v.js similarity index 99% rename from assets/beginner_tutorial4-buffer_index.md.CXGa3RfS.js rename to assets/beginner_tutorial4-buffer_index.md.DUPN0C2v.js index 48b621185..90353570b 100644 --- a/assets/beginner_tutorial4-buffer_index.md.CXGa3RfS.js +++ b/assets/beginner_tutorial4-buffer_index.md.DUPN0C2v.js @@ -1,4 +1,4 @@ -import{_ as p,c as l,a1 as k,G as i,B as a,o as t}from"./chunks/framework.DdYVMT1V.js";const e="/learn-wgpu-zh/assets/vb_desc._JhNKX2y.png",r="/learn-wgpu-zh/assets/triangle.CjxPy2bu.png",E="/learn-wgpu-zh/assets/pentagon.YuCXjeB2.png",d="/learn-wgpu-zh/assets/indexed-pentagon.CGRRDyy5.png",m=JSON.parse('{"title":"缓冲区与索引","description":"","frontmatter":{},"headers":[],"relativePath":"beginner/tutorial4-buffer/index.md","filePath":"beginner/tutorial4-buffer/index.md","lastUpdated":1730902479000}'),g={name:"beginner/tutorial4-buffer/index.md"};function y(F,s,c,o,b,u){const n=a("WasmExample"),h=a("AutoGithubLink");return t(),l("div",null,[s[0]||(s[0]=k(`

缓冲区与索引 ​

终于要讨论它们了! ​

你可能已经厌倦了我老说 "我们会在讨论缓冲区的时候再详细介绍" 之类的话。现在终于到了谈论缓冲区的时候了，但首先...

什么是缓冲区? ​

缓冲区（Buffer）一个可用于 GPU 操作的内存块。缓冲区数据是以线性布局存储的，这意味着分配的每个字节都可以通过其从缓冲区开始的偏移量来寻址，但要根据操作的不同而有对齐限制。

缓冲区常用于存储结构体或数组等简单的数据，但也可以存储更复杂的数据，如树等图结构（只要所有节点都存储在一起，且不引用缓冲区以外的任何数据）。我们会经常用到缓冲区，所以让我们从最重要的两个开始：顶点缓冲区（Vertex Buffer）和索引缓冲区（Index Buffer）。

顶点缓冲区 ​

之前我们是直接在顶点着色器中存储的顶点数据。这在学习的起始阶段很有效，但这不是长远之计，因为需要绘制的对象的类型会有不同的大小，且每当需要更新模型时就得重新编译着色器，这会大大减慢我们的程序。我们将改为使用顶点缓冲区来存储想要绘制的顶点数据。在此之前，需要创建一个新的结构体来描述顶点：

rust
// lib.rs
+import{_ as p,C as i,o as l,c as k,a1 as t,G as a}from"./chunks/framework.DyadSNS9.js";const e="/learn-wgpu-zh/assets/vb_desc._JhNKX2y.png",r="/learn-wgpu-zh/assets/triangle.CjxPy2bu.png",E="/learn-wgpu-zh/assets/pentagon.YuCXjeB2.png",d="/learn-wgpu-zh/assets/indexed-pentagon.CGRRDyy5.png",m=JSON.parse('{"title":"缓冲区与索引","description":"","frontmatter":{},"headers":[],"relativePath":"beginner/tutorial4-buffer/index.md","filePath":"beginner/tutorial4-buffer/index.md","lastUpdated":1731720800000}'),g={name:"beginner/tutorial4-buffer/index.md"};function y(F,s,c,o,b,u){const n=i("WasmExample"),h=i("AutoGithubLink");return l(),k("div",null,[s[0]||(s[0]=t(`
缓冲区与索引 ​
终于要讨论它们了! ​
你可能已经厌倦了我老说 "我们会在讨论缓冲区的时候再详细介绍" 之类的话。现在终于到了谈论缓冲区的时候了，但首先...
什么是缓冲区? ​
缓冲区（Buffer）一个可用于 GPU 操作的内存块。缓冲区数据是以线性布局存储的，这意味着分配的每个字节都可以通过其从缓冲区开始的偏移量来寻址，但要根据操作的不同而有对齐限制。
缓冲区常用于存储结构体或数组等简单的数据，但也可以存储更复杂的数据，如树等图结构（只要所有节点都存储在一起，且不引用缓冲区以外的任何数据）。我们会经常用到缓冲区，所以让我们从最重要的两个开始：顶点缓冲区（Vertex Buffer）和索引缓冲区（Index Buffer）。
顶点缓冲区 ​
之前我们是直接在顶点着色器中存储的顶点数据。这在学习的起始阶段很有效，但这不是长远之计，因为需要绘制的对象的类型会有不同的大小，且每当需要更新模型时就得重新编译着色器，这会大大减慢我们的程序。我们将改为使用顶点缓冲区来存储想要绘制的顶点数据。在此之前，需要创建一个新的结构体来描述顶点：
rust
// lib.rs
 #[repr(C)]
 #[derive(Copy, Clone, Debug)]
 struct Vertex {
@@ -222,4 +222,4 @@ import{_ as p,c as l,a1 as k,G as i,B as a,o as t}from"./chunks/framework.DdYVMT
 render_pass.set_pipeline(&self.render_pipeline);
 render_pass.set_vertex_buffer(0, self.vertex_buffer.slice(..));
 render_pass.set_index_buffer(self.index_buffer.slice(..), wgpu::IndexFormat::Uint16); // 1.
-render_pass.draw_indexed(0..self.num_indices, 0, 0..1); // 2.
有几点需要注意：
  1. 命令名称是 set_index_buffer 而不是 set_index_buffers, 一次绘制（draw_XXX()）只能设置一个索引缓冲区。但是，你可以在一个渲染通道内调用多次绘制，每次都设置不同的索引缓冲区。
  2. 当使用索引缓冲区时，需使用 draw_indexed 来绘制，draw 命令会忽略索引缓冲区。还需确保你使用的是索引数（num_indices）而非顶点数，否则你的模型要么画错，要么因为没有足够的索引数而导致程序恐慌（panic）。
完成这些后，运行程序应该就能看到窗口里有一个洋红色的五边形了：
Magenta pentagon in window
颜色校正 ​
如果在洋红色五角星上使用取色器，你会得到一个 #BC00BC 的十六进制值。如果把它转换成 RGB 值会得到（188, 0, 188），将这些值除以 255 使其映射进 [0，1] 范围，大致会得到（0.737254902，0，0.737254902）。这与我们赋给顶点颜色的值不同，后者是（0.5, 0.0, 0.5）。其原因与色彩空间（Color Space）有关。
大多数显示器使用的色彩空间被称为 sRGB（事实上，目前市面上的中高端显示器已经支持 DisplayP3 甚至是 BT.2100 等广色域色彩空间，macOS 与 iOS 设备默认使用的就是 DisplayP3 色彩空间）。我们的展示平面（完全取决于从 surface.get_capabilities(&adapter).formats 返回的格式）默认支持 sRGB 纹理格式。sRGB 格式是根据颜色的相对亮度而不是实际亮度来存储的。其原因是人眼对光线的感知不是线性的。我们注意到较深的颜色比较浅的颜色有更多差异。
可以用下面的公式得到一个正确颜色的近似值。srgb_color = (rgb_color / 255) ^ 2.2。在 RGB 值为 (188, 0, 188) 的情况下，我们将得到 (0.511397819, 0.0, 0.511397819)。与我们的（0.5, 0.0, 0.5）有点偏差。虽然你可以通过调整公式来获得所需的数值，但使用纹理可能会节省很多时间，因为它们默认是以 sRGB 方式存储的，所以不会像顶点颜色那样出现颜色不准确的情况。我们会在下一课中介绍纹理。
假如你的显示设备使用的是 DisplayP3 或 BT.2100 等广色域色彩空间，那么当你使用取色器检查屏幕上的渲染结果时，拾取到的色值将与着色器内的返回值不一致。
这是因为目前 WebGPU 仅支持较小色域的 sRGB 色彩空间，而硬件会执行色彩空间转换（color space conversion）将 sRGB 色值映射到更广的色域来显示到屏幕上，因此，使用取色器拾取到的色值是经过转换后的值。
挑战 ​
使用顶点缓冲区和索引缓冲区创建一个比教程里做的更复杂的形状（也就是三个以上的三角形），并用空格键在两者之间切换。
',80)),i(n,{example:"tutorial4_buffer"}),i(h)])}const B=p(g,[["render",y]]);export{m as __pageData,B as default};
+render_pass.draw_indexed(0..self.num_indices, 0, 0..1); // 2.

有几点需要注意：

  1. 命令名称是 set_index_buffer 而不是 set_index_buffers, 一次绘制（draw_XXX()）只能设置一个索引缓冲区。但是，你可以在一个渲染通道内调用多次绘制，每次都设置不同的索引缓冲区。
  2. 当使用索引缓冲区时，需使用 draw_indexed 来绘制，draw 命令会忽略索引缓冲区。还需确保你使用的是索引数（num_indices）而非顶点数，否则你的模型要么画错，要么因为没有足够的索引数而导致程序恐慌（panic）。

完成这些后，运行程序应该就能看到窗口里有一个洋红色的五边形了：

Magenta pentagon in window

颜色校正 ​

如果在洋红色五角星上使用取色器，你会得到一个 #BC00BC 的十六进制值。如果把它转换成 RGB 值会得到（188, 0, 188），将这些值除以 255 使其映射进 [0，1] 范围，大致会得到（0.737254902，0，0.737254902）。这与我们赋给顶点颜色的值不同，后者是（0.5, 0.0, 0.5）。其原因与色彩空间（Color Space）有关。

大多数显示器使用的色彩空间被称为 sRGB（事实上，目前市面上的中高端显示器已经支持 DisplayP3 甚至是 BT.2100 等广色域色彩空间，macOS 与 iOS 设备默认使用的就是 DisplayP3 色彩空间）。我们的展示平面（完全取决于从 surface.get_capabilities(&adapter).formats 返回的格式）默认支持 sRGB 纹理格式。sRGB 格式是根据颜色的相对亮度而不是实际亮度来存储的。其原因是人眼对光线的感知不是线性的。我们注意到较深的颜色比较浅的颜色有更多差异。

可以用下面的公式得到一个正确颜色的近似值。srgb_color = (rgb_color / 255) ^ 2.2。在 RGB 值为 (188, 0, 188) 的情况下，我们将得到 (0.511397819, 0.0, 0.511397819)。与我们的（0.5, 0.0, 0.5）有点偏差。虽然你可以通过调整公式来获得所需的数值，但使用纹理可能会节省很多时间，因为它们默认是以 sRGB 方式存储的，所以不会像顶点颜色那样出现颜色不准确的情况。我们会在下一课中介绍纹理。

假如你的显示设备使用的是 DisplayP3 或 BT.2100 等广色域色彩空间，那么当你使用取色器检查屏幕上的渲染结果时，拾取到的色值将与着色器内的返回值不一致。

这是因为目前 WebGPU 仅支持较小色域的 sRGB 色彩空间，而硬件会执行色彩空间转换（color space conversion）将 sRGB 色值映射到更广的色域来显示到屏幕上，因此，使用取色器拾取到的色值是经过转换后的值。

挑战 ​

使用顶点缓冲区和索引缓冲区创建一个比教程里做的更复杂的形状（也就是三个以上的三角形），并用空格键在两者之间切换。

',80)),a(n,{example:"tutorial4_buffer"}),a(h)])}const B=p(g,[["render",y]]);export{m as __pageData,B as default}; diff --git a/assets/beginner_tutorial4-buffer_index.md.CXGa3RfS.lean.js b/assets/beginner_tutorial4-buffer_index.md.DUPN0C2v.lean.js similarity index 99% rename from assets/beginner_tutorial4-buffer_index.md.CXGa3RfS.lean.js rename to assets/beginner_tutorial4-buffer_index.md.DUPN0C2v.lean.js index 48b621185..90353570b 100644 --- a/assets/beginner_tutorial4-buffer_index.md.CXGa3RfS.lean.js +++ b/assets/beginner_tutorial4-buffer_index.md.DUPN0C2v.lean.js @@ -1,4 +1,4 @@ -import{_ as p,c as l,a1 as k,G as i,B as a,o as t}from"./chunks/framework.DdYVMT1V.js";const e="/learn-wgpu-zh/assets/vb_desc._JhNKX2y.png",r="/learn-wgpu-zh/assets/triangle.CjxPy2bu.png",E="/learn-wgpu-zh/assets/pentagon.YuCXjeB2.png",d="/learn-wgpu-zh/assets/indexed-pentagon.CGRRDyy5.png",m=JSON.parse('{"title":"缓冲区与索引","description":"","frontmatter":{},"headers":[],"relativePath":"beginner/tutorial4-buffer/index.md","filePath":"beginner/tutorial4-buffer/index.md","lastUpdated":1730902479000}'),g={name:"beginner/tutorial4-buffer/index.md"};function y(F,s,c,o,b,u){const n=a("WasmExample"),h=a("AutoGithubLink");return t(),l("div",null,[s[0]||(s[0]=k(`

缓冲区与索引 ​

终于要讨论它们了! ​

你可能已经厌倦了我老说 "我们会在讨论缓冲区的时候再详细介绍" 之类的话。现在终于到了谈论缓冲区的时候了，但首先...

什么是缓冲区? ​

缓冲区（Buffer）一个可用于 GPU 操作的内存块。缓冲区数据是以线性布局存储的，这意味着分配的每个字节都可以通过其从缓冲区开始的偏移量来寻址，但要根据操作的不同而有对齐限制。

缓冲区常用于存储结构体或数组等简单的数据，但也可以存储更复杂的数据，如树等图结构（只要所有节点都存储在一起，且不引用缓冲区以外的任何数据）。我们会经常用到缓冲区，所以让我们从最重要的两个开始：顶点缓冲区（Vertex Buffer）和索引缓冲区（Index Buffer）。

顶点缓冲区 ​

之前我们是直接在顶点着色器中存储的顶点数据。这在学习的起始阶段很有效，但这不是长远之计，因为需要绘制的对象的类型会有不同的大小，且每当需要更新模型时就得重新编译着色器，这会大大减慢我们的程序。我们将改为使用顶点缓冲区来存储想要绘制的顶点数据。在此之前，需要创建一个新的结构体来描述顶点：

rust
// lib.rs
+import{_ as p,C as i,o as l,c as k,a1 as t,G as a}from"./chunks/framework.DyadSNS9.js";const e="/learn-wgpu-zh/assets/vb_desc._JhNKX2y.png",r="/learn-wgpu-zh/assets/triangle.CjxPy2bu.png",E="/learn-wgpu-zh/assets/pentagon.YuCXjeB2.png",d="/learn-wgpu-zh/assets/indexed-pentagon.CGRRDyy5.png",m=JSON.parse('{"title":"缓冲区与索引","description":"","frontmatter":{},"headers":[],"relativePath":"beginner/tutorial4-buffer/index.md","filePath":"beginner/tutorial4-buffer/index.md","lastUpdated":1731720800000}'),g={name:"beginner/tutorial4-buffer/index.md"};function y(F,s,c,o,b,u){const n=i("WasmExample"),h=i("AutoGithubLink");return l(),k("div",null,[s[0]||(s[0]=t(`
缓冲区与索引 ​
终于要讨论它们了! ​
你可能已经厌倦了我老说 "我们会在讨论缓冲区的时候再详细介绍" 之类的话。现在终于到了谈论缓冲区的时候了，但首先...
什么是缓冲区? ​
缓冲区（Buffer）一个可用于 GPU 操作的内存块。缓冲区数据是以线性布局存储的，这意味着分配的每个字节都可以通过其从缓冲区开始的偏移量来寻址，但要根据操作的不同而有对齐限制。
缓冲区常用于存储结构体或数组等简单的数据，但也可以存储更复杂的数据，如树等图结构（只要所有节点都存储在一起，且不引用缓冲区以外的任何数据）。我们会经常用到缓冲区，所以让我们从最重要的两个开始：顶点缓冲区（Vertex Buffer）和索引缓冲区（Index Buffer）。
顶点缓冲区 ​
之前我们是直接在顶点着色器中存储的顶点数据。这在学习的起始阶段很有效，但这不是长远之计，因为需要绘制的对象的类型会有不同的大小，且每当需要更新模型时就得重新编译着色器，这会大大减慢我们的程序。我们将改为使用顶点缓冲区来存储想要绘制的顶点数据。在此之前，需要创建一个新的结构体来描述顶点：
rust
// lib.rs
 #[repr(C)]
 #[derive(Copy, Clone, Debug)]
 struct Vertex {
@@ -222,4 +222,4 @@ import{_ as p,c as l,a1 as k,G as i,B as a,o as t}from"./chunks/framework.DdYVMT
 render_pass.set_pipeline(&self.render_pipeline);
 render_pass.set_vertex_buffer(0, self.vertex_buffer.slice(..));
 render_pass.set_index_buffer(self.index_buffer.slice(..), wgpu::IndexFormat::Uint16); // 1.
-render_pass.draw_indexed(0..self.num_indices, 0, 0..1); // 2.
有几点需要注意：
  1. 命令名称是 set_index_buffer 而不是 set_index_buffers, 一次绘制（draw_XXX()）只能设置一个索引缓冲区。但是，你可以在一个渲染通道内调用多次绘制，每次都设置不同的索引缓冲区。
  2. 当使用索引缓冲区时，需使用 draw_indexed 来绘制，draw 命令会忽略索引缓冲区。还需确保你使用的是索引数（num_indices）而非顶点数，否则你的模型要么画错，要么因为没有足够的索引数而导致程序恐慌（panic）。
完成这些后，运行程序应该就能看到窗口里有一个洋红色的五边形了：
Magenta pentagon in window
颜色校正 ​
如果在洋红色五角星上使用取色器，你会得到一个 #BC00BC 的十六进制值。如果把它转换成 RGB 值会得到（188, 0, 188），将这些值除以 255 使其映射进 [0，1] 范围，大致会得到（0.737254902，0，0.737254902）。这与我们赋给顶点颜色的值不同，后者是（0.5, 0.0, 0.5）。其原因与色彩空间（Color Space）有关。
大多数显示器使用的色彩空间被称为 sRGB（事实上，目前市面上的中高端显示器已经支持 DisplayP3 甚至是 BT.2100 等广色域色彩空间，macOS 与 iOS 设备默认使用的就是 DisplayP3 色彩空间）。我们的展示平面（完全取决于从 surface.get_capabilities(&adapter).formats 返回的格式）默认支持 sRGB 纹理格式。sRGB 格式是根据颜色的相对亮度而不是实际亮度来存储的。其原因是人眼对光线的感知不是线性的。我们注意到较深的颜色比较浅的颜色有更多差异。
可以用下面的公式得到一个正确颜色的近似值。srgb_color = (rgb_color / 255) ^ 2.2。在 RGB 值为 (188, 0, 188) 的情况下，我们将得到 (0.511397819, 0.0, 0.511397819)。与我们的（0.5, 0.0, 0.5）有点偏差。虽然你可以通过调整公式来获得所需的数值，但使用纹理可能会节省很多时间，因为它们默认是以 sRGB 方式存储的，所以不会像顶点颜色那样出现颜色不准确的情况。我们会在下一课中介绍纹理。
假如你的显示设备使用的是 DisplayP3 或 BT.2100 等广色域色彩空间，那么当你使用取色器检查屏幕上的渲染结果时，拾取到的色值将与着色器内的返回值不一致。
这是因为目前 WebGPU 仅支持较小色域的 sRGB 色彩空间，而硬件会执行色彩空间转换（color space conversion）将 sRGB 色值映射到更广的色域来显示到屏幕上，因此，使用取色器拾取到的色值是经过转换后的值。
挑战 ​
使用顶点缓冲区和索引缓冲区创建一个比教程里做的更复杂的形状（也就是三个以上的三角形），并用空格键在两者之间切换。
',80)),i(n,{example:"tutorial4_buffer"}),i(h)])}const B=p(g,[["render",y]]);export{m as __pageData,B as default};
+render_pass.draw_indexed(0..self.num_indices, 0, 0..1); // 2.

有几点需要注意：

  1. 命令名称是 set_index_buffer 而不是 set_index_buffers, 一次绘制（draw_XXX()）只能设置一个索引缓冲区。但是，你可以在一个渲染通道内调用多次绘制，每次都设置不同的索引缓冲区。
  2. 当使用索引缓冲区时，需使用 draw_indexed 来绘制，draw 命令会忽略索引缓冲区。还需确保你使用的是索引数（num_indices）而非顶点数，否则你的模型要么画错，要么因为没有足够的索引数而导致程序恐慌（panic）。

完成这些后，运行程序应该就能看到窗口里有一个洋红色的五边形了：

Magenta pentagon in window

颜色校正 ​

如果在洋红色五角星上使用取色器，你会得到一个 #BC00BC 的十六进制值。如果把它转换成 RGB 值会得到（188, 0, 188），将这些值除以 255 使其映射进 [0，1] 范围，大致会得到（0.737254902，0，0.737254902）。这与我们赋给顶点颜色的值不同，后者是（0.5, 0.0, 0.5）。其原因与色彩空间（Color Space）有关。

大多数显示器使用的色彩空间被称为 sRGB（事实上，目前市面上的中高端显示器已经支持 DisplayP3 甚至是 BT.2100 等广色域色彩空间，macOS 与 iOS 设备默认使用的就是 DisplayP3 色彩空间）。我们的展示平面（完全取决于从 surface.get_capabilities(&adapter).formats 返回的格式）默认支持 sRGB 纹理格式。sRGB 格式是根据颜色的相对亮度而不是实际亮度来存储的。其原因是人眼对光线的感知不是线性的。我们注意到较深的颜色比较浅的颜色有更多差异。

可以用下面的公式得到一个正确颜色的近似值。srgb_color = (rgb_color / 255) ^ 2.2。在 RGB 值为 (188, 0, 188) 的情况下，我们将得到 (0.511397819, 0.0, 0.511397819)。与我们的（0.5, 0.0, 0.5）有点偏差。虽然你可以通过调整公式来获得所需的数值，但使用纹理可能会节省很多时间，因为它们默认是以 sRGB 方式存储的，所以不会像顶点颜色那样出现颜色不准确的情况。我们会在下一课中介绍纹理。

假如你的显示设备使用的是 DisplayP3 或 BT.2100 等广色域色彩空间，那么当你使用取色器检查屏幕上的渲染结果时，拾取到的色值将与着色器内的返回值不一致。

这是因为目前 WebGPU 仅支持较小色域的 sRGB 色彩空间，而硬件会执行色彩空间转换（color space conversion）将 sRGB 色值映射到更广的色域来显示到屏幕上，因此，使用取色器拾取到的色值是经过转换后的值。

挑战 ​

使用顶点缓冲区和索引缓冲区创建一个比教程里做的更复杂的形状（也就是三个以上的三角形），并用空格键在两者之间切换。

',80)),a(n,{example:"tutorial4_buffer"}),a(h)])}const B=p(g,[["render",y]]);export{m as __pageData,B as default}; diff --git a/assets/beginner_tutorial5-textures_index.md.DGv0fitl.js b/assets/beginner_tutorial5-textures_index.md.C3WANDzX.js similarity index 99% rename from assets/beginner_tutorial5-textures_index.md.DGv0fitl.js rename to assets/beginner_tutorial5-textures_index.md.C3WANDzX.js index 95ef34f71..726feedf4 100644 --- a/assets/beginner_tutorial5-textures_index.md.DGv0fitl.js +++ b/assets/beginner_tutorial5-textures_index.md.C3WANDzX.js @@ -1,4 +1,4 @@ -import{_ as h,c as l,a1 as k,G as i,B as a,o as t}from"./chunks/framework.DdYVMT1V.js";const e="/learn-wgpu-zh/assets/happy-tree.C0rRZfsX.png",r="/learn-wgpu-zh/assets/address_mode.CHohhQ7D.png",E="/learn-wgpu-zh/assets/upside-down.Cxjf2bzg.png",d="/learn-wgpu-zh/assets/happy-tree-uv-coords.DdC0O8hw.png",g="/learn-wgpu-zh/assets/rightside-up.DJRqzYex.png",D=JSON.parse('{"title":"纹理和绑定组","description":"","frontmatter":{},"headers":[],"relativePath":"beginner/tutorial5-textures/index.md","filePath":"beginner/tutorial5-textures/index.md","lastUpdated":1730902479000}'),y={name:"beginner/tutorial5-textures/index.md"};function F(c,s,u,b,o,m){const n=a("WasmExample"),p=a("AutoGithubLink");return t(),l("div",null,[s[0]||(s[0]=k('

纹理和绑定组 ​

目前为止，我们一直在绘制简单的图形。当然可以只用三角形来做游戏，而试图绘制高精度的对象又会极大地限制能运行我们游戏的设备。不过，可以用 纹理 来解决此问题。

纹理（Textures）是叠加在三角形网格（Mesh）上的图像，使其看起来有丰富的细节。有多种类型的纹理，如法线贴图（Normal Maps，也就是法线纹理）、凹凸贴图（Bump Maps）、镜面贴图和漫反射贴图。下边将讨论漫反射贴图，简单来说也就是颜色纹理。

加载图像文件 ​

要把一个图像映射到对象网格上，首先是需要有一个图像文件。就使用下边这棵快乐的小树吧：

一棵快乐的树

我们将使用 image 包 来加载这棵树。先把它添加到依赖项中：

toml
[dependencies.image]
+import{_ as h,C as i,o as l,c as k,a1 as t,G as a}from"./chunks/framework.DyadSNS9.js";const e="/learn-wgpu-zh/assets/happy-tree.C0rRZfsX.png",r="/learn-wgpu-zh/assets/address_mode.CHohhQ7D.png",E="/learn-wgpu-zh/assets/upside-down.Cxjf2bzg.png",d="/learn-wgpu-zh/assets/happy-tree-uv-coords.DdC0O8hw.png",g="/learn-wgpu-zh/assets/rightside-up.DJRqzYex.png",D=JSON.parse('{"title":"纹理和绑定组","description":"","frontmatter":{},"headers":[],"relativePath":"beginner/tutorial5-textures/index.md","filePath":"beginner/tutorial5-textures/index.md","lastUpdated":1731720800000}'),y={name:"beginner/tutorial5-textures/index.md"};function F(c,s,u,b,o,m){const n=i("WasmExample"),p=i("AutoGithubLink");return l(),k("div",null,[s[0]||(s[0]=t('
纹理和绑定组 ​
目前为止，我们一直在绘制简单的图形。当然可以只用三角形来做游戏，而试图绘制高精度的对象又会极大地限制能运行我们游戏的设备。不过，可以用 纹理 来解决此问题。
纹理（Textures）是叠加在三角形网格（Mesh）上的图像，使其看起来有丰富的细节。有多种类型的纹理，如法线贴图（Normal Maps，也就是法线纹理）、凹凸贴图（Bump Maps）、镜面贴图和漫反射贴图。下边将讨论漫反射贴图，简单来说也就是颜色纹理。
加载图像文件 ​
要把一个图像映射到对象网格上，首先是需要有一个图像文件。就使用下边这棵快乐的小树吧：
一棵快乐的树
我们将使用 image 包 来加载这棵树。先把它添加到依赖项中：
toml
[dependencies.image]
 version = "0.24"
 default-features = false
 features = ["png", "jpeg"]
image 包含的 jpeg 解码器使用 rayon 来加速线程的解码速度。WASM 目前不支持线程，所以我们需要禁用这一特性，这样代码在尝试加载网络上的 jpeg 时就不会崩溃。
在 WASM 中解码 jpeg 性能不高。如果你想在 WASM 中加快图像加载速度，可以选择使用浏览器的内置解码器来替换 wasm-bindgen 构建时使用 的 image。这涉及到在 Rust 中创建一个 <img> 标记来获取图像，然后创建一个 <canvas> 来获取像素数据，我把这留作读者的练习。
在 State 的 new() 函数中，于 surface.configure() 之后添加以下代码：
rust
surface.configure(&device, &config);
@@ -348,4 +348,4 @@ import{_ as h,c as l,a1 as k,G as i,B as a,o as t}from"./chunks/framework.DdYVMT
             diffuse_texture, // NEW
         }
     }
-}
经过上边的整理，代码的工作方式还和以前一样，但我们现在有了一个更便利的方式来创建纹理。
挑战 ​
另创建一个纹理，并在你按下空格键时交替使用。
`,91)),i(n,{example:"tutorial5_textures"}),i(p)])}const A=h(y,[["render",F]]);export{D as __pageData,A as default};
+}

经过上边的整理，代码的工作方式还和以前一样，但我们现在有了一个更便利的方式来创建纹理。

挑战 ​

另创建一个纹理，并在你按下空格键时交替使用。

`,91)),a(n,{example:"tutorial5_textures"}),a(p)])}const A=h(y,[["render",F]]);export{D as __pageData,A as default}; diff --git a/assets/beginner_tutorial5-textures_index.md.DGv0fitl.lean.js b/assets/beginner_tutorial5-textures_index.md.C3WANDzX.lean.js similarity index 99% rename from assets/beginner_tutorial5-textures_index.md.DGv0fitl.lean.js rename to assets/beginner_tutorial5-textures_index.md.C3WANDzX.lean.js index 95ef34f71..726feedf4 100644 --- a/assets/beginner_tutorial5-textures_index.md.DGv0fitl.lean.js +++ b/assets/beginner_tutorial5-textures_index.md.C3WANDzX.lean.js @@ -1,4 +1,4 @@ -import{_ as h,c as l,a1 as k,G as i,B as a,o as t}from"./chunks/framework.DdYVMT1V.js";const e="/learn-wgpu-zh/assets/happy-tree.C0rRZfsX.png",r="/learn-wgpu-zh/assets/address_mode.CHohhQ7D.png",E="/learn-wgpu-zh/assets/upside-down.Cxjf2bzg.png",d="/learn-wgpu-zh/assets/happy-tree-uv-coords.DdC0O8hw.png",g="/learn-wgpu-zh/assets/rightside-up.DJRqzYex.png",D=JSON.parse('{"title":"纹理和绑定组","description":"","frontmatter":{},"headers":[],"relativePath":"beginner/tutorial5-textures/index.md","filePath":"beginner/tutorial5-textures/index.md","lastUpdated":1730902479000}'),y={name:"beginner/tutorial5-textures/index.md"};function F(c,s,u,b,o,m){const n=a("WasmExample"),p=a("AutoGithubLink");return t(),l("div",null,[s[0]||(s[0]=k('

纹理和绑定组 ​

目前为止，我们一直在绘制简单的图形。当然可以只用三角形来做游戏，而试图绘制高精度的对象又会极大地限制能运行我们游戏的设备。不过，可以用 纹理 来解决此问题。

纹理（Textures）是叠加在三角形网格（Mesh）上的图像，使其看起来有丰富的细节。有多种类型的纹理，如法线贴图（Normal Maps，也就是法线纹理）、凹凸贴图（Bump Maps）、镜面贴图和漫反射贴图。下边将讨论漫反射贴图，简单来说也就是颜色纹理。

加载图像文件 ​

要把一个图像映射到对象网格上，首先是需要有一个图像文件。就使用下边这棵快乐的小树吧：

一棵快乐的树

我们将使用 image 包 来加载这棵树。先把它添加到依赖项中：

toml
[dependencies.image]
+import{_ as h,C as i,o as l,c as k,a1 as t,G as a}from"./chunks/framework.DyadSNS9.js";const e="/learn-wgpu-zh/assets/happy-tree.C0rRZfsX.png",r="/learn-wgpu-zh/assets/address_mode.CHohhQ7D.png",E="/learn-wgpu-zh/assets/upside-down.Cxjf2bzg.png",d="/learn-wgpu-zh/assets/happy-tree-uv-coords.DdC0O8hw.png",g="/learn-wgpu-zh/assets/rightside-up.DJRqzYex.png",D=JSON.parse('{"title":"纹理和绑定组","description":"","frontmatter":{},"headers":[],"relativePath":"beginner/tutorial5-textures/index.md","filePath":"beginner/tutorial5-textures/index.md","lastUpdated":1731720800000}'),y={name:"beginner/tutorial5-textures/index.md"};function F(c,s,u,b,o,m){const n=i("WasmExample"),p=i("AutoGithubLink");return l(),k("div",null,[s[0]||(s[0]=t('
纹理和绑定组 ​
目前为止，我们一直在绘制简单的图形。当然可以只用三角形来做游戏，而试图绘制高精度的对象又会极大地限制能运行我们游戏的设备。不过，可以用 纹理 来解决此问题。
纹理（Textures）是叠加在三角形网格（Mesh）上的图像，使其看起来有丰富的细节。有多种类型的纹理，如法线贴图（Normal Maps，也就是法线纹理）、凹凸贴图（Bump Maps）、镜面贴图和漫反射贴图。下边将讨论漫反射贴图，简单来说也就是颜色纹理。
加载图像文件 ​
要把一个图像映射到对象网格上，首先是需要有一个图像文件。就使用下边这棵快乐的小树吧：
一棵快乐的树
我们将使用 image 包 来加载这棵树。先把它添加到依赖项中：
toml
[dependencies.image]
 version = "0.24"
 default-features = false
 features = ["png", "jpeg"]
image 包含的 jpeg 解码器使用 rayon 来加速线程的解码速度。WASM 目前不支持线程，所以我们需要禁用这一特性，这样代码在尝试加载网络上的 jpeg 时就不会崩溃。
在 WASM 中解码 jpeg 性能不高。如果你想在 WASM 中加快图像加载速度，可以选择使用浏览器的内置解码器来替换 wasm-bindgen 构建时使用 的 image。这涉及到在 Rust 中创建一个 <img> 标记来获取图像，然后创建一个 <canvas> 来获取像素数据，我把这留作读者的练习。
在 State 的 new() 函数中，于 surface.configure() 之后添加以下代码：
rust
surface.configure(&device, &config);
@@ -348,4 +348,4 @@ import{_ as h,c as l,a1 as k,G as i,B as a,o as t}from"./chunks/framework.DdYVMT
             diffuse_texture, // NEW
         }
     }
-}
经过上边的整理，代码的工作方式还和以前一样，但我们现在有了一个更便利的方式来创建纹理。
挑战 ​
另创建一个纹理，并在你按下空格键时交替使用。
`,91)),i(n,{example:"tutorial5_textures"}),i(p)])}const A=h(y,[["render",F]]);export{D as __pageData,A as default};
+}

经过上边的整理，代码的工作方式还和以前一样，但我们现在有了一个更便利的方式来创建纹理。

挑战 ​

另创建一个纹理，并在你按下空格键时交替使用。

`,91)),a(n,{example:"tutorial5_textures"}),a(p)])}const A=h(y,[["render",F]]);export{D as __pageData,A as default}; diff --git a/assets/beginner_tutorial6-uniforms_index.md.twC0nven.js b/assets/beginner_tutorial6-uniforms_index.md.CPpJaMj2.js similarity index 99% rename from assets/beginner_tutorial6-uniforms_index.md.twC0nven.js rename to assets/beginner_tutorial6-uniforms_index.md.CPpJaMj2.js index 906fb1af8..7a47a2b57 100644 --- a/assets/beginner_tutorial6-uniforms_index.md.twC0nven.js +++ b/assets/beginner_tutorial6-uniforms_index.md.CPpJaMj2.js @@ -1,4 +1,4 @@ -import{_ as p,c as h,a1 as k,G as i,B as a,o as e}from"./chunks/framework.DdYVMT1V.js";const t="/learn-wgpu-zh/assets/static-tree.CnUnFqC5.png",u=JSON.parse('{"title":"Uniform 缓冲区与 3D 虚拟摄像机","description":"","frontmatter":{},"headers":[],"relativePath":"beginner/tutorial6-uniforms/index.md","filePath":"beginner/tutorial6-uniforms/index.md","lastUpdated":1730902479000}'),r={name:"beginner/tutorial6-uniforms/index.md"};function E(d,s,g,y,F,c){const n=a("WasmExample"),l=a("AutoGithubLink");return e(),h("div",null,[s[0]||(s[0]=k(`

Uniform 缓冲区与 3D 虚拟摄像机 ​

虽然我们之前的渲染似乎都是在 2D 空间下进行的，但实际上我们一直都是在 3D 空间下渲染的！这就是为什么 Vertex 结构体的 position 是 3 个浮点数的数组而不是 2 个。由于我们是在正面观察，所以才无法真正看到场景的立体感。下面将通过创建一个虚拟摄像机（Camera）来改变我们的观察视角。

透视摄像机 ​

本教程聚焦于 wgpu 的教学，而不是线性代数，所以会略过很多涉及的数学知识。如果你对线性代数感兴趣，网上有大量的阅读材料。我们将使用 glam 来处理所有数学问题，在 Cargo.toml 中添加以下依赖：

toml
[dependencies]
+import{_ as p,C as i,o as h,c as k,a1 as e,G as a}from"./chunks/framework.DyadSNS9.js";const t="/learn-wgpu-zh/assets/static-tree.CnUnFqC5.png",u=JSON.parse('{"title":"Uniform 缓冲区与 3D 虚拟摄像机","description":"","frontmatter":{},"headers":[],"relativePath":"beginner/tutorial6-uniforms/index.md","filePath":"beginner/tutorial6-uniforms/index.md","lastUpdated":1731720800000}'),r={name:"beginner/tutorial6-uniforms/index.md"};function E(d,s,g,y,F,c){const n=i("WasmExample"),l=i("AutoGithubLink");return h(),k("div",null,[s[0]||(s[0]=e(`
Uniform 缓冲区与 3D 虚拟摄像机 ​
虽然我们之前的渲染似乎都是在 2D 空间下进行的，但实际上我们一直都是在 3D 空间下渲染的！这就是为什么 Vertex 结构体的 position 是 3 个浮点数的数组而不是 2 个。由于我们是在正面观察，所以才无法真正看到场景的立体感。下面将通过创建一个虚拟摄像机（Camera）来改变我们的观察视角。
透视摄像机 ​
本教程聚焦于 wgpu 的教学，而不是线性代数，所以会略过很多涉及的数学知识。如果你对线性代数感兴趣，网上有大量的阅读材料。我们将使用 glam 来处理所有数学问题，在 Cargo.toml 中添加以下依赖：
toml
[dependencies]
 # other deps...
 glam = "0.29"
现在让我们开始使用此数学包！在 State 结构体上方创建摄像机结构体：
rust
struct Camera {
     eye: glam::Vec3,
@@ -281,4 +281,4 @@ import{_ as p,c as h,a1 as k,G as i,B as a,o as e}from"./chunks/framework.DdYVMT
     self.camera_controller.update_camera(&mut self.camera);
     self.camera_uniform.update_view_proj(&self.camera);
     self.queue.write_buffer(&self.camera_buffer, 0, bytemuck::cast_slice(&[self.camera_uniform]));
-}
这就是要做的全部工作了。现在运行代码，将能看到一个带有树木纹理的五边形，并可以用 wasd/arrow 键来旋转和缩放。
挑战 ​
让上面的五边形独立于摄像机进行旋转。提示：你需要另一个矩阵来实现这一点。
`,50)),i(n,{example:"tutorial6_uniforms"}),i(l)])}const o=p(r,[["render",E]]);export{u as __pageData,o as default};
+}

这就是要做的全部工作了。现在运行代码，将能看到一个带有树木纹理的五边形，并可以用 wasd/arrow 键来旋转和缩放。

挑战 ​

让上面的五边形独立于摄像机进行旋转。提示：你需要另一个矩阵来实现这一点。

`,50)),a(n,{example:"tutorial6_uniforms"}),a(l)])}const o=p(r,[["render",E]]);export{u as __pageData,o as default}; diff --git a/assets/beginner_tutorial6-uniforms_index.md.twC0nven.lean.js b/assets/beginner_tutorial6-uniforms_index.md.CPpJaMj2.lean.js similarity index 99% rename from assets/beginner_tutorial6-uniforms_index.md.twC0nven.lean.js rename to assets/beginner_tutorial6-uniforms_index.md.CPpJaMj2.lean.js index 906fb1af8..7a47a2b57 100644 --- a/assets/beginner_tutorial6-uniforms_index.md.twC0nven.lean.js +++ b/assets/beginner_tutorial6-uniforms_index.md.CPpJaMj2.lean.js @@ -1,4 +1,4 @@ -import{_ as p,c as h,a1 as k,G as i,B as a,o as e}from"./chunks/framework.DdYVMT1V.js";const t="/learn-wgpu-zh/assets/static-tree.CnUnFqC5.png",u=JSON.parse('{"title":"Uniform 缓冲区与 3D 虚拟摄像机","description":"","frontmatter":{},"headers":[],"relativePath":"beginner/tutorial6-uniforms/index.md","filePath":"beginner/tutorial6-uniforms/index.md","lastUpdated":1730902479000}'),r={name:"beginner/tutorial6-uniforms/index.md"};function E(d,s,g,y,F,c){const n=a("WasmExample"),l=a("AutoGithubLink");return e(),h("div",null,[s[0]||(s[0]=k(`

Uniform 缓冲区与 3D 虚拟摄像机 ​

虽然我们之前的渲染似乎都是在 2D 空间下进行的，但实际上我们一直都是在 3D 空间下渲染的！这就是为什么 Vertex 结构体的 position 是 3 个浮点数的数组而不是 2 个。由于我们是在正面观察，所以才无法真正看到场景的立体感。下面将通过创建一个虚拟摄像机（Camera）来改变我们的观察视角。

透视摄像机 ​

本教程聚焦于 wgpu 的教学，而不是线性代数，所以会略过很多涉及的数学知识。如果你对线性代数感兴趣，网上有大量的阅读材料。我们将使用 glam 来处理所有数学问题，在 Cargo.toml 中添加以下依赖：

toml
[dependencies]
+import{_ as p,C as i,o as h,c as k,a1 as e,G as a}from"./chunks/framework.DyadSNS9.js";const t="/learn-wgpu-zh/assets/static-tree.CnUnFqC5.png",u=JSON.parse('{"title":"Uniform 缓冲区与 3D 虚拟摄像机","description":"","frontmatter":{},"headers":[],"relativePath":"beginner/tutorial6-uniforms/index.md","filePath":"beginner/tutorial6-uniforms/index.md","lastUpdated":1731720800000}'),r={name:"beginner/tutorial6-uniforms/index.md"};function E(d,s,g,y,F,c){const n=i("WasmExample"),l=i("AutoGithubLink");return h(),k("div",null,[s[0]||(s[0]=e(`
Uniform 缓冲区与 3D 虚拟摄像机 ​
虽然我们之前的渲染似乎都是在 2D 空间下进行的，但实际上我们一直都是在 3D 空间下渲染的！这就是为什么 Vertex 结构体的 position 是 3 个浮点数的数组而不是 2 个。由于我们是在正面观察，所以才无法真正看到场景的立体感。下面将通过创建一个虚拟摄像机（Camera）来改变我们的观察视角。
透视摄像机 ​
本教程聚焦于 wgpu 的教学，而不是线性代数，所以会略过很多涉及的数学知识。如果你对线性代数感兴趣，网上有大量的阅读材料。我们将使用 glam 来处理所有数学问题，在 Cargo.toml 中添加以下依赖：
toml
[dependencies]
 # other deps...
 glam = "0.29"
现在让我们开始使用此数学包！在 State 结构体上方创建摄像机结构体：
rust
struct Camera {
     eye: glam::Vec3,
@@ -281,4 +281,4 @@ import{_ as p,c as h,a1 as k,G as i,B as a,o as e}from"./chunks/framework.DdYVMT
     self.camera_controller.update_camera(&mut self.camera);
     self.camera_uniform.update_view_proj(&self.camera);
     self.queue.write_buffer(&self.camera_buffer, 0, bytemuck::cast_slice(&[self.camera_uniform]));
-}
这就是要做的全部工作了。现在运行代码，将能看到一个带有树木纹理的五边形，并可以用 wasd/arrow 键来旋转和缩放。
挑战 ​
让上面的五边形独立于摄像机进行旋转。提示：你需要另一个矩阵来实现这一点。
`,50)),i(n,{example:"tutorial6_uniforms"}),i(l)])}const o=p(r,[["render",E]]);export{u as __pageData,o as default};
+}

这就是要做的全部工作了。现在运行代码，将能看到一个带有树木纹理的五边形，并可以用 wasd/arrow 键来旋转和缩放。

挑战 ​

让上面的五边形独立于摄像机进行旋转。提示：你需要另一个矩阵来实现这一点。

`,50)),a(n,{example:"tutorial6_uniforms"}),a(l)])}const o=p(r,[["render",E]]);export{u as __pageData,o as default}; diff --git a/assets/beginner_tutorial7-instancing_index.md.BZiOSmrj.js b/assets/beginner_tutorial7-instancing_index.md.5gxEY54W.js similarity index 99% rename from assets/beginner_tutorial7-instancing_index.md.BZiOSmrj.js rename to assets/beginner_tutorial7-instancing_index.md.5gxEY54W.js index 00d60c9ca..adb9c1196 100644 --- a/assets/beginner_tutorial7-instancing_index.md.BZiOSmrj.js +++ b/assets/beginner_tutorial7-instancing_index.md.5gxEY54W.js @@ -1,4 +1,4 @@ -import{_ as l,c as h,a1 as k,G as i,B as a,o as t}from"./chunks/framework.DdYVMT1V.js";const e="/learn-wgpu-zh/assets/forest.pUstyShS.png",o=JSON.parse('{"title":"实例化绘制","description":"","frontmatter":{},"headers":[],"relativePath":"beginner/tutorial7-instancing/index.md","filePath":"beginner/tutorial7-instancing/index.md","lastUpdated":1730902479000}'),r={name:"beginner/tutorial7-instancing/index.md"};function E(d,s,g,y,F,c){const n=a("WasmExample"),p=a("AutoGithubLink");return t(),h("div",null,[s[0]||(s[0]=k(`

实例化绘制 ​

我们目前的场景非常简单：仅有一个以坐标 (0,0,0) 为中心的对象。如果想要绘制更多的对象呢？ 这，就是实例化绘制（Instancing）的用武之地了。

实例化绘制允许我们以不同的属性（位置、方向、大小、颜色等）多次绘制同一个对象。有多种方式可以实现实例化绘制。其中一种方式是修改 Uniform 缓冲区以加入这些属性，并在绘制每个对象实例之前更新它。

出于性能原因，我们不推荐这种方式。因为逐实例更新时，uniform 缓冲区需要为每一帧复制多个缓冲区而消耗 GPU 内存带宽, 且随实例数增加的绘制命令更是会消耗 GPU 的执行时间。

如果查阅 wgpu 文档 中 draw_indexed 函数的参数 ，我们可以看到解决这一问题的方式：

rust
pub fn draw_indexed(
+import{_ as l,C as i,o as h,c as k,a1 as t,G as a}from"./chunks/framework.DyadSNS9.js";const e="/learn-wgpu-zh/assets/forest.pUstyShS.png",o=JSON.parse('{"title":"实例化绘制","description":"","frontmatter":{},"headers":[],"relativePath":"beginner/tutorial7-instancing/index.md","filePath":"beginner/tutorial7-instancing/index.md","lastUpdated":1731720800000}'),r={name:"beginner/tutorial7-instancing/index.md"};function E(d,s,g,y,F,c){const n=i("WasmExample"),p=i("AutoGithubLink");return h(),k("div",null,[s[0]||(s[0]=t(`
实例化绘制 ​
我们目前的场景非常简单：仅有一个以坐标 (0,0,0) 为中心的对象。如果想要绘制更多的对象呢？ 这，就是实例化绘制（Instancing）的用武之地了。
实例化绘制允许我们以不同的属性（位置、方向、大小、颜色等）多次绘制同一个对象。有多种方式可以实现实例化绘制。其中一种方式是修改 Uniform 缓冲区以加入这些属性，并在绘制每个对象实例之前更新它。
出于性能原因，我们不推荐这种方式。因为逐实例更新时，uniform 缓冲区需要为每一帧复制多个缓冲区而消耗 GPU 内存带宽, 且随实例数增加的绘制命令更是会消耗 GPU 的执行时间。
如果查阅 wgpu 文档 中 draw_indexed 函数的参数 ，我们可以看到解决这一问题的方式：
rust
pub fn draw_indexed(
     &mut self,
     indices: Range<u32>,
     base_vertex: i32,
@@ -140,4 +140,4 @@ import{_ as l,c as h,a1 as k,G as i,B as a,o as t}from"./chunks/framework.DdYVMT
     out.tex_coords = model.tex_coords;
     out.clip_position = camera.view_proj * model_matrix * vec4f(model.position, 1.0);
     return out;
-}
完成后，应该就能看到一片树林了！
./forest.png
挑战 ​
逐帧变更实例的位置 和/或 旋转弧度。
',45)),i(n,{example:"tutorial7_instancing"}),i(p)])}const u=l(r,[["render",E]]);export{o as __pageData,u as default};
+}

完成后，应该就能看到一片树林了！

./forest.png

挑战 ​

逐帧变更实例的位置 和/或 旋转弧度。

',45)),a(n,{example:"tutorial7_instancing"}),a(p)])}const u=l(r,[["render",E]]);export{o as __pageData,u as default}; diff --git a/assets/beginner_tutorial7-instancing_index.md.BZiOSmrj.lean.js b/assets/beginner_tutorial7-instancing_index.md.5gxEY54W.lean.js similarity index 99% rename from assets/beginner_tutorial7-instancing_index.md.BZiOSmrj.lean.js rename to assets/beginner_tutorial7-instancing_index.md.5gxEY54W.lean.js index 00d60c9ca..adb9c1196 100644 --- a/assets/beginner_tutorial7-instancing_index.md.BZiOSmrj.lean.js +++ b/assets/beginner_tutorial7-instancing_index.md.5gxEY54W.lean.js @@ -1,4 +1,4 @@ -import{_ as l,c as h,a1 as k,G as i,B as a,o as t}from"./chunks/framework.DdYVMT1V.js";const e="/learn-wgpu-zh/assets/forest.pUstyShS.png",o=JSON.parse('{"title":"实例化绘制","description":"","frontmatter":{},"headers":[],"relativePath":"beginner/tutorial7-instancing/index.md","filePath":"beginner/tutorial7-instancing/index.md","lastUpdated":1730902479000}'),r={name:"beginner/tutorial7-instancing/index.md"};function E(d,s,g,y,F,c){const n=a("WasmExample"),p=a("AutoGithubLink");return t(),h("div",null,[s[0]||(s[0]=k(`

实例化绘制 ​

我们目前的场景非常简单：仅有一个以坐标 (0,0,0) 为中心的对象。如果想要绘制更多的对象呢？ 这，就是实例化绘制（Instancing）的用武之地了。

实例化绘制允许我们以不同的属性（位置、方向、大小、颜色等）多次绘制同一个对象。有多种方式可以实现实例化绘制。其中一种方式是修改 Uniform 缓冲区以加入这些属性，并在绘制每个对象实例之前更新它。

出于性能原因，我们不推荐这种方式。因为逐实例更新时，uniform 缓冲区需要为每一帧复制多个缓冲区而消耗 GPU 内存带宽, 且随实例数增加的绘制命令更是会消耗 GPU 的执行时间。

如果查阅 wgpu 文档 中 draw_indexed 函数的参数 ，我们可以看到解决这一问题的方式：

rust
pub fn draw_indexed(
+import{_ as l,C as i,o as h,c as k,a1 as t,G as a}from"./chunks/framework.DyadSNS9.js";const e="/learn-wgpu-zh/assets/forest.pUstyShS.png",o=JSON.parse('{"title":"实例化绘制","description":"","frontmatter":{},"headers":[],"relativePath":"beginner/tutorial7-instancing/index.md","filePath":"beginner/tutorial7-instancing/index.md","lastUpdated":1731720800000}'),r={name:"beginner/tutorial7-instancing/index.md"};function E(d,s,g,y,F,c){const n=i("WasmExample"),p=i("AutoGithubLink");return h(),k("div",null,[s[0]||(s[0]=t(`
实例化绘制 ​
我们目前的场景非常简单：仅有一个以坐标 (0,0,0) 为中心的对象。如果想要绘制更多的对象呢？ 这，就是实例化绘制（Instancing）的用武之地了。
实例化绘制允许我们以不同的属性（位置、方向、大小、颜色等）多次绘制同一个对象。有多种方式可以实现实例化绘制。其中一种方式是修改 Uniform 缓冲区以加入这些属性，并在绘制每个对象实例之前更新它。
出于性能原因，我们不推荐这种方式。因为逐实例更新时，uniform 缓冲区需要为每一帧复制多个缓冲区而消耗 GPU 内存带宽, 且随实例数增加的绘制命令更是会消耗 GPU 的执行时间。
如果查阅 wgpu 文档 中 draw_indexed 函数的参数 ，我们可以看到解决这一问题的方式：
rust
pub fn draw_indexed(
     &mut self,
     indices: Range<u32>,
     base_vertex: i32,
@@ -140,4 +140,4 @@ import{_ as l,c as h,a1 as k,G as i,B as a,o as t}from"./chunks/framework.DdYVMT
     out.tex_coords = model.tex_coords;
     out.clip_position = camera.view_proj * model_matrix * vec4f(model.position, 1.0);
     return out;
-}
完成后，应该就能看到一片树林了！
./forest.png
挑战 ​
逐帧变更实例的位置 和/或 旋转弧度。
',45)),i(n,{example:"tutorial7_instancing"}),i(p)])}const u=l(r,[["render",E]]);export{o as __pageData,u as default};
+}

完成后，应该就能看到一片树林了！

./forest.png

挑战 ​

逐帧变更实例的位置 和/或 旋转弧度。

',45)),a(n,{example:"tutorial7_instancing"}),a(p)])}const u=l(r,[["render",E]]);export{o as __pageData,u as default}; diff --git a/assets/beginner_tutorial8-depth_index.md.vgD-onnx.js b/assets/beginner_tutorial8-depth_index.md.Dqr68Jvg.js similarity index 99% rename from assets/beginner_tutorial8-depth_index.md.vgD-onnx.js rename to assets/beginner_tutorial8-depth_index.md.Dqr68Jvg.js index e39b66f3b..4db395f5e 100644 --- a/assets/beginner_tutorial8-depth_index.md.vgD-onnx.js +++ b/assets/beginner_tutorial8-depth_index.md.Dqr68Jvg.js @@ -1,4 +1,4 @@ -import{_ as h,c as l,a1 as k,G as i,B as a,o as t}from"./chunks/framework.DdYVMT1V.js";const e="/learn-wgpu-zh/assets/depth_problems.D-zJpdrI.png",r="/learn-wgpu-zh/assets/forest_fixed.D_G04Mjk.png",b=JSON.parse('{"title":"深度缓冲区","description":"","frontmatter":{},"headers":[],"relativePath":"beginner/tutorial8-depth/index.md","filePath":"beginner/tutorial8-depth/index.md","lastUpdated":1730902479000}'),d={name:"beginner/tutorial8-depth/index.md"};function E(g,s,y,F,c,o){const n=a("WasmExample"),p=a("AutoGithubLink");return t(),l("div",null,[s[0]||(s[0]=k('

深度缓冲区 ​

让我们换个摄像机角度来仔细观察上个教程中的例子:

depth_problems.png

应该排在后面的对象被渲染在了前面的对象之前。这是由绘制顺序引起的。默认情况下，新对象的像素数据将取代帧缓冲区（FrameBuffer）相同坐标上旧的像素数据。

有两种方式可以解决这个问题：将数据从后往前排序; 或者使用深度缓冲区（Depth Buffer）。

从后往前排序 ​

这是 2D 渲染的常用方法，因为很容易计算绘制对象的前后关系，甚至可以直接使用 Z 轴顺序。而在 3D 渲染中就有点棘手了，因为对象的前后关系会根据摄像机的角度而改变。

一个简单的方法是按照对象与摄像机的距离来排序。但这种方法也有缺陷，因为当大对象的模型中心坐标处在小对象后面时，大对象中本应在小对象前面的部分也会被渲染到后面。我们还会遇到对象本身重叠的问题。

如果想正确地实现绘制对象的前后关系，就需要有像素级的精度。这，就是 深度缓冲区 的作用。

像素深度 ​

深度缓冲区是一个用来存储已渲染像素的 Z 轴坐标的纹理。在绘制新的像素时，wgpu 使用它来决定是替换数据还是丢弃。这种技术被称为深度测试，它将解决绘制顺序问题，而不需要我们对绘制对象进行排序!

让我们在 texture.rs 中添加一个函数来创建深度纹理。

rust
impl Texture {
+import{_ as h,C as i,o as l,c as k,a1 as t,G as a}from"./chunks/framework.DyadSNS9.js";const e="/learn-wgpu-zh/assets/depth_problems.D-zJpdrI.png",r="/learn-wgpu-zh/assets/forest_fixed.D_G04Mjk.png",b=JSON.parse('{"title":"深度缓冲区","description":"","frontmatter":{},"headers":[],"relativePath":"beginner/tutorial8-depth/index.md","filePath":"beginner/tutorial8-depth/index.md","lastUpdated":1731720800000}'),d={name:"beginner/tutorial8-depth/index.md"};function E(g,s,y,F,c,o){const n=i("WasmExample"),p=i("AutoGithubLink");return l(),k("div",null,[s[0]||(s[0]=t('
深度缓冲区 ​
让我们换个摄像机角度来仔细观察上个教程中的例子:
depth_problems.png
应该排在后面的对象被渲染在了前面的对象之前。这是由绘制顺序引起的。默认情况下，新对象的像素数据将取代帧缓冲区（FrameBuffer）相同坐标上旧的像素数据。
有两种方式可以解决这个问题：将数据从后往前排序; 或者使用深度缓冲区（Depth Buffer）。
从后往前排序 ​
这是 2D 渲染的常用方法，因为很容易计算绘制对象的前后关系，甚至可以直接使用 Z 轴顺序。而在 3D 渲染中就有点棘手了，因为对象的前后关系会根据摄像机的角度而改变。
一个简单的方法是按照对象与摄像机的距离来排序。但这种方法也有缺陷，因为当大对象的模型中心坐标处在小对象后面时，大对象中本应在小对象前面的部分也会被渲染到后面。我们还会遇到对象本身重叠的问题。
如果想正确地实现绘制对象的前后关系，就需要有像素级的精度。这，就是 深度缓冲区 的作用。
像素深度 ​
深度缓冲区是一个用来存储已渲染像素的 Z 轴坐标的纹理。在绘制新的像素时，wgpu 使用它来决定是替换数据还是丢弃。这种技术被称为深度测试，它将解决绘制顺序问题，而不需要我们对绘制对象进行排序!
让我们在 texture.rs 中添加一个函数来创建深度纹理。
rust
impl Texture {
     pub const DEPTH_FORMAT: wgpu::TextureFormat = wgpu::TextureFormat::Depth32Float; // 1.
 
     pub fn create_depth_texture(device: &wgpu::Device, config: &wgpu::SurfaceConfiguration, label: &str) -> Self {
@@ -79,4 +79,4 @@ import{_ as h,c as l,a1 as k,G as i,B as a,o as t}from"./chunks/framework.DdYVMT
         stencil_ops: None,
     }),
     ..Default::default()
-});
这就是我们所要做的！不涉及着色器代码！现在运行该应用程序，将看到深度问题已不复存在：
forest_fixed.png
挑战 ​
深度缓冲区是一张纹理，所以我们可以在着色器中对其采样。请为深度纹理创建一个绑定组（或重用现有的），并将其渲染到屏幕上。
',32)),i(n,{example:"tutorial8_depth"}),i(p)])}const D=h(d,[["render",E]]);export{b as __pageData,D as default};
+});

这就是我们所要做的！不涉及着色器代码！现在运行该应用程序，将看到深度问题已不复存在：

forest_fixed.png

挑战 ​

深度缓冲区是一张纹理，所以我们可以在着色器中对其采样。请为深度纹理创建一个绑定组（或重用现有的），并将其渲染到屏幕上。

',32)),a(n,{example:"tutorial8_depth"}),a(p)])}const D=h(d,[["render",E]]);export{b as __pageData,D as default}; diff --git a/assets/beginner_tutorial8-depth_index.md.vgD-onnx.lean.js b/assets/beginner_tutorial8-depth_index.md.Dqr68Jvg.lean.js similarity index 99% rename from assets/beginner_tutorial8-depth_index.md.vgD-onnx.lean.js rename to assets/beginner_tutorial8-depth_index.md.Dqr68Jvg.lean.js index e39b66f3b..4db395f5e 100644 --- a/assets/beginner_tutorial8-depth_index.md.vgD-onnx.lean.js +++ b/assets/beginner_tutorial8-depth_index.md.Dqr68Jvg.lean.js @@ -1,4 +1,4 @@ -import{_ as h,c as l,a1 as k,G as i,B as a,o as t}from"./chunks/framework.DdYVMT1V.js";const e="/learn-wgpu-zh/assets/depth_problems.D-zJpdrI.png",r="/learn-wgpu-zh/assets/forest_fixed.D_G04Mjk.png",b=JSON.parse('{"title":"深度缓冲区","description":"","frontmatter":{},"headers":[],"relativePath":"beginner/tutorial8-depth/index.md","filePath":"beginner/tutorial8-depth/index.md","lastUpdated":1730902479000}'),d={name:"beginner/tutorial8-depth/index.md"};function E(g,s,y,F,c,o){const n=a("WasmExample"),p=a("AutoGithubLink");return t(),l("div",null,[s[0]||(s[0]=k('

深度缓冲区 ​

让我们换个摄像机角度来仔细观察上个教程中的例子:

depth_problems.png

应该排在后面的对象被渲染在了前面的对象之前。这是由绘制顺序引起的。默认情况下，新对象的像素数据将取代帧缓冲区（FrameBuffer）相同坐标上旧的像素数据。

有两种方式可以解决这个问题：将数据从后往前排序; 或者使用深度缓冲区（Depth Buffer）。

从后往前排序 ​

这是 2D 渲染的常用方法，因为很容易计算绘制对象的前后关系，甚至可以直接使用 Z 轴顺序。而在 3D 渲染中就有点棘手了，因为对象的前后关系会根据摄像机的角度而改变。

一个简单的方法是按照对象与摄像机的距离来排序。但这种方法也有缺陷，因为当大对象的模型中心坐标处在小对象后面时，大对象中本应在小对象前面的部分也会被渲染到后面。我们还会遇到对象本身重叠的问题。

如果想正确地实现绘制对象的前后关系，就需要有像素级的精度。这，就是 深度缓冲区 的作用。

像素深度 ​

深度缓冲区是一个用来存储已渲染像素的 Z 轴坐标的纹理。在绘制新的像素时，wgpu 使用它来决定是替换数据还是丢弃。这种技术被称为深度测试，它将解决绘制顺序问题，而不需要我们对绘制对象进行排序!

让我们在 texture.rs 中添加一个函数来创建深度纹理。

rust
impl Texture {
+import{_ as h,C as i,o as l,c as k,a1 as t,G as a}from"./chunks/framework.DyadSNS9.js";const e="/learn-wgpu-zh/assets/depth_problems.D-zJpdrI.png",r="/learn-wgpu-zh/assets/forest_fixed.D_G04Mjk.png",b=JSON.parse('{"title":"深度缓冲区","description":"","frontmatter":{},"headers":[],"relativePath":"beginner/tutorial8-depth/index.md","filePath":"beginner/tutorial8-depth/index.md","lastUpdated":1731720800000}'),d={name:"beginner/tutorial8-depth/index.md"};function E(g,s,y,F,c,o){const n=i("WasmExample"),p=i("AutoGithubLink");return l(),k("div",null,[s[0]||(s[0]=t('
深度缓冲区 ​
让我们换个摄像机角度来仔细观察上个教程中的例子:
depth_problems.png
应该排在后面的对象被渲染在了前面的对象之前。这是由绘制顺序引起的。默认情况下，新对象的像素数据将取代帧缓冲区（FrameBuffer）相同坐标上旧的像素数据。
有两种方式可以解决这个问题：将数据从后往前排序; 或者使用深度缓冲区（Depth Buffer）。
从后往前排序 ​
这是 2D 渲染的常用方法，因为很容易计算绘制对象的前后关系，甚至可以直接使用 Z 轴顺序。而在 3D 渲染中就有点棘手了，因为对象的前后关系会根据摄像机的角度而改变。
一个简单的方法是按照对象与摄像机的距离来排序。但这种方法也有缺陷，因为当大对象的模型中心坐标处在小对象后面时，大对象中本应在小对象前面的部分也会被渲染到后面。我们还会遇到对象本身重叠的问题。
如果想正确地实现绘制对象的前后关系，就需要有像素级的精度。这，就是 深度缓冲区 的作用。
像素深度 ​
深度缓冲区是一个用来存储已渲染像素的 Z 轴坐标的纹理。在绘制新的像素时，wgpu 使用它来决定是替换数据还是丢弃。这种技术被称为深度测试，它将解决绘制顺序问题，而不需要我们对绘制对象进行排序!
让我们在 texture.rs 中添加一个函数来创建深度纹理。
rust
impl Texture {
     pub const DEPTH_FORMAT: wgpu::TextureFormat = wgpu::TextureFormat::Depth32Float; // 1.
 
     pub fn create_depth_texture(device: &wgpu::Device, config: &wgpu::SurfaceConfiguration, label: &str) -> Self {
@@ -79,4 +79,4 @@ import{_ as h,c as l,a1 as k,G as i,B as a,o as t}from"./chunks/framework.DdYVMT
         stencil_ops: None,
     }),
     ..Default::default()
-});
这就是我们所要做的！不涉及着色器代码！现在运行该应用程序，将看到深度问题已不复存在：
forest_fixed.png
挑战 ​
深度缓冲区是一张纹理，所以我们可以在着色器中对其采样。请为深度纹理创建一个绑定组（或重用现有的），并将其渲染到屏幕上。
',32)),i(n,{example:"tutorial8_depth"}),i(p)])}const D=h(d,[["render",E]]);export{b as __pageData,D as default};
+});

这就是我们所要做的！不涉及着色器代码！现在运行该应用程序，将看到深度问题已不复存在：

forest_fixed.png

挑战 ​

深度缓冲区是一张纹理，所以我们可以在着色器中对其采样。请为深度纹理创建一个绑定组（或重用现有的），并将其渲染到屏幕上。

',32)),a(n,{example:"tutorial8_depth"}),a(p)])}const D=h(d,[["render",E]]);export{b as __pageData,D as default}; diff --git a/assets/beginner_tutorial9-models_index.md.B2cA33FN.js b/assets/beginner_tutorial9-models_index.md.CRpkWFZH.js similarity index 99% rename from assets/beginner_tutorial9-models_index.md.B2cA33FN.js rename to assets/beginner_tutorial9-models_index.md.CRpkWFZH.js index be08546a0..ab2c0ff36 100644 --- a/assets/beginner_tutorial9-models_index.md.B2cA33FN.js +++ b/assets/beginner_tutorial9-models_index.md.CRpkWFZH.js @@ -1,4 +1,4 @@ -import{_ as l,c as p,a1 as k,G as i,B as a,o as t}from"./chunks/framework.DdYVMT1V.js";const e="/learn-wgpu-zh/assets/cubes.3kx3FCDj.png",r="/learn-wgpu-zh/assets/cube-diffuse.apkbEDtR.jpg",E="/learn-wgpu-zh/assets/cubes-correct.CSpVk1pc.png",o=JSON.parse('{"title":"模型加载","description":"","frontmatter":{},"headers":[],"relativePath":"beginner/tutorial9-models/index.md","filePath":"beginner/tutorial9-models/index.md","lastUpdated":1730902479000}'),d={name:"beginner/tutorial9-models/index.md"};function g(y,s,F,c,b,u){const n=a("WasmExample"),h=a("AutoGithubLink");return t(),p("div",null,[s[0]||(s[0]=k(`

模型加载 ​

到目前为止，我们一直在手动创建模型。简单的模型当然可以这么干，但如果是有成千上万多边形的复杂模型，那就行不通了。因此，我们将修改代码以利用 .obj 模型格式，以便可以利用 Blender 等软件来创建模型并运用到项目中。

lib.rs 文件中堆砌的代码已经很多了，让我们创建一个 model.rs 文件来安置所有模型加载相关的代码：

rust
// model.rs
+import{_ as l,C as i,o as p,c as k,a1 as t,G as a}from"./chunks/framework.DyadSNS9.js";const e="/learn-wgpu-zh/assets/cubes.3kx3FCDj.png",r="/learn-wgpu-zh/assets/cube-diffuse.apkbEDtR.jpg",E="/learn-wgpu-zh/assets/cubes-correct.CSpVk1pc.png",o=JSON.parse('{"title":"模型加载","description":"","frontmatter":{},"headers":[],"relativePath":"beginner/tutorial9-models/index.md","filePath":"beginner/tutorial9-models/index.md","lastUpdated":1731720800000}'),d={name:"beginner/tutorial9-models/index.md"};function g(y,s,F,c,b,u){const n=i("WasmExample"),h=i("AutoGithubLink");return p(),k("div",null,[s[0]||(s[0]=t(`
模型加载 ​
到目前为止，我们一直在手动创建模型。简单的模型当然可以这么干，但如果是有成千上万多边形的复杂模型，那就行不通了。因此，我们将修改代码以利用 .obj 模型格式，以便可以利用 Blender 等软件来创建模型并运用到项目中。
lib.rs 文件中堆砌的代码已经很多了，让我们创建一个 model.rs 文件来安置所有模型加载相关的代码：
rust
// model.rs
 pub trait Vertex {
     fn desc<'a>() -> wgpu::VertexBufferLayout<'a>;
 }
@@ -374,4 +374,4 @@ import{_ as l,c as p,a1 as k,G as i,B as a,o as t}from"./chunks/framework.DdYVMT
     }
 }
lib.rs 中的代码也相应地修改一下以调用新的 draw_model_instanced 函数：
rust
render_pass.set_vertex_buffer(1, self.instance_buffer.slice(..));
 render_pass.set_pipeline(&self.render_pipeline);
-render_pass.draw_model_instanced(&self.obj_model, 0..self.instances.len() as u32, &self.camera_bind_group);
`,74)),i(n,{example:"tutorial9_models"}),i(h)])}const C=l(d,[["render",g]]);export{o as __pageData,C as default};
+render_pass.draw_model_instanced(&self.obj_model, 0..self.instances.len() as u32, &self.camera_bind_group);
`,74)),a(n,{example:"tutorial9_models"}),a(h)])}const C=l(d,[["render",g]]);export{o as __pageData,C as default}; diff --git a/assets/beginner_tutorial9-models_index.md.B2cA33FN.lean.js b/assets/beginner_tutorial9-models_index.md.CRpkWFZH.lean.js similarity index 99% rename from assets/beginner_tutorial9-models_index.md.B2cA33FN.lean.js rename to assets/beginner_tutorial9-models_index.md.CRpkWFZH.lean.js index be08546a0..ab2c0ff36 100644 --- a/assets/beginner_tutorial9-models_index.md.B2cA33FN.lean.js +++ b/assets/beginner_tutorial9-models_index.md.CRpkWFZH.lean.js @@ -1,4 +1,4 @@ -import{_ as l,c as p,a1 as k,G as i,B as a,o as t}from"./chunks/framework.DdYVMT1V.js";const e="/learn-wgpu-zh/assets/cubes.3kx3FCDj.png",r="/learn-wgpu-zh/assets/cube-diffuse.apkbEDtR.jpg",E="/learn-wgpu-zh/assets/cubes-correct.CSpVk1pc.png",o=JSON.parse('{"title":"模型加载","description":"","frontmatter":{},"headers":[],"relativePath":"beginner/tutorial9-models/index.md","filePath":"beginner/tutorial9-models/index.md","lastUpdated":1730902479000}'),d={name:"beginner/tutorial9-models/index.md"};function g(y,s,F,c,b,u){const n=a("WasmExample"),h=a("AutoGithubLink");return t(),p("div",null,[s[0]||(s[0]=k(`

模型加载 ​

到目前为止，我们一直在手动创建模型。简单的模型当然可以这么干，但如果是有成千上万多边形的复杂模型，那就行不通了。因此，我们将修改代码以利用 .obj 模型格式，以便可以利用 Blender 等软件来创建模型并运用到项目中。

lib.rs 文件中堆砌的代码已经很多了，让我们创建一个 model.rs 文件来安置所有模型加载相关的代码：

rust
// model.rs
+import{_ as l,C as i,o as p,c as k,a1 as t,G as a}from"./chunks/framework.DyadSNS9.js";const e="/learn-wgpu-zh/assets/cubes.3kx3FCDj.png",r="/learn-wgpu-zh/assets/cube-diffuse.apkbEDtR.jpg",E="/learn-wgpu-zh/assets/cubes-correct.CSpVk1pc.png",o=JSON.parse('{"title":"模型加载","description":"","frontmatter":{},"headers":[],"relativePath":"beginner/tutorial9-models/index.md","filePath":"beginner/tutorial9-models/index.md","lastUpdated":1731720800000}'),d={name:"beginner/tutorial9-models/index.md"};function g(y,s,F,c,b,u){const n=i("WasmExample"),h=i("AutoGithubLink");return p(),k("div",null,[s[0]||(s[0]=t(`
模型加载 ​
到目前为止，我们一直在手动创建模型。简单的模型当然可以这么干，但如果是有成千上万多边形的复杂模型，那就行不通了。因此，我们将修改代码以利用 .obj 模型格式，以便可以利用 Blender 等软件来创建模型并运用到项目中。
lib.rs 文件中堆砌的代码已经很多了，让我们创建一个 model.rs 文件来安置所有模型加载相关的代码：
rust
// model.rs
 pub trait Vertex {
     fn desc<'a>() -> wgpu::VertexBufferLayout<'a>;
 }
@@ -374,4 +374,4 @@ import{_ as l,c as p,a1 as k,G as i,B as a,o as t}from"./chunks/framework.DdYVMT
     }
 }
lib.rs 中的代码也相应地修改一下以调用新的 draw_model_instanced 函数：
rust
render_pass.set_vertex_buffer(1, self.instance_buffer.slice(..));
 render_pass.set_pipeline(&self.render_pipeline);
-render_pass.draw_model_instanced(&self.obj_model, 0..self.instances.len() as u32, &self.camera_bind_group);
`,74)),i(n,{example:"tutorial9_models"}),i(h)])}const C=l(d,[["render",g]]);export{o as __pageData,C as default};
+render_pass.draw_model_instanced(&self.obj_model, 0..self.instances.len() as u32, &self.camera_bind_group);
`,74)),a(n,{example:"tutorial9_models"}),a(h)])}const C=l(d,[["render",g]]);export{o as __pageData,C as default}; diff --git a/assets/beginner_wgsl.md.Bn2NdD9D.js b/assets/beginner_wgsl.md.DBDMW7p4.js similarity index 99% rename from assets/beginner_wgsl.md.Bn2NdD9D.js rename to assets/beginner_wgsl.md.DBDMW7p4.js index 52622f743..1a6cb92a9 100644 --- a/assets/beginner_wgsl.md.Bn2NdD9D.js +++ b/assets/beginner_wgsl.md.DBDMW7p4.js @@ -1,4 +1,4 @@ -import{_ as i,c as a,a1 as n,o as l}from"./chunks/framework.DdYVMT1V.js";const g=JSON.parse('{"title":"WGSL 着色器语言","description":"WebGPU 着色器语言 WGSL 介绍及与 GLSL 的语法对比","frontmatter":{"head":[["meta",{"name":"description","content":"WebGPU 着色器语言 WGSL 介绍及与 GLSL 的语法对比"}],["meta",{"name":"keywords","content":"WGSL GLSL Shader WebGPU wgpu"}]]},"headers":[],"relativePath":"beginner/wgsl.md","filePath":"beginner/wgsl.md","lastUpdated":1730902479000}'),h={name:"beginner/wgsl.md"};function p(k,s,t,e,r,E){return l(),a("div",null,s[0]||(s[0]=[n(`

WGSL 着色器语言 ​

WGSL 的来由 ​

WebGPU 的目标是要在各个现代底层图形 API 之上抽象出一套统一的图形 API，而每个底层图形 API 后端都有自己的着色语言：

在 WGSL (WebGPU Shading Language) 出现之前，很多开发者或团队是通过宏及各种转译工具来将自己的着色器编译到不同目标平台的，他们自然是希望有一个标准化的统一语言。

WebGPU 成员花了 2 年半的时间来争论 WebGPU 是否应该有自己的着色语言。kvark 将这场争论中的核心论点组成了一张流图，它是 SVG 格式的，支持在网页中无损放大查看。

WGSL 的目标不是要与 GLSL 兼容，它是对现代着色器语言的重新设计。

2020 年 4 月 27 日，WGSL 标准有了第一次提交。自此开始，wgpu 和 dawn 都摆脱了对 shaderc 之类复杂繁重的着色器转译工具的依赖。wgpu 里使用的 WGSL 转译工具叫 naga, kvark 有一篇博客（Shader translation benchmark）对比了 naga 相比于其它转译工具的性能优化，总体来说，有 10 倍以上的性能优势。

2023 年之前，WGSL 的学习资源不多，唯一好的参考是 WGSL 规范，但它是对语言实现细节的规范，对普通用户来说有点难以理解。 我从 2018 年开始使用 wgpu (那时还是 使用 GLSL 做为着色器语言)，2021 年底完成了个人作品 字习 Pro 及其他几个练手作品从 GLSL 到 WGSL 的 100 多个着色器的移植工作，在这个过程中对这两个着色器语言有了比较深入的了解。这个增补章节旨在介绍 WGSL 的一些基础知识，希望这对从 OpenGL / WebGL 迁移到 WebGPU 的朋友带来一点有益的经验（下边的所有 GLSL 代码均是按照 GLSL450 标准编写的）。

增补两个网上新出现的学习资源：

Tour of WGSL 与 compute.toys

一个简单的绘制着色器：对比 GLSL ​

GLSL 的绘制着色器：

rust
// 顶点着色器文件
+import{_ as i,o as a,c as n,a1 as l}from"./chunks/framework.DyadSNS9.js";const g=JSON.parse('{"title":"WGSL 着色器语言","description":"WebGPU 着色器语言 WGSL 介绍及与 GLSL 的语法对比","frontmatter":{"head":[["meta",{"name":"description","content":"WebGPU 着色器语言 WGSL 介绍及与 GLSL 的语法对比"}],["meta",{"name":"keywords","content":"WGSL GLSL Shader WebGPU wgpu"}]]},"headers":[],"relativePath":"beginner/wgsl.md","filePath":"beginner/wgsl.md","lastUpdated":1731720800000}'),h={name:"beginner/wgsl.md"};function p(k,s,t,e,r,E){return a(),n("div",null,s[0]||(s[0]=[l(`
WGSL 着色器语言 ​
WGSL 的来由 ​
WebGPU 的目标是要在各个现代底层图形 API 之上抽象出一套统一的图形 API，而每个底层图形 API 后端都有自己的着色语言：
  • DirectX 使用 HLSL（High Level Shading Language）
  • Metal 使用 MSL（Metal Shading Language）
  • OpenGL 使用 GLSL（OpenGL Shading Language）
  • Vulkan 使用的着色语言又跟之前的图形 API 都不同，它的着色器必须以 SPIR-V 这种二进制字节码的格式提供（有一些库能提供将其它语言编写的着色器编译为 SPIR-V 的能力，比如 shaderc ）。
在 WGSL (WebGPU Shading Language) 出现之前，很多开发者或团队是通过宏及各种转译工具来将自己的着色器编译到不同目标平台的，他们自然是希望有一个标准化的统一语言。
WebGPU 成员花了 2 年半的时间来争论 WebGPU 是否应该有自己的着色语言。kvark 将这场争论中的核心论点组成了一张流图，它是 SVG 格式的，支持在网页中无损放大查看。
WGSL 的目标不是要与 GLSL 兼容，它是对现代着色器语言的重新设计。
2020 年 4 月 27 日，WGSL 标准有了第一次提交。自此开始，wgpu 和 dawn 都摆脱了对 shaderc 之类复杂繁重的着色器转译工具的依赖。wgpu 里使用的 WGSL 转译工具叫 naga, kvark 有一篇博客（Shader translation benchmark）对比了 naga 相比于其它转译工具的性能优化，总体来说，有 10 倍以上的性能优势。
2023 年之前，WGSL 的学习资源不多，唯一好的参考是 WGSL 规范，但它是对语言实现细节的规范，对普通用户来说有点难以理解。 我从 2018 年开始使用 wgpu (那时还是 使用 GLSL 做为着色器语言)，2021 年底完成了个人作品 字习 Pro 及其他几个练手作品从 GLSL 到 WGSL 的 100 多个着色器的移植工作，在这个过程中对这两个着色器语言有了比较深入的了解。这个增补章节旨在介绍 WGSL 的一些基础知识，希望这对从 OpenGL / WebGL 迁移到 WebGPU 的朋友带来一点有益的经验（下边的所有 GLSL 代码均是按照 GLSL450 标准编写的）。
增补两个网上新出现的学习资源：
Tour of WGSL 与 compute.toys
一个简单的绘制着色器：对比 GLSL ​
GLSL 的绘制着色器：
rust
// 顶点着色器文件
 layout(location = 0) in vec3 position;
 layout(location = 1) in vec2 texcoord;
 layout(location = 0) out vec2 uv;
diff --git a/assets/beginner_wgsl.md.Bn2NdD9D.lean.js b/assets/beginner_wgsl.md.DBDMW7p4.lean.js
similarity index 99%
rename from assets/beginner_wgsl.md.Bn2NdD9D.lean.js
rename to assets/beginner_wgsl.md.DBDMW7p4.lean.js
index 52622f743..1a6cb92a9 100644
--- a/assets/beginner_wgsl.md.Bn2NdD9D.lean.js
+++ b/assets/beginner_wgsl.md.DBDMW7p4.lean.js
@@ -1,4 +1,4 @@
-import{_ as i,c as a,a1 as n,o as l}from"./chunks/framework.DdYVMT1V.js";const g=JSON.parse('{"title":"WGSL 着色器语言","description":"WebGPU 着色器语言 WGSL 介绍及与 GLSL 的语法对比","frontmatter":{"head":[["meta",{"name":"description","content":"WebGPU 着色器语言 WGSL 介绍及与 GLSL 的语法对比"}],["meta",{"name":"keywords","content":"WGSL GLSL Shader WebGPU wgpu"}]]},"headers":[],"relativePath":"beginner/wgsl.md","filePath":"beginner/wgsl.md","lastUpdated":1730902479000}'),h={name:"beginner/wgsl.md"};function p(k,s,t,e,r,E){return l(),a("div",null,s[0]||(s[0]=[n(`
WGSL 着色器语言 ​
WGSL 的来由 ​
WebGPU 的目标是要在各个现代底层图形 API 之上抽象出一套统一的图形 API，而每个底层图形 API 后端都有自己的着色语言：
  • DirectX 使用 HLSL（High Level Shading Language）
  • Metal 使用 MSL（Metal Shading Language）
  • OpenGL 使用 GLSL（OpenGL Shading Language）
  • Vulkan 使用的着色语言又跟之前的图形 API 都不同，它的着色器必须以 SPIR-V 这种二进制字节码的格式提供（有一些库能提供将其它语言编写的着色器编译为 SPIR-V 的能力，比如 shaderc ）。
在 WGSL (WebGPU Shading Language) 出现之前，很多开发者或团队是通过宏及各种转译工具来将自己的着色器编译到不同目标平台的，他们自然是希望有一个标准化的统一语言。
WebGPU 成员花了 2 年半的时间来争论 WebGPU 是否应该有自己的着色语言。kvark 将这场争论中的核心论点组成了一张流图，它是 SVG 格式的，支持在网页中无损放大查看。
WGSL 的目标不是要与 GLSL 兼容，它是对现代着色器语言的重新设计。
2020 年 4 月 27 日，WGSL 标准有了第一次提交。自此开始，wgpu 和 dawn 都摆脱了对 shaderc 之类复杂繁重的着色器转译工具的依赖。wgpu 里使用的 WGSL 转译工具叫 naga, kvark 有一篇博客（Shader translation benchmark）对比了 naga 相比于其它转译工具的性能优化，总体来说，有 10 倍以上的性能优势。
2023 年之前，WGSL 的学习资源不多，唯一好的参考是 WGSL 规范，但它是对语言实现细节的规范，对普通用户来说有点难以理解。 我从 2018 年开始使用 wgpu (那时还是 使用 GLSL 做为着色器语言)，2021 年底完成了个人作品 字习 Pro 及其他几个练手作品从 GLSL 到 WGSL 的 100 多个着色器的移植工作，在这个过程中对这两个着色器语言有了比较深入的了解。这个增补章节旨在介绍 WGSL 的一些基础知识，希望这对从 OpenGL / WebGL 迁移到 WebGPU 的朋友带来一点有益的经验（下边的所有 GLSL 代码均是按照 GLSL450 标准编写的）。
增补两个网上新出现的学习资源：
Tour of WGSL 与 compute.toys
一个简单的绘制着色器：对比 GLSL ​
GLSL 的绘制着色器：
rust
// 顶点着色器文件
+import{_ as i,o as a,c as n,a1 as l}from"./chunks/framework.DyadSNS9.js";const g=JSON.parse('{"title":"WGSL 着色器语言","description":"WebGPU 着色器语言 WGSL 介绍及与 GLSL 的语法对比","frontmatter":{"head":[["meta",{"name":"description","content":"WebGPU 着色器语言 WGSL 介绍及与 GLSL 的语法对比"}],["meta",{"name":"keywords","content":"WGSL GLSL Shader WebGPU wgpu"}]]},"headers":[],"relativePath":"beginner/wgsl.md","filePath":"beginner/wgsl.md","lastUpdated":1731720800000}'),h={name:"beginner/wgsl.md"};function p(k,s,t,e,r,E){return a(),n("div",null,s[0]||(s[0]=[l(`
WGSL 着色器语言 ​
WGSL 的来由 ​
WebGPU 的目标是要在各个现代底层图形 API 之上抽象出一套统一的图形 API，而每个底层图形 API 后端都有自己的着色语言：
  • DirectX 使用 HLSL（High Level Shading Language）
  • Metal 使用 MSL（Metal Shading Language）
  • OpenGL 使用 GLSL（OpenGL Shading Language）
  • Vulkan 使用的着色语言又跟之前的图形 API 都不同，它的着色器必须以 SPIR-V 这种二进制字节码的格式提供（有一些库能提供将其它语言编写的着色器编译为 SPIR-V 的能力，比如 shaderc ）。
在 WGSL (WebGPU Shading Language) 出现之前，很多开发者或团队是通过宏及各种转译工具来将自己的着色器编译到不同目标平台的，他们自然是希望有一个标准化的统一语言。
WebGPU 成员花了 2 年半的时间来争论 WebGPU 是否应该有自己的着色语言。kvark 将这场争论中的核心论点组成了一张流图，它是 SVG 格式的，支持在网页中无损放大查看。
WGSL 的目标不是要与 GLSL 兼容，它是对现代着色器语言的重新设计。
2020 年 4 月 27 日，WGSL 标准有了第一次提交。自此开始，wgpu 和 dawn 都摆脱了对 shaderc 之类复杂繁重的着色器转译工具的依赖。wgpu 里使用的 WGSL 转译工具叫 naga, kvark 有一篇博客（Shader translation benchmark）对比了 naga 相比于其它转译工具的性能优化，总体来说，有 10 倍以上的性能优势。
2023 年之前，WGSL 的学习资源不多，唯一好的参考是 WGSL 规范，但它是对语言实现细节的规范，对普通用户来说有点难以理解。 我从 2018 年开始使用 wgpu (那时还是 使用 GLSL 做为着色器语言)，2021 年底完成了个人作品 字习 Pro 及其他几个练手作品从 GLSL 到 WGSL 的 100 多个着色器的移植工作，在这个过程中对这两个着色器语言有了比较深入的了解。这个增补章节旨在介绍 WGSL 的一些基础知识，希望这对从 OpenGL / WebGL 迁移到 WebGPU 的朋友带来一点有益的经验（下边的所有 GLSL 代码均是按照 GLSL450 标准编写的）。
增补两个网上新出现的学习资源：
Tour of WGSL 与 compute.toys
一个简单的绘制着色器：对比 GLSL ​
GLSL 的绘制着色器：
rust
// 顶点着色器文件
 layout(location = 0) in vec3 position;
 layout(location = 1) in vec2 texcoord;
 layout(location = 0) out vec2 uv;
diff --git a/assets/chunks/framework.DdYVMT1V.js b/assets/chunks/framework.DdYVMT1V.js
deleted file mode 100644
index 39cefd38d..000000000
--- a/assets/chunks/framework.DdYVMT1V.js
+++ /dev/null
@@ -1,18 +0,0 @@
-/**
-* @vue/shared v3.5.12
-* (c) 2018-present Yuxi (Evan) You and Vue contributors
-* @license MIT
-**//*! #__NO_SIDE_EFFECTS__ */function Es(e){const t=Object.create(null);for(const n of e.split(","))t[n]=1;return n=>n in t}const te={},St=[],Ue=()=>{},wo=()=>!1,Yt=e=>e.charCodeAt(0)===111&&e.charCodeAt(1)===110&&(e.charCodeAt(2)>122||e.charCodeAt(2)<97),Cs=e=>e.startsWith("onUpdate:"),oe=Object.assign,Ts=(e,t)=>{const n=e.indexOf(t);n>-1&&e.splice(n,1)},So=Object.prototype.hasOwnProperty,J=(e,t)=>So.call(e,t),B=Array.isArray,xt=e=>En(e)==="[object Map]",Dr=e=>En(e)==="[object Set]",q=e=>typeof e=="function",re=e=>typeof e=="string",qe=e=>typeof e=="symbol",ne=e=>e!==null&&typeof e=="object",jr=e=>(ne(e)||q(e))&&q(e.then)&&q(e.catch),Vr=Object.prototype.toString,En=e=>Vr.call(e),xo=e=>En(e).slice(8,-1),Ur=e=>En(e)==="[object Object]",As=e=>re(e)&&e!=="NaN"&&e[0]!=="-"&&""+parseInt(e,10)===e,Et=Es(",key,ref,ref_for,ref_key,onVnodeBeforeMount,onVnodeMounted,onVnodeBeforeUpdate,onVnodeUpdated,onVnodeBeforeUnmount,onVnodeUnmounted"),Cn=e=>{const t=Object.create(null);return n=>t[n]||(t[n]=e(n))},Eo=/-(\w)/g,Me=Cn(e=>e.replace(Eo,(t,n)=>n?n.toUpperCase():"")),Co=/\B([A-Z])/g,st=Cn(e=>e.replace(Co,"-$1").toLowerCase()),Tn=Cn(e=>e.charAt(0).toUpperCase()+e.slice(1)),un=Cn(e=>e?`on${Tn(e)}`:""),et=(e,t)=>!Object.is(e,t),kn=(e,...t)=>{for(let n=0;n{Object.defineProperty(e,t,{configurable:!0,enumerable:!1,writable:s,value:n})},To=e=>{const t=parseFloat(e);return isNaN(t)?e:t},Ao=e=>{const t=re(e)?Number(e):NaN;return isNaN(t)?e:t};let Ys;const An=()=>Ys||(Ys=typeof globalThis<"u"?globalThis:typeof self<"u"?self:typeof window<"u"?window:typeof global<"u"?global:{});function Rs(e){if(B(e)){const t={};for(let n=0;n{if(n){const s=n.split(Oo);s.length>1&&(t[s[0].trim()]=s[1].trim())}}),t}function Os(e){let t="";if(re(e))t=e;else if(B(e))for(let n=0;n!!(e&&e.__v_isRef===!0),No=e=>re(e)?e:e==null?"":B(e)||ne(e)&&(e.toString===Vr||!q(e.toString))?Wr(e)?No(e.value):JSON.stringify(e,Kr,2):String(e),Kr=(e,t)=>Wr(t)?Kr(e,t.value):xt(t)?{[`Map(${t.size})`]:[...t.entries()].reduce((n,[s,r],i)=>(n[Wn(s,i)+" =>"]=r,n),{})}:Dr(t)?{[`Set(${t.size})`]:[...t.values()].map(n=>Wn(n))}:qe(t)?Wn(t):ne(t)&&!B(t)&&!Ur(t)?String(t):t,Wn=(e,t="")=>{var n;return qe(e)?`Symbol(${(n=e.description)!=null?n:t})`:e};/**
-* @vue/reactivity v3.5.12
-* (c) 2018-present Yuxi (Evan) You and Vue contributors
-* @license MIT
-**/let be;class Fo{constructor(t=!1){this.detached=t,this._active=!0,this.effects=[],this.cleanups=[],this._isPaused=!1,this.parent=be,!t&&be&&(this.index=(be.scopes||(be.scopes=[])).push(this)-1)}get active(){return this._active}pause(){if(this._active){this._isPaused=!0;let t,n;if(this.scopes)for(t=0,n=this.scopes.length;t0)return;if(Ht){let t=Ht;for(Ht=void 0;t;){const n=t.next;t.next=void 0,t.flags&=-9,t=n}}let e;for(;Ft;){let t=Ft;for(Ft=void 0;t;){const n=t.next;if(t.next=void 0,t.flags&=-9,t.flags&1)try{t.trigger()}catch(s){e||(e=s)}t=n}}if(e)throw e}function zr(e){for(let t=e.deps;t;t=t.nextDep)t.version=-1,t.prevActiveLink=t.dep.activeLink,t.dep.activeLink=t}function Jr(e){let t,n=e.depsTail,s=n;for(;s;){const r=s.prevDep;s.version===-1?(s===n&&(n=r),Ms(s),$o(s)):t=s,s.dep.activeLink=s.prevActiveLink,s.prevActiveLink=void 0,s=r}e.deps=t,e.depsTail=n}function fs(e){for(let t=e.deps;t;t=t.nextDep)if(t.dep.version!==t.version||t.dep.computed&&(Qr(t.dep.computed)||t.dep.version!==t.version))return!0;return!!e._dirty}function Qr(e){if(e.flags&4&&!(e.flags&16)||(e.flags&=-17,e.globalVersion===Vt))return;e.globalVersion=Vt;const t=e.dep;if(e.flags|=2,t.version>0&&!e.isSSR&&e.deps&&!fs(e)){e.flags&=-3;return}const n=ee,s=Ne;ee=e,Ne=!0;try{zr(e);const r=e.fn(e._value);(t.version===0||et(r,e._value))&&(e._value=r,t.version++)}catch(r){throw t.version++,r}finally{ee=n,Ne=s,Jr(e),e.flags&=-3}}function Ms(e,t=!1){const{dep:n,prevSub:s,nextSub:r}=e;if(s&&(s.nextSub=r,e.prevSub=void 0),r&&(r.prevSub=s,e.nextSub=void 0),n.subs===e&&(n.subs=s,!s&&n.computed)){n.computed.flags&=-5;for(let i=n.computed.deps;i;i=i.nextDep)Ms(i,!0)}!t&&!--n.sc&&n.map&&n.map.delete(n.key)}function $o(e){const{prevDep:t,nextDep:n}=e;t&&(t.nextDep=n,e.prevDep=void 0),n&&(n.prevDep=t,e.nextDep=void 0)}let Ne=!0;const Zr=[];function rt(){Zr.push(Ne),Ne=!1}function it(){const e=Zr.pop();Ne=e===void 0?!0:e}function Xs(e){const{cleanup:t}=e;if(e.cleanup=void 0,t){const n=ee;ee=void 0;try{t()}finally{ee=n}}}let Vt=0;class Do{constructor(t,n){this.sub=t,this.dep=n,this.version=n.version,this.nextDep=this.prevDep=this.nextSub=this.prevSub=this.prevActiveLink=void 0}}class Rn{constructor(t){this.computed=t,this.version=0,this.activeLink=void 0,this.subs=void 0,this.map=void 0,this.key=void 0,this.sc=0}track(t){if(!ee||!Ne||ee===this.computed)return;let n=this.activeLink;if(n===void 0||n.sub!==ee)n=this.activeLink=new Do(ee,this),ee.deps?(n.prevDep=ee.depsTail,ee.depsTail.nextDep=n,ee.depsTail=n):ee.deps=ee.depsTail=n,ei(n);else if(n.version===-1&&(n.version=this.version,n.nextDep)){const s=n.nextDep;s.prevDep=n.prevDep,n.prevDep&&(n.prevDep.nextDep=s),n.prevDep=ee.depsTail,n.nextDep=void 0,ee.depsTail.nextDep=n,ee.depsTail=n,ee.deps===n&&(ee.deps=s)}return n}trigger(t){this.version++,Vt++,this.notify(t)}notify(t){Ps();try{for(let n=this.subs;n;n=n.prevSub)n.sub.notify()&&n.sub.dep.notify()}finally{Is()}}}function ei(e){if(e.dep.sc++,e.sub.flags&4){const t=e.dep.computed;if(t&&!e.dep.subs){t.flags|=20;for(let s=t.deps;s;s=s.nextDep)ei(s)}const n=e.dep.subs;n!==e&&(e.prevSub=n,n&&(n.nextSub=e)),e.dep.subs=e}}const mn=new WeakMap,dt=Symbol(""),us=Symbol(""),Ut=Symbol("");function ge(e,t,n){if(Ne&&ee){let s=mn.get(e);s||mn.set(e,s=new Map);let r=s.get(n);r||(s.set(n,r=new Rn),r.map=s,r.key=n),r.track()}}function We(e,t,n,s,r,i){const o=mn.get(e);if(!o){Vt++;return}const l=c=>{c&&c.trigger()};if(Ps(),t==="clear")o.forEach(l);else{const c=B(e),u=c&&As(n);if(c&&n==="length"){const f=Number(s);o.forEach((h,y)=>{(y==="length"||y===Ut||!qe(y)&&y>=f)&&l(h)})}else switch((n!==void 0||o.has(void 0))&&l(o.get(n)),u&&l(o.get(Ut)),t){case"add":c?u&&l(o.get("length")):(l(o.get(dt)),xt(e)&&l(o.get(us)));break;case"delete":c||(l(o.get(dt)),xt(e)&&l(o.get(us)));break;case"set":xt(e)&&l(o.get(dt));break}}Is()}function jo(e,t){const n=mn.get(e);return n&&n.get(t)}function _t(e){const t=z(e);return t===e?t:(ge(t,"iterate",Ut),Ie(e)?t:t.map(me))}function On(e){return ge(e=z(e),"iterate",Ut),e}const Vo={__proto__:null,[Symbol.iterator](){return qn(this,Symbol.iterator,me)},concat(...e){return _t(this).concat(...e.map(t=>B(t)?_t(t):t))},entries(){return qn(this,"entries",e=>(e[1]=me(e[1]),e))},every(e,t){return Be(this,"every",e,t,void 0,arguments)},filter(e,t){return Be(this,"filter",e,t,n=>n.map(me),arguments)},find(e,t){return Be(this,"find",e,t,me,arguments)},findIndex(e,t){return Be(this,"findIndex",e,t,void 0,arguments)},findLast(e,t){return Be(this,"findLast",e,t,me,arguments)},findLastIndex(e,t){return Be(this,"findLastIndex",e,t,void 0,arguments)},forEach(e,t){return Be(this,"forEach",e,t,void 0,arguments)},includes(...e){return Gn(this,"includes",e)},indexOf(...e){return Gn(this,"indexOf",e)},join(e){return _t(this).join(e)},lastIndexOf(...e){return Gn(this,"lastIndexOf",e)},map(e,t){return Be(this,"map",e,t,void 0,arguments)},pop(){return Mt(this,"pop")},push(...e){return Mt(this,"push",e)},reduce(e,...t){return zs(this,"reduce",e,t)},reduceRight(e,...t){return zs(this,"reduceRight",e,t)},shift(){return Mt(this,"shift")},some(e,t){return Be(this,"some",e,t,void 0,arguments)},splice(...e){return Mt(this,"splice",e)},toReversed(){return _t(this).toReversed()},toSorted(e){return _t(this).toSorted(e)},toSpliced(...e){return _t(this).toSpliced(...e)},unshift(...e){return Mt(this,"unshift",e)},values(){return qn(this,"values",me)}};function qn(e,t,n){const s=On(e),r=s[t]();return s!==e&&!Ie(e)&&(r._next=r.next,r.next=()=>{const i=r._next();return i.value&&(i.value=n(i.value)),i}),r}const Uo=Array.prototype;function Be(e,t,n,s,r,i){const o=On(e),l=o!==e&&!Ie(e),c=o[t];if(c!==Uo[t]){const h=c.apply(e,i);return l?me(h):h}let u=n;o!==e&&(l?u=function(h,y){return n.call(this,me(h),y,e)}:n.length>2&&(u=function(h,y){return n.call(this,h,y,e)}));const f=c.call(o,u,s);return l&&r?r(f):f}function zs(e,t,n,s){const r=On(e);let i=n;return r!==e&&(Ie(e)?n.length>3&&(i=function(o,l,c){return n.call(this,o,l,c,e)}):i=function(o,l,c){return n.call(this,o,me(l),c,e)}),r[t](i,...s)}function Gn(e,t,n){const s=z(e);ge(s,"iterate",Ut);const r=s[t](...n);return(r===-1||r===!1)&&Fs(n[0])?(n[0]=z(n[0]),s[t](...n)):r}function Mt(e,t,n=[]){rt(),Ps();const s=z(e)[t].apply(e,n);return Is(),it(),s}const Bo=Es("__proto__,__v_isRef,__isVue"),ti=new Set(Object.getOwnPropertyNames(Symbol).filter(e=>e!=="arguments"&&e!=="caller").map(e=>Symbol[e]).filter(qe));function ko(e){qe(e)||(e=String(e));const t=z(this);return ge(t,"has",e),t.hasOwnProperty(e)}class ni{constructor(t=!1,n=!1){this._isReadonly=t,this._isShallow=n}get(t,n,s){const r=this._isReadonly,i=this._isShallow;if(n==="__v_isReactive")return!r;if(n==="__v_isReadonly")return r;if(n==="__v_isShallow")return i;if(n==="__v_raw")return s===(r?i?Zo:oi:i?ii:ri).get(t)||Object.getPrototypeOf(t)===Object.getPrototypeOf(s)?t:void 0;const o=B(t);if(!r){let c;if(o&&(c=Vo[n]))return c;if(n==="hasOwnProperty")return ko}const l=Reflect.get(t,n,ce(t)?t:s);return(qe(n)?ti.has(n):Bo(n))||(r||ge(t,"get",n),i)?l:ce(l)?o&&As(n)?l:l.value:ne(l)?r?In(l):Pn(l):l}}class si extends ni{constructor(t=!1){super(!1,t)}set(t,n,s,r){let i=t[n];if(!this._isShallow){const c=yt(i);if(!Ie(s)&&!yt(s)&&(i=z(i),s=z(s)),!B(t)&&ce(i)&&!ce(s))return c?!1:(i.value=s,!0)}const o=B(t)&&As(n)?Number(n)e,Zt=e=>Reflect.getPrototypeOf(e);function Yo(e,t,n){return function(...s){const r=this.__v_raw,i=z(r),o=xt(i),l=e==="entries"||e===Symbol.iterator&&o,c=e==="keys"&&o,u=r[e](...s),f=n?ds:t?hs:me;return!t&&ge(i,"iterate",c?us:dt),{next(){const{value:h,done:y}=u.next();return y?{value:h,done:y}:{value:l?[f(h[0]),f(h[1])]:f(h),done:y}},[Symbol.iterator](){return this}}}}function en(e){return function(...t){return e==="delete"?!1:e==="clear"?void 0:this}}function Xo(e,t){const n={get(r){const i=this.__v_raw,o=z(i),l=z(r);e||(et(r,l)&&ge(o,"get",r),ge(o,"get",l));const{has:c}=Zt(o),u=t?ds:e?hs:me;if(c.call(o,r))return u(i.get(r));if(c.call(o,l))return u(i.get(l));i!==o&&i.get(r)},get size(){const r=this.__v_raw;return!e&&ge(z(r),"iterate",dt),Reflect.get(r,"size",r)},has(r){const i=this.__v_raw,o=z(i),l=z(r);return e||(et(r,l)&&ge(o,"has",r),ge(o,"has",l)),r===l?i.has(r):i.has(r)||i.has(l)},forEach(r,i){const o=this,l=o.__v_raw,c=z(l),u=t?ds:e?hs:me;return!e&&ge(c,"iterate",dt),l.forEach((f,h)=>r.call(i,u(f),u(h),o))}};return oe(n,e?{add:en("add"),set:en("set"),delete:en("delete"),clear:en("clear")}:{add(r){!t&&!Ie(r)&&!yt(r)&&(r=z(r));const i=z(this);return Zt(i).has.call(i,r)||(i.add(r),We(i,"add",r,r)),this},set(r,i){!t&&!Ie(i)&&!yt(i)&&(i=z(i));const o=z(this),{has:l,get:c}=Zt(o);let u=l.call(o,r);u||(r=z(r),u=l.call(o,r));const f=c.call(o,r);return o.set(r,i),u?et(i,f)&&We(o,"set",r,i):We(o,"add",r,i),this},delete(r){const i=z(this),{has:o,get:l}=Zt(i);let c=o.call(i,r);c||(r=z(r),c=o.call(i,r)),l&&l.call(i,r);const u=i.delete(r);return c&&We(i,"delete",r,void 0),u},clear(){const r=z(this),i=r.size!==0,o=r.clear();return i&&We(r,"clear",void 0,void 0),o}}),["keys","values","entries",Symbol.iterator].forEach(r=>{n[r]=Yo(r,e,t)}),n}function Ls(e,t){const n=Xo(e,t);return(s,r,i)=>r==="__v_isReactive"?!e:r==="__v_isReadonly"?e:r==="__v_raw"?s:Reflect.get(J(n,r)&&r in s?n:s,r,i)}const zo={get:Ls(!1,!1)},Jo={get:Ls(!1,!0)},Qo={get:Ls(!0,!1)};const ri=new WeakMap,ii=new WeakMap,oi=new WeakMap,Zo=new WeakMap;function el(e){switch(e){case"Object":case"Array":return 1;case"Map":case"Set":case"WeakMap":case"WeakSet":return 2;default:return 0}}function tl(e){return e.__v_skip||!Object.isExtensible(e)?0:el(xo(e))}function Pn(e){return yt(e)?e:Ns(e,!1,Ko,zo,ri)}function nl(e){return Ns(e,!1,Go,Jo,ii)}function In(e){return Ns(e,!0,qo,Qo,oi)}function Ns(e,t,n,s,r){if(!ne(e)||e.__v_raw&&!(t&&e.__v_isReactive))return e;const i=r.get(e);if(i)return i;const o=tl(e);if(o===0)return e;const l=new Proxy(e,o===2?s:n);return r.set(e,l),l}function ht(e){return yt(e)?ht(e.__v_raw):!!(e&&e.__v_isReactive)}function yt(e){return!!(e&&e.__v_isReadonly)}function Ie(e){return!!(e&&e.__v_isShallow)}function Fs(e){return e?!!e.__v_raw:!1}function z(e){const t=e&&e.__v_raw;return t?z(t):e}function dn(e){return!J(e,"__v_skip")&&Object.isExtensible(e)&&Br(e,"__v_skip",!0),e}const me=e=>ne(e)?Pn(e):e,hs=e=>ne(e)?In(e):e;function ce(e){return e?e.__v_isRef===!0:!1}function ue(e){return ci(e,!1)}function li(e){return ci(e,!0)}function ci(e,t){return ce(e)?e:new sl(e,t)}class sl{constructor(t,n){this.dep=new Rn,this.__v_isRef=!0,this.__v_isShallow=!1,this._rawValue=n?t:z(t),this._value=n?t:me(t),this.__v_isShallow=n}get value(){return this.dep.track(),this._value}set value(t){const n=this._rawValue,s=this.__v_isShallow||Ie(t)||yt(t);t=s?t:z(t),et(t,n)&&(this._rawValue=t,this._value=s?t:me(t),this.dep.trigger())}}function ai(e){return ce(e)?e.value:e}const rl={get:(e,t,n)=>t==="__v_raw"?e:ai(Reflect.get(e,t,n)),set:(e,t,n,s)=>{const r=e[t];return ce(r)&&!ce(n)?(r.value=n,!0):Reflect.set(e,t,n,s)}};function fi(e){return ht(e)?e:new Proxy(e,rl)}class il{constructor(t){this.__v_isRef=!0,this._value=void 0;const n=this.dep=new Rn,{get:s,set:r}=t(n.track.bind(n),n.trigger.bind(n));this._get=s,this._set=r}get value(){return this._value=this._get()}set value(t){this._set(t)}}function ol(e){return new il(e)}class ll{constructor(t,n,s){this._object=t,this._key=n,this._defaultValue=s,this.__v_isRef=!0,this._value=void 0}get value(){const t=this._object[this._key];return this._value=t===void 0?this._defaultValue:t}set value(t){this._object[this._key]=t}get dep(){return jo(z(this._object),this._key)}}class cl{constructor(t){this._getter=t,this.__v_isRef=!0,this.__v_isReadonly=!0,this._value=void 0}get value(){return this._value=this._getter()}}function al(e,t,n){return ce(e)?e:q(e)?new cl(e):ne(e)&&arguments.length>1?fl(e,t,n):ue(e)}function fl(e,t,n){const s=e[t];return ce(s)?s:new ll(e,t,n)}class ul{constructor(t,n,s){this.fn=t,this.setter=n,this._value=void 0,this.dep=new Rn(this),this.__v_isRef=!0,this.deps=void 0,this.depsTail=void 0,this.flags=16,this.globalVersion=Vt-1,this.next=void 0,this.effect=this,this.__v_isReadonly=!n,this.isSSR=s}notify(){if(this.flags|=16,!(this.flags&8)&&ee!==this)return Xr(this,!0),!0}get value(){const t=this.dep.track();return Qr(this),t&&(t.version=this.dep.version),this._value}set value(t){this.setter&&this.setter(t)}}function dl(e,t,n=!1){let s,r;return q(e)?s=e:(s=e.get,r=e.set),new ul(s,r,n)}const tn={},yn=new WeakMap;let ft;function hl(e,t=!1,n=ft){if(n){let s=yn.get(n);s||yn.set(n,s=[]),s.push(e)}}function pl(e,t,n=te){const{immediate:s,deep:r,once:i,scheduler:o,augmentJob:l,call:c}=n,u=p=>r?p:Ie(p)||r===!1||r===0?Ze(p,1):Ze(p);let f,h,y,b,M=!1,O=!1;if(ce(e)?(h=()=>e.value,M=Ie(e)):ht(e)?(h=()=>u(e),M=!0):B(e)?(O=!0,M=e.some(p=>ht(p)||Ie(p)),h=()=>e.map(p=>{if(ce(p))return p.value;if(ht(p))return u(p);if(q(p))return c?c(p,2):p()})):q(e)?t?h=c?()=>c(e,2):e:h=()=>{if(y){rt();try{y()}finally{it()}}const p=ft;ft=f;try{return c?c(e,3,[b]):e(b)}finally{ft=p}}:h=Ue,t&&r){const p=h,R=r===!0?1/0:r;h=()=>Ze(p(),R)}const G=qr(),U=()=>{f.stop(),G&&Ts(G.effects,f)};if(i&&t){const p=t;t=(...R)=>{p(...R),U()}}let W=O?new Array(e.length).fill(tn):tn;const g=p=>{if(!(!(f.flags&1)||!f.dirty&&!p))if(t){const R=f.run();if(r||M||(O?R.some((D,j)=>et(D,W[j])):et(R,W))){y&&y();const D=ft;ft=f;try{const j=[R,W===tn?void 0:O&&W[0]===tn?[]:W,b];c?c(t,3,j):t(...j),W=R}finally{ft=D}}}else f.run()};return l&&l(g),f=new Gr(h),f.scheduler=o?()=>o(g,!1):g,b=p=>hl(p,!1,f),y=f.onStop=()=>{const p=yn.get(f);if(p){if(c)c(p,4);else for(const R of p)R();yn.delete(f)}},t?s?g(!0):W=f.run():o?o(g.bind(null,!0),!0):f.run(),U.pause=f.pause.bind(f),U.resume=f.resume.bind(f),U.stop=U,U}function Ze(e,t=1/0,n){if(t<=0||!ne(e)||e.__v_skip||(n=n||new Set,n.has(e)))return e;if(n.add(e),t--,ce(e))Ze(e.value,t,n);else if(B(e))for(let s=0;s{Ze(s,t,n)});else if(Ur(e)){for(const s in e)Ze(e[s],t,n);for(const s of Object.getOwnPropertySymbols(e))Object.prototype.propertyIsEnumerable.call(e,s)&&Ze(e[s],t,n)}return e}/**
-* @vue/runtime-core v3.5.12
-* (c) 2018-present Yuxi (Evan) You and Vue contributors
-* @license MIT
-**/function Xt(e,t,n,s){try{return s?e(...s):e()}catch(r){Mn(r,t,n)}}function He(e,t,n,s){if(q(e)){const r=Xt(e,t,n,s);return r&&jr(r)&&r.catch(i=>{Mn(i,t,n)}),r}if(B(e)){const r=[];for(let i=0;i>>1,r=we[s],i=Bt(r);i=Bt(n)?we.push(e):we.splice(ml(t),0,e),e.flags|=1,di()}}function di(){vn||(vn=ui.then(hi))}function yl(e){B(e)?Ct.push(...e):ze&&e.id===-1?ze.splice(wt+1,0,e):e.flags&1||(Ct.push(e),e.flags|=1),di()}function Js(e,t,n=je+1){for(;nBt(n)-Bt(s));if(Ct.length=0,ze){ze.push(...t);return}for(ze=t,wt=0;wte.id==null?e.flags&2?-1:1/0:e.id;function hi(e){try{for(je=0;je{s._d&&ar(-1);const i=bn(t);let o;try{o=e(...r)}finally{bn(i),s._d&&ar(1)}return o};return s._n=!0,s._c=!0,s._d=!0,s}function Ve(e,t,n,s){const r=e.dirs,i=t&&t.dirs;for(let o=0;oe.__isTeleport,Je=Symbol("_leaveCb"),nn=Symbol("_enterCb");function bl(){const e={isMounted:!1,isLeaving:!1,isUnmounting:!1,leavingVNodes:new Map};return Ot(()=>{e.isMounted=!0}),Ei(()=>{e.isUnmounting=!0}),e}const Re=[Function,Array],mi={mode:String,appear:Boolean,persisted:Boolean,onBeforeEnter:Re,onEnter:Re,onAfterEnter:Re,onEnterCancelled:Re,onBeforeLeave:Re,onLeave:Re,onAfterLeave:Re,onLeaveCancelled:Re,onBeforeAppear:Re,onAppear:Re,onAfterAppear:Re,onAppearCancelled:Re},yi=e=>{const t=e.subTree;return t.component?yi(t.component):t},wl={name:"BaseTransition",props:mi,setup(e,{slots:t}){const n=jn(),s=bl();return()=>{const r=t.default&&bi(t.default(),!0);if(!r||!r.length)return;const i=vi(r),o=z(e),{mode:l}=o;if(s.isLeaving)return Yn(i);const c=Qs(i);if(!c)return Yn(i);let u=ps(c,o,s,n,y=>u=y);c.type!==ye&&kt(c,u);const f=n.subTree,h=f&&Qs(f);if(h&&h.type!==ye&&!ut(c,h)&&yi(n).type!==ye){const y=ps(h,o,s,n);if(kt(h,y),l==="out-in"&&c.type!==ye)return s.isLeaving=!0,y.afterLeave=()=>{s.isLeaving=!1,n.job.flags&8||n.update(),delete y.afterLeave},Yn(i);l==="in-out"&&c.type!==ye&&(y.delayLeave=(b,M,O)=>{const G=_i(s,h);G[String(h.key)]=h,b[Je]=()=>{M(),b[Je]=void 0,delete u.delayedLeave},u.delayedLeave=O})}return i}}};function vi(e){let t=e[0];if(e.length>1){for(const n of e)if(n.type!==ye){t=n;break}}return t}const Sl=wl;function _i(e,t){const{leavingVNodes:n}=e;let s=n.get(t.type);return s||(s=Object.create(null),n.set(t.type,s)),s}function ps(e,t,n,s,r){const{appear:i,mode:o,persisted:l=!1,onBeforeEnter:c,onEnter:u,onAfterEnter:f,onEnterCancelled:h,onBeforeLeave:y,onLeave:b,onAfterLeave:M,onLeaveCancelled:O,onBeforeAppear:G,onAppear:U,onAfterAppear:W,onAppearCancelled:g}=t,p=String(e.key),R=_i(n,e),D=(I,_)=>{I&&He(I,s,9,_)},j=(I,_)=>{const L=_[1];D(I,_),B(I)?I.every(S=>S.length<=1)&&L():I.length<=1&&L()},K={mode:o,persisted:l,beforeEnter(I){let _=c;if(!n.isMounted)if(i)_=G||c;else return;I[Je]&&I[Je](!0);const L=R[p];L&&ut(e,L)&&L.el[Je]&&L.el[Je](),D(_,[I])},enter(I){let _=u,L=f,S=h;if(!n.isMounted)if(i)_=U||u,L=W||f,S=g||h;else return;let V=!1;const se=I[nn]=le=>{V||(V=!0,le?D(S,[I]):D(L,[I]),K.delayedLeave&&K.delayedLeave(),I[nn]=void 0)};_?j(_,[I,se]):se()},leave(I,_){const L=String(e.key);if(I[nn]&&I[nn](!0),n.isUnmounting)return _();D(y,[I]);let S=!1;const V=I[Je]=se=>{S||(S=!0,_(),se?D(O,[I]):D(M,[I]),I[Je]=void 0,R[L]===e&&delete R[L])};R[L]=e,b?j(b,[I,V]):V()},clone(I){const _=ps(I,t,n,s,r);return r&&r(_),_}};return K}function Yn(e){if(Nn(e))return e=nt(e),e.children=null,e}function Qs(e){if(!Nn(e))return gi(e.type)&&e.children?vi(e.children):e;const{shapeFlag:t,children:n}=e;if(n){if(t&16)return n[0];if(t&32&&q(n.default))return n.default()}}function kt(e,t){e.shapeFlag&6&&e.component?(e.transition=t,kt(e.component.subTree,t)):e.shapeFlag&128?(e.ssContent.transition=t.clone(e.ssContent),e.ssFallback.transition=t.clone(e.ssFallback)):e.transition=t}function bi(e,t=!1,n){let s=[],r=0;for(let i=0;i1)for(let i=0;iwn(M,t&&(B(t)?t[O]:t),n,s,r));return}if(pt(s)&&!r)return;const i=s.shapeFlag&4?Vs(s.component):s.el,o=r?null:i,{i:l,r:c}=e,u=t&&t.r,f=l.refs===te?l.refs={}:l.refs,h=l.setupState,y=z(h),b=h===te?()=>!1:M=>J(y,M);if(u!=null&&u!==c&&(re(u)?(f[u]=null,b(u)&&(h[u]=null)):ce(u)&&(u.value=null)),q(c))Xt(c,l,12,[o,f]);else{const M=re(c),O=ce(c);if(M||O){const G=()=>{if(e.f){const U=M?b(c)?h[c]:f[c]:c.value;r?B(U)&&Ts(U,i):B(U)?U.includes(i)||U.push(i):M?(f[c]=[i],b(c)&&(h[c]=f[c])):(c.value=[i],e.k&&(f[e.k]=c.value))}else M?(f[c]=o,b(c)&&(h[c]=o)):O&&(c.value=o,e.k&&(f[e.k]=o))};o?(G.id=-1,Te(G,n)):G()}}}let Zs=!1;const bt=()=>{Zs||(console.error("Hydration completed but contains mismatches."),Zs=!0)},xl=e=>e.namespaceURI.includes("svg")&&e.tagName!=="foreignObject",El=e=>e.namespaceURI.includes("MathML"),sn=e=>{if(e.nodeType===1){if(xl(e))return"svg";if(El(e))return"mathml"}},rn=e=>e.nodeType===8;function Cl(e){const{mt:t,p:n,o:{patchProp:s,createText:r,nextSibling:i,parentNode:o,remove:l,insert:c,createComment:u}}=e,f=(g,p)=>{if(!p.hasChildNodes()){n(null,g,p),_n(),p._vnode=g;return}h(p.firstChild,g,null,null,null),_n(),p._vnode=g},h=(g,p,R,D,j,K=!1)=>{K=K||!!p.dynamicChildren;const I=rn(g)&&g.data==="[",_=()=>O(g,p,R,D,j,I),{type:L,ref:S,shapeFlag:V,patchFlag:se}=p;let le=g.nodeType;p.el=g,se===-2&&(K=!1,p.dynamicChildren=null);let H=null;switch(L){case gt:le!==3?p.children===""?(c(p.el=r(""),o(g),g),H=g):H=_():(g.data!==p.children&&(bt(),g.data=p.children),H=i(g));break;case ye:W(g)?(H=i(g),U(p.el=g.content.firstChild,g,R)):le!==8||I?H=_():H=i(g);break;case Dt:if(I&&(g=i(g),le=g.nodeType),le===1||le===3){H=g;const Y=!p.children.length;for(let F=0;F{K=K||!!p.dynamicChildren;const{type:I,props:_,patchFlag:L,shapeFlag:S,dirs:V,transition:se}=p,le=I==="input"||I==="option";if(le||L!==-1){V&&Ve(p,null,R,"created");let H=!1;if(W(g)){H=Vi(null,se)&&R&&R.vnode.props&&R.vnode.props.appear;const F=g.content.firstChild;H&&se.beforeEnter(F),U(F,g,R),p.el=g=F}if(S&16&&!(_&&(_.innerHTML||_.textContent))){let F=b(g.firstChild,p,g,R,D,j,K);for(;F;){on(g,1)||bt();const ae=F;F=F.nextSibling,l(ae)}}else if(S&8){let F=p.children;F[0]===`
-`&&(g.tagName==="PRE"||g.tagName==="TEXTAREA")&&(F=F.slice(1)),g.textContent!==F&&(on(g,0)||bt(),g.textContent=p.children)}if(_){if(le||!K||L&48){const F=g.tagName.includes("-");for(const ae in _)(le&&(ae.endsWith("value")||ae==="indeterminate")||Yt(ae)&&!Et(ae)||ae[0]==="."||F)&&s(g,ae,null,_[ae],void 0,R)}else if(_.onClick)s(g,"onClick",null,_.onClick,void 0,R);else if(L&4&&ht(_.style))for(const F in _.style)_.style[F]}let Y;(Y=_&&_.onVnodeBeforeMount)&&Oe(Y,R,p),V&&Ve(p,null,R,"beforeMount"),((Y=_&&_.onVnodeMounted)||V||H)&&Gi(()=>{Y&&Oe(Y,R,p),H&&se.enter(g),V&&Ve(p,null,R,"mounted")},D)}return g.nextSibling},b=(g,p,R,D,j,K,I)=>{I=I||!!p.dynamicChildren;const _=p.children,L=_.length;for(let S=0;S{const{slotScopeIds:I}=p;I&&(j=j?j.concat(I):I);const _=o(g),L=b(i(g),p,_,R,D,j,K);return L&&rn(L)&&L.data==="]"?i(p.anchor=L):(bt(),c(p.anchor=u("]"),_,L),L)},O=(g,p,R,D,j,K)=>{if(on(g.parentElement,1)||bt(),p.el=null,K){const L=G(g);for(;;){const S=i(g);if(S&&S!==L)l(S);else break}}const I=i(g),_=o(g);return l(g),n(null,p,_,I,R,D,sn(_),j),I},G=(g,p="[",R="]")=>{let D=0;for(;g;)if(g=i(g),g&&rn(g)&&(g.data===p&&D++,g.data===R)){if(D===0)return i(g);D--}return g},U=(g,p,R)=>{const D=p.parentNode;D&&D.replaceChild(g,p);let j=R;for(;j;)j.vnode.el===p&&(j.vnode.el=j.subTree.el=g),j=j.parent},W=g=>g.nodeType===1&&g.tagName==="TEMPLATE";return[f,h]}const er="data-allow-mismatch",Tl={0:"text",1:"children",2:"class",3:"style",4:"attribute"};function on(e,t){if(t===0||t===1)for(;e&&!e.hasAttribute(er);)e=e.parentElement;const n=e&&e.getAttribute(er);if(n==null)return!1;if(n==="")return!0;{const s=n.split(",");return t===0&&s.includes("children")?!0:n.split(",").includes(Tl[t])}}An().requestIdleCallback;An().cancelIdleCallback;const pt=e=>!!e.type.__asyncLoader,Nn=e=>e.type.__isKeepAlive;function Al(e,t){xi(e,"a",t)}function Rl(e,t){xi(e,"da",t)}function xi(e,t,n=fe){const s=e.__wdc||(e.__wdc=()=>{let r=n;for(;r;){if(r.isDeactivated)return;r=r.parent}return e()});if(Fn(t,s,n),n){let r=n.parent;for(;r&&r.parent;)Nn(r.parent.vnode)&&Ol(s,t,n,r),r=r.parent}}function Ol(e,t,n,s){const r=Fn(t,e,s,!0);Hn(()=>{Ts(s[t],r)},n)}function Fn(e,t,n=fe,s=!1){if(n){const r=n[e]||(n[e]=[]),i=t.__weh||(t.__weh=(...o)=>{rt();const l=zt(n),c=He(t,n,e,o);return l(),it(),c});return s?r.unshift(i):r.push(i),i}}const Ge=e=>(t,n=fe)=>{(!qt||e==="sp")&&Fn(e,(...s)=>t(...s),n)},Pl=Ge("bm"),Ot=Ge("m"),Il=Ge("bu"),Ml=Ge("u"),Ei=Ge("bum"),Hn=Ge("um"),Ll=Ge("sp"),Nl=Ge("rtg"),Fl=Ge("rtc");function Hl(e,t=fe){Fn("ec",e,t)}const Ci="components";function Za(e,t){return Ai(Ci,e,!0,t)||e}const Ti=Symbol.for("v-ndc");function ef(e){return re(e)?Ai(Ci,e,!1)||e:e||Ti}function Ai(e,t,n=!0,s=!1){const r=ve||fe;if(r){const i=r.type;{const l=wc(i,!1);if(l&&(l===t||l===Me(t)||l===Tn(Me(t))))return i}const o=tr(r[e]||i[e],t)||tr(r.appContext[e],t);return!o&&s?i:o}}function tr(e,t){return e&&(e[t]||e[Me(t)]||e[Tn(Me(t))])}function tf(e,t,n,s){let r;const i=n,o=B(e);if(o||re(e)){const l=o&&ht(e);let c=!1;l&&(c=!Ie(e),e=On(e)),r=new Array(e.length);for(let u=0,f=e.length;ut(l,c,void 0,i));else{const l=Object.keys(e);r=new Array(l.length);for(let c=0,u=l.length;cKt(t)?!(t.type===ye||t.type===Se&&!Ri(t.children)):!0)?e:null}function sf(e,t){const n={};for(const s in e)n[/[A-Z]/.test(s)?`on:${s}`:un(s)]=e[s];return n}const gs=e=>e?Qi(e)?Vs(e):gs(e.parent):null,$t=oe(Object.create(null),{$:e=>e,$el:e=>e.vnode.el,$data:e=>e.data,$props:e=>e.props,$attrs:e=>e.attrs,$slots:e=>e.slots,$refs:e=>e.refs,$parent:e=>gs(e.parent),$root:e=>gs(e.root),$host:e=>e.ce,$emit:e=>e.emit,$options:e=>$s(e),$forceUpdate:e=>e.f||(e.f=()=>{Hs(e.update)}),$nextTick:e=>e.n||(e.n=Ln.bind(e.proxy)),$watch:e=>rc.bind(e)}),Xn=(e,t)=>e!==te&&!e.__isScriptSetup&&J(e,t),$l={get({_:e},t){if(t==="__v_skip")return!0;const{ctx:n,setupState:s,data:r,props:i,accessCache:o,type:l,appContext:c}=e;let u;if(t[0]!=="$"){const b=o[t];if(b!==void 0)switch(b){case 1:return s[t];case 2:return r[t];case 4:return n[t];case 3:return i[t]}else{if(Xn(s,t))return o[t]=1,s[t];if(r!==te&&J(r,t))return o[t]=2,r[t];if((u=e.propsOptions[0])&&J(u,t))return o[t]=3,i[t];if(n!==te&&J(n,t))return o[t]=4,n[t];ms&&(o[t]=0)}}const f=$t[t];let h,y;if(f)return t==="$attrs"&&ge(e.attrs,"get",""),f(e);if((h=l.__cssModules)&&(h=h[t]))return h;if(n!==te&&J(n,t))return o[t]=4,n[t];if(y=c.config.globalProperties,J(y,t))return y[t]},set({_:e},t,n){const{data:s,setupState:r,ctx:i}=e;return Xn(r,t)?(r[t]=n,!0):s!==te&&J(s,t)?(s[t]=n,!0):J(e.props,t)||t[0]==="$"&&t.slice(1)in e?!1:(i[t]=n,!0)},has({_:{data:e,setupState:t,accessCache:n,ctx:s,appContext:r,propsOptions:i}},o){let l;return!!n[o]||e!==te&&J(e,o)||Xn(t,o)||(l=i[0])&&J(l,o)||J(s,o)||J($t,o)||J(r.config.globalProperties,o)},defineProperty(e,t,n){return n.get!=null?e._.accessCache[t]=0:J(n,"value")&&this.set(e,t,n.value,null),Reflect.defineProperty(e,t,n)}};function rf(){return Dl().slots}function Dl(){const e=jn();return e.setupContext||(e.setupContext=eo(e))}function nr(e){return B(e)?e.reduce((t,n)=>(t[n]=null,t),{}):e}let ms=!0;function jl(e){const t=$s(e),n=e.proxy,s=e.ctx;ms=!1,t.beforeCreate&&sr(t.beforeCreate,e,"bc");const{data:r,computed:i,methods:o,watch:l,provide:c,inject:u,created:f,beforeMount:h,mounted:y,beforeUpdate:b,updated:M,activated:O,deactivated:G,beforeDestroy:U,beforeUnmount:W,destroyed:g,unmounted:p,render:R,renderTracked:D,renderTriggered:j,errorCaptured:K,serverPrefetch:I,expose:_,inheritAttrs:L,components:S,directives:V,filters:se}=t;if(u&&Vl(u,s,null),o)for(const Y in o){const F=o[Y];q(F)&&(s[Y]=F.bind(n))}if(r){const Y=r.call(n,n);ne(Y)&&(e.data=Pn(Y))}if(ms=!0,i)for(const Y in i){const F=i[Y],ae=q(F)?F.bind(n,n):q(F.get)?F.get.bind(n,n):Ue,Jt=!q(F)&&q(F.set)?F.set.bind(n):Ue,ot=ie({get:ae,set:Jt});Object.defineProperty(s,Y,{enumerable:!0,configurable:!0,get:()=>ot.value,set:$e=>ot.value=$e})}if(l)for(const Y in l)Oi(l[Y],s,n,Y);if(c){const Y=q(c)?c.call(n):c;Reflect.ownKeys(Y).forEach(F=>{ql(F,Y[F])})}f&&sr(f,e,"c");function H(Y,F){B(F)?F.forEach(ae=>Y(ae.bind(n))):F&&Y(F.bind(n))}if(H(Pl,h),H(Ot,y),H(Il,b),H(Ml,M),H(Al,O),H(Rl,G),H(Hl,K),H(Fl,D),H(Nl,j),H(Ei,W),H(Hn,p),H(Ll,I),B(_))if(_.length){const Y=e.exposed||(e.exposed={});_.forEach(F=>{Object.defineProperty(Y,F,{get:()=>n[F],set:ae=>n[F]=ae})})}else e.exposed||(e.exposed={});R&&e.render===Ue&&(e.render=R),L!=null&&(e.inheritAttrs=L),S&&(e.components=S),V&&(e.directives=V),I&&Si(e)}function Vl(e,t,n=Ue){B(e)&&(e=ys(e));for(const s in e){const r=e[s];let i;ne(r)?"default"in r?i=At(r.from||s,r.default,!0):i=At(r.from||s):i=At(r),ce(i)?Object.defineProperty(t,s,{enumerable:!0,configurable:!0,get:()=>i.value,set:o=>i.value=o}):t[s]=i}}function sr(e,t,n){He(B(e)?e.map(s=>s.bind(t.proxy)):e.bind(t.proxy),t,n)}function Oi(e,t,n,s){let r=s.includes(".")?Wi(n,s):()=>n[s];if(re(e)){const i=t[e];q(i)&&Fe(r,i)}else if(q(e))Fe(r,e.bind(n));else if(ne(e))if(B(e))e.forEach(i=>Oi(i,t,n,s));else{const i=q(e.handler)?e.handler.bind(n):t[e.handler];q(i)&&Fe(r,i,e)}}function $s(e){const t=e.type,{mixins:n,extends:s}=t,{mixins:r,optionsCache:i,config:{optionMergeStrategies:o}}=e.appContext,l=i.get(t);let c;return l?c=l:!r.length&&!n&&!s?c=t:(c={},r.length&&r.forEach(u=>Sn(c,u,o,!0)),Sn(c,t,o)),ne(t)&&i.set(t,c),c}function Sn(e,t,n,s=!1){const{mixins:r,extends:i}=t;i&&Sn(e,i,n,!0),r&&r.forEach(o=>Sn(e,o,n,!0));for(const o in t)if(!(s&&o==="expose")){const l=Ul[o]||n&&n[o];e[o]=l?l(e[o],t[o]):t[o]}return e}const Ul={data:rr,props:ir,emits:ir,methods:Nt,computed:Nt,beforeCreate:_e,created:_e,beforeMount:_e,mounted:_e,beforeUpdate:_e,updated:_e,beforeDestroy:_e,beforeUnmount:_e,destroyed:_e,unmounted:_e,activated:_e,deactivated:_e,errorCaptured:_e,serverPrefetch:_e,components:Nt,directives:Nt,watch:kl,provide:rr,inject:Bl};function rr(e,t){return t?e?function(){return oe(q(e)?e.call(this,this):e,q(t)?t.call(this,this):t)}:t:e}function Bl(e,t){return Nt(ys(e),ys(t))}function ys(e){if(B(e)){const t={};for(let n=0;n1)return n&&q(t)?t.call(s&&s.proxy):t}}const Ii={},Mi=()=>Object.create(Ii),Li=e=>Object.getPrototypeOf(e)===Ii;function Gl(e,t,n,s=!1){const r={},i=Mi();e.propsDefaults=Object.create(null),Ni(e,t,r,i);for(const o in e.propsOptions[0])o in r||(r[o]=void 0);n?e.props=s?r:nl(r):e.type.props?e.props=r:e.props=i,e.attrs=i}function Yl(e,t,n,s){const{props:r,attrs:i,vnode:{patchFlag:o}}=e,l=z(r),[c]=e.propsOptions;let u=!1;if((s||o>0)&&!(o&16)){if(o&8){const f=e.vnode.dynamicProps;for(let h=0;h{c=!0;const[y,b]=Fi(h,t,!0);oe(o,y),b&&l.push(...b)};!n&&t.mixins.length&&t.mixins.forEach(f),e.extends&&f(e.extends),e.mixins&&e.mixins.forEach(f)}if(!i&&!c)return ne(e)&&s.set(e,St),St;if(B(i))for(let f=0;fe[0]==="_"||e==="$stable",Ds=e=>B(e)?e.map(Pe):[Pe(e)],zl=(e,t,n)=>{if(t._n)return t;const s=vl((...r)=>Ds(t(...r)),n);return s._c=!1,s},$i=(e,t,n)=>{const s=e._ctx;for(const r in e){if(Hi(r))continue;const i=e[r];if(q(i))t[r]=zl(r,i,s);else if(i!=null){const o=Ds(i);t[r]=()=>o}}},Di=(e,t)=>{const n=Ds(t);e.slots.default=()=>n},ji=(e,t,n)=>{for(const s in t)(n||s!=="_")&&(e[s]=t[s])},Jl=(e,t,n)=>{const s=e.slots=Mi();if(e.vnode.shapeFlag&32){const r=t._;r?(ji(s,t,n),n&&Br(s,"_",r,!0)):$i(t,s)}else t&&Di(e,t)},Ql=(e,t,n)=>{const{vnode:s,slots:r}=e;let i=!0,o=te;if(s.shapeFlag&32){const l=t._;l?n&&l===1?i=!1:ji(r,t,n):(i=!t.$stable,$i(t,r)),o=t}else t&&(Di(e,t),o={default:1});if(i)for(const l in r)!Hi(l)&&o[l]==null&&delete r[l]},Te=Gi;function Zl(e){return ec(e,Cl)}function ec(e,t){const n=An();n.__VUE__=!0;const{insert:s,remove:r,patchProp:i,createElement:o,createText:l,createComment:c,setText:u,setElementText:f,parentNode:h,nextSibling:y,setScopeId:b=Ue,insertStaticContent:M}=e,O=(a,d,m,x=null,v=null,w=null,A=void 0,T=null,C=!!d.dynamicChildren)=>{if(a===d)return;a&&!ut(a,d)&&(x=Qt(a),$e(a,v,w,!0),a=null),d.patchFlag===-2&&(C=!1,d.dynamicChildren=null);const{type:E,ref:$,shapeFlag:P}=d;switch(E){case gt:G(a,d,m,x);break;case ye:U(a,d,m,x);break;case Dt:a==null&&W(d,m,x,A);break;case Se:S(a,d,m,x,v,w,A,T,C);break;default:P&1?R(a,d,m,x,v,w,A,T,C):P&6?V(a,d,m,x,v,w,A,T,C):(P&64||P&128)&&E.process(a,d,m,x,v,w,A,T,C,vt)}$!=null&&v&&wn($,a&&a.ref,w,d||a,!d)},G=(a,d,m,x)=>{if(a==null)s(d.el=l(d.children),m,x);else{const v=d.el=a.el;d.children!==a.children&&u(v,d.children)}},U=(a,d,m,x)=>{a==null?s(d.el=c(d.children||""),m,x):d.el=a.el},W=(a,d,m,x)=>{[a.el,a.anchor]=M(a.children,d,m,x,a.el,a.anchor)},g=({el:a,anchor:d},m,x)=>{let v;for(;a&&a!==d;)v=y(a),s(a,m,x),a=v;s(d,m,x)},p=({el:a,anchor:d})=>{let m;for(;a&&a!==d;)m=y(a),r(a),a=m;r(d)},R=(a,d,m,x,v,w,A,T,C)=>{d.type==="svg"?A="svg":d.type==="math"&&(A="mathml"),a==null?D(d,m,x,v,w,A,T,C):I(a,d,v,w,A,T,C)},D=(a,d,m,x,v,w,A,T)=>{let C,E;const{props:$,shapeFlag:P,transition:N,dirs:k}=a;if(C=a.el=o(a.type,w,$&&$.is,$),P&8?f(C,a.children):P&16&&K(a.children,C,null,x,v,zn(a,w),A,T),k&&Ve(a,null,x,"created"),j(C,a,a.scopeId,A,x),$){for(const Z in $)Z!=="value"&&!Et(Z)&&i(C,Z,null,$[Z],w,x);"value"in $&&i(C,"value",null,$.value,w),(E=$.onVnodeBeforeMount)&&Oe(E,x,a)}k&&Ve(a,null,x,"beforeMount");const X=Vi(v,N);X&&N.beforeEnter(C),s(C,d,m),((E=$&&$.onVnodeMounted)||X||k)&&Te(()=>{E&&Oe(E,x,a),X&&N.enter(C),k&&Ve(a,null,x,"mounted")},v)},j=(a,d,m,x,v)=>{if(m&&b(a,m),x)for(let w=0;w{for(let E=C;E{const T=d.el=a.el;let{patchFlag:C,dynamicChildren:E,dirs:$}=d;C|=a.patchFlag&16;const P=a.props||te,N=d.props||te;let k;if(m&<(m,!1),(k=N.onVnodeBeforeUpdate)&&Oe(k,m,d,a),$&&Ve(d,a,m,"beforeUpdate"),m&<(m,!0),(P.innerHTML&&N.innerHTML==null||P.textContent&&N.textContent==null)&&f(T,""),E?_(a.dynamicChildren,E,T,m,x,zn(d,v),w):A||F(a,d,T,null,m,x,zn(d,v),w,!1),C>0){if(C&16)L(T,P,N,m,v);else if(C&2&&P.class!==N.class&&i(T,"class",null,N.class,v),C&4&&i(T,"style",P.style,N.style,v),C&8){const X=d.dynamicProps;for(let Z=0;Z{k&&Oe(k,m,d,a),$&&Ve(d,a,m,"updated")},x)},_=(a,d,m,x,v,w,A)=>{for(let T=0;T{if(d!==m){if(d!==te)for(const w in d)!Et(w)&&!(w in m)&&i(a,w,d[w],null,v,x);for(const w in m){if(Et(w))continue;const A=m[w],T=d[w];A!==T&&w!=="value"&&i(a,w,T,A,v,x)}"value"in m&&i(a,"value",d.value,m.value,v)}},S=(a,d,m,x,v,w,A,T,C)=>{const E=d.el=a?a.el:l(""),$=d.anchor=a?a.anchor:l("");let{patchFlag:P,dynamicChildren:N,slotScopeIds:k}=d;k&&(T=T?T.concat(k):k),a==null?(s(E,m,x),s($,m,x),K(d.children||[],m,$,v,w,A,T,C)):P>0&&P&64&&N&&a.dynamicChildren?(_(a.dynamicChildren,N,m,v,w,A,T),(d.key!=null||v&&d===v.subTree)&&Ui(a,d,!0)):F(a,d,m,$,v,w,A,T,C)},V=(a,d,m,x,v,w,A,T,C)=>{d.slotScopeIds=T,a==null?d.shapeFlag&512?v.ctx.activate(d,m,x,A,C):se(d,m,x,v,w,A,C):le(a,d,C)},se=(a,d,m,x,v,w,A)=>{const T=a.component=yc(a,x,v);if(Nn(a)&&(T.ctx.renderer=vt),vc(T,!1,A),T.asyncDep){if(v&&v.registerDep(T,H,A),!a.el){const C=T.subTree=de(ye);U(null,C,d,m)}}else H(T,a,d,m,v,w,A)},le=(a,d,m)=>{const x=d.component=a.component;if(ac(a,d,m))if(x.asyncDep&&!x.asyncResolved){Y(x,d,m);return}else x.next=d,x.update();else d.el=a.el,x.vnode=d},H=(a,d,m,x,v,w,A)=>{const T=()=>{if(a.isMounted){let{next:P,bu:N,u:k,parent:X,vnode:Z}=a;{const Ee=Bi(a);if(Ee){P&&(P.el=Z.el,Y(a,P,A)),Ee.asyncDep.then(()=>{a.isUnmounted||T()});return}}let Q=P,xe;lt(a,!1),P?(P.el=Z.el,Y(a,P,A)):P=Z,N&&kn(N),(xe=P.props&&P.props.onVnodeBeforeUpdate)&&Oe(xe,X,P,Z),lt(a,!0);const he=Jn(a),Le=a.subTree;a.subTree=he,O(Le,he,h(Le.el),Qt(Le),a,v,w),P.el=he.el,Q===null&&fc(a,he.el),k&&Te(k,v),(xe=P.props&&P.props.onVnodeUpdated)&&Te(()=>Oe(xe,X,P,Z),v)}else{let P;const{el:N,props:k}=d,{bm:X,m:Z,parent:Q,root:xe,type:he}=a,Le=pt(d);if(lt(a,!1),X&&kn(X),!Le&&(P=k&&k.onVnodeBeforeMount)&&Oe(P,Q,d),lt(a,!0),N&&Bn){const Ee=()=>{a.subTree=Jn(a),Bn(N,a.subTree,a,v,null)};Le&&he.__asyncHydrate?he.__asyncHydrate(N,a,Ee):Ee()}else{xe.ce&&xe.ce._injectChildStyle(he);const Ee=a.subTree=Jn(a);O(null,Ee,m,x,a,v,w),d.el=Ee.el}if(Z&&Te(Z,v),!Le&&(P=k&&k.onVnodeMounted)){const Ee=d;Te(()=>Oe(P,Q,Ee),v)}(d.shapeFlag&256||Q&&pt(Q.vnode)&&Q.vnode.shapeFlag&256)&&a.a&&Te(a.a,v),a.isMounted=!0,d=m=x=null}};a.scope.on();const C=a.effect=new Gr(T);a.scope.off();const E=a.update=C.run.bind(C),$=a.job=C.runIfDirty.bind(C);$.i=a,$.id=a.uid,C.scheduler=()=>Hs($),lt(a,!0),E()},Y=(a,d,m)=>{d.component=a;const x=a.vnode.props;a.vnode=d,a.next=null,Yl(a,d.props,x,m),Ql(a,d.children,m),rt(),Js(a),it()},F=(a,d,m,x,v,w,A,T,C=!1)=>{const E=a&&a.children,$=a?a.shapeFlag:0,P=d.children,{patchFlag:N,shapeFlag:k}=d;if(N>0){if(N&128){Jt(E,P,m,x,v,w,A,T,C);return}else if(N&256){ae(E,P,m,x,v,w,A,T,C);return}}k&8?($&16&&Pt(E,v,w),P!==E&&f(m,P)):$&16?k&16?Jt(E,P,m,x,v,w,A,T,C):Pt(E,v,w,!0):($&8&&f(m,""),k&16&&K(P,m,x,v,w,A,T,C))},ae=(a,d,m,x,v,w,A,T,C)=>{a=a||St,d=d||St;const E=a.length,$=d.length,P=Math.min(E,$);let N;for(N=0;N$?Pt(a,v,w,!0,!1,P):K(d,m,x,v,w,A,T,C,P)},Jt=(a,d,m,x,v,w,A,T,C)=>{let E=0;const $=d.length;let P=a.length-1,N=$-1;for(;E<=P&&E<=N;){const k=a[E],X=d[E]=C?Qe(d[E]):Pe(d[E]);if(ut(k,X))O(k,X,m,null,v,w,A,T,C);else break;E++}for(;E<=P&&E<=N;){const k=a[P],X=d[N]=C?Qe(d[N]):Pe(d[N]);if(ut(k,X))O(k,X,m,null,v,w,A,T,C);else break;P--,N--}if(E>P){if(E<=N){const k=N+1,X=k<$?d[k].el:x;for(;E<=N;)O(null,d[E]=C?Qe(d[E]):Pe(d[E]),m,X,v,w,A,T,C),E++}}else if(E>N)for(;E<=P;)$e(a[E],v,w,!0),E++;else{const k=E,X=E,Z=new Map;for(E=X;E<=N;E++){const Ce=d[E]=C?Qe(d[E]):Pe(d[E]);Ce.key!=null&&Z.set(Ce.key,E)}let Q,xe=0;const he=N-X+1;let Le=!1,Ee=0;const It=new Array(he);for(E=0;E=he){$e(Ce,v,w,!0);continue}let De;if(Ce.key!=null)De=Z.get(Ce.key);else for(Q=X;Q<=N;Q++)if(It[Q-X]===0&&ut(Ce,d[Q])){De=Q;break}De===void 0?$e(Ce,v,w,!0):(It[De-X]=E+1,De>=Ee?Ee=De:Le=!0,O(Ce,d[De],m,null,v,w,A,T,C),xe++)}const qs=Le?tc(It):St;for(Q=qs.length-1,E=he-1;E>=0;E--){const Ce=X+E,De=d[Ce],Gs=Ce+1<$?d[Ce+1].el:x;It[E]===0?O(null,De,m,Gs,v,w,A,T,C):Le&&(Q<0||E!==qs[Q]?ot(De,m,Gs,2):Q--)}}},ot=(a,d,m,x,v=null)=>{const{el:w,type:A,transition:T,children:C,shapeFlag:E}=a;if(E&6){ot(a.component.subTree,d,m,x);return}if(E&128){a.suspense.move(d,m,x);return}if(E&64){A.move(a,d,m,vt);return}if(A===Se){s(w,d,m);for(let P=0;PT.enter(w),v);else{const{leave:P,delayLeave:N,afterLeave:k}=T,X=()=>s(w,d,m),Z=()=>{P(w,()=>{X(),k&&k()})};N?N(w,X,Z):Z()}else s(w,d,m)},$e=(a,d,m,x=!1,v=!1)=>{const{type:w,props:A,ref:T,children:C,dynamicChildren:E,shapeFlag:$,patchFlag:P,dirs:N,cacheIndex:k}=a;if(P===-2&&(v=!1),T!=null&&wn(T,null,m,a,!0),k!=null&&(d.renderCache[k]=void 0),$&256){d.ctx.deactivate(a);return}const X=$&1&&N,Z=!pt(a);let Q;if(Z&&(Q=A&&A.onVnodeBeforeUnmount)&&Oe(Q,d,a),$&6)bo(a.component,m,x);else{if($&128){a.suspense.unmount(m,x);return}X&&Ve(a,null,d,"beforeUnmount"),$&64?a.type.remove(a,d,m,vt,x):E&&!E.hasOnce&&(w!==Se||P>0&&P&64)?Pt(E,d,m,!1,!0):(w===Se&&P&384||!v&&$&16)&&Pt(C,d,m),x&&Ws(a)}(Z&&(Q=A&&A.onVnodeUnmounted)||X)&&Te(()=>{Q&&Oe(Q,d,a),X&&Ve(a,null,d,"unmounted")},m)},Ws=a=>{const{type:d,el:m,anchor:x,transition:v}=a;if(d===Se){_o(m,x);return}if(d===Dt){p(a);return}const w=()=>{r(m),v&&!v.persisted&&v.afterLeave&&v.afterLeave()};if(a.shapeFlag&1&&v&&!v.persisted){const{leave:A,delayLeave:T}=v,C=()=>A(m,w);T?T(a.el,w,C):C()}else w()},_o=(a,d)=>{let m;for(;a!==d;)m=y(a),r(a),a=m;r(d)},bo=(a,d,m)=>{const{bum:x,scope:v,job:w,subTree:A,um:T,m:C,a:E}=a;lr(C),lr(E),x&&kn(x),v.stop(),w&&(w.flags|=8,$e(A,a,d,m)),T&&Te(T,d),Te(()=>{a.isUnmounted=!0},d),d&&d.pendingBranch&&!d.isUnmounted&&a.asyncDep&&!a.asyncResolved&&a.suspenseId===d.pendingId&&(d.deps--,d.deps===0&&d.resolve())},Pt=(a,d,m,x=!1,v=!1,w=0)=>{for(let A=w;A{if(a.shapeFlag&6)return Qt(a.component.subTree);if(a.shapeFlag&128)return a.suspense.next();const d=y(a.anchor||a.el),m=d&&d[_l];return m?y(m):d};let Vn=!1;const Ks=(a,d,m)=>{a==null?d._vnode&&$e(d._vnode,null,null,!0):O(d._vnode||null,a,d,null,null,null,m),d._vnode=a,Vn||(Vn=!0,Js(),_n(),Vn=!1)},vt={p:O,um:$e,m:ot,r:Ws,mt:se,mc:K,pc:F,pbc:_,n:Qt,o:e};let Un,Bn;return t&&([Un,Bn]=t(vt)),{render:Ks,hydrate:Un,createApp:Kl(Ks,Un)}}function zn({type:e,props:t},n){return n==="svg"&&e==="foreignObject"||n==="mathml"&&e==="annotation-xml"&&t&&t.encoding&&t.encoding.includes("html")?void 0:n}function lt({effect:e,job:t},n){n?(e.flags|=32,t.flags|=4):(e.flags&=-33,t.flags&=-5)}function Vi(e,t){return(!e||e&&!e.pendingBranch)&&t&&!t.persisted}function Ui(e,t,n=!1){const s=e.children,r=t.children;if(B(s)&&B(r))for(let i=0;i>1,e[n[l]]0&&(t[s]=n[i-1]),n[i]=s)}}for(i=n.length,o=n[i-1];i-- >0;)n[i]=o,o=t[o];return n}function Bi(e){const t=e.subTree.component;if(t)return t.asyncDep&&!t.asyncResolved?t:Bi(t)}function lr(e){if(e)for(let t=0;tAt(nc);function ki(e,t){return $n(e,null,t)}function of(e,t){return $n(e,null,{flush:"post"})}function Fe(e,t,n){return $n(e,t,n)}function $n(e,t,n=te){const{immediate:s,deep:r,flush:i,once:o}=n,l=oe({},n),c=t&&s||!t&&i!=="post";let u;if(qt){if(i==="sync"){const b=sc();u=b.__watcherHandles||(b.__watcherHandles=[])}else if(!c){const b=()=>{};return b.stop=Ue,b.resume=Ue,b.pause=Ue,b}}const f=fe;l.call=(b,M,O)=>He(b,f,M,O);let h=!1;i==="post"?l.scheduler=b=>{Te(b,f&&f.suspense)}:i!=="sync"&&(h=!0,l.scheduler=(b,M)=>{M?b():Hs(b)}),l.augmentJob=b=>{t&&(b.flags|=4),h&&(b.flags|=2,f&&(b.id=f.uid,b.i=f))};const y=pl(e,t,l);return qt&&(u?u.push(y):c&&y()),y}function rc(e,t,n){const s=this.proxy,r=re(e)?e.includes(".")?Wi(s,e):()=>s[e]:e.bind(s,s);let i;q(t)?i=t:(i=t.handler,n=t);const o=zt(this),l=$n(r,i.bind(s),n);return o(),l}function Wi(e,t){const n=t.split(".");return()=>{let s=e;for(let r=0;rt==="modelValue"||t==="model-value"?e.modelModifiers:e[`${t}Modifiers`]||e[`${Me(t)}Modifiers`]||e[`${st(t)}Modifiers`];function oc(e,t,...n){if(e.isUnmounted)return;const s=e.vnode.props||te;let r=n;const i=t.startsWith("update:"),o=i&&ic(s,t.slice(7));o&&(o.trim&&(r=n.map(f=>re(f)?f.trim():f)),o.number&&(r=n.map(To)));let l,c=s[l=un(t)]||s[l=un(Me(t))];!c&&i&&(c=s[l=un(st(t))]),c&&He(c,e,6,r);const u=s[l+"Once"];if(u){if(!e.emitted)e.emitted={};else if(e.emitted[l])return;e.emitted[l]=!0,He(u,e,6,r)}}function Ki(e,t,n=!1){const s=t.emitsCache,r=s.get(e);if(r!==void 0)return r;const i=e.emits;let o={},l=!1;if(!q(e)){const c=u=>{const f=Ki(u,t,!0);f&&(l=!0,oe(o,f))};!n&&t.mixins.length&&t.mixins.forEach(c),e.extends&&c(e.extends),e.mixins&&e.mixins.forEach(c)}return!i&&!l?(ne(e)&&s.set(e,null),null):(B(i)?i.forEach(c=>o[c]=null):oe(o,i),ne(e)&&s.set(e,o),o)}function Dn(e,t){return!e||!Yt(t)?!1:(t=t.slice(2).replace(/Once$/,""),J(e,t[0].toLowerCase()+t.slice(1))||J(e,st(t))||J(e,t))}function Jn(e){const{type:t,vnode:n,proxy:s,withProxy:r,propsOptions:[i],slots:o,attrs:l,emit:c,render:u,renderCache:f,props:h,data:y,setupState:b,ctx:M,inheritAttrs:O}=e,G=bn(e);let U,W;try{if(n.shapeFlag&4){const p=r||s,R=p;U=Pe(u.call(R,p,f,h,b,y,M)),W=l}else{const p=t;U=Pe(p.length>1?p(h,{attrs:l,slots:o,emit:c}):p(h,null)),W=t.props?l:lc(l)}}catch(p){jt.length=0,Mn(p,e,1),U=de(ye)}let g=U;if(W&&O!==!1){const p=Object.keys(W),{shapeFlag:R}=g;p.length&&R&7&&(i&&p.some(Cs)&&(W=cc(W,i)),g=nt(g,W,!1,!0))}return n.dirs&&(g=nt(g,null,!1,!0),g.dirs=g.dirs?g.dirs.concat(n.dirs):n.dirs),n.transition&&kt(g,n.transition),U=g,bn(G),U}const lc=e=>{let t;for(const n in e)(n==="class"||n==="style"||Yt(n))&&((t||(t={}))[n]=e[n]);return t},cc=(e,t)=>{const n={};for(const s in e)(!Cs(s)||!(s.slice(9)in t))&&(n[s]=e[s]);return n};function ac(e,t,n){const{props:s,children:r,component:i}=e,{props:o,children:l,patchFlag:c}=t,u=i.emitsOptions;if(t.dirs||t.transition)return!0;if(n&&c>=0){if(c&1024)return!0;if(c&16)return s?cr(s,o,u):!!o;if(c&8){const f=t.dynamicProps;for(let h=0;he.__isSuspense;function Gi(e,t){t&&t.pendingBranch?B(e)?t.effects.push(...e):t.effects.push(e):yl(e)}const Se=Symbol.for("v-fgt"),gt=Symbol.for("v-txt"),ye=Symbol.for("v-cmt"),Dt=Symbol.for("v-stc"),jt=[];let Ae=null;function _s(e=!1){jt.push(Ae=e?null:[])}function uc(){jt.pop(),Ae=jt[jt.length-1]||null}let Wt=1;function ar(e){Wt+=e,e<0&&Ae&&(Ae.hasOnce=!0)}function Yi(e){return e.dynamicChildren=Wt>0?Ae||St:null,uc(),Wt>0&&Ae&&Ae.push(e),e}function lf(e,t,n,s,r,i){return Yi(zi(e,t,n,s,r,i,!0))}function bs(e,t,n,s,r){return Yi(de(e,t,n,s,r,!0))}function Kt(e){return e?e.__v_isVNode===!0:!1}function ut(e,t){return e.type===t.type&&e.key===t.key}const Xi=({key:e})=>e??null,hn=({ref:e,ref_key:t,ref_for:n})=>(typeof e=="number"&&(e=""+e),e!=null?re(e)||ce(e)||q(e)?{i:ve,r:e,k:t,f:!!n}:e:null);function zi(e,t=null,n=null,s=0,r=null,i=e===Se?0:1,o=!1,l=!1){const c={__v_isVNode:!0,__v_skip:!0,type:e,props:t,key:t&&Xi(t),ref:t&&hn(t),scopeId:pi,slotScopeIds:null,children:n,component:null,suspense:null,ssContent:null,ssFallback:null,dirs:null,transition:null,el:null,anchor:null,target:null,targetStart:null,targetAnchor:null,staticCount:0,shapeFlag:i,patchFlag:s,dynamicProps:r,dynamicChildren:null,appContext:null,ctx:ve};return l?(js(c,n),i&128&&e.normalize(c)):n&&(c.shapeFlag|=re(n)?8:16),Wt>0&&!o&&Ae&&(c.patchFlag>0||i&6)&&c.patchFlag!==32&&Ae.push(c),c}const de=dc;function dc(e,t=null,n=null,s=0,r=null,i=!1){if((!e||e===Ti)&&(e=ye),Kt(e)){const l=nt(e,t,!0);return n&&js(l,n),Wt>0&&!i&&Ae&&(l.shapeFlag&6?Ae[Ae.indexOf(e)]=l:Ae.push(l)),l.patchFlag=-2,l}if(Sc(e)&&(e=e.__vccOpts),t){t=hc(t);let{class:l,style:c}=t;l&&!re(l)&&(t.class=Os(l)),ne(c)&&(Fs(c)&&!B(c)&&(c=oe({},c)),t.style=Rs(c))}const o=re(e)?1:qi(e)?128:gi(e)?64:ne(e)?4:q(e)?2:0;return zi(e,t,n,s,r,o,i,!0)}function hc(e){return e?Fs(e)||Li(e)?oe({},e):e:null}function nt(e,t,n=!1,s=!1){const{props:r,ref:i,patchFlag:o,children:l,transition:c}=e,u=t?pc(r||{},t):r,f={__v_isVNode:!0,__v_skip:!0,type:e.type,props:u,key:u&&Xi(u),ref:t&&t.ref?n&&i?B(i)?i.concat(hn(t)):[i,hn(t)]:hn(t):i,scopeId:e.scopeId,slotScopeIds:e.slotScopeIds,children:l,target:e.target,targetStart:e.targetStart,targetAnchor:e.targetAnchor,staticCount:e.staticCount,shapeFlag:e.shapeFlag,patchFlag:t&&e.type!==Se?o===-1?16:o|16:o,dynamicProps:e.dynamicProps,dynamicChildren:e.dynamicChildren,appContext:e.appContext,dirs:e.dirs,transition:c,component:e.component,suspense:e.suspense,ssContent:e.ssContent&&nt(e.ssContent),ssFallback:e.ssFallback&&nt(e.ssFallback),el:e.el,anchor:e.anchor,ctx:e.ctx,ce:e.ce};return c&&s&&kt(f,c.clone(f)),f}function Ji(e=" ",t=0){return de(gt,null,e,t)}function cf(e,t){const n=de(Dt,null,e);return n.staticCount=t,n}function af(e="",t=!1){return t?(_s(),bs(ye,null,e)):de(ye,null,e)}function Pe(e){return e==null||typeof e=="boolean"?de(ye):B(e)?de(Se,null,e.slice()):Kt(e)?Qe(e):de(gt,null,String(e))}function Qe(e){return e.el===null&&e.patchFlag!==-1||e.memo?e:nt(e)}function js(e,t){let n=0;const{shapeFlag:s}=e;if(t==null)t=null;else if(B(t))n=16;else if(typeof t=="object")if(s&65){const r=t.default;r&&(r._c&&(r._d=!1),js(e,r()),r._c&&(r._d=!0));return}else{n=32;const r=t._;!r&&!Li(t)?t._ctx=ve:r===3&&ve&&(ve.slots._===1?t._=1:(t._=2,e.patchFlag|=1024))}else q(t)?(t={default:t,_ctx:ve},n=32):(t=String(t),s&64?(n=16,t=[Ji(t)]):n=8);e.children=t,e.shapeFlag|=n}function pc(...e){const t={};for(let n=0;nfe||ve;let xn,ws;{const e=An(),t=(n,s)=>{let r;return(r=e[n])||(r=e[n]=[]),r.push(s),i=>{r.length>1?r.forEach(o=>o(i)):r[0](i)}};xn=t("__VUE_INSTANCE_SETTERS__",n=>fe=n),ws=t("__VUE_SSR_SETTERS__",n=>qt=n)}const zt=e=>{const t=fe;return xn(e),e.scope.on(),()=>{e.scope.off(),xn(t)}},fr=()=>{fe&&fe.scope.off(),xn(null)};function Qi(e){return e.vnode.shapeFlag&4}let qt=!1;function vc(e,t=!1,n=!1){t&&ws(t);const{props:s,children:r}=e.vnode,i=Qi(e);Gl(e,s,i,t),Jl(e,r,n);const o=i?_c(e,t):void 0;return t&&ws(!1),o}function _c(e,t){const n=e.type;e.accessCache=Object.create(null),e.proxy=new Proxy(e.ctx,$l);const{setup:s}=n;if(s){rt();const r=e.setupContext=s.length>1?eo(e):null,i=zt(e),o=Xt(s,e,0,[e.props,r]),l=jr(o);if(it(),i(),(l||e.sp)&&!pt(e)&&Si(e),l){if(o.then(fr,fr),t)return o.then(c=>{ur(e,c,t)}).catch(c=>{Mn(c,e,0)});e.asyncDep=o}else ur(e,o,t)}else Zi(e,t)}function ur(e,t,n){q(t)?e.type.__ssrInlineRender?e.ssrRender=t:e.render=t:ne(t)&&(e.setupState=fi(t)),Zi(e,n)}let dr;function Zi(e,t,n){const s=e.type;if(!e.render){if(!t&&dr&&!s.render){const r=s.template||$s(e).template;if(r){const{isCustomElement:i,compilerOptions:o}=e.appContext.config,{delimiters:l,compilerOptions:c}=s,u=oe(oe({isCustomElement:i,delimiters:l},o),c);s.render=dr(r,u)}}e.render=s.render||Ue}{const r=zt(e);rt();try{jl(e)}finally{it(),r()}}}const bc={get(e,t){return ge(e,"get",""),e[t]}};function eo(e){const t=n=>{e.exposed=n||{}};return{attrs:new Proxy(e.attrs,bc),slots:e.slots,emit:e.emit,expose:t}}function Vs(e){return e.exposed?e.exposeProxy||(e.exposeProxy=new Proxy(fi(dn(e.exposed)),{get(t,n){if(n in t)return t[n];if(n in $t)return $t[n](e)},has(t,n){return n in t||n in $t}})):e.proxy}function wc(e,t=!0){return q(e)?e.displayName||e.name:e.name||t&&e.__name}function Sc(e){return q(e)&&"__vccOpts"in e}const ie=(e,t)=>dl(e,t,qt);function Ss(e,t,n){const s=arguments.length;return s===2?ne(t)&&!B(t)?Kt(t)?de(e,null,[t]):de(e,t):de(e,null,t):(s>3?n=Array.prototype.slice.call(arguments,2):s===3&&Kt(n)&&(n=[n]),de(e,t,n))}const xc="3.5.12";/**
-* @vue/runtime-dom v3.5.12
-* (c) 2018-present Yuxi (Evan) You and Vue contributors
-* @license MIT
-**/let xs;const hr=typeof window<"u"&&window.trustedTypes;if(hr)try{xs=hr.createPolicy("vue",{createHTML:e=>e})}catch{}const to=xs?e=>xs.createHTML(e):e=>e,Ec="http://www.w3.org/2000/svg",Cc="http://www.w3.org/1998/Math/MathML",ke=typeof document<"u"?document:null,pr=ke&&ke.createElement("template"),Tc={insert:(e,t,n)=>{t.insertBefore(e,n||null)},remove:e=>{const t=e.parentNode;t&&t.removeChild(e)},createElement:(e,t,n,s)=>{const r=t==="svg"?ke.createElementNS(Ec,e):t==="mathml"?ke.createElementNS(Cc,e):n?ke.createElement(e,{is:n}):ke.createElement(e);return e==="select"&&s&&s.multiple!=null&&r.setAttribute("multiple",s.multiple),r},createText:e=>ke.createTextNode(e),createComment:e=>ke.createComment(e),setText:(e,t)=>{e.nodeValue=t},setElementText:(e,t)=>{e.textContent=t},parentNode:e=>e.parentNode,nextSibling:e=>e.nextSibling,querySelector:e=>ke.querySelector(e),setScopeId(e,t){e.setAttribute(t,"")},insertStaticContent(e,t,n,s,r,i){const o=n?n.previousSibling:t.lastChild;if(r&&(r===i||r.nextSibling))for(;t.insertBefore(r.cloneNode(!0),n),!(r===i||!(r=r.nextSibling)););else{pr.innerHTML=to(s==="svg"?`${e}`:s==="mathml"?`${e}`:e);const l=pr.content;if(s==="svg"||s==="mathml"){const c=l.firstChild;for(;c.firstChild;)l.appendChild(c.firstChild);l.removeChild(c)}t.insertBefore(l,n)}return[o?o.nextSibling:t.firstChild,n?n.previousSibling:t.lastChild]}},Ye="transition",Lt="animation",Gt=Symbol("_vtc"),no={name:String,type:String,css:{type:Boolean,default:!0},duration:[String,Number,Object],enterFromClass:String,enterActiveClass:String,enterToClass:String,appearFromClass:String,appearActiveClass:String,appearToClass:String,leaveFromClass:String,leaveActiveClass:String,leaveToClass:String},Ac=oe({},mi,no),Rc=e=>(e.displayName="Transition",e.props=Ac,e),ff=Rc((e,{slots:t})=>Ss(Sl,Oc(e),t)),ct=(e,t=[])=>{B(e)?e.forEach(n=>n(...t)):e&&e(...t)},gr=e=>e?B(e)?e.some(t=>t.length>1):e.length>1:!1;function Oc(e){const t={};for(const S in e)S in no||(t[S]=e[S]);if(e.css===!1)return t;const{name:n="v",type:s,duration:r,enterFromClass:i=`${n}-enter-from`,enterActiveClass:o=`${n}-enter-active`,enterToClass:l=`${n}-enter-to`,appearFromClass:c=i,appearActiveClass:u=o,appearToClass:f=l,leaveFromClass:h=`${n}-leave-from`,leaveActiveClass:y=`${n}-leave-active`,leaveToClass:b=`${n}-leave-to`}=e,M=Pc(r),O=M&&M[0],G=M&&M[1],{onBeforeEnter:U,onEnter:W,onEnterCancelled:g,onLeave:p,onLeaveCancelled:R,onBeforeAppear:D=U,onAppear:j=W,onAppearCancelled:K=g}=t,I=(S,V,se)=>{at(S,V?f:l),at(S,V?u:o),se&&se()},_=(S,V)=>{S._isLeaving=!1,at(S,h),at(S,b),at(S,y),V&&V()},L=S=>(V,se)=>{const le=S?j:W,H=()=>I(V,S,se);ct(le,[V,H]),mr(()=>{at(V,S?c:i),Xe(V,S?f:l),gr(le)||yr(V,s,O,H)})};return oe(t,{onBeforeEnter(S){ct(U,[S]),Xe(S,i),Xe(S,o)},onBeforeAppear(S){ct(D,[S]),Xe(S,c),Xe(S,u)},onEnter:L(!1),onAppear:L(!0),onLeave(S,V){S._isLeaving=!0;const se=()=>_(S,V);Xe(S,h),Xe(S,y),Lc(),mr(()=>{S._isLeaving&&(at(S,h),Xe(S,b),gr(p)||yr(S,s,G,se))}),ct(p,[S,se])},onEnterCancelled(S){I(S,!1),ct(g,[S])},onAppearCancelled(S){I(S,!0),ct(K,[S])},onLeaveCancelled(S){_(S),ct(R,[S])}})}function Pc(e){if(e==null)return null;if(ne(e))return[Qn(e.enter),Qn(e.leave)];{const t=Qn(e);return[t,t]}}function Qn(e){return Ao(e)}function Xe(e,t){t.split(/\s+/).forEach(n=>n&&e.classList.add(n)),(e[Gt]||(e[Gt]=new Set)).add(t)}function at(e,t){t.split(/\s+/).forEach(s=>s&&e.classList.remove(s));const n=e[Gt];n&&(n.delete(t),n.size||(e[Gt]=void 0))}function mr(e){requestAnimationFrame(()=>{requestAnimationFrame(e)})}let Ic=0;function yr(e,t,n,s){const r=e._endId=++Ic,i=()=>{r===e._endId&&s()};if(n!=null)return setTimeout(i,n);const{type:o,timeout:l,propCount:c}=Mc(e,t);if(!o)return s();const u=o+"end";let f=0;const h=()=>{e.removeEventListener(u,y),i()},y=b=>{b.target===e&&++f>=c&&h()};setTimeout(()=>{f(n[M]||"").split(", "),r=s(`${Ye}Delay`),i=s(`${Ye}Duration`),o=vr(r,i),l=s(`${Lt}Delay`),c=s(`${Lt}Duration`),u=vr(l,c);let f=null,h=0,y=0;t===Ye?o>0&&(f=Ye,h=o,y=i.length):t===Lt?u>0&&(f=Lt,h=u,y=c.length):(h=Math.max(o,u),f=h>0?o>u?Ye:Lt:null,y=f?f===Ye?i.length:c.length:0);const b=f===Ye&&/\b(transform|all)(,|$)/.test(s(`${Ye}Property`).toString());return{type:f,timeout:h,propCount:y,hasTransform:b}}function vr(e,t){for(;e.length_r(n)+_r(e[s])))}function _r(e){return e==="auto"?0:Number(e.slice(0,-1).replace(",","."))*1e3}function Lc(){return document.body.offsetHeight}function Nc(e,t,n){const s=e[Gt];s&&(t=(t?[t,...s]:[...s]).join(" ")),t==null?e.removeAttribute("class"):n?e.setAttribute("class",t):e.className=t}const br=Symbol("_vod"),Fc=Symbol("_vsh"),Hc=Symbol(""),$c=/(^|;)\s*display\s*:/;function Dc(e,t,n){const s=e.style,r=re(n);let i=!1;if(n&&!r){if(t)if(re(t))for(const o of t.split(";")){const l=o.slice(0,o.indexOf(":")).trim();n[l]==null&&pn(s,l,"")}else for(const o in t)n[o]==null&&pn(s,o,"");for(const o in n)o==="display"&&(i=!0),pn(s,o,n[o])}else if(r){if(t!==n){const o=s[Hc];o&&(n+=";"+o),s.cssText=n,i=$c.test(n)}}else t&&e.removeAttribute("style");br in e&&(e[br]=i?s.display:"",e[Fc]&&(s.display="none"))}const wr=/\s*!important$/;function pn(e,t,n){if(B(n))n.forEach(s=>pn(e,t,s));else if(n==null&&(n=""),t.startsWith("--"))e.setProperty(t,n);else{const s=jc(e,t);wr.test(n)?e.setProperty(st(s),n.replace(wr,""),"important"):e[s]=n}}const Sr=["Webkit","Moz","ms"],Zn={};function jc(e,t){const n=Zn[t];if(n)return n;let s=Me(t);if(s!=="filter"&&s in e)return Zn[t]=s;s=Tn(s);for(let r=0;res||(Wc.then(()=>es=0),es=Date.now());function qc(e,t){const n=s=>{if(!s._vts)s._vts=Date.now();else if(s._vts<=n.attached)return;He(Gc(s,n.value),t,5,[s])};return n.value=e,n.attached=Kc(),n}function Gc(e,t){if(B(t)){const n=e.stopImmediatePropagation;return e.stopImmediatePropagation=()=>{n.call(e),e._stopped=!0},t.map(s=>r=>!r._stopped&&s&&s(r))}else return t}const Rr=e=>e.charCodeAt(0)===111&&e.charCodeAt(1)===110&&e.charCodeAt(2)>96&&e.charCodeAt(2)<123,Yc=(e,t,n,s,r,i)=>{const o=r==="svg";t==="class"?Nc(e,s,o):t==="style"?Dc(e,n,s):Yt(t)?Cs(t)||Bc(e,t,n,s,i):(t[0]==="."?(t=t.slice(1),!0):t[0]==="^"?(t=t.slice(1),!1):Xc(e,t,s,o))?(Cr(e,t,s),!e.tagName.includes("-")&&(t==="value"||t==="checked"||t==="selected")&&Er(e,t,s,o,i,t!=="value")):e._isVueCE&&(/[A-Z]/.test(t)||!re(s))?Cr(e,Me(t),s,i,t):(t==="true-value"?e._trueValue=s:t==="false-value"&&(e._falseValue=s),Er(e,t,s,o))};function Xc(e,t,n,s){if(s)return!!(t==="innerHTML"||t==="textContent"||t in e&&Rr(t)&&q(n));if(t==="spellcheck"||t==="draggable"||t==="translate"||t==="form"||t==="list"&&e.tagName==="INPUT"||t==="type"&&e.tagName==="TEXTAREA")return!1;if(t==="width"||t==="height"){const r=e.tagName;if(r==="IMG"||r==="VIDEO"||r==="CANVAS"||r==="SOURCE")return!1}return Rr(t)&&re(n)?!1:t in e}const zc=["ctrl","shift","alt","meta"],Jc={stop:e=>e.stopPropagation(),prevent:e=>e.preventDefault(),self:e=>e.target!==e.currentTarget,ctrl:e=>!e.ctrlKey,shift:e=>!e.shiftKey,alt:e=>!e.altKey,meta:e=>!e.metaKey,left:e=>"button"in e&&e.button!==0,middle:e=>"button"in e&&e.button!==1,right:e=>"button"in e&&e.button!==2,exact:(e,t)=>zc.some(n=>e[`${n}Key`]&&!t.includes(n))},uf=(e,t)=>{const n=e._withMods||(e._withMods={}),s=t.join(".");return n[s]||(n[s]=(r,...i)=>{for(let o=0;o{const n=e._withKeys||(e._withKeys={}),s=t.join(".");return n[s]||(n[s]=r=>{if(!("key"in r))return;const i=st(r.key);if(t.some(o=>o===i||Qc[o]===i))return e(r)})},Zc=oe({patchProp:Yc},Tc);let ts,Or=!1;function ea(){return ts=Or?ts:Zl(Zc),Or=!0,ts}const hf=(...e)=>{const t=ea().createApp(...e),{mount:n}=t;return t.mount=s=>{const r=na(s);if(r)return n(r,!0,ta(r))},t};function ta(e){if(e instanceof SVGElement)return"svg";if(typeof MathMLElement=="function"&&e instanceof MathMLElement)return"mathml"}function na(e){return re(e)?document.querySelector(e):e}const pf=(e,t)=>{const n=e.__vccOpts||e;for(const[s,r]of t)n[s]=r;return n},sa=window.__VP_SITE_DATA__;function Us(e){return qr()?(Ho(e),!0):!1}function tt(e){return typeof e=="function"?e():ai(e)}const so=typeof window<"u"&&typeof document<"u";typeof WorkerGlobalScope<"u"&&globalThis instanceof WorkerGlobalScope;const ra=Object.prototype.toString,ia=e=>ra.call(e)==="[object Object]",ro=()=>{},Pr=oa();function oa(){var e,t;return so&&((e=window==null?void 0:window.navigator)==null?void 0:e.userAgent)&&(/iP(?:ad|hone|od)/.test(window.navigator.userAgent)||((t=window==null?void 0:window.navigator)==null?void 0:t.maxTouchPoints)>2&&/iPad|Macintosh/.test(window==null?void 0:window.navigator.userAgent))}function la(e,t){function n(...s){return new Promise((r,i)=>{Promise.resolve(e(()=>t.apply(this,s),{fn:t,thisArg:this,args:s})).then(r).catch(i)})}return n}const io=e=>e();function ca(e=io){const t=ue(!0);function n(){t.value=!1}function s(){t.value=!0}const r=(...i)=>{t.value&&e(...i)};return{isActive:In(t),pause:n,resume:s,eventFilter:r}}function aa(e){return jn()}function oo(...e){if(e.length!==1)return al(...e);const t=e[0];return typeof t=="function"?In(ol(()=>({get:t,set:ro}))):ue(t)}function fa(e,t,n={}){const{eventFilter:s=io,...r}=n;return Fe(e,la(s,t),r)}function ua(e,t,n={}){const{eventFilter:s,...r}=n,{eventFilter:i,pause:o,resume:l,isActive:c}=ca(s);return{stop:fa(e,t,{...r,eventFilter:i}),pause:o,resume:l,isActive:c}}function Bs(e,t=!0,n){aa()?Ot(e,n):t?e():Ln(e)}const Ke=so?window:void 0;function lo(e){var t;const n=tt(e);return(t=n==null?void 0:n.$el)!=null?t:n}function Rt(...e){let t,n,s,r;if(typeof e[0]=="string"||Array.isArray(e[0])?([n,s,r]=e,t=Ke):[t,n,s,r]=e,!t)return ro;Array.isArray(n)||(n=[n]),Array.isArray(s)||(s=[s]);const i=[],o=()=>{i.forEach(f=>f()),i.length=0},l=(f,h,y,b)=>(f.addEventListener(h,y,b),()=>f.removeEventListener(h,y,b)),c=Fe(()=>[lo(t),tt(r)],([f,h])=>{if(o(),!f)return;const y=ia(h)?{...h}:h;i.push(...n.flatMap(b=>s.map(M=>l(f,b,M,y))))},{immediate:!0,flush:"post"}),u=()=>{c(),o()};return Us(u),u}function da(e){return typeof e=="function"?e:typeof e=="string"?t=>t.key===e:Array.isArray(e)?t=>e.includes(t.key):()=>!0}function gf(...e){let t,n,s={};e.length===3?(t=e[0],n=e[1],s=e[2]):e.length===2?typeof e[1]=="object"?(t=!0,n=e[0],s=e[1]):(t=e[0],n=e[1]):(t=!0,n=e[0]);const{target:r=Ke,eventName:i="keydown",passive:o=!1,dedupe:l=!1}=s,c=da(t);return Rt(r,i,f=>{f.repeat&&tt(l)||c(f)&&n(f)},o)}function ha(){const e=ue(!1),t=jn();return t&&Ot(()=>{e.value=!0},t),e}function pa(e){const t=ha();return ie(()=>(t.value,!!e()))}function co(e,t={}){const{window:n=Ke}=t,s=pa(()=>n&&"matchMedia"in n&&typeof n.matchMedia=="function");let r;const i=ue(!1),o=u=>{i.value=u.matches},l=()=>{r&&("removeEventListener"in r?r.removeEventListener("change",o):r.removeListener(o))},c=ki(()=>{s.value&&(l(),r=n.matchMedia(tt(e)),"addEventListener"in r?r.addEventListener("change",o):r.addListener(o),i.value=r.matches)});return Us(()=>{c(),l(),r=void 0}),i}const ln=typeof globalThis<"u"?globalThis:typeof window<"u"?window:typeof global<"u"?global:typeof self<"u"?self:{},cn="__vueuse_ssr_handlers__",ga=ma();function ma(){return cn in ln||(ln[cn]=ln[cn]||{}),ln[cn]}function ao(e,t){return ga[e]||t}function ks(e){return co("(prefers-color-scheme: dark)",e)}function ya(e){return e==null?"any":e instanceof Set?"set":e instanceof Map?"map":e instanceof Date?"date":typeof e=="boolean"?"boolean":typeof e=="string"?"string":typeof e=="object"?"object":Number.isNaN(e)?"any":"number"}const va={boolean:{read:e=>e==="true",write:e=>String(e)},object:{read:e=>JSON.parse(e),write:e=>JSON.stringify(e)},number:{read:e=>Number.parseFloat(e),write:e=>String(e)},any:{read:e=>e,write:e=>String(e)},string:{read:e=>e,write:e=>String(e)},map:{read:e=>new Map(JSON.parse(e)),write:e=>JSON.stringify(Array.from(e.entries()))},set:{read:e=>new Set(JSON.parse(e)),write:e=>JSON.stringify(Array.from(e))},date:{read:e=>new Date(e),write:e=>e.toISOString()}},Ir="vueuse-storage";function _a(e,t,n,s={}){var r;const{flush:i="pre",deep:o=!0,listenToStorageChanges:l=!0,writeDefaults:c=!0,mergeDefaults:u=!1,shallow:f,window:h=Ke,eventFilter:y,onError:b=_=>{console.error(_)},initOnMounted:M}=s,O=(f?li:ue)(typeof t=="function"?t():t);if(!n)try{n=ao("getDefaultStorage",()=>{var _;return(_=Ke)==null?void 0:_.localStorage})()}catch(_){b(_)}if(!n)return O;const G=tt(t),U=ya(G),W=(r=s.serializer)!=null?r:va[U],{pause:g,resume:p}=ua(O,()=>D(O.value),{flush:i,deep:o,eventFilter:y});h&&l&&Bs(()=>{n instanceof Storage?Rt(h,"storage",K):Rt(h,Ir,I),M&&K()}),M||K();function R(_,L){if(h){const S={key:e,oldValue:_,newValue:L,storageArea:n};h.dispatchEvent(n instanceof Storage?new StorageEvent("storage",S):new CustomEvent(Ir,{detail:S}))}}function D(_){try{const L=n.getItem(e);if(_==null)R(L,null),n.removeItem(e);else{const S=W.write(_);L!==S&&(n.setItem(e,S),R(L,S))}}catch(L){b(L)}}function j(_){const L=_?_.newValue:n.getItem(e);if(L==null)return c&&G!=null&&n.setItem(e,W.write(G)),G;if(!_&&u){const S=W.read(L);return typeof u=="function"?u(S,G):U==="object"&&!Array.isArray(S)?{...G,...S}:S}else return typeof L!="string"?L:W.read(L)}function K(_){if(!(_&&_.storageArea!==n)){if(_&&_.key==null){O.value=G;return}if(!(_&&_.key!==e)){g();try{(_==null?void 0:_.newValue)!==W.write(O.value)&&(O.value=j(_))}catch(L){b(L)}finally{_?Ln(p):p()}}}}function I(_){K(_.detail)}return O}const ba="*,*::before,*::after{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}";function wa(e={}){const{selector:t="html",attribute:n="class",initialValue:s="auto",window:r=Ke,storage:i,storageKey:o="vueuse-color-scheme",listenToStorageChanges:l=!0,storageRef:c,emitAuto:u,disableTransition:f=!0}=e,h={auto:"",light:"light",dark:"dark",...e.modes||{}},y=ks({window:r}),b=ie(()=>y.value?"dark":"light"),M=c||(o==null?oo(s):_a(o,s,i,{window:r,listenToStorageChanges:l})),O=ie(()=>M.value==="auto"?b.value:M.value),G=ao("updateHTMLAttrs",(p,R,D)=>{const j=typeof p=="string"?r==null?void 0:r.document.querySelector(p):lo(p);if(!j)return;const K=new Set,I=new Set;let _=null;if(R==="class"){const S=D.split(/\s/g);Object.values(h).flatMap(V=>(V||"").split(/\s/g)).filter(Boolean).forEach(V=>{S.includes(V)?K.add(V):I.add(V)})}else _={key:R,value:D};if(K.size===0&&I.size===0&&_===null)return;let L;f&&(L=r.document.createElement("style"),L.appendChild(document.createTextNode(ba)),r.document.head.appendChild(L));for(const S of K)j.classList.add(S);for(const S of I)j.classList.remove(S);_&&j.setAttribute(_.key,_.value),f&&(r.getComputedStyle(L).opacity,document.head.removeChild(L))});function U(p){var R;G(t,n,(R=h[p])!=null?R:p)}function W(p){e.onChanged?e.onChanged(p,U):U(p)}Fe(O,W,{flush:"post",immediate:!0}),Bs(()=>W(O.value));const g=ie({get(){return u?M.value:O.value},set(p){M.value=p}});try{return Object.assign(g,{store:M,system:b,state:O})}catch{return g}}function Sa(e={}){const{valueDark:t="dark",valueLight:n="",window:s=Ke}=e,r=wa({...e,onChanged:(l,c)=>{var u;e.onChanged?(u=e.onChanged)==null||u.call(e,l==="dark",c,l):c(l)},modes:{dark:t,light:n}}),i=ie(()=>r.system?r.system.value:ks({window:s}).value?"dark":"light");return ie({get(){return r.value==="dark"},set(l){const c=l?"dark":"light";i.value===c?r.value="auto":r.value=c}})}function ns(e){return typeof Window<"u"&&e instanceof Window?e.document.documentElement:typeof Document<"u"&&e instanceof Document?e.documentElement:e}function fo(e){const t=window.getComputedStyle(e);if(t.overflowX==="scroll"||t.overflowY==="scroll"||t.overflowX==="auto"&&e.clientWidth1?!0:(t.preventDefault&&t.preventDefault(),!1)}const ss=new WeakMap;function mf(e,t=!1){const n=ue(t);let s=null,r="";Fe(oo(e),l=>{const c=ns(tt(l));if(c){const u=c;if(ss.get(u)||ss.set(u,u.style.overflow),u.style.overflow!=="hidden"&&(r=u.style.overflow),u.style.overflow==="hidden")return n.value=!0;if(n.value)return u.style.overflow="hidden"}},{immediate:!0});const i=()=>{const l=ns(tt(e));!l||n.value||(Pr&&(s=Rt(l,"touchmove",c=>{xa(c)},{passive:!1})),l.style.overflow="hidden",n.value=!0)},o=()=>{const l=ns(tt(e));!l||!n.value||(Pr&&(s==null||s()),l.style.overflow=r,ss.delete(l),n.value=!1)};return Us(o),ie({get(){return n.value},set(l){l?i():o()}})}function yf(e={}){const{window:t=Ke,behavior:n="auto"}=e;if(!t)return{x:ue(0),y:ue(0)};const s=ue(t.scrollX),r=ue(t.scrollY),i=ie({get(){return s.value},set(l){scrollTo({left:l,behavior:n})}}),o=ie({get(){return r.value},set(l){scrollTo({top:l,behavior:n})}});return Rt(t,"scroll",()=>{s.value=t.scrollX,r.value=t.scrollY},{capture:!1,passive:!0}),{x:i,y:o}}function vf(e={}){const{window:t=Ke,initialWidth:n=Number.POSITIVE_INFINITY,initialHeight:s=Number.POSITIVE_INFINITY,listenOrientation:r=!0,includeScrollbar:i=!0,type:o="inner"}=e,l=ue(n),c=ue(s),u=()=>{t&&(o==="outer"?(l.value=t.outerWidth,c.value=t.outerHeight):i?(l.value=t.innerWidth,c.value=t.innerHeight):(l.value=t.document.documentElement.clientWidth,c.value=t.document.documentElement.clientHeight))};if(u(),Bs(u),Rt("resize",u,{passive:!0}),r){const f=co("(orientation: portrait)");Fe(f,()=>u())}return{width:l,height:c}}const rs={BASE_URL:"/learn-wgpu-zh/",DEV:!1,MODE:"production",PROD:!0,SSR:!1};var is={};const uo=/^(?:[a-z]+:|\/\/)/i,Ea="vitepress-theme-appearance",Ca=/#.*$/,Ta=/[?#].*$/,Aa=/(?:(^|\/)index)?\.(?:md|html)$/,pe=typeof document<"u",ho={relativePath:"404.md",filePath:"",title:"404",description:"Not Found",headers:[],frontmatter:{sidebar:!1,layout:"page"},lastUpdated:0,isNotFound:!0};function Ra(e,t,n=!1){if(t===void 0)return!1;if(e=Mr(`/${e}`),n)return new RegExp(t).test(e);if(Mr(t)!==e)return!1;const s=t.match(Ca);return s?(pe?location.hash:"")===s[0]:!0}function Mr(e){return decodeURI(e).replace(Ta,"").replace(Aa,"$1")}function Oa(e){return uo.test(e)}function Pa(e,t){return Object.keys((e==null?void 0:e.locales)||{}).find(n=>n!=="root"&&!Oa(n)&&Ra(t,`/${n}/`,!0))||"root"}function Ia(e,t){var s,r,i,o,l,c,u;const n=Pa(e,t);return Object.assign({},e,{localeIndex:n,lang:((s=e.locales[n])==null?void 0:s.lang)??e.lang,dir:((r=e.locales[n])==null?void 0:r.dir)??e.dir,title:((i=e.locales[n])==null?void 0:i.title)??e.title,titleTemplate:((o=e.locales[n])==null?void 0:o.titleTemplate)??e.titleTemplate,description:((l=e.locales[n])==null?void 0:l.description)??e.description,head:go(e.head,((c=e.locales[n])==null?void 0:c.head)??[]),themeConfig:{...e.themeConfig,...(u=e.locales[n])==null?void 0:u.themeConfig}})}function po(e,t){const n=t.title||e.title,s=t.titleTemplate??e.titleTemplate;if(typeof s=="string"&&s.includes(":title"))return s.replace(/:title/g,n);const r=Ma(e.title,s);return n===r.slice(3)?n:`${n}${r}`}function Ma(e,t){return t===!1?"":t===!0||t===void 0?` | ${e}`:e===t?"":` | ${t}`}function La(e,t){const[n,s]=t;if(n!=="meta")return!1;const r=Object.entries(s)[0];return r==null?!1:e.some(([i,o])=>i===n&&o[r[0]]===r[1])}function go(e,t){return[...e.filter(n=>!La(t,n)),...t]}const Na=/[\u0000-\u001F"#$&*+,:;<=>?[\]^`{|}\u007F]/g,Fa=/^[a-z]:/i;function Lr(e){const t=Fa.exec(e),n=t?t[0]:"";return n+e.slice(n.length).replace(Na,"_").replace(/(^|\/)_+(?=[^/]*$)/,"$1")}const os=new Set;function Ha(e){if(os.size===0){const n=typeof process=="object"&&(is==null?void 0:is.VITE_EXTRA_EXTENSIONS)||(rs==null?void 0:rs.VITE_EXTRA_EXTENSIONS)||"";("3g2,3gp,aac,ai,apng,au,avif,bin,bmp,cer,class,conf,crl,css,csv,dll,doc,eps,epub,exe,gif,gz,ics,ief,jar,jpe,jpeg,jpg,js,json,jsonld,m4a,man,mid,midi,mjs,mov,mp2,mp3,mp4,mpe,mpeg,mpg,mpp,oga,ogg,ogv,ogx,opus,otf,p10,p7c,p7m,p7s,pdf,png,ps,qt,roff,rtf,rtx,ser,svg,t,tif,tiff,tr,ts,tsv,ttf,txt,vtt,wav,weba,webm,webp,woff,woff2,xhtml,xml,yaml,yml,zip"+(n&&typeof n=="string"?","+n:"")).split(",").forEach(s=>os.add(s))}const t=e.split(".").pop();return t==null||!os.has(t.toLowerCase())}const $a=Symbol(),mt=li(sa);function _f(e){const t=ie(()=>Ia(mt.value,e.data.relativePath)),n=t.value.appearance,s=n==="force-dark"?ue(!0):n==="force-auto"?ks():n?Sa({storageKey:Ea,initialValue:()=>n==="dark"?"dark":"auto",...typeof n=="object"?n:{}}):ue(!1),r=ue(pe?location.hash:"");return pe&&window.addEventListener("hashchange",()=>{r.value=location.hash}),Fe(()=>e.data,()=>{r.value=pe?location.hash:""}),{site:t,theme:ie(()=>t.value.themeConfig),page:ie(()=>e.data),frontmatter:ie(()=>e.data.frontmatter),params:ie(()=>e.data.params),lang:ie(()=>t.value.lang),dir:ie(()=>e.data.frontmatter.dir||t.value.dir),localeIndex:ie(()=>t.value.localeIndex||"root"),title:ie(()=>po(t.value,e.data)),description:ie(()=>e.data.description||t.value.description),isDark:s,hash:ie(()=>r.value)}}function Da(){const e=At($a);if(!e)throw new Error("vitepress data not properly injected in app");return e}function ja(e,t){return`${e}${t}`.replace(/\/+/g,"/")}function Nr(e){return uo.test(e)||!e.startsWith("/")?e:ja(mt.value.base,e)}function Va(e){let t=e.replace(/\.html$/,"");if(t=decodeURIComponent(t),t=t.replace(/\/$/,"/index"),pe){const n="/learn-wgpu-zh/";t=Lr(t.slice(n.length).replace(/\//g,"_")||"index")+".md";let s=__VP_HASH_MAP__[t.toLowerCase()];if(s||(t=t.endsWith("_index.md")?t.slice(0,-9)+".md":t.slice(0,-3)+"_index.md",s=__VP_HASH_MAP__[t.toLowerCase()]),!s)return null;t=`${n}assets/${t}.${s}.js`}else t=`./${Lr(t.slice(1).replace(/\//g,"_"))}.md.js`;return t}let gn=[];function bf(e){gn.push(e),Hn(()=>{gn=gn.filter(t=>t!==e)})}function Ua(){let e=mt.value.scrollOffset,t=0,n=24;if(typeof e=="object"&&"padding"in e&&(n=e.padding,e=e.selector),typeof e=="number")t=e;else if(typeof e=="string")t=Fr(e,n);else if(Array.isArray(e))for(const s of e){const r=Fr(s,n);if(r){t=r;break}}return t}function Fr(e,t){const n=document.querySelector(e);if(!n)return 0;const s=n.getBoundingClientRect().bottom;return s<0?0:s+t}const Ba=Symbol(),mo="http://a.com",ka=()=>({path:"/",component:null,data:ho});function wf(e,t){const n=Pn(ka()),s={route:n,go:r};async function r(l=pe?location.href:"/"){var c,u;l=ls(l),await((c=s.onBeforeRouteChange)==null?void 0:c.call(s,l))!==!1&&(pe&&l!==ls(location.href)&&(history.replaceState({scrollPosition:window.scrollY},""),history.pushState({},"",l)),await o(l),await((u=s.onAfterRouteChanged)==null?void 0:u.call(s,l)))}let i=null;async function o(l,c=0,u=!1){var y,b;if(await((y=s.onBeforePageLoad)==null?void 0:y.call(s,l))===!1)return;const f=new URL(l,mo),h=i=f.pathname;try{let M=await e(h);if(!M)throw new Error(`Page not found: ${h}`);if(i===h){i=null;const{default:O,__pageData:G}=M;if(!O)throw new Error(`Invalid route component: ${O}`);await((b=s.onAfterPageLoad)==null?void 0:b.call(s,l)),n.path=pe?h:Nr(h),n.component=dn(O),n.data=dn(G),pe&&Ln(()=>{let U=mt.value.base+G.relativePath.replace(/(?:(^|\/)index)?\.md$/,"$1");if(!mt.value.cleanUrls&&!U.endsWith("/")&&(U+=".html"),U!==f.pathname&&(f.pathname=U,l=U+f.search+f.hash,history.replaceState({},"",l)),f.hash&&!c){let W=null;try{W=document.getElementById(decodeURIComponent(f.hash).slice(1))}catch(g){console.warn(g)}if(W){Hr(W,f.hash);return}}window.scrollTo(0,c)})}}catch(M){if(!/fetch|Page not found/.test(M.message)&&!/^\/404(\.html|\/)?$/.test(l)&&console.error(M),!u)try{const O=await fetch(mt.value.base+"hashmap.json");window.__VP_HASH_MAP__=await O.json(),await o(l,c,!0);return}catch{}if(i===h){i=null,n.path=pe?h:Nr(h),n.component=t?dn(t):null;const O=pe?h.replace(/(^|\/)$/,"$1index").replace(/(\.html)?$/,".md").replace(/^\//,""):"404.md";n.data={...ho,relativePath:O}}}}return pe&&(history.state===null&&history.replaceState({},""),window.addEventListener("click",l=>{if(l.defaultPrevented||!(l.target instanceof Element)||l.target.closest("button")||l.button!==0||l.ctrlKey||l.shiftKey||l.altKey||l.metaKey)return;const c=l.target.closest("a");if(!c||c.closest(".vp-raw")||c.hasAttribute("download")||c.hasAttribute("target"))return;const u=c.getAttribute("href")??(c instanceof SVGAElement?c.getAttribute("xlink:href"):null);if(u==null)return;const{href:f,origin:h,pathname:y,hash:b,search:M}=new URL(u,c.baseURI),O=new URL(location.href);h===O.origin&&Ha(y)&&(l.preventDefault(),y===O.pathname&&M===O.search?(b!==O.hash&&(history.pushState({},"",f),window.dispatchEvent(new HashChangeEvent("hashchange",{oldURL:O.href,newURL:f}))),b?Hr(c,b,c.classList.contains("header-anchor")):window.scrollTo(0,0)):r(f))},{capture:!0}),window.addEventListener("popstate",async l=>{var c;l.state!==null&&(await o(ls(location.href),l.state&&l.state.scrollPosition||0),(c=s.onAfterRouteChanged)==null||c.call(s,location.href))}),window.addEventListener("hashchange",l=>{l.preventDefault()})),s}function Wa(){const e=At(Ba);if(!e)throw new Error("useRouter() is called without provider.");return e}function yo(){return Wa().route}function Hr(e,t,n=!1){let s=null;try{s=e.classList.contains("header-anchor")?e:document.getElementById(decodeURIComponent(t).slice(1))}catch(r){console.warn(r)}if(s){let r=function(){!n||Math.abs(o-window.scrollY)>window.innerHeight?window.scrollTo(0,o):window.scrollTo({left:0,top:o,behavior:"smooth"})};const i=parseInt(window.getComputedStyle(s).paddingTop,10),o=window.scrollY+s.getBoundingClientRect().top-Ua()+i;requestAnimationFrame(r)}}function ls(e){const t=new URL(e,mo);return t.pathname=t.pathname.replace(/(^|\/)index(\.html)?$/,"$1"),mt.value.cleanUrls?t.pathname=t.pathname.replace(/\.html$/,""):!t.pathname.endsWith("/")&&!t.pathname.endsWith(".html")&&(t.pathname+=".html"),t.pathname+t.search+t.hash}const an=()=>gn.forEach(e=>e()),Sf=wi({name:"VitePressContent",props:{as:{type:[Object,String],default:"div"}},setup(e){const t=yo(),{frontmatter:n,site:s}=Da();return Fe(n,an,{deep:!0,flush:"post"}),()=>Ss(e.as,s.value.contentProps??{style:{position:"relative"}},[t.component?Ss(t.component,{onVnodeMounted:an,onVnodeUpdated:an,onVnodeUnmounted:an}):"404 Page Not Found"])}}),Ka="modulepreload",qa=function(e){return"/learn-wgpu-zh/"+e},$r={},xf=function(t,n,s){let r=Promise.resolve();if(n&&n.length>0){document.getElementsByTagName("link");const o=document.querySelector("meta[property=csp-nonce]"),l=(o==null?void 0:o.nonce)||(o==null?void 0:o.getAttribute("nonce"));r=Promise.allSettled(n.map(c=>{if(c=qa(c),c in $r)return;$r[c]=!0;const u=c.endsWith(".css"),f=u?'[rel="stylesheet"]':"";if(document.querySelector(`link[href="${c}"]${f}`))return;const h=document.createElement("link");if(h.rel=u?"stylesheet":Ka,u||(h.as="script"),h.crossOrigin="",h.href=c,l&&h.setAttribute("nonce",l),document.head.appendChild(h),u)return new Promise((y,b)=>{h.addEventListener("load",y),h.addEventListener("error",()=>b(new Error(`Unable to preload CSS for ${c}`)))})}))}function i(o){const l=new Event("vite:preloadError",{cancelable:!0});if(l.payload=o,window.dispatchEvent(l),!l.defaultPrevented)throw o}return r.then(o=>{for(const l of o||[])l.status==="rejected"&&i(l.reason);return t().catch(i)})},Ef=wi({setup(e,{slots:t}){const n=ue(!1);return Ot(()=>{n.value=!0}),()=>n.value&&t.default?t.default():null}});function Cf(){pe&&window.addEventListener("click",e=>{var n;const t=e.target;if(t.matches(".vp-code-group input")){const s=(n=t.parentElement)==null?void 0:n.parentElement;if(!s)return;const r=Array.from(s.querySelectorAll("input")).indexOf(t);if(r<0)return;const i=s.querySelector(".blocks");if(!i)return;const o=Array.from(i.children).find(u=>u.classList.contains("active"));if(!o)return;const l=i.children[r];if(!l||o===l)return;o.classList.remove("active"),l.classList.add("active");const c=s==null?void 0:s.querySelector(`label[for="${t.id}"]`);c==null||c.scrollIntoView({block:"nearest"})}})}function Tf(){if(pe){const e=new WeakMap;window.addEventListener("click",t=>{var s;const n=t.target;if(n.matches('div[class*="language-"] > button.copy')){const r=n.parentElement,i=(s=n.nextElementSibling)==null?void 0:s.nextElementSibling;if(!r||!i)return;const o=/language-(shellscript|shell|bash|sh|zsh)/.test(r.className),l=[".vp-copy-ignore",".diff.remove"],c=i.cloneNode(!0);c.querySelectorAll(l.join(",")).forEach(f=>f.remove());let u=c.textContent||"";o&&(u=u.replace(/^ *(\$|>) /gm,"").trim()),Ga(u).then(()=>{n.classList.add("copied"),clearTimeout(e.get(n));const f=setTimeout(()=>{n.classList.remove("copied"),n.blur(),e.delete(n)},2e3);e.set(n,f)})}})}}async function Ga(e){try{return navigator.clipboard.writeText(e)}catch{const t=document.createElement("textarea"),n=document.activeElement;t.value=e,t.setAttribute("readonly",""),t.style.contain="strict",t.style.position="absolute",t.style.left="-9999px",t.style.fontSize="12pt";const s=document.getSelection(),r=s?s.rangeCount>0&&s.getRangeAt(0):null;document.body.appendChild(t),t.select(),t.selectionStart=0,t.selectionEnd=e.length,document.execCommand("copy"),document.body.removeChild(t),r&&(s.removeAllRanges(),s.addRange(r)),n&&n.focus()}}function Af(e,t){let n=!0,s=[];const r=i=>{if(n){n=!1,i.forEach(l=>{const c=cs(l);for(const u of document.head.children)if(u.isEqualNode(c)){s.push(u);return}});return}const o=i.map(cs);s.forEach((l,c)=>{const u=o.findIndex(f=>f==null?void 0:f.isEqualNode(l??null));u!==-1?delete o[u]:(l==null||l.remove(),delete s[c])}),o.forEach(l=>l&&document.head.appendChild(l)),s=[...s,...o].filter(Boolean)};ki(()=>{const i=e.data,o=t.value,l=i&&i.description,c=i&&i.frontmatter.head||[],u=po(o,i);u!==document.title&&(document.title=u);const f=l||o.description;let h=document.querySelector("meta[name=description]");h?h.getAttribute("content")!==f&&h.setAttribute("content",f):cs(["meta",{name:"description",content:f}]),r(go(o.head,Xa(c)))})}function cs([e,t,n]){const s=document.createElement(e);for(const r in t)s.setAttribute(r,t[r]);return n&&(s.innerHTML=n),e==="script"&&t.async==null&&(s.async=!1),s}function Ya(e){return e[0]==="meta"&&e[1]&&e[1].name==="description"}function Xa(e){return e.filter(t=>!Ya(t))}const as=new Set,vo=()=>document.createElement("link"),za=e=>{const t=vo();t.rel="prefetch",t.href=e,document.head.appendChild(t)},Ja=e=>{const t=new XMLHttpRequest;t.open("GET",e,t.withCredentials=!0),t.send()};let fn;const Qa=pe&&(fn=vo())&&fn.relList&&fn.relList.supports&&fn.relList.supports("prefetch")?za:Ja;function Rf(){if(!pe||!window.IntersectionObserver)return;let e;if((e=navigator.connection)&&(e.saveData||/2g/.test(e.effectiveType)))return;const t=window.requestIdleCallback||setTimeout;let n=null;const s=()=>{n&&n.disconnect(),n=new IntersectionObserver(i=>{i.forEach(o=>{if(o.isIntersecting){const l=o.target;n.unobserve(l);const{pathname:c}=l;if(!as.has(c)){as.add(c);const u=Va(c);u&&Qa(u)}}})}),t(()=>{document.querySelectorAll("#app a").forEach(i=>{const{hostname:o,pathname:l}=new URL(i.href instanceof SVGAnimatedString?i.href.animVal:i.href,i.baseURI),c=l.match(/\.\w+$/);c&&c[0]!==".html"||i.target!=="_blank"&&o===location.hostname&&(l!==location.pathname?n.observe(i):as.add(l))})})};Ot(s);const r=yo();Fe(()=>r.path,s),Hn(()=>{n&&n.disconnect()})}export{rf as $,Ua as A,Za as B,tf as C,li as D,bf as E,Se as F,de as G,ef as H,uo as I,yo as J,pc as K,At as L,vf as M,Rs as N,gf as O,Ln as P,yf as Q,pe as R,In as S,ff as T,mf as U,ql as V,df as W,sf as X,Ei as Y,uf as Z,pf as _,Ji as a,xf as a0,cf as a1,Af as a2,Ba as a3,_f as a4,$a as a5,Sf as a6,Ef as a7,mt as a8,hf as a9,wf as aa,Va as ab,Rf as ac,Tf as ad,Cf as ae,Ss as af,bs as b,lf as c,wi as d,af as e,Ha as f,Nr as g,ie as h,Oa as i,zi as j,ai as k,Ra as l,co as m,Os as n,_s as o,ue as p,Fe as q,nf as r,ki as s,No as t,Da as u,Ot as v,vl as w,Hn as x,of as y,Ml as z};
diff --git a/assets/chunks/framework.DyadSNS9.js b/assets/chunks/framework.DyadSNS9.js
new file mode 100644
index 000000000..e42485b83
--- /dev/null
+++ b/assets/chunks/framework.DyadSNS9.js
@@ -0,0 +1,18 @@
+/**
+* @vue/shared v3.5.13
+* (c) 2018-present Yuxi (Evan) You and Vue contributors
+* @license MIT
+**//*! #__NO_SIDE_EFFECTS__ */function Es(e){const t=Object.create(null);for(const n of e.split(","))t[n]=1;return n=>n in t}const te={},St=[],Ue=()=>{},xo=()=>!1,Xt=e=>e.charCodeAt(0)===111&&e.charCodeAt(1)===110&&(e.charCodeAt(2)>122||e.charCodeAt(2)<97),Cs=e=>e.startsWith("onUpdate:"),le=Object.assign,Ts=(e,t)=>{const n=e.indexOf(t);n>-1&&e.splice(n,1)},Eo=Object.prototype.hasOwnProperty,z=(e,t)=>Eo.call(e,t),k=Array.isArray,xt=e=>En(e)==="[object Map]",jr=e=>En(e)==="[object Set]",q=e=>typeof e=="function",re=e=>typeof e=="string",Ge=e=>typeof e=="symbol",ne=e=>e!==null&&typeof e=="object",Vr=e=>(ne(e)||q(e))&&q(e.then)&&q(e.catch),Ur=Object.prototype.toString,En=e=>Ur.call(e),Co=e=>En(e).slice(8,-1),kr=e=>En(e)==="[object Object]",As=e=>re(e)&&e!=="NaN"&&e[0]!=="-"&&""+parseInt(e,10)===e,Et=Es(",key,ref,ref_for,ref_key,onVnodeBeforeMount,onVnodeMounted,onVnodeBeforeUpdate,onVnodeUpdated,onVnodeBeforeUnmount,onVnodeUnmounted"),Cn=e=>{const t=Object.create(null);return n=>t[n]||(t[n]=e(n))},To=/-(\w)/g,Le=Cn(e=>e.replace(To,(t,n)=>n?n.toUpperCase():"")),Ao=/\B([A-Z])/g,st=Cn(e=>e.replace(Ao,"-$1").toLowerCase()),Tn=Cn(e=>e.charAt(0).toUpperCase()+e.slice(1)),dn=Cn(e=>e?`on${Tn(e)}`:""),et=(e,t)=>!Object.is(e,t),Bn=(e,...t)=>{for(let n=0;n{Object.defineProperty(e,t,{configurable:!0,enumerable:!1,writable:s,value:n})},Ro=e=>{const t=parseFloat(e);return isNaN(t)?e:t},Oo=e=>{const t=re(e)?Number(e):NaN;return isNaN(t)?e:t};let Ys;const An=()=>Ys||(Ys=typeof globalThis<"u"?globalThis:typeof self<"u"?self:typeof window<"u"?window:typeof global<"u"?global:{});function Rs(e){if(k(e)){const t={};for(let n=0;n{if(n){const s=n.split(Io);s.length>1&&(t[s[0].trim()]=s[1].trim())}}),t}function Os(e){let t="";if(re(e))t=e;else if(k(e))for(let n=0;n!!(e&&e.__v_isRef===!0),Ho=e=>re(e)?e:e==null?"":k(e)||ne(e)&&(e.toString===Ur||!q(e.toString))?Kr(e)?Ho(e.value):JSON.stringify(e,qr,2):String(e),qr=(e,t)=>Kr(t)?qr(e,t.value):xt(t)?{[`Map(${t.size})`]:[...t.entries()].reduce((n,[s,r],i)=>(n[Wn(s,i)+" =>"]=r,n),{})}:jr(t)?{[`Set(${t.size})`]:[...t.values()].map(n=>Wn(n))}:Ge(t)?Wn(t):ne(t)&&!k(t)&&!kr(t)?String(t):t,Wn=(e,t="")=>{var n;return Ge(e)?`Symbol(${(n=e.description)!=null?n:t})`:e};/**
+* @vue/reactivity v3.5.13
+* (c) 2018-present Yuxi (Evan) You and Vue contributors
+* @license MIT
+**/let be;class $o{constructor(t=!1){this.detached=t,this._active=!0,this.effects=[],this.cleanups=[],this._isPaused=!1,this.parent=be,!t&&be&&(this.index=(be.scopes||(be.scopes=[])).push(this)-1)}get active(){return this._active}pause(){if(this._active){this._isPaused=!0;let t,n;if(this.scopes)for(t=0,n=this.scopes.length;t0)return;if(Ht){let t=Ht;for(Ht=void 0;t;){const n=t.next;t.next=void 0,t.flags&=-9,t=n}}let e;for(;Ft;){let t=Ft;for(Ft=void 0;t;){const n=t.next;if(t.next=void 0,t.flags&=-9,t.flags&1)try{t.trigger()}catch(s){e||(e=s)}t=n}}if(e)throw e}function zr(e){for(let t=e.deps;t;t=t.nextDep)t.version=-1,t.prevActiveLink=t.dep.activeLink,t.dep.activeLink=t}function Qr(e){let t,n=e.depsTail,s=n;for(;s;){const r=s.prevDep;s.version===-1?(s===n&&(n=r),Ls(s),jo(s)):t=s,s.dep.activeLink=s.prevActiveLink,s.prevActiveLink=void 0,s=r}e.deps=t,e.depsTail=n}function fs(e){for(let t=e.deps;t;t=t.nextDep)if(t.dep.version!==t.version||t.dep.computed&&(Zr(t.dep.computed)||t.dep.version!==t.version))return!0;return!!e._dirty}function Zr(e){if(e.flags&4&&!(e.flags&16)||(e.flags&=-17,e.globalVersion===Vt))return;e.globalVersion=Vt;const t=e.dep;if(e.flags|=2,t.version>0&&!e.isSSR&&e.deps&&!fs(e)){e.flags&=-3;return}const n=ee,s=Ne;ee=e,Ne=!0;try{zr(e);const r=e.fn(e._value);(t.version===0||et(r,e._value))&&(e._value=r,t.version++)}catch(r){throw t.version++,r}finally{ee=n,Ne=s,Qr(e),e.flags&=-3}}function Ls(e,t=!1){const{dep:n,prevSub:s,nextSub:r}=e;if(s&&(s.nextSub=r,e.prevSub=void 0),r&&(r.prevSub=s,e.nextSub=void 0),n.subs===e&&(n.subs=s,!s&&n.computed)){n.computed.flags&=-5;for(let i=n.computed.deps;i;i=i.nextDep)Ls(i,!0)}!t&&!--n.sc&&n.map&&n.map.delete(n.key)}function jo(e){const{prevDep:t,nextDep:n}=e;t&&(t.nextDep=n,e.prevDep=void 0),n&&(n.prevDep=t,e.nextDep=void 0)}let Ne=!0;const ei=[];function rt(){ei.push(Ne),Ne=!1}function it(){const e=ei.pop();Ne=e===void 0?!0:e}function Xs(e){const{cleanup:t}=e;if(e.cleanup=void 0,t){const n=ee;ee=void 0;try{t()}finally{ee=n}}}let Vt=0;class Vo{constructor(t,n){this.sub=t,this.dep=n,this.version=n.version,this.nextDep=this.prevDep=this.nextSub=this.prevSub=this.prevActiveLink=void 0}}class Rn{constructor(t){this.computed=t,this.version=0,this.activeLink=void 0,this.subs=void 0,this.map=void 0,this.key=void 0,this.sc=0}track(t){if(!ee||!Ne||ee===this.computed)return;let n=this.activeLink;if(n===void 0||n.sub!==ee)n=this.activeLink=new Vo(ee,this),ee.deps?(n.prevDep=ee.depsTail,ee.depsTail.nextDep=n,ee.depsTail=n):ee.deps=ee.depsTail=n,ti(n);else if(n.version===-1&&(n.version=this.version,n.nextDep)){const s=n.nextDep;s.prevDep=n.prevDep,n.prevDep&&(n.prevDep.nextDep=s),n.prevDep=ee.depsTail,n.nextDep=void 0,ee.depsTail.nextDep=n,ee.depsTail=n,ee.deps===n&&(ee.deps=s)}return n}trigger(t){this.version++,Vt++,this.notify(t)}notify(t){Ps();try{for(let n=this.subs;n;n=n.prevSub)n.sub.notify()&&n.sub.dep.notify()}finally{Is()}}}function ti(e){if(e.dep.sc++,e.sub.flags&4){const t=e.dep.computed;if(t&&!e.dep.subs){t.flags|=20;for(let s=t.deps;s;s=s.nextDep)ti(s)}const n=e.dep.subs;n!==e&&(e.prevSub=n,n&&(n.nextSub=e)),e.dep.subs=e}}const yn=new WeakMap,dt=Symbol(""),us=Symbol(""),Ut=Symbol("");function ge(e,t,n){if(Ne&&ee){let s=yn.get(e);s||yn.set(e,s=new Map);let r=s.get(n);r||(s.set(n,r=new Rn),r.map=s,r.key=n),r.track()}}function Ke(e,t,n,s,r,i){const o=yn.get(e);if(!o){Vt++;return}const l=c=>{c&&c.trigger()};if(Ps(),t==="clear")o.forEach(l);else{const c=k(e),u=c&&As(n);if(c&&n==="length"){const a=Number(s);o.forEach((h,y)=>{(y==="length"||y===Ut||!Ge(y)&&y>=a)&&l(h)})}else switch((n!==void 0||o.has(void 0))&&l(o.get(n)),u&&l(o.get(Ut)),t){case"add":c?u&&l(o.get("length")):(l(o.get(dt)),xt(e)&&l(o.get(us)));break;case"delete":c||(l(o.get(dt)),xt(e)&&l(o.get(us)));break;case"set":xt(e)&&l(o.get(dt));break}}Is()}function Uo(e,t){const n=yn.get(e);return n&&n.get(t)}function _t(e){const t=J(e);return t===e?t:(ge(t,"iterate",Ut),Ie(e)?t:t.map(me))}function On(e){return ge(e=J(e),"iterate",Ut),e}const ko={__proto__:null,[Symbol.iterator](){return qn(this,Symbol.iterator,me)},concat(...e){return _t(this).concat(...e.map(t=>k(t)?_t(t):t))},entries(){return qn(this,"entries",e=>(e[1]=me(e[1]),e))},every(e,t){return ke(this,"every",e,t,void 0,arguments)},filter(e,t){return ke(this,"filter",e,t,n=>n.map(me),arguments)},find(e,t){return ke(this,"find",e,t,me,arguments)},findIndex(e,t){return ke(this,"findIndex",e,t,void 0,arguments)},findLast(e,t){return ke(this,"findLast",e,t,me,arguments)},findLastIndex(e,t){return ke(this,"findLastIndex",e,t,void 0,arguments)},forEach(e,t){return ke(this,"forEach",e,t,void 0,arguments)},includes(...e){return Gn(this,"includes",e)},indexOf(...e){return Gn(this,"indexOf",e)},join(e){return _t(this).join(e)},lastIndexOf(...e){return Gn(this,"lastIndexOf",e)},map(e,t){return ke(this,"map",e,t,void 0,arguments)},pop(){return Lt(this,"pop")},push(...e){return Lt(this,"push",e)},reduce(e,...t){return Js(this,"reduce",e,t)},reduceRight(e,...t){return Js(this,"reduceRight",e,t)},shift(){return Lt(this,"shift")},some(e,t){return ke(this,"some",e,t,void 0,arguments)},splice(...e){return Lt(this,"splice",e)},toReversed(){return _t(this).toReversed()},toSorted(e){return _t(this).toSorted(e)},toSpliced(...e){return _t(this).toSpliced(...e)},unshift(...e){return Lt(this,"unshift",e)},values(){return qn(this,"values",me)}};function qn(e,t,n){const s=On(e),r=s[t]();return s!==e&&!Ie(e)&&(r._next=r.next,r.next=()=>{const i=r._next();return i.value&&(i.value=n(i.value)),i}),r}const Bo=Array.prototype;function ke(e,t,n,s,r,i){const o=On(e),l=o!==e&&!Ie(e),c=o[t];if(c!==Bo[t]){const h=c.apply(e,i);return l?me(h):h}let u=n;o!==e&&(l?u=function(h,y){return n.call(this,me(h),y,e)}:n.length>2&&(u=function(h,y){return n.call(this,h,y,e)}));const a=c.call(o,u,s);return l&&r?r(a):a}function Js(e,t,n,s){const r=On(e);let i=n;return r!==e&&(Ie(e)?n.length>3&&(i=function(o,l,c){return n.call(this,o,l,c,e)}):i=function(o,l,c){return n.call(this,o,me(l),c,e)}),r[t](i,...s)}function Gn(e,t,n){const s=J(e);ge(s,"iterate",Ut);const r=s[t](...n);return(r===-1||r===!1)&&Fs(n[0])?(n[0]=J(n[0]),s[t](...n)):r}function Lt(e,t,n=[]){rt(),Ps();const s=J(e)[t].apply(e,n);return Is(),it(),s}const Wo=Es("__proto__,__v_isRef,__isVue"),ni=new Set(Object.getOwnPropertyNames(Symbol).filter(e=>e!=="arguments"&&e!=="caller").map(e=>Symbol[e]).filter(Ge));function Ko(e){Ge(e)||(e=String(e));const t=J(this);return ge(t,"has",e),t.hasOwnProperty(e)}class si{constructor(t=!1,n=!1){this._isReadonly=t,this._isShallow=n}get(t,n,s){if(n==="__v_skip")return t.__v_skip;const r=this._isReadonly,i=this._isShallow;if(n==="__v_isReactive")return!r;if(n==="__v_isReadonly")return r;if(n==="__v_isShallow")return i;if(n==="__v_raw")return s===(r?i?tl:li:i?oi:ii).get(t)||Object.getPrototypeOf(t)===Object.getPrototypeOf(s)?t:void 0;const o=k(t);if(!r){let c;if(o&&(c=ko[n]))return c;if(n==="hasOwnProperty")return Ko}const l=Reflect.get(t,n,ce(t)?t:s);return(Ge(n)?ni.has(n):Wo(n))||(r||ge(t,"get",n),i)?l:ce(l)?o&&As(n)?l:l.value:ne(l)?r?In(l):Pn(l):l}}class ri extends si{constructor(t=!1){super(!1,t)}set(t,n,s,r){let i=t[n];if(!this._isShallow){const c=yt(i);if(!Ie(s)&&!yt(s)&&(i=J(i),s=J(s)),!k(t)&&ce(i)&&!ce(s))return c?!1:(i.value=s,!0)}const o=k(t)&&As(n)?Number(n)e,en=e=>Reflect.getPrototypeOf(e);function Jo(e,t,n){return function(...s){const r=this.__v_raw,i=J(r),o=xt(i),l=e==="entries"||e===Symbol.iterator&&o,c=e==="keys"&&o,u=r[e](...s),a=n?ds:t?hs:me;return!t&&ge(i,"iterate",c?us:dt),{next(){const{value:h,done:y}=u.next();return y?{value:h,done:y}:{value:l?[a(h[0]),a(h[1])]:a(h),done:y}},[Symbol.iterator](){return this}}}}function tn(e){return function(...t){return e==="delete"?!1:e==="clear"?void 0:this}}function zo(e,t){const n={get(r){const i=this.__v_raw,o=J(i),l=J(r);e||(et(r,l)&&ge(o,"get",r),ge(o,"get",l));const{has:c}=en(o),u=t?ds:e?hs:me;if(c.call(o,r))return u(i.get(r));if(c.call(o,l))return u(i.get(l));i!==o&&i.get(r)},get size(){const r=this.__v_raw;return!e&&ge(J(r),"iterate",dt),Reflect.get(r,"size",r)},has(r){const i=this.__v_raw,o=J(i),l=J(r);return e||(et(r,l)&&ge(o,"has",r),ge(o,"has",l)),r===l?i.has(r):i.has(r)||i.has(l)},forEach(r,i){const o=this,l=o.__v_raw,c=J(l),u=t?ds:e?hs:me;return!e&&ge(c,"iterate",dt),l.forEach((a,h)=>r.call(i,u(a),u(h),o))}};return le(n,e?{add:tn("add"),set:tn("set"),delete:tn("delete"),clear:tn("clear")}:{add(r){!t&&!Ie(r)&&!yt(r)&&(r=J(r));const i=J(this);return en(i).has.call(i,r)||(i.add(r),Ke(i,"add",r,r)),this},set(r,i){!t&&!Ie(i)&&!yt(i)&&(i=J(i));const o=J(this),{has:l,get:c}=en(o);let u=l.call(o,r);u||(r=J(r),u=l.call(o,r));const a=c.call(o,r);return o.set(r,i),u?et(i,a)&&Ke(o,"set",r,i):Ke(o,"add",r,i),this},delete(r){const i=J(this),{has:o,get:l}=en(i);let c=o.call(i,r);c||(r=J(r),c=o.call(i,r)),l&&l.call(i,r);const u=i.delete(r);return c&&Ke(i,"delete",r,void 0),u},clear(){const r=J(this),i=r.size!==0,o=r.clear();return i&&Ke(r,"clear",void 0,void 0),o}}),["keys","values","entries",Symbol.iterator].forEach(r=>{n[r]=Jo(r,e,t)}),n}function Ms(e,t){const n=zo(e,t);return(s,r,i)=>r==="__v_isReactive"?!e:r==="__v_isReadonly"?e:r==="__v_raw"?s:Reflect.get(z(n,r)&&r in s?n:s,r,i)}const Qo={get:Ms(!1,!1)},Zo={get:Ms(!1,!0)},el={get:Ms(!0,!1)};const ii=new WeakMap,oi=new WeakMap,li=new WeakMap,tl=new WeakMap;function nl(e){switch(e){case"Object":case"Array":return 1;case"Map":case"Set":case"WeakMap":case"WeakSet":return 2;default:return 0}}function sl(e){return e.__v_skip||!Object.isExtensible(e)?0:nl(Co(e))}function Pn(e){return yt(e)?e:Ns(e,!1,Go,Qo,ii)}function rl(e){return Ns(e,!1,Xo,Zo,oi)}function In(e){return Ns(e,!0,Yo,el,li)}function Ns(e,t,n,s,r){if(!ne(e)||e.__v_raw&&!(t&&e.__v_isReactive))return e;const i=r.get(e);if(i)return i;const o=sl(e);if(o===0)return e;const l=new Proxy(e,o===2?s:n);return r.set(e,l),l}function ht(e){return yt(e)?ht(e.__v_raw):!!(e&&e.__v_isReactive)}function yt(e){return!!(e&&e.__v_isReadonly)}function Ie(e){return!!(e&&e.__v_isShallow)}function Fs(e){return e?!!e.__v_raw:!1}function J(e){const t=e&&e.__v_raw;return t?J(t):e}function hn(e){return!z(e,"__v_skip")&&Object.isExtensible(e)&&Br(e,"__v_skip",!0),e}const me=e=>ne(e)?Pn(e):e,hs=e=>ne(e)?In(e):e;function ce(e){return e?e.__v_isRef===!0:!1}function ue(e){return ai(e,!1)}function ci(e){return ai(e,!0)}function ai(e,t){return ce(e)?e:new il(e,t)}class il{constructor(t,n){this.dep=new Rn,this.__v_isRef=!0,this.__v_isShallow=!1,this._rawValue=n?t:J(t),this._value=n?t:me(t),this.__v_isShallow=n}get value(){return this.dep.track(),this._value}set value(t){const n=this._rawValue,s=this.__v_isShallow||Ie(t)||yt(t);t=s?t:J(t),et(t,n)&&(this._rawValue=t,this._value=s?t:me(t),this.dep.trigger())}}function fi(e){return ce(e)?e.value:e}const ol={get:(e,t,n)=>t==="__v_raw"?e:fi(Reflect.get(e,t,n)),set:(e,t,n,s)=>{const r=e[t];return ce(r)&&!ce(n)?(r.value=n,!0):Reflect.set(e,t,n,s)}};function ui(e){return ht(e)?e:new Proxy(e,ol)}class ll{constructor(t){this.__v_isRef=!0,this._value=void 0;const n=this.dep=new Rn,{get:s,set:r}=t(n.track.bind(n),n.trigger.bind(n));this._get=s,this._set=r}get value(){return this._value=this._get()}set value(t){this._set(t)}}function cl(e){return new ll(e)}class al{constructor(t,n,s){this._object=t,this._key=n,this._defaultValue=s,this.__v_isRef=!0,this._value=void 0}get value(){const t=this._object[this._key];return this._value=t===void 0?this._defaultValue:t}set value(t){this._object[this._key]=t}get dep(){return Uo(J(this._object),this._key)}}class fl{constructor(t){this._getter=t,this.__v_isRef=!0,this.__v_isReadonly=!0,this._value=void 0}get value(){return this._value=this._getter()}}function ul(e,t,n){return ce(e)?e:q(e)?new fl(e):ne(e)&&arguments.length>1?dl(e,t,n):ue(e)}function dl(e,t,n){const s=e[t];return ce(s)?s:new al(e,t,n)}class hl{constructor(t,n,s){this.fn=t,this.setter=n,this._value=void 0,this.dep=new Rn(this),this.__v_isRef=!0,this.deps=void 0,this.depsTail=void 0,this.flags=16,this.globalVersion=Vt-1,this.next=void 0,this.effect=this,this.__v_isReadonly=!n,this.isSSR=s}notify(){if(this.flags|=16,!(this.flags&8)&&ee!==this)return Jr(this,!0),!0}get value(){const t=this.dep.track();return Zr(this),t&&(t.version=this.dep.version),this._value}set value(t){this.setter&&this.setter(t)}}function pl(e,t,n=!1){let s,r;return q(e)?s=e:(s=e.get,r=e.set),new hl(s,r,n)}const nn={},vn=new WeakMap;let ft;function gl(e,t=!1,n=ft){if(n){let s=vn.get(n);s||vn.set(n,s=[]),s.push(e)}}function ml(e,t,n=te){const{immediate:s,deep:r,once:i,scheduler:o,augmentJob:l,call:c}=n,u=p=>r?p:Ie(p)||r===!1||r===0?Ze(p,1):Ze(p);let a,h,y,b,L=!1,O=!1;if(ce(e)?(h=()=>e.value,L=Ie(e)):ht(e)?(h=()=>u(e),L=!0):k(e)?(O=!0,L=e.some(p=>ht(p)||Ie(p)),h=()=>e.map(p=>{if(ce(p))return p.value;if(ht(p))return u(p);if(q(p))return c?c(p,2):p()})):q(e)?t?h=c?()=>c(e,2):e:h=()=>{if(y){rt();try{y()}finally{it()}}const p=ft;ft=a;try{return c?c(e,3,[b]):e(b)}finally{ft=p}}:h=Ue,t&&r){const p=h,A=r===!0?1/0:r;h=()=>Ze(p(),A)}const G=Gr(),U=()=>{a.stop(),G&&G.active&&Ts(G.effects,a)};if(i&&t){const p=t;t=(...A)=>{p(...A),U()}}let W=O?new Array(e.length).fill(nn):nn;const g=p=>{if(!(!(a.flags&1)||!a.dirty&&!p))if(t){const A=a.run();if(r||L||(O?A.some((D,j)=>et(D,W[j])):et(A,W))){y&&y();const D=ft;ft=a;try{const j=[A,W===nn?void 0:O&&W[0]===nn?[]:W,b];c?c(t,3,j):t(...j),W=A}finally{ft=D}}}else a.run()};return l&&l(g),a=new Yr(h),a.scheduler=o?()=>o(g,!1):g,b=p=>gl(p,!1,a),y=a.onStop=()=>{const p=vn.get(a);if(p){if(c)c(p,4);else for(const A of p)A();vn.delete(a)}},t?s?g(!0):W=a.run():o?o(g.bind(null,!0),!0):a.run(),U.pause=a.pause.bind(a),U.resume=a.resume.bind(a),U.stop=U,U}function Ze(e,t=1/0,n){if(t<=0||!ne(e)||e.__v_skip||(n=n||new Set,n.has(e)))return e;if(n.add(e),t--,ce(e))Ze(e.value,t,n);else if(k(e))for(let s=0;s{Ze(s,t,n)});else if(kr(e)){for(const s in e)Ze(e[s],t,n);for(const s of Object.getOwnPropertySymbols(e))Object.prototype.propertyIsEnumerable.call(e,s)&&Ze(e[s],t,n)}return e}/**
+* @vue/runtime-core v3.5.13
+* (c) 2018-present Yuxi (Evan) You and Vue contributors
+* @license MIT
+**/function Jt(e,t,n,s){try{return s?e(...s):e()}catch(r){Ln(r,t,n)}}function He(e,t,n,s){if(q(e)){const r=Jt(e,t,n,s);return r&&Vr(r)&&r.catch(i=>{Ln(i,t,n)}),r}if(k(e)){const r=[];for(let i=0;i>>1,r=we[s],i=kt(r);i=kt(n)?we.push(e):we.splice(vl(t),0,e),e.flags|=1,hi()}}function hi(){_n||(_n=di.then(pi))}function _l(e){k(e)?Ct.push(...e):Je&&e.id===-1?Je.splice(wt+1,0,e):e.flags&1||(Ct.push(e),e.flags|=1),hi()}function zs(e,t,n=je+1){for(;nkt(n)-kt(s));if(Ct.length=0,Je){Je.push(...t);return}for(Je=t,wt=0;wte.id==null?e.flags&2?-1:1/0:e.id;function pi(e){try{for(je=0;je{s._d&&ar(-1);const i=wn(t);let o;try{o=e(...r)}finally{wn(i),s._d&&ar(1)}return o};return s._n=!0,s._c=!0,s._d=!0,s}function Ve(e,t,n,s){const r=e.dirs,i=t&&t.dirs;for(let o=0;oe.__isTeleport,ze=Symbol("_leaveCb"),sn=Symbol("_enterCb");function Sl(){const e={isMounted:!1,isLeaving:!1,isUnmounting:!1,leavingVNodes:new Map};return Ot(()=>{e.isMounted=!0}),Ci(()=>{e.isUnmounting=!0}),e}const Re=[Function,Array],yi={mode:String,appear:Boolean,persisted:Boolean,onBeforeEnter:Re,onEnter:Re,onAfterEnter:Re,onEnterCancelled:Re,onBeforeLeave:Re,onLeave:Re,onAfterLeave:Re,onLeaveCancelled:Re,onBeforeAppear:Re,onAppear:Re,onAfterAppear:Re,onAppearCancelled:Re},vi=e=>{const t=e.subTree;return t.component?vi(t.component):t},xl={name:"BaseTransition",props:yi,setup(e,{slots:t}){const n=jn(),s=Sl();return()=>{const r=t.default&&wi(t.default(),!0);if(!r||!r.length)return;const i=_i(r),o=J(e),{mode:l}=o;if(s.isLeaving)return Yn(i);const c=Qs(i);if(!c)return Yn(i);let u=ps(c,o,s,n,h=>u=h);c.type!==ye&&Bt(c,u);let a=n.subTree&&Qs(n.subTree);if(a&&a.type!==ye&&!ut(c,a)&&vi(n).type!==ye){let h=ps(a,o,s,n);if(Bt(a,h),l==="out-in"&&c.type!==ye)return s.isLeaving=!0,h.afterLeave=()=>{s.isLeaving=!1,n.job.flags&8||n.update(),delete h.afterLeave,a=void 0},Yn(i);l==="in-out"&&c.type!==ye?h.delayLeave=(y,b,L)=>{const O=bi(s,a);O[String(a.key)]=a,y[ze]=()=>{b(),y[ze]=void 0,delete u.delayedLeave,a=void 0},u.delayedLeave=()=>{L(),delete u.delayedLeave,a=void 0}}:a=void 0}else a&&(a=void 0);return i}}};function _i(e){let t=e[0];if(e.length>1){for(const n of e)if(n.type!==ye){t=n;break}}return t}const El=xl;function bi(e,t){const{leavingVNodes:n}=e;let s=n.get(t.type);return s||(s=Object.create(null),n.set(t.type,s)),s}function ps(e,t,n,s,r){const{appear:i,mode:o,persisted:l=!1,onBeforeEnter:c,onEnter:u,onAfterEnter:a,onEnterCancelled:h,onBeforeLeave:y,onLeave:b,onAfterLeave:L,onLeaveCancelled:O,onBeforeAppear:G,onAppear:U,onAfterAppear:W,onAppearCancelled:g}=t,p=String(e.key),A=bi(n,e),D=(I,_)=>{I&&He(I,s,9,_)},j=(I,_)=>{const M=_[1];D(I,_),k(I)?I.every(w=>w.length<=1)&&M():I.length<=1&&M()},K={mode:o,persisted:l,beforeEnter(I){let _=c;if(!n.isMounted)if(i)_=G||c;else return;I[ze]&&I[ze](!0);const M=A[p];M&&ut(e,M)&&M.el[ze]&&M.el[ze](),D(_,[I])},enter(I){let _=u,M=a,w=h;if(!n.isMounted)if(i)_=U||u,M=W||a,w=g||h;else return;let V=!1;const se=I[sn]=ie=>{V||(V=!0,ie?D(w,[I]):D(M,[I]),K.delayedLeave&&K.delayedLeave(),I[sn]=void 0)};_?j(_,[I,se]):se()},leave(I,_){const M=String(e.key);if(I[sn]&&I[sn](!0),n.isUnmounting)return _();D(y,[I]);let w=!1;const V=I[ze]=se=>{w||(w=!0,_(),se?D(O,[I]):D(L,[I]),I[ze]=void 0,A[M]===e&&delete A[M])};A[M]=e,b?j(b,[I,V]):V()},clone(I){const _=ps(I,t,n,s,r);return r&&r(_),_}};return K}function Yn(e){if(Nn(e))return e=nt(e),e.children=null,e}function Qs(e){if(!Nn(e))return mi(e.type)&&e.children?_i(e.children):e;const{shapeFlag:t,children:n}=e;if(n){if(t&16)return n[0];if(t&32&&q(n.default))return n.default()}}function Bt(e,t){e.shapeFlag&6&&e.component?(e.transition=t,Bt(e.component.subTree,t)):e.shapeFlag&128?(e.ssContent.transition=t.clone(e.ssContent),e.ssFallback.transition=t.clone(e.ssFallback)):e.transition=t}function wi(e,t=!1,n){let s=[],r=0;for(let i=0;i1)for(let i=0;iWt(L,t&&(k(t)?t[O]:t),n,s,r));return}if(pt(s)&&!r){s.shapeFlag&512&&s.type.__asyncResolved&&s.component.subTree.component&&Wt(e,t,n,s.component.subTree);return}const i=s.shapeFlag&4?Vs(s.component):s.el,o=r?null:i,{i:l,r:c}=e,u=t&&t.r,a=l.refs===te?l.refs={}:l.refs,h=l.setupState,y=J(h),b=h===te?()=>!1:L=>z(y,L);if(u!=null&&u!==c&&(re(u)?(a[u]=null,b(u)&&(h[u]=null)):ce(u)&&(u.value=null)),q(c))Jt(c,l,12,[o,a]);else{const L=re(c),O=ce(c);if(L||O){const G=()=>{if(e.f){const U=L?b(c)?h[c]:a[c]:c.value;r?k(U)&&Ts(U,i):k(U)?U.includes(i)||U.push(i):L?(a[c]=[i],b(c)&&(h[c]=a[c])):(c.value=[i],e.k&&(a[e.k]=c.value))}else L?(a[c]=o,b(c)&&(h[c]=o)):O&&(c.value=o,e.k&&(a[e.k]=o))};o?(G.id=-1,Te(G,n)):G()}}}let Zs=!1;const bt=()=>{Zs||(console.error("Hydration completed but contains mismatches."),Zs=!0)},Cl=e=>e.namespaceURI.includes("svg")&&e.tagName!=="foreignObject",Tl=e=>e.namespaceURI.includes("MathML"),rn=e=>{if(e.nodeType===1){if(Cl(e))return"svg";if(Tl(e))return"mathml"}},on=e=>e.nodeType===8;function Al(e){const{mt:t,p:n,o:{patchProp:s,createText:r,nextSibling:i,parentNode:o,remove:l,insert:c,createComment:u}}=e,a=(g,p)=>{if(!p.hasChildNodes()){n(null,g,p),bn(),p._vnode=g;return}h(p.firstChild,g,null,null,null),bn(),p._vnode=g},h=(g,p,A,D,j,K=!1)=>{K=K||!!p.dynamicChildren;const I=on(g)&&g.data==="[",_=()=>O(g,p,A,D,j,I),{type:M,ref:w,shapeFlag:V,patchFlag:se}=p;let ie=g.nodeType;p.el=g,se===-2&&(K=!1,p.dynamicChildren=null);let H=null;switch(M){case gt:ie!==3?p.children===""?(c(p.el=r(""),o(g),g),H=g):H=_():(g.data!==p.children&&(bt(),g.data=p.children),H=i(g));break;case ye:W(g)?(H=i(g),U(p.el=g.content.firstChild,g,A)):ie!==8||I?H=_():H=i(g);break;case Dt:if(I&&(g=i(g),ie=g.nodeType),ie===1||ie===3){H=g;const Y=!p.children.length;for(let F=0;F{K=K||!!p.dynamicChildren;const{type:I,props:_,patchFlag:M,shapeFlag:w,dirs:V,transition:se}=p,ie=I==="input"||I==="option";if(ie||M!==-1){V&&Ve(p,null,A,"created");let H=!1;if(W(g)){H=Ui(null,se)&&A&&A.vnode.props&&A.vnode.props.appear;const F=g.content.firstChild;H&&se.beforeEnter(F),U(F,g,A),p.el=g=F}if(w&16&&!(_&&(_.innerHTML||_.textContent))){let F=b(g.firstChild,p,g,A,D,j,K);for(;F;){ln(g,1)||bt();const ae=F;F=F.nextSibling,l(ae)}}else if(w&8){let F=p.children;F[0]===`
+`&&(g.tagName==="PRE"||g.tagName==="TEXTAREA")&&(F=F.slice(1)),g.textContent!==F&&(ln(g,0)||bt(),g.textContent=p.children)}if(_){if(ie||!K||M&48){const F=g.tagName.includes("-");for(const ae in _)(ie&&(ae.endsWith("value")||ae==="indeterminate")||Xt(ae)&&!Et(ae)||ae[0]==="."||F)&&s(g,ae,null,_[ae],void 0,A)}else if(_.onClick)s(g,"onClick",null,_.onClick,void 0,A);else if(M&4&&ht(_.style))for(const F in _.style)_.style[F]}let Y;(Y=_&&_.onVnodeBeforeMount)&&Oe(Y,A,p),V&&Ve(p,null,A,"beforeMount"),((Y=_&&_.onVnodeMounted)||V||H)&&Xi(()=>{Y&&Oe(Y,A,p),H&&se.enter(g),V&&Ve(p,null,A,"mounted")},D)}return g.nextSibling},b=(g,p,A,D,j,K,I)=>{I=I||!!p.dynamicChildren;const _=p.children,M=_.length;for(let w=0;w{const{slotScopeIds:I}=p;I&&(j=j?j.concat(I):I);const _=o(g),M=b(i(g),p,_,A,D,j,K);return M&&on(M)&&M.data==="]"?i(p.anchor=M):(bt(),c(p.anchor=u("]"),_,M),M)},O=(g,p,A,D,j,K)=>{if(ln(g.parentElement,1)||bt(),p.el=null,K){const M=G(g);for(;;){const w=i(g);if(w&&w!==M)l(w);else break}}const I=i(g),_=o(g);return l(g),n(null,p,_,I,A,D,rn(_),j),A&&(A.vnode.el=p.el,Gi(A,p.el)),I},G=(g,p="[",A="]")=>{let D=0;for(;g;)if(g=i(g),g&&on(g)&&(g.data===p&&D++,g.data===A)){if(D===0)return i(g);D--}return g},U=(g,p,A)=>{const D=p.parentNode;D&&D.replaceChild(g,p);let j=A;for(;j;)j.vnode.el===p&&(j.vnode.el=j.subTree.el=g),j=j.parent},W=g=>g.nodeType===1&&g.tagName==="TEMPLATE";return[a,h]}const er="data-allow-mismatch",Rl={0:"text",1:"children",2:"class",3:"style",4:"attribute"};function ln(e,t){if(t===0||t===1)for(;e&&!e.hasAttribute(er);)e=e.parentElement;const n=e&&e.getAttribute(er);if(n==null)return!1;if(n==="")return!0;{const s=n.split(",");return t===0&&s.includes("children")?!0:n.split(",").includes(Rl[t])}}An().requestIdleCallback;An().cancelIdleCallback;const pt=e=>!!e.type.__asyncLoader,Nn=e=>e.type.__isKeepAlive;function Ol(e,t){Ei(e,"a",t)}function Pl(e,t){Ei(e,"da",t)}function Ei(e,t,n=fe){const s=e.__wdc||(e.__wdc=()=>{let r=n;for(;r;){if(r.isDeactivated)return;r=r.parent}return e()});if(Fn(t,s,n),n){let r=n.parent;for(;r&&r.parent;)Nn(r.parent.vnode)&&Il(s,t,n,r),r=r.parent}}function Il(e,t,n,s){const r=Fn(t,e,s,!0);Hn(()=>{Ts(s[t],r)},n)}function Fn(e,t,n=fe,s=!1){if(n){const r=n[e]||(n[e]=[]),i=t.__weh||(t.__weh=(...o)=>{rt();const l=zt(n),c=He(t,n,e,o);return l(),it(),c});return s?r.unshift(i):r.push(i),i}}const Ye=e=>(t,n=fe)=>{(!Gt||e==="sp")&&Fn(e,(...s)=>t(...s),n)},Ll=Ye("bm"),Ot=Ye("m"),Ml=Ye("bu"),Nl=Ye("u"),Ci=Ye("bum"),Hn=Ye("um"),Fl=Ye("sp"),Hl=Ye("rtg"),$l=Ye("rtc");function Dl(e,t=fe){Fn("ec",e,t)}const Ti="components";function Za(e,t){return Ri(Ti,e,!0,t)||e}const Ai=Symbol.for("v-ndc");function ef(e){return re(e)?Ri(Ti,e,!1)||e:e||Ai}function Ri(e,t,n=!0,s=!1){const r=ve||fe;if(r){const i=r.type;{const l=Sc(i,!1);if(l&&(l===t||l===Le(t)||l===Tn(Le(t))))return i}const o=tr(r[e]||i[e],t)||tr(r.appContext[e],t);return!o&&s?i:o}}function tr(e,t){return e&&(e[t]||e[Le(t)]||e[Tn(Le(t))])}function tf(e,t,n,s){let r;const i=n,o=k(e);if(o||re(e)){const l=o&&ht(e);let c=!1;l&&(c=!Ie(e),e=On(e)),r=new Array(e.length);for(let u=0,a=e.length;ut(l,c,void 0,i));else{const l=Object.keys(e);r=new Array(l.length);for(let c=0,u=l.length;cqt(t)?!(t.type===ye||t.type===Se&&!Oi(t.children)):!0)?e:null}function sf(e,t){const n={};for(const s in e)n[/[A-Z]/.test(s)?`on:${s}`:dn(s)]=e[s];return n}const gs=e=>e?eo(e)?Vs(e):gs(e.parent):null,$t=le(Object.create(null),{$:e=>e,$el:e=>e.vnode.el,$data:e=>e.data,$props:e=>e.props,$attrs:e=>e.attrs,$slots:e=>e.slots,$refs:e=>e.refs,$parent:e=>gs(e.parent),$root:e=>gs(e.root),$host:e=>e.ce,$emit:e=>e.emit,$options:e=>$s(e),$forceUpdate:e=>e.f||(e.f=()=>{Hs(e.update)}),$nextTick:e=>e.n||(e.n=Mn.bind(e.proxy)),$watch:e=>oc.bind(e)}),Xn=(e,t)=>e!==te&&!e.__isScriptSetup&&z(e,t),jl={get({_:e},t){if(t==="__v_skip")return!0;const{ctx:n,setupState:s,data:r,props:i,accessCache:o,type:l,appContext:c}=e;let u;if(t[0]!=="$"){const b=o[t];if(b!==void 0)switch(b){case 1:return s[t];case 2:return r[t];case 4:return n[t];case 3:return i[t]}else{if(Xn(s,t))return o[t]=1,s[t];if(r!==te&&z(r,t))return o[t]=2,r[t];if((u=e.propsOptions[0])&&z(u,t))return o[t]=3,i[t];if(n!==te&&z(n,t))return o[t]=4,n[t];ms&&(o[t]=0)}}const a=$t[t];let h,y;if(a)return t==="$attrs"&&ge(e.attrs,"get",""),a(e);if((h=l.__cssModules)&&(h=h[t]))return h;if(n!==te&&z(n,t))return o[t]=4,n[t];if(y=c.config.globalProperties,z(y,t))return y[t]},set({_:e},t,n){const{data:s,setupState:r,ctx:i}=e;return Xn(r,t)?(r[t]=n,!0):s!==te&&z(s,t)?(s[t]=n,!0):z(e.props,t)||t[0]==="$"&&t.slice(1)in e?!1:(i[t]=n,!0)},has({_:{data:e,setupState:t,accessCache:n,ctx:s,appContext:r,propsOptions:i}},o){let l;return!!n[o]||e!==te&&z(e,o)||Xn(t,o)||(l=i[0])&&z(l,o)||z(s,o)||z($t,o)||z(r.config.globalProperties,o)},defineProperty(e,t,n){return n.get!=null?e._.accessCache[t]=0:z(n,"value")&&this.set(e,t,n.value,null),Reflect.defineProperty(e,t,n)}};function rf(){return Vl().slots}function Vl(){const e=jn();return e.setupContext||(e.setupContext=no(e))}function nr(e){return k(e)?e.reduce((t,n)=>(t[n]=null,t),{}):e}let ms=!0;function Ul(e){const t=$s(e),n=e.proxy,s=e.ctx;ms=!1,t.beforeCreate&&sr(t.beforeCreate,e,"bc");const{data:r,computed:i,methods:o,watch:l,provide:c,inject:u,created:a,beforeMount:h,mounted:y,beforeUpdate:b,updated:L,activated:O,deactivated:G,beforeDestroy:U,beforeUnmount:W,destroyed:g,unmounted:p,render:A,renderTracked:D,renderTriggered:j,errorCaptured:K,serverPrefetch:I,expose:_,inheritAttrs:M,components:w,directives:V,filters:se}=t;if(u&&kl(u,s,null),o)for(const Y in o){const F=o[Y];q(F)&&(s[Y]=F.bind(n))}if(r){const Y=r.call(n,n);ne(Y)&&(e.data=Pn(Y))}if(ms=!0,i)for(const Y in i){const F=i[Y],ae=q(F)?F.bind(n,n):q(F.get)?F.get.bind(n,n):Ue,Qt=!q(F)&&q(F.set)?F.set.bind(n):Ue,ot=oe({get:ae,set:Qt});Object.defineProperty(s,Y,{enumerable:!0,configurable:!0,get:()=>ot.value,set:$e=>ot.value=$e})}if(l)for(const Y in l)Pi(l[Y],s,n,Y);if(c){const Y=q(c)?c.call(n):c;Reflect.ownKeys(Y).forEach(F=>{Yl(F,Y[F])})}a&&sr(a,e,"c");function H(Y,F){k(F)?F.forEach(ae=>Y(ae.bind(n))):F&&Y(F.bind(n))}if(H(Ll,h),H(Ot,y),H(Ml,b),H(Nl,L),H(Ol,O),H(Pl,G),H(Dl,K),H($l,D),H(Hl,j),H(Ci,W),H(Hn,p),H(Fl,I),k(_))if(_.length){const Y=e.exposed||(e.exposed={});_.forEach(F=>{Object.defineProperty(Y,F,{get:()=>n[F],set:ae=>n[F]=ae})})}else e.exposed||(e.exposed={});A&&e.render===Ue&&(e.render=A),M!=null&&(e.inheritAttrs=M),w&&(e.components=w),V&&(e.directives=V),I&&xi(e)}function kl(e,t,n=Ue){k(e)&&(e=ys(e));for(const s in e){const r=e[s];let i;ne(r)?"default"in r?i=At(r.from||s,r.default,!0):i=At(r.from||s):i=At(r),ce(i)?Object.defineProperty(t,s,{enumerable:!0,configurable:!0,get:()=>i.value,set:o=>i.value=o}):t[s]=i}}function sr(e,t,n){He(k(e)?e.map(s=>s.bind(t.proxy)):e.bind(t.proxy),t,n)}function Pi(e,t,n,s){let r=s.includes(".")?Ki(n,s):()=>n[s];if(re(e)){const i=t[e];q(i)&&Fe(r,i)}else if(q(e))Fe(r,e.bind(n));else if(ne(e))if(k(e))e.forEach(i=>Pi(i,t,n,s));else{const i=q(e.handler)?e.handler.bind(n):t[e.handler];q(i)&&Fe(r,i,e)}}function $s(e){const t=e.type,{mixins:n,extends:s}=t,{mixins:r,optionsCache:i,config:{optionMergeStrategies:o}}=e.appContext,l=i.get(t);let c;return l?c=l:!r.length&&!n&&!s?c=t:(c={},r.length&&r.forEach(u=>Sn(c,u,o,!0)),Sn(c,t,o)),ne(t)&&i.set(t,c),c}function Sn(e,t,n,s=!1){const{mixins:r,extends:i}=t;i&&Sn(e,i,n,!0),r&&r.forEach(o=>Sn(e,o,n,!0));for(const o in t)if(!(s&&o==="expose")){const l=Bl[o]||n&&n[o];e[o]=l?l(e[o],t[o]):t[o]}return e}const Bl={data:rr,props:ir,emits:ir,methods:Nt,computed:Nt,beforeCreate:_e,created:_e,beforeMount:_e,mounted:_e,beforeUpdate:_e,updated:_e,beforeDestroy:_e,beforeUnmount:_e,destroyed:_e,unmounted:_e,activated:_e,deactivated:_e,errorCaptured:_e,serverPrefetch:_e,components:Nt,directives:Nt,watch:Kl,provide:rr,inject:Wl};function rr(e,t){return t?e?function(){return le(q(e)?e.call(this,this):e,q(t)?t.call(this,this):t)}:t:e}function Wl(e,t){return Nt(ys(e),ys(t))}function ys(e){if(k(e)){const t={};for(let n=0;n1)return n&&q(t)?t.call(s&&s.proxy):t}}const Li={},Mi=()=>Object.create(Li),Ni=e=>Object.getPrototypeOf(e)===Li;function Xl(e,t,n,s=!1){const r={},i=Mi();e.propsDefaults=Object.create(null),Fi(e,t,r,i);for(const o in e.propsOptions[0])o in r||(r[o]=void 0);n?e.props=s?r:rl(r):e.type.props?e.props=r:e.props=i,e.attrs=i}function Jl(e,t,n,s){const{props:r,attrs:i,vnode:{patchFlag:o}}=e,l=J(r),[c]=e.propsOptions;let u=!1;if((s||o>0)&&!(o&16)){if(o&8){const a=e.vnode.dynamicProps;for(let h=0;h{c=!0;const[y,b]=Hi(h,t,!0);le(o,y),b&&l.push(...b)};!n&&t.mixins.length&&t.mixins.forEach(a),e.extends&&a(e.extends),e.mixins&&e.mixins.forEach(a)}if(!i&&!c)return ne(e)&&s.set(e,St),St;if(k(i))for(let a=0;ae[0]==="_"||e==="$stable",Ds=e=>k(e)?e.map(Pe):[Pe(e)],Ql=(e,t,n)=>{if(t._n)return t;const s=bl((...r)=>Ds(t(...r)),n);return s._c=!1,s},Di=(e,t,n)=>{const s=e._ctx;for(const r in e){if($i(r))continue;const i=e[r];if(q(i))t[r]=Ql(r,i,s);else if(i!=null){const o=Ds(i);t[r]=()=>o}}},ji=(e,t)=>{const n=Ds(t);e.slots.default=()=>n},Vi=(e,t,n)=>{for(const s in t)(n||s!=="_")&&(e[s]=t[s])},Zl=(e,t,n)=>{const s=e.slots=Mi();if(e.vnode.shapeFlag&32){const r=t._;r?(Vi(s,t,n),n&&Br(s,"_",r,!0)):Di(t,s)}else t&&ji(e,t)},ec=(e,t,n)=>{const{vnode:s,slots:r}=e;let i=!0,o=te;if(s.shapeFlag&32){const l=t._;l?n&&l===1?i=!1:Vi(r,t,n):(i=!t.$stable,Di(t,r)),o=t}else t&&(ji(e,t),o={default:1});if(i)for(const l in r)!$i(l)&&o[l]==null&&delete r[l]},Te=Xi;function tc(e){return nc(e,Al)}function nc(e,t){const n=An();n.__VUE__=!0;const{insert:s,remove:r,patchProp:i,createElement:o,createText:l,createComment:c,setText:u,setElementText:a,parentNode:h,nextSibling:y,setScopeId:b=Ue,insertStaticContent:L}=e,O=(f,d,m,x=null,v=null,S=null,R=void 0,T=null,C=!!d.dynamicChildren)=>{if(f===d)return;f&&!ut(f,d)&&(x=Zt(f),$e(f,v,S,!0),f=null),d.patchFlag===-2&&(C=!1,d.dynamicChildren=null);const{type:E,ref:$,shapeFlag:P}=d;switch(E){case gt:G(f,d,m,x);break;case ye:U(f,d,m,x);break;case Dt:f==null&&W(d,m,x,R);break;case Se:w(f,d,m,x,v,S,R,T,C);break;default:P&1?A(f,d,m,x,v,S,R,T,C):P&6?V(f,d,m,x,v,S,R,T,C):(P&64||P&128)&&E.process(f,d,m,x,v,S,R,T,C,vt)}$!=null&&v&&Wt($,f&&f.ref,S,d||f,!d)},G=(f,d,m,x)=>{if(f==null)s(d.el=l(d.children),m,x);else{const v=d.el=f.el;d.children!==f.children&&u(v,d.children)}},U=(f,d,m,x)=>{f==null?s(d.el=c(d.children||""),m,x):d.el=f.el},W=(f,d,m,x)=>{[f.el,f.anchor]=L(f.children,d,m,x,f.el,f.anchor)},g=({el:f,anchor:d},m,x)=>{let v;for(;f&&f!==d;)v=y(f),s(f,m,x),f=v;s(d,m,x)},p=({el:f,anchor:d})=>{let m;for(;f&&f!==d;)m=y(f),r(f),f=m;r(d)},A=(f,d,m,x,v,S,R,T,C)=>{d.type==="svg"?R="svg":d.type==="math"&&(R="mathml"),f==null?D(d,m,x,v,S,R,T,C):I(f,d,v,S,R,T,C)},D=(f,d,m,x,v,S,R,T)=>{let C,E;const{props:$,shapeFlag:P,transition:N,dirs:B}=f;if(C=f.el=o(f.type,S,$&&$.is,$),P&8?a(C,f.children):P&16&&K(f.children,C,null,x,v,Jn(f,S),R,T),B&&Ve(f,null,x,"created"),j(C,f,f.scopeId,R,x),$){for(const Z in $)Z!=="value"&&!Et(Z)&&i(C,Z,null,$[Z],S,x);"value"in $&&i(C,"value",null,$.value,S),(E=$.onVnodeBeforeMount)&&Oe(E,x,f)}B&&Ve(f,null,x,"beforeMount");const X=Ui(v,N);X&&N.beforeEnter(C),s(C,d,m),((E=$&&$.onVnodeMounted)||X||B)&&Te(()=>{E&&Oe(E,x,f),X&&N.enter(C),B&&Ve(f,null,x,"mounted")},v)},j=(f,d,m,x,v)=>{if(m&&b(f,m),x)for(let S=0;S{for(let E=C;E{const T=d.el=f.el;let{patchFlag:C,dynamicChildren:E,dirs:$}=d;C|=f.patchFlag&16;const P=f.props||te,N=d.props||te;let B;if(m&<(m,!1),(B=N.onVnodeBeforeUpdate)&&Oe(B,m,d,f),$&&Ve(d,f,m,"beforeUpdate"),m&<(m,!0),(P.innerHTML&&N.innerHTML==null||P.textContent&&N.textContent==null)&&a(T,""),E?_(f.dynamicChildren,E,T,m,x,Jn(d,v),S):R||F(f,d,T,null,m,x,Jn(d,v),S,!1),C>0){if(C&16)M(T,P,N,m,v);else if(C&2&&P.class!==N.class&&i(T,"class",null,N.class,v),C&4&&i(T,"style",P.style,N.style,v),C&8){const X=d.dynamicProps;for(let Z=0;Z{B&&Oe(B,m,d,f),$&&Ve(d,f,m,"updated")},x)},_=(f,d,m,x,v,S,R)=>{for(let T=0;T{if(d!==m){if(d!==te)for(const S in d)!Et(S)&&!(S in m)&&i(f,S,d[S],null,v,x);for(const S in m){if(Et(S))continue;const R=m[S],T=d[S];R!==T&&S!=="value"&&i(f,S,T,R,v,x)}"value"in m&&i(f,"value",d.value,m.value,v)}},w=(f,d,m,x,v,S,R,T,C)=>{const E=d.el=f?f.el:l(""),$=d.anchor=f?f.anchor:l("");let{patchFlag:P,dynamicChildren:N,slotScopeIds:B}=d;B&&(T=T?T.concat(B):B),f==null?(s(E,m,x),s($,m,x),K(d.children||[],m,$,v,S,R,T,C)):P>0&&P&64&&N&&f.dynamicChildren?(_(f.dynamicChildren,N,m,v,S,R,T),(d.key!=null||v&&d===v.subTree)&&ki(f,d,!0)):F(f,d,m,$,v,S,R,T,C)},V=(f,d,m,x,v,S,R,T,C)=>{d.slotScopeIds=T,f==null?d.shapeFlag&512?v.ctx.activate(d,m,x,R,C):se(d,m,x,v,S,R,C):ie(f,d,C)},se=(f,d,m,x,v,S,R)=>{const T=f.component=vc(f,x,v);if(Nn(f)&&(T.ctx.renderer=vt),_c(T,!1,R),T.asyncDep){if(v&&v.registerDep(T,H,R),!f.el){const C=T.subTree=de(ye);U(null,C,d,m)}}else H(T,f,d,m,v,S,R)},ie=(f,d,m)=>{const x=d.component=f.component;if(uc(f,d,m))if(x.asyncDep&&!x.asyncResolved){Y(x,d,m);return}else x.next=d,x.update();else d.el=f.el,x.vnode=d},H=(f,d,m,x,v,S,R)=>{const T=()=>{if(f.isMounted){let{next:P,bu:N,u:B,parent:X,vnode:Z}=f;{const Ee=Bi(f);if(Ee){P&&(P.el=Z.el,Y(f,P,R)),Ee.asyncDep.then(()=>{f.isUnmounted||T()});return}}let Q=P,xe;lt(f,!1),P?(P.el=Z.el,Y(f,P,R)):P=Z,N&&Bn(N),(xe=P.props&&P.props.onVnodeBeforeUpdate)&&Oe(xe,X,P,Z),lt(f,!0);const he=zn(f),Me=f.subTree;f.subTree=he,O(Me,he,h(Me.el),Zt(Me),f,v,S),P.el=he.el,Q===null&&Gi(f,he.el),B&&Te(B,v),(xe=P.props&&P.props.onVnodeUpdated)&&Te(()=>Oe(xe,X,P,Z),v)}else{let P;const{el:N,props:B}=d,{bm:X,m:Z,parent:Q,root:xe,type:he}=f,Me=pt(d);if(lt(f,!1),X&&Bn(X),!Me&&(P=B&&B.onVnodeBeforeMount)&&Oe(P,Q,d),lt(f,!0),N&&kn){const Ee=()=>{f.subTree=zn(f),kn(N,f.subTree,f,v,null)};Me&&he.__asyncHydrate?he.__asyncHydrate(N,f,Ee):Ee()}else{xe.ce&&xe.ce._injectChildStyle(he);const Ee=f.subTree=zn(f);O(null,Ee,m,x,f,v,S),d.el=Ee.el}if(Z&&Te(Z,v),!Me&&(P=B&&B.onVnodeMounted)){const Ee=d;Te(()=>Oe(P,Q,Ee),v)}(d.shapeFlag&256||Q&&pt(Q.vnode)&&Q.vnode.shapeFlag&256)&&f.a&&Te(f.a,v),f.isMounted=!0,d=m=x=null}};f.scope.on();const C=f.effect=new Yr(T);f.scope.off();const E=f.update=C.run.bind(C),$=f.job=C.runIfDirty.bind(C);$.i=f,$.id=f.uid,C.scheduler=()=>Hs($),lt(f,!0),E()},Y=(f,d,m)=>{d.component=f;const x=f.vnode.props;f.vnode=d,f.next=null,Jl(f,d.props,x,m),ec(f,d.children,m),rt(),zs(f),it()},F=(f,d,m,x,v,S,R,T,C=!1)=>{const E=f&&f.children,$=f?f.shapeFlag:0,P=d.children,{patchFlag:N,shapeFlag:B}=d;if(N>0){if(N&128){Qt(E,P,m,x,v,S,R,T,C);return}else if(N&256){ae(E,P,m,x,v,S,R,T,C);return}}B&8?($&16&&Pt(E,v,S),P!==E&&a(m,P)):$&16?B&16?Qt(E,P,m,x,v,S,R,T,C):Pt(E,v,S,!0):($&8&&a(m,""),B&16&&K(P,m,x,v,S,R,T,C))},ae=(f,d,m,x,v,S,R,T,C)=>{f=f||St,d=d||St;const E=f.length,$=d.length,P=Math.min(E,$);let N;for(N=0;N$?Pt(f,v,S,!0,!1,P):K(d,m,x,v,S,R,T,C,P)},Qt=(f,d,m,x,v,S,R,T,C)=>{let E=0;const $=d.length;let P=f.length-1,N=$-1;for(;E<=P&&E<=N;){const B=f[E],X=d[E]=C?Qe(d[E]):Pe(d[E]);if(ut(B,X))O(B,X,m,null,v,S,R,T,C);else break;E++}for(;E<=P&&E<=N;){const B=f[P],X=d[N]=C?Qe(d[N]):Pe(d[N]);if(ut(B,X))O(B,X,m,null,v,S,R,T,C);else break;P--,N--}if(E>P){if(E<=N){const B=N+1,X=B<$?d[B].el:x;for(;E<=N;)O(null,d[E]=C?Qe(d[E]):Pe(d[E]),m,X,v,S,R,T,C),E++}}else if(E>N)for(;E<=P;)$e(f[E],v,S,!0),E++;else{const B=E,X=E,Z=new Map;for(E=X;E<=N;E++){const Ce=d[E]=C?Qe(d[E]):Pe(d[E]);Ce.key!=null&&Z.set(Ce.key,E)}let Q,xe=0;const he=N-X+1;let Me=!1,Ee=0;const It=new Array(he);for(E=0;E=he){$e(Ce,v,S,!0);continue}let De;if(Ce.key!=null)De=Z.get(Ce.key);else for(Q=X;Q<=N;Q++)if(It[Q-X]===0&&ut(Ce,d[Q])){De=Q;break}De===void 0?$e(Ce,v,S,!0):(It[De-X]=E+1,De>=Ee?Ee=De:Me=!0,O(Ce,d[De],m,null,v,S,R,T,C),xe++)}const qs=Me?sc(It):St;for(Q=qs.length-1,E=he-1;E>=0;E--){const Ce=X+E,De=d[Ce],Gs=Ce+1<$?d[Ce+1].el:x;It[E]===0?O(null,De,m,Gs,v,S,R,T,C):Me&&(Q<0||E!==qs[Q]?ot(De,m,Gs,2):Q--)}}},ot=(f,d,m,x,v=null)=>{const{el:S,type:R,transition:T,children:C,shapeFlag:E}=f;if(E&6){ot(f.component.subTree,d,m,x);return}if(E&128){f.suspense.move(d,m,x);return}if(E&64){R.move(f,d,m,vt);return}if(R===Se){s(S,d,m);for(let P=0;PT.enter(S),v);else{const{leave:P,delayLeave:N,afterLeave:B}=T,X=()=>s(S,d,m),Z=()=>{P(S,()=>{X(),B&&B()})};N?N(S,X,Z):Z()}else s(S,d,m)},$e=(f,d,m,x=!1,v=!1)=>{const{type:S,props:R,ref:T,children:C,dynamicChildren:E,shapeFlag:$,patchFlag:P,dirs:N,cacheIndex:B}=f;if(P===-2&&(v=!1),T!=null&&Wt(T,null,m,f,!0),B!=null&&(d.renderCache[B]=void 0),$&256){d.ctx.deactivate(f);return}const X=$&1&&N,Z=!pt(f);let Q;if(Z&&(Q=R&&R.onVnodeBeforeUnmount)&&Oe(Q,d,f),$&6)So(f.component,m,x);else{if($&128){f.suspense.unmount(m,x);return}X&&Ve(f,null,d,"beforeUnmount"),$&64?f.type.remove(f,d,m,vt,x):E&&!E.hasOnce&&(S!==Se||P>0&&P&64)?Pt(E,d,m,!1,!0):(S===Se&&P&384||!v&&$&16)&&Pt(C,d,m),x&&Ws(f)}(Z&&(Q=R&&R.onVnodeUnmounted)||X)&&Te(()=>{Q&&Oe(Q,d,f),X&&Ve(f,null,d,"unmounted")},m)},Ws=f=>{const{type:d,el:m,anchor:x,transition:v}=f;if(d===Se){wo(m,x);return}if(d===Dt){p(f);return}const S=()=>{r(m),v&&!v.persisted&&v.afterLeave&&v.afterLeave()};if(f.shapeFlag&1&&v&&!v.persisted){const{leave:R,delayLeave:T}=v,C=()=>R(m,S);T?T(f.el,S,C):C()}else S()},wo=(f,d)=>{let m;for(;f!==d;)m=y(f),r(f),f=m;r(d)},So=(f,d,m)=>{const{bum:x,scope:v,job:S,subTree:R,um:T,m:C,a:E}=f;lr(C),lr(E),x&&Bn(x),v.stop(),S&&(S.flags|=8,$e(R,f,d,m)),T&&Te(T,d),Te(()=>{f.isUnmounted=!0},d),d&&d.pendingBranch&&!d.isUnmounted&&f.asyncDep&&!f.asyncResolved&&f.suspenseId===d.pendingId&&(d.deps--,d.deps===0&&d.resolve())},Pt=(f,d,m,x=!1,v=!1,S=0)=>{for(let R=S;R{if(f.shapeFlag&6)return Zt(f.component.subTree);if(f.shapeFlag&128)return f.suspense.next();const d=y(f.anchor||f.el),m=d&&d[wl];return m?y(m):d};let Vn=!1;const Ks=(f,d,m)=>{f==null?d._vnode&&$e(d._vnode,null,null,!0):O(d._vnode||null,f,d,null,null,null,m),d._vnode=f,Vn||(Vn=!0,zs(),bn(),Vn=!1)},vt={p:O,um:$e,m:ot,r:Ws,mt:se,mc:K,pc:F,pbc:_,n:Zt,o:e};let Un,kn;return t&&([Un,kn]=t(vt)),{render:Ks,hydrate:Un,createApp:Gl(Ks,Un)}}function Jn({type:e,props:t},n){return n==="svg"&&e==="foreignObject"||n==="mathml"&&e==="annotation-xml"&&t&&t.encoding&&t.encoding.includes("html")?void 0:n}function lt({effect:e,job:t},n){n?(e.flags|=32,t.flags|=4):(e.flags&=-33,t.flags&=-5)}function Ui(e,t){return(!e||e&&!e.pendingBranch)&&t&&!t.persisted}function ki(e,t,n=!1){const s=e.children,r=t.children;if(k(s)&&k(r))for(let i=0;i>1,e[n[l]]0&&(t[s]=n[i-1]),n[i]=s)}}for(i=n.length,o=n[i-1];i-- >0;)n[i]=o,o=t[o];return n}function Bi(e){const t=e.subTree.component;if(t)return t.asyncDep&&!t.asyncResolved?t:Bi(t)}function lr(e){if(e)for(let t=0;tAt(rc);function Wi(e,t){return $n(e,null,t)}function of(e,t){return $n(e,null,{flush:"post"})}function Fe(e,t,n){return $n(e,t,n)}function $n(e,t,n=te){const{immediate:s,deep:r,flush:i,once:o}=n,l=le({},n),c=t&&s||!t&&i!=="post";let u;if(Gt){if(i==="sync"){const b=ic();u=b.__watcherHandles||(b.__watcherHandles=[])}else if(!c){const b=()=>{};return b.stop=Ue,b.resume=Ue,b.pause=Ue,b}}const a=fe;l.call=(b,L,O)=>He(b,a,L,O);let h=!1;i==="post"?l.scheduler=b=>{Te(b,a&&a.suspense)}:i!=="sync"&&(h=!0,l.scheduler=(b,L)=>{L?b():Hs(b)}),l.augmentJob=b=>{t&&(b.flags|=4),h&&(b.flags|=2,a&&(b.id=a.uid,b.i=a))};const y=ml(e,t,l);return Gt&&(u?u.push(y):c&&y()),y}function oc(e,t,n){const s=this.proxy,r=re(e)?e.includes(".")?Ki(s,e):()=>s[e]:e.bind(s,s);let i;q(t)?i=t:(i=t.handler,n=t);const o=zt(this),l=$n(r,i.bind(s),n);return o(),l}function Ki(e,t){const n=t.split(".");return()=>{let s=e;for(let r=0;rt==="modelValue"||t==="model-value"?e.modelModifiers:e[`${t}Modifiers`]||e[`${Le(t)}Modifiers`]||e[`${st(t)}Modifiers`];function cc(e,t,...n){if(e.isUnmounted)return;const s=e.vnode.props||te;let r=n;const i=t.startsWith("update:"),o=i&&lc(s,t.slice(7));o&&(o.trim&&(r=n.map(a=>re(a)?a.trim():a)),o.number&&(r=n.map(Ro)));let l,c=s[l=dn(t)]||s[l=dn(Le(t))];!c&&i&&(c=s[l=dn(st(t))]),c&&He(c,e,6,r);const u=s[l+"Once"];if(u){if(!e.emitted)e.emitted={};else if(e.emitted[l])return;e.emitted[l]=!0,He(u,e,6,r)}}function qi(e,t,n=!1){const s=t.emitsCache,r=s.get(e);if(r!==void 0)return r;const i=e.emits;let o={},l=!1;if(!q(e)){const c=u=>{const a=qi(u,t,!0);a&&(l=!0,le(o,a))};!n&&t.mixins.length&&t.mixins.forEach(c),e.extends&&c(e.extends),e.mixins&&e.mixins.forEach(c)}return!i&&!l?(ne(e)&&s.set(e,null),null):(k(i)?i.forEach(c=>o[c]=null):le(o,i),ne(e)&&s.set(e,o),o)}function Dn(e,t){return!e||!Xt(t)?!1:(t=t.slice(2).replace(/Once$/,""),z(e,t[0].toLowerCase()+t.slice(1))||z(e,st(t))||z(e,t))}function zn(e){const{type:t,vnode:n,proxy:s,withProxy:r,propsOptions:[i],slots:o,attrs:l,emit:c,render:u,renderCache:a,props:h,data:y,setupState:b,ctx:L,inheritAttrs:O}=e,G=wn(e);let U,W;try{if(n.shapeFlag&4){const p=r||s,A=p;U=Pe(u.call(A,p,a,h,b,y,L)),W=l}else{const p=t;U=Pe(p.length>1?p(h,{attrs:l,slots:o,emit:c}):p(h,null)),W=t.props?l:ac(l)}}catch(p){jt.length=0,Ln(p,e,1),U=de(ye)}let g=U;if(W&&O!==!1){const p=Object.keys(W),{shapeFlag:A}=g;p.length&&A&7&&(i&&p.some(Cs)&&(W=fc(W,i)),g=nt(g,W,!1,!0))}return n.dirs&&(g=nt(g,null,!1,!0),g.dirs=g.dirs?g.dirs.concat(n.dirs):n.dirs),n.transition&&Bt(g,n.transition),U=g,wn(G),U}const ac=e=>{let t;for(const n in e)(n==="class"||n==="style"||Xt(n))&&((t||(t={}))[n]=e[n]);return t},fc=(e,t)=>{const n={};for(const s in e)(!Cs(s)||!(s.slice(9)in t))&&(n[s]=e[s]);return n};function uc(e,t,n){const{props:s,children:r,component:i}=e,{props:o,children:l,patchFlag:c}=t,u=i.emitsOptions;if(t.dirs||t.transition)return!0;if(n&&c>=0){if(c&1024)return!0;if(c&16)return s?cr(s,o,u):!!o;if(c&8){const a=t.dynamicProps;for(let h=0;he.__isSuspense;function Xi(e,t){t&&t.pendingBranch?k(e)?t.effects.push(...e):t.effects.push(e):_l(e)}const Se=Symbol.for("v-fgt"),gt=Symbol.for("v-txt"),ye=Symbol.for("v-cmt"),Dt=Symbol.for("v-stc"),jt=[];let Ae=null;function _s(e=!1){jt.push(Ae=e?null:[])}function dc(){jt.pop(),Ae=jt[jt.length-1]||null}let Kt=1;function ar(e,t=!1){Kt+=e,e<0&&Ae&&t&&(Ae.hasOnce=!0)}function Ji(e){return e.dynamicChildren=Kt>0?Ae||St:null,dc(),Kt>0&&Ae&&Ae.push(e),e}function lf(e,t,n,s,r,i){return Ji(Qi(e,t,n,s,r,i,!0))}function bs(e,t,n,s,r){return Ji(de(e,t,n,s,r,!0))}function qt(e){return e?e.__v_isVNode===!0:!1}function ut(e,t){return e.type===t.type&&e.key===t.key}const zi=({key:e})=>e??null,pn=({ref:e,ref_key:t,ref_for:n})=>(typeof e=="number"&&(e=""+e),e!=null?re(e)||ce(e)||q(e)?{i:ve,r:e,k:t,f:!!n}:e:null);function Qi(e,t=null,n=null,s=0,r=null,i=e===Se?0:1,o=!1,l=!1){const c={__v_isVNode:!0,__v_skip:!0,type:e,props:t,key:t&&zi(t),ref:t&&pn(t),scopeId:gi,slotScopeIds:null,children:n,component:null,suspense:null,ssContent:null,ssFallback:null,dirs:null,transition:null,el:null,anchor:null,target:null,targetStart:null,targetAnchor:null,staticCount:0,shapeFlag:i,patchFlag:s,dynamicProps:r,dynamicChildren:null,appContext:null,ctx:ve};return l?(js(c,n),i&128&&e.normalize(c)):n&&(c.shapeFlag|=re(n)?8:16),Kt>0&&!o&&Ae&&(c.patchFlag>0||i&6)&&c.patchFlag!==32&&Ae.push(c),c}const de=hc;function hc(e,t=null,n=null,s=0,r=null,i=!1){if((!e||e===Ai)&&(e=ye),qt(e)){const l=nt(e,t,!0);return n&&js(l,n),Kt>0&&!i&&Ae&&(l.shapeFlag&6?Ae[Ae.indexOf(e)]=l:Ae.push(l)),l.patchFlag=-2,l}if(xc(e)&&(e=e.__vccOpts),t){t=pc(t);let{class:l,style:c}=t;l&&!re(l)&&(t.class=Os(l)),ne(c)&&(Fs(c)&&!k(c)&&(c=le({},c)),t.style=Rs(c))}const o=re(e)?1:Yi(e)?128:mi(e)?64:ne(e)?4:q(e)?2:0;return Qi(e,t,n,s,r,o,i,!0)}function pc(e){return e?Fs(e)||Ni(e)?le({},e):e:null}function nt(e,t,n=!1,s=!1){const{props:r,ref:i,patchFlag:o,children:l,transition:c}=e,u=t?gc(r||{},t):r,a={__v_isVNode:!0,__v_skip:!0,type:e.type,props:u,key:u&&zi(u),ref:t&&t.ref?n&&i?k(i)?i.concat(pn(t)):[i,pn(t)]:pn(t):i,scopeId:e.scopeId,slotScopeIds:e.slotScopeIds,children:l,target:e.target,targetStart:e.targetStart,targetAnchor:e.targetAnchor,staticCount:e.staticCount,shapeFlag:e.shapeFlag,patchFlag:t&&e.type!==Se?o===-1?16:o|16:o,dynamicProps:e.dynamicProps,dynamicChildren:e.dynamicChildren,appContext:e.appContext,dirs:e.dirs,transition:c,component:e.component,suspense:e.suspense,ssContent:e.ssContent&&nt(e.ssContent),ssFallback:e.ssFallback&&nt(e.ssFallback),el:e.el,anchor:e.anchor,ctx:e.ctx,ce:e.ce};return c&&s&&Bt(a,c.clone(a)),a}function Zi(e=" ",t=0){return de(gt,null,e,t)}function cf(e,t){const n=de(Dt,null,e);return n.staticCount=t,n}function af(e="",t=!1){return t?(_s(),bs(ye,null,e)):de(ye,null,e)}function Pe(e){return e==null||typeof e=="boolean"?de(ye):k(e)?de(Se,null,e.slice()):qt(e)?Qe(e):de(gt,null,String(e))}function Qe(e){return e.el===null&&e.patchFlag!==-1||e.memo?e:nt(e)}function js(e,t){let n=0;const{shapeFlag:s}=e;if(t==null)t=null;else if(k(t))n=16;else if(typeof t=="object")if(s&65){const r=t.default;r&&(r._c&&(r._d=!1),js(e,r()),r._c&&(r._d=!0));return}else{n=32;const r=t._;!r&&!Ni(t)?t._ctx=ve:r===3&&ve&&(ve.slots._===1?t._=1:(t._=2,e.patchFlag|=1024))}else q(t)?(t={default:t,_ctx:ve},n=32):(t=String(t),s&64?(n=16,t=[Zi(t)]):n=8);e.children=t,e.shapeFlag|=n}function gc(...e){const t={};for(let n=0;nfe||ve;let xn,ws;{const e=An(),t=(n,s)=>{let r;return(r=e[n])||(r=e[n]=[]),r.push(s),i=>{r.length>1?r.forEach(o=>o(i)):r[0](i)}};xn=t("__VUE_INSTANCE_SETTERS__",n=>fe=n),ws=t("__VUE_SSR_SETTERS__",n=>Gt=n)}const zt=e=>{const t=fe;return xn(e),e.scope.on(),()=>{e.scope.off(),xn(t)}},fr=()=>{fe&&fe.scope.off(),xn(null)};function eo(e){return e.vnode.shapeFlag&4}let Gt=!1;function _c(e,t=!1,n=!1){t&&ws(t);const{props:s,children:r}=e.vnode,i=eo(e);Xl(e,s,i,t),Zl(e,r,n);const o=i?bc(e,t):void 0;return t&&ws(!1),o}function bc(e,t){const n=e.type;e.accessCache=Object.create(null),e.proxy=new Proxy(e.ctx,jl);const{setup:s}=n;if(s){rt();const r=e.setupContext=s.length>1?no(e):null,i=zt(e),o=Jt(s,e,0,[e.props,r]),l=Vr(o);if(it(),i(),(l||e.sp)&&!pt(e)&&xi(e),l){if(o.then(fr,fr),t)return o.then(c=>{ur(e,c,t)}).catch(c=>{Ln(c,e,0)});e.asyncDep=o}else ur(e,o,t)}else to(e,t)}function ur(e,t,n){q(t)?e.type.__ssrInlineRender?e.ssrRender=t:e.render=t:ne(t)&&(e.setupState=ui(t)),to(e,n)}let dr;function to(e,t,n){const s=e.type;if(!e.render){if(!t&&dr&&!s.render){const r=s.template||$s(e).template;if(r){const{isCustomElement:i,compilerOptions:o}=e.appContext.config,{delimiters:l,compilerOptions:c}=s,u=le(le({isCustomElement:i,delimiters:l},o),c);s.render=dr(r,u)}}e.render=s.render||Ue}{const r=zt(e);rt();try{Ul(e)}finally{it(),r()}}}const wc={get(e,t){return ge(e,"get",""),e[t]}};function no(e){const t=n=>{e.exposed=n||{}};return{attrs:new Proxy(e.attrs,wc),slots:e.slots,emit:e.emit,expose:t}}function Vs(e){return e.exposed?e.exposeProxy||(e.exposeProxy=new Proxy(ui(hn(e.exposed)),{get(t,n){if(n in t)return t[n];if(n in $t)return $t[n](e)},has(t,n){return n in t||n in $t}})):e.proxy}function Sc(e,t=!0){return q(e)?e.displayName||e.name:e.name||t&&e.__name}function xc(e){return q(e)&&"__vccOpts"in e}const oe=(e,t)=>pl(e,t,Gt);function Ss(e,t,n){const s=arguments.length;return s===2?ne(t)&&!k(t)?qt(t)?de(e,null,[t]):de(e,t):de(e,null,t):(s>3?n=Array.prototype.slice.call(arguments,2):s===3&&qt(n)&&(n=[n]),de(e,t,n))}const Ec="3.5.13";/**
+* @vue/runtime-dom v3.5.13
+* (c) 2018-present Yuxi (Evan) You and Vue contributors
+* @license MIT
+**/let xs;const hr=typeof window<"u"&&window.trustedTypes;if(hr)try{xs=hr.createPolicy("vue",{createHTML:e=>e})}catch{}const so=xs?e=>xs.createHTML(e):e=>e,Cc="http://www.w3.org/2000/svg",Tc="http://www.w3.org/1998/Math/MathML",We=typeof document<"u"?document:null,pr=We&&We.createElement("template"),Ac={insert:(e,t,n)=>{t.insertBefore(e,n||null)},remove:e=>{const t=e.parentNode;t&&t.removeChild(e)},createElement:(e,t,n,s)=>{const r=t==="svg"?We.createElementNS(Cc,e):t==="mathml"?We.createElementNS(Tc,e):n?We.createElement(e,{is:n}):We.createElement(e);return e==="select"&&s&&s.multiple!=null&&r.setAttribute("multiple",s.multiple),r},createText:e=>We.createTextNode(e),createComment:e=>We.createComment(e),setText:(e,t)=>{e.nodeValue=t},setElementText:(e,t)=>{e.textContent=t},parentNode:e=>e.parentNode,nextSibling:e=>e.nextSibling,querySelector:e=>We.querySelector(e),setScopeId(e,t){e.setAttribute(t,"")},insertStaticContent(e,t,n,s,r,i){const o=n?n.previousSibling:t.lastChild;if(r&&(r===i||r.nextSibling))for(;t.insertBefore(r.cloneNode(!0),n),!(r===i||!(r=r.nextSibling)););else{pr.innerHTML=so(s==="svg"?`${e}`:s==="mathml"?`${e}`:e);const l=pr.content;if(s==="svg"||s==="mathml"){const c=l.firstChild;for(;c.firstChild;)l.appendChild(c.firstChild);l.removeChild(c)}t.insertBefore(l,n)}return[o?o.nextSibling:t.firstChild,n?n.previousSibling:t.lastChild]}},Xe="transition",Mt="animation",Yt=Symbol("_vtc"),ro={name:String,type:String,css:{type:Boolean,default:!0},duration:[String,Number,Object],enterFromClass:String,enterActiveClass:String,enterToClass:String,appearFromClass:String,appearActiveClass:String,appearToClass:String,leaveFromClass:String,leaveActiveClass:String,leaveToClass:String},Rc=le({},yi,ro),Oc=e=>(e.displayName="Transition",e.props=Rc,e),ff=Oc((e,{slots:t})=>Ss(El,Pc(e),t)),ct=(e,t=[])=>{k(e)?e.forEach(n=>n(...t)):e&&e(...t)},gr=e=>e?k(e)?e.some(t=>t.length>1):e.length>1:!1;function Pc(e){const t={};for(const w in e)w in ro||(t[w]=e[w]);if(e.css===!1)return t;const{name:n="v",type:s,duration:r,enterFromClass:i=`${n}-enter-from`,enterActiveClass:o=`${n}-enter-active`,enterToClass:l=`${n}-enter-to`,appearFromClass:c=i,appearActiveClass:u=o,appearToClass:a=l,leaveFromClass:h=`${n}-leave-from`,leaveActiveClass:y=`${n}-leave-active`,leaveToClass:b=`${n}-leave-to`}=e,L=Ic(r),O=L&&L[0],G=L&&L[1],{onBeforeEnter:U,onEnter:W,onEnterCancelled:g,onLeave:p,onLeaveCancelled:A,onBeforeAppear:D=U,onAppear:j=W,onAppearCancelled:K=g}=t,I=(w,V,se,ie)=>{w._enterCancelled=ie,at(w,V?a:l),at(w,V?u:o),se&&se()},_=(w,V)=>{w._isLeaving=!1,at(w,h),at(w,b),at(w,y),V&&V()},M=w=>(V,se)=>{const ie=w?j:W,H=()=>I(V,w,se);ct(ie,[V,H]),mr(()=>{at(V,w?c:i),Be(V,w?a:l),gr(ie)||yr(V,s,O,H)})};return le(t,{onBeforeEnter(w){ct(U,[w]),Be(w,i),Be(w,o)},onBeforeAppear(w){ct(D,[w]),Be(w,c),Be(w,u)},onEnter:M(!1),onAppear:M(!0),onLeave(w,V){w._isLeaving=!0;const se=()=>_(w,V);Be(w,h),w._enterCancelled?(Be(w,y),br()):(br(),Be(w,y)),mr(()=>{w._isLeaving&&(at(w,h),Be(w,b),gr(p)||yr(w,s,G,se))}),ct(p,[w,se])},onEnterCancelled(w){I(w,!1,void 0,!0),ct(g,[w])},onAppearCancelled(w){I(w,!0,void 0,!0),ct(K,[w])},onLeaveCancelled(w){_(w),ct(A,[w])}})}function Ic(e){if(e==null)return null;if(ne(e))return[Qn(e.enter),Qn(e.leave)];{const t=Qn(e);return[t,t]}}function Qn(e){return Oo(e)}function Be(e,t){t.split(/\s+/).forEach(n=>n&&e.classList.add(n)),(e[Yt]||(e[Yt]=new Set)).add(t)}function at(e,t){t.split(/\s+/).forEach(s=>s&&e.classList.remove(s));const n=e[Yt];n&&(n.delete(t),n.size||(e[Yt]=void 0))}function mr(e){requestAnimationFrame(()=>{requestAnimationFrame(e)})}let Lc=0;function yr(e,t,n,s){const r=e._endId=++Lc,i=()=>{r===e._endId&&s()};if(n!=null)return setTimeout(i,n);const{type:o,timeout:l,propCount:c}=Mc(e,t);if(!o)return s();const u=o+"end";let a=0;const h=()=>{e.removeEventListener(u,y),i()},y=b=>{b.target===e&&++a>=c&&h()};setTimeout(()=>{a(n[L]||"").split(", "),r=s(`${Xe}Delay`),i=s(`${Xe}Duration`),o=vr(r,i),l=s(`${Mt}Delay`),c=s(`${Mt}Duration`),u=vr(l,c);let a=null,h=0,y=0;t===Xe?o>0&&(a=Xe,h=o,y=i.length):t===Mt?u>0&&(a=Mt,h=u,y=c.length):(h=Math.max(o,u),a=h>0?o>u?Xe:Mt:null,y=a?a===Xe?i.length:c.length:0);const b=a===Xe&&/\b(transform|all)(,|$)/.test(s(`${Xe}Property`).toString());return{type:a,timeout:h,propCount:y,hasTransform:b}}function vr(e,t){for(;e.length_r(n)+_r(e[s])))}function _r(e){return e==="auto"?0:Number(e.slice(0,-1).replace(",","."))*1e3}function br(){return document.body.offsetHeight}function Nc(e,t,n){const s=e[Yt];s&&(t=(t?[t,...s]:[...s]).join(" ")),t==null?e.removeAttribute("class"):n?e.setAttribute("class",t):e.className=t}const wr=Symbol("_vod"),Fc=Symbol("_vsh"),Hc=Symbol(""),$c=/(^|;)\s*display\s*:/;function Dc(e,t,n){const s=e.style,r=re(n);let i=!1;if(n&&!r){if(t)if(re(t))for(const o of t.split(";")){const l=o.slice(0,o.indexOf(":")).trim();n[l]==null&&gn(s,l,"")}else for(const o in t)n[o]==null&&gn(s,o,"");for(const o in n)o==="display"&&(i=!0),gn(s,o,n[o])}else if(r){if(t!==n){const o=s[Hc];o&&(n+=";"+o),s.cssText=n,i=$c.test(n)}}else t&&e.removeAttribute("style");wr in e&&(e[wr]=i?s.display:"",e[Fc]&&(s.display="none"))}const Sr=/\s*!important$/;function gn(e,t,n){if(k(n))n.forEach(s=>gn(e,t,s));else if(n==null&&(n=""),t.startsWith("--"))e.setProperty(t,n);else{const s=jc(e,t);Sr.test(n)?e.setProperty(st(s),n.replace(Sr,""),"important"):e[s]=n}}const xr=["Webkit","Moz","ms"],Zn={};function jc(e,t){const n=Zn[t];if(n)return n;let s=Le(t);if(s!=="filter"&&s in e)return Zn[t]=s;s=Tn(s);for(let r=0;res||(Wc.then(()=>es=0),es=Date.now());function qc(e,t){const n=s=>{if(!s._vts)s._vts=Date.now();else if(s._vts<=n.attached)return;He(Gc(s,n.value),t,5,[s])};return n.value=e,n.attached=Kc(),n}function Gc(e,t){if(k(t)){const n=e.stopImmediatePropagation;return e.stopImmediatePropagation=()=>{n.call(e),e._stopped=!0},t.map(s=>r=>!r._stopped&&s&&s(r))}else return t}const Or=e=>e.charCodeAt(0)===111&&e.charCodeAt(1)===110&&e.charCodeAt(2)>96&&e.charCodeAt(2)<123,Yc=(e,t,n,s,r,i)=>{const o=r==="svg";t==="class"?Nc(e,s,o):t==="style"?Dc(e,n,s):Xt(t)?Cs(t)||kc(e,t,n,s,i):(t[0]==="."?(t=t.slice(1),!0):t[0]==="^"?(t=t.slice(1),!1):Xc(e,t,s,o))?(Tr(e,t,s),!e.tagName.includes("-")&&(t==="value"||t==="checked"||t==="selected")&&Cr(e,t,s,o,i,t!=="value")):e._isVueCE&&(/[A-Z]/.test(t)||!re(s))?Tr(e,Le(t),s,i,t):(t==="true-value"?e._trueValue=s:t==="false-value"&&(e._falseValue=s),Cr(e,t,s,o))};function Xc(e,t,n,s){if(s)return!!(t==="innerHTML"||t==="textContent"||t in e&&Or(t)&&q(n));if(t==="spellcheck"||t==="draggable"||t==="translate"||t==="form"||t==="list"&&e.tagName==="INPUT"||t==="type"&&e.tagName==="TEXTAREA")return!1;if(t==="width"||t==="height"){const r=e.tagName;if(r==="IMG"||r==="VIDEO"||r==="CANVAS"||r==="SOURCE")return!1}return Or(t)&&re(n)?!1:t in e}const Jc=["ctrl","shift","alt","meta"],zc={stop:e=>e.stopPropagation(),prevent:e=>e.preventDefault(),self:e=>e.target!==e.currentTarget,ctrl:e=>!e.ctrlKey,shift:e=>!e.shiftKey,alt:e=>!e.altKey,meta:e=>!e.metaKey,left:e=>"button"in e&&e.button!==0,middle:e=>"button"in e&&e.button!==1,right:e=>"button"in e&&e.button!==2,exact:(e,t)=>Jc.some(n=>e[`${n}Key`]&&!t.includes(n))},uf=(e,t)=>{const n=e._withMods||(e._withMods={}),s=t.join(".");return n[s]||(n[s]=(r,...i)=>{for(let o=0;o{const n=e._withKeys||(e._withKeys={}),s=t.join(".");return n[s]||(n[s]=r=>{if(!("key"in r))return;const i=st(r.key);if(t.some(o=>o===i||Qc[o]===i))return e(r)})},Zc=le({patchProp:Yc},Ac);let ts,Pr=!1;function ea(){return ts=Pr?ts:tc(Zc),Pr=!0,ts}const hf=(...e)=>{const t=ea().createApp(...e),{mount:n}=t;return t.mount=s=>{const r=na(s);if(r)return n(r,!0,ta(r))},t};function ta(e){if(e instanceof SVGElement)return"svg";if(typeof MathMLElement=="function"&&e instanceof MathMLElement)return"mathml"}function na(e){return re(e)?document.querySelector(e):e}const pf=(e,t)=>{const n=e.__vccOpts||e;for(const[s,r]of t)n[s]=r;return n},sa=window.__VP_SITE_DATA__;function Us(e){return Gr()?(Do(e),!0):!1}function tt(e){return typeof e=="function"?e():fi(e)}const io=typeof window<"u"&&typeof document<"u";typeof WorkerGlobalScope<"u"&&globalThis instanceof WorkerGlobalScope;const ra=Object.prototype.toString,ia=e=>ra.call(e)==="[object Object]",oo=()=>{},Ir=oa();function oa(){var e,t;return io&&((e=window==null?void 0:window.navigator)==null?void 0:e.userAgent)&&(/iP(?:ad|hone|od)/.test(window.navigator.userAgent)||((t=window==null?void 0:window.navigator)==null?void 0:t.maxTouchPoints)>2&&/iPad|Macintosh/.test(window==null?void 0:window.navigator.userAgent))}function la(e,t){function n(...s){return new Promise((r,i)=>{Promise.resolve(e(()=>t.apply(this,s),{fn:t,thisArg:this,args:s})).then(r).catch(i)})}return n}const lo=e=>e();function ca(e=lo){const t=ue(!0);function n(){t.value=!1}function s(){t.value=!0}const r=(...i)=>{t.value&&e(...i)};return{isActive:In(t),pause:n,resume:s,eventFilter:r}}function aa(e){return jn()}function co(...e){if(e.length!==1)return ul(...e);const t=e[0];return typeof t=="function"?In(cl(()=>({get:t,set:oo}))):ue(t)}function fa(e,t,n={}){const{eventFilter:s=lo,...r}=n;return Fe(e,la(s,t),r)}function ua(e,t,n={}){const{eventFilter:s,...r}=n,{eventFilter:i,pause:o,resume:l,isActive:c}=ca(s);return{stop:fa(e,t,{...r,eventFilter:i}),pause:o,resume:l,isActive:c}}function ks(e,t=!0,n){aa()?Ot(e,n):t?e():Mn(e)}const qe=io?window:void 0;function ao(e){var t;const n=tt(e);return(t=n==null?void 0:n.$el)!=null?t:n}function Rt(...e){let t,n,s,r;if(typeof e[0]=="string"||Array.isArray(e[0])?([n,s,r]=e,t=qe):[t,n,s,r]=e,!t)return oo;Array.isArray(n)||(n=[n]),Array.isArray(s)||(s=[s]);const i=[],o=()=>{i.forEach(a=>a()),i.length=0},l=(a,h,y,b)=>(a.addEventListener(h,y,b),()=>a.removeEventListener(h,y,b)),c=Fe(()=>[ao(t),tt(r)],([a,h])=>{if(o(),!a)return;const y=ia(h)?{...h}:h;i.push(...n.flatMap(b=>s.map(L=>l(a,b,L,y))))},{immediate:!0,flush:"post"}),u=()=>{c(),o()};return Us(u),u}function da(e){return typeof e=="function"?e:typeof e=="string"?t=>t.key===e:Array.isArray(e)?t=>e.includes(t.key):()=>!0}function gf(...e){let t,n,s={};e.length===3?(t=e[0],n=e[1],s=e[2]):e.length===2?typeof e[1]=="object"?(t=!0,n=e[0],s=e[1]):(t=e[0],n=e[1]):(t=!0,n=e[0]);const{target:r=qe,eventName:i="keydown",passive:o=!1,dedupe:l=!1}=s,c=da(t);return Rt(r,i,a=>{a.repeat&&tt(l)||c(a)&&n(a)},o)}function ha(){const e=ue(!1),t=jn();return t&&Ot(()=>{e.value=!0},t),e}function pa(e){const t=ha();return oe(()=>(t.value,!!e()))}function fo(e,t={}){const{window:n=qe}=t,s=pa(()=>n&&"matchMedia"in n&&typeof n.matchMedia=="function");let r;const i=ue(!1),o=u=>{i.value=u.matches},l=()=>{r&&("removeEventListener"in r?r.removeEventListener("change",o):r.removeListener(o))},c=Wi(()=>{s.value&&(l(),r=n.matchMedia(tt(e)),"addEventListener"in r?r.addEventListener("change",o):r.addListener(o),i.value=r.matches)});return Us(()=>{c(),l(),r=void 0}),i}const cn=typeof globalThis<"u"?globalThis:typeof window<"u"?window:typeof global<"u"?global:typeof self<"u"?self:{},an="__vueuse_ssr_handlers__",ga=ma();function ma(){return an in cn||(cn[an]=cn[an]||{}),cn[an]}function uo(e,t){return ga[e]||t}function Bs(e){return fo("(prefers-color-scheme: dark)",e)}function ya(e){return e==null?"any":e instanceof Set?"set":e instanceof Map?"map":e instanceof Date?"date":typeof e=="boolean"?"boolean":typeof e=="string"?"string":typeof e=="object"?"object":Number.isNaN(e)?"any":"number"}const va={boolean:{read:e=>e==="true",write:e=>String(e)},object:{read:e=>JSON.parse(e),write:e=>JSON.stringify(e)},number:{read:e=>Number.parseFloat(e),write:e=>String(e)},any:{read:e=>e,write:e=>String(e)},string:{read:e=>e,write:e=>String(e)},map:{read:e=>new Map(JSON.parse(e)),write:e=>JSON.stringify(Array.from(e.entries()))},set:{read:e=>new Set(JSON.parse(e)),write:e=>JSON.stringify(Array.from(e))},date:{read:e=>new Date(e),write:e=>e.toISOString()}},Lr="vueuse-storage";function _a(e,t,n,s={}){var r;const{flush:i="pre",deep:o=!0,listenToStorageChanges:l=!0,writeDefaults:c=!0,mergeDefaults:u=!1,shallow:a,window:h=qe,eventFilter:y,onError:b=_=>{console.error(_)},initOnMounted:L}=s,O=(a?ci:ue)(typeof t=="function"?t():t);if(!n)try{n=uo("getDefaultStorage",()=>{var _;return(_=qe)==null?void 0:_.localStorage})()}catch(_){b(_)}if(!n)return O;const G=tt(t),U=ya(G),W=(r=s.serializer)!=null?r:va[U],{pause:g,resume:p}=ua(O,()=>D(O.value),{flush:i,deep:o,eventFilter:y});h&&l&&ks(()=>{n instanceof Storage?Rt(h,"storage",K):Rt(h,Lr,I),L&&K()}),L||K();function A(_,M){if(h){const w={key:e,oldValue:_,newValue:M,storageArea:n};h.dispatchEvent(n instanceof Storage?new StorageEvent("storage",w):new CustomEvent(Lr,{detail:w}))}}function D(_){try{const M=n.getItem(e);if(_==null)A(M,null),n.removeItem(e);else{const w=W.write(_);M!==w&&(n.setItem(e,w),A(M,w))}}catch(M){b(M)}}function j(_){const M=_?_.newValue:n.getItem(e);if(M==null)return c&&G!=null&&n.setItem(e,W.write(G)),G;if(!_&&u){const w=W.read(M);return typeof u=="function"?u(w,G):U==="object"&&!Array.isArray(w)?{...G,...w}:w}else return typeof M!="string"?M:W.read(M)}function K(_){if(!(_&&_.storageArea!==n)){if(_&&_.key==null){O.value=G;return}if(!(_&&_.key!==e)){g();try{(_==null?void 0:_.newValue)!==W.write(O.value)&&(O.value=j(_))}catch(M){b(M)}finally{_?Mn(p):p()}}}}function I(_){K(_.detail)}return O}const ba="*,*::before,*::after{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}";function wa(e={}){const{selector:t="html",attribute:n="class",initialValue:s="auto",window:r=qe,storage:i,storageKey:o="vueuse-color-scheme",listenToStorageChanges:l=!0,storageRef:c,emitAuto:u,disableTransition:a=!0}=e,h={auto:"",light:"light",dark:"dark",...e.modes||{}},y=Bs({window:r}),b=oe(()=>y.value?"dark":"light"),L=c||(o==null?co(s):_a(o,s,i,{window:r,listenToStorageChanges:l})),O=oe(()=>L.value==="auto"?b.value:L.value),G=uo("updateHTMLAttrs",(p,A,D)=>{const j=typeof p=="string"?r==null?void 0:r.document.querySelector(p):ao(p);if(!j)return;const K=new Set,I=new Set;let _=null;if(A==="class"){const w=D.split(/\s/g);Object.values(h).flatMap(V=>(V||"").split(/\s/g)).filter(Boolean).forEach(V=>{w.includes(V)?K.add(V):I.add(V)})}else _={key:A,value:D};if(K.size===0&&I.size===0&&_===null)return;let M;a&&(M=r.document.createElement("style"),M.appendChild(document.createTextNode(ba)),r.document.head.appendChild(M));for(const w of K)j.classList.add(w);for(const w of I)j.classList.remove(w);_&&j.setAttribute(_.key,_.value),a&&(r.getComputedStyle(M).opacity,document.head.removeChild(M))});function U(p){var A;G(t,n,(A=h[p])!=null?A:p)}function W(p){e.onChanged?e.onChanged(p,U):U(p)}Fe(O,W,{flush:"post",immediate:!0}),ks(()=>W(O.value));const g=oe({get(){return u?L.value:O.value},set(p){L.value=p}});try{return Object.assign(g,{store:L,system:b,state:O})}catch{return g}}function Sa(e={}){const{valueDark:t="dark",valueLight:n="",window:s=qe}=e,r=wa({...e,onChanged:(l,c)=>{var u;e.onChanged?(u=e.onChanged)==null||u.call(e,l==="dark",c,l):c(l)},modes:{dark:t,light:n}}),i=oe(()=>r.system?r.system.value:Bs({window:s}).value?"dark":"light");return oe({get(){return r.value==="dark"},set(l){const c=l?"dark":"light";i.value===c?r.value="auto":r.value=c}})}function ns(e){return typeof Window<"u"&&e instanceof Window?e.document.documentElement:typeof Document<"u"&&e instanceof Document?e.documentElement:e}function ho(e){const t=window.getComputedStyle(e);if(t.overflowX==="scroll"||t.overflowY==="scroll"||t.overflowX==="auto"&&e.clientWidth1?!0:(t.preventDefault&&t.preventDefault(),!1)}const ss=new WeakMap;function mf(e,t=!1){const n=ue(t);let s=null,r="";Fe(co(e),l=>{const c=ns(tt(l));if(c){const u=c;if(ss.get(u)||ss.set(u,u.style.overflow),u.style.overflow!=="hidden"&&(r=u.style.overflow),u.style.overflow==="hidden")return n.value=!0;if(n.value)return u.style.overflow="hidden"}},{immediate:!0});const i=()=>{const l=ns(tt(e));!l||n.value||(Ir&&(s=Rt(l,"touchmove",c=>{xa(c)},{passive:!1})),l.style.overflow="hidden",n.value=!0)},o=()=>{const l=ns(tt(e));!l||!n.value||(Ir&&(s==null||s()),l.style.overflow=r,ss.delete(l),n.value=!1)};return Us(o),oe({get(){return n.value},set(l){l?i():o()}})}function yf(e={}){const{window:t=qe,behavior:n="auto"}=e;if(!t)return{x:ue(0),y:ue(0)};const s=ue(t.scrollX),r=ue(t.scrollY),i=oe({get(){return s.value},set(l){scrollTo({left:l,behavior:n})}}),o=oe({get(){return r.value},set(l){scrollTo({top:l,behavior:n})}});return Rt(t,"scroll",()=>{s.value=t.scrollX,r.value=t.scrollY},{capture:!1,passive:!0}),{x:i,y:o}}function vf(e={}){const{window:t=qe,initialWidth:n=Number.POSITIVE_INFINITY,initialHeight:s=Number.POSITIVE_INFINITY,listenOrientation:r=!0,includeScrollbar:i=!0,type:o="inner"}=e,l=ue(n),c=ue(s),u=()=>{t&&(o==="outer"?(l.value=t.outerWidth,c.value=t.outerHeight):i?(l.value=t.innerWidth,c.value=t.innerHeight):(l.value=t.document.documentElement.clientWidth,c.value=t.document.documentElement.clientHeight))};if(u(),ks(u),Rt("resize",u,{passive:!0}),r){const a=fo("(orientation: portrait)");Fe(a,()=>u())}return{width:l,height:c}}const rs={};var is={};const po=/^(?:[a-z]+:|\/\/)/i,Ea="vitepress-theme-appearance",Ca=/#.*$/,Ta=/[?#].*$/,Aa=/(?:(^|\/)index)?\.(?:md|html)$/,pe=typeof document<"u",go={relativePath:"404.md",filePath:"",title:"404",description:"Not Found",headers:[],frontmatter:{sidebar:!1,layout:"page"},lastUpdated:0,isNotFound:!0};function Ra(e,t,n=!1){if(t===void 0)return!1;if(e=Mr(`/${e}`),n)return new RegExp(t).test(e);if(Mr(t)!==e)return!1;const s=t.match(Ca);return s?(pe?location.hash:"")===s[0]:!0}function Mr(e){return decodeURI(e).replace(Ta,"").replace(Aa,"$1")}function Oa(e){return po.test(e)}function Pa(e,t){return Object.keys((e==null?void 0:e.locales)||{}).find(n=>n!=="root"&&!Oa(n)&&Ra(t,`/${n}/`,!0))||"root"}function Ia(e,t){var s,r,i,o,l,c,u;const n=Pa(e,t);return Object.assign({},e,{localeIndex:n,lang:((s=e.locales[n])==null?void 0:s.lang)??e.lang,dir:((r=e.locales[n])==null?void 0:r.dir)??e.dir,title:((i=e.locales[n])==null?void 0:i.title)??e.title,titleTemplate:((o=e.locales[n])==null?void 0:o.titleTemplate)??e.titleTemplate,description:((l=e.locales[n])==null?void 0:l.description)??e.description,head:yo(e.head,((c=e.locales[n])==null?void 0:c.head)??[]),themeConfig:{...e.themeConfig,...(u=e.locales[n])==null?void 0:u.themeConfig}})}function mo(e,t){const n=t.title||e.title,s=t.titleTemplate??e.titleTemplate;if(typeof s=="string"&&s.includes(":title"))return s.replace(/:title/g,n);const r=La(e.title,s);return n===r.slice(3)?n:`${n}${r}`}function La(e,t){return t===!1?"":t===!0||t===void 0?` | ${e}`:e===t?"":` | ${t}`}function Ma(e,t){const[n,s]=t;if(n!=="meta")return!1;const r=Object.entries(s)[0];return r==null?!1:e.some(([i,o])=>i===n&&o[r[0]]===r[1])}function yo(e,t){return[...e.filter(n=>!Ma(t,n)),...t]}const Na=/[\u0000-\u001F"#$&*+,:;<=>?[\]^`{|}\u007F]/g,Fa=/^[a-z]:/i;function Nr(e){const t=Fa.exec(e),n=t?t[0]:"";return n+e.slice(n.length).replace(Na,"_").replace(/(^|\/)_+(?=[^/]*$)/,"$1")}const os=new Set;function Ha(e){if(os.size===0){const n=typeof process=="object"&&(is==null?void 0:is.VITE_EXTRA_EXTENSIONS)||(rs==null?void 0:rs.VITE_EXTRA_EXTENSIONS)||"";("3g2,3gp,aac,ai,apng,au,avif,bin,bmp,cer,class,conf,crl,css,csv,dll,doc,eps,epub,exe,gif,gz,ics,ief,jar,jpe,jpeg,jpg,js,json,jsonld,m4a,man,mid,midi,mjs,mov,mp2,mp3,mp4,mpe,mpeg,mpg,mpp,oga,ogg,ogv,ogx,opus,otf,p10,p7c,p7m,p7s,pdf,png,ps,qt,roff,rtf,rtx,ser,svg,t,tif,tiff,tr,ts,tsv,ttf,txt,vtt,wav,weba,webm,webp,woff,woff2,xhtml,xml,yaml,yml,zip"+(n&&typeof n=="string"?","+n:"")).split(",").forEach(s=>os.add(s))}const t=e.split(".").pop();return t==null||!os.has(t.toLowerCase())}const $a=Symbol(),mt=ci(sa);function _f(e){const t=oe(()=>Ia(mt.value,e.data.relativePath)),n=t.value.appearance,s=n==="force-dark"?ue(!0):n==="force-auto"?Bs():n?Sa({storageKey:Ea,initialValue:()=>n==="dark"?"dark":"auto",...typeof n=="object"?n:{}}):ue(!1),r=ue(pe?location.hash:"");return pe&&window.addEventListener("hashchange",()=>{r.value=location.hash}),Fe(()=>e.data,()=>{r.value=pe?location.hash:""}),{site:t,theme:oe(()=>t.value.themeConfig),page:oe(()=>e.data),frontmatter:oe(()=>e.data.frontmatter),params:oe(()=>e.data.params),lang:oe(()=>t.value.lang),dir:oe(()=>e.data.frontmatter.dir||t.value.dir),localeIndex:oe(()=>t.value.localeIndex||"root"),title:oe(()=>mo(t.value,e.data)),description:oe(()=>e.data.description||t.value.description),isDark:s,hash:oe(()=>r.value)}}function Da(){const e=At($a);if(!e)throw new Error("vitepress data not properly injected in app");return e}function ja(e,t){return`${e}${t}`.replace(/\/+/g,"/")}function Fr(e){return po.test(e)||!e.startsWith("/")?e:ja(mt.value.base,e)}function Va(e){let t=e.replace(/\.html$/,"");if(t=decodeURIComponent(t),t=t.replace(/\/$/,"/index"),pe){const n="/learn-wgpu-zh/";t=Nr(t.slice(n.length).replace(/\//g,"_")||"index")+".md";let s=__VP_HASH_MAP__[t.toLowerCase()];if(s||(t=t.endsWith("_index.md")?t.slice(0,-9)+".md":t.slice(0,-3)+"_index.md",s=__VP_HASH_MAP__[t.toLowerCase()]),!s)return null;t=`${n}assets/${t}.${s}.js`}else t=`./${Nr(t.slice(1).replace(/\//g,"_"))}.md.js`;return t}let mn=[];function bf(e){mn.push(e),Hn(()=>{mn=mn.filter(t=>t!==e)})}function Ua(){let e=mt.value.scrollOffset,t=0,n=24;if(typeof e=="object"&&"padding"in e&&(n=e.padding,e=e.selector),typeof e=="number")t=e;else if(typeof e=="string")t=Hr(e,n);else if(Array.isArray(e))for(const s of e){const r=Hr(s,n);if(r){t=r;break}}return t}function Hr(e,t){const n=document.querySelector(e);if(!n)return 0;const s=n.getBoundingClientRect().bottom;return s<0?0:s+t}const ka=Symbol(),vo="http://a.com",Ba=()=>({path:"/",component:null,data:go});function wf(e,t){const n=Pn(Ba()),s={route:n,go:r};async function r(l=pe?location.href:"/"){var c,u;l=ls(l),await((c=s.onBeforeRouteChange)==null?void 0:c.call(s,l))!==!1&&(pe&&l!==ls(location.href)&&(history.replaceState({scrollPosition:window.scrollY},""),history.pushState({},"",l)),await o(l),await((u=s.onAfterRouteChanged)==null?void 0:u.call(s,l)))}let i=null;async function o(l,c=0,u=!1){var y,b;if(await((y=s.onBeforePageLoad)==null?void 0:y.call(s,l))===!1)return;const a=new URL(l,vo),h=i=a.pathname;try{let L=await e(h);if(!L)throw new Error(`Page not found: ${h}`);if(i===h){i=null;const{default:O,__pageData:G}=L;if(!O)throw new Error(`Invalid route component: ${O}`);await((b=s.onAfterPageLoad)==null?void 0:b.call(s,l)),n.path=pe?h:Fr(h),n.component=hn(O),n.data=hn(G),pe&&Mn(()=>{let U=mt.value.base+G.relativePath.replace(/(?:(^|\/)index)?\.md$/,"$1");if(!mt.value.cleanUrls&&!U.endsWith("/")&&(U+=".html"),U!==a.pathname&&(a.pathname=U,l=U+a.search+a.hash,history.replaceState({},"",l)),a.hash&&!c){let W=null;try{W=document.getElementById(decodeURIComponent(a.hash).slice(1))}catch(g){console.warn(g)}if(W){$r(W,a.hash);return}}window.scrollTo(0,c)})}}catch(L){if(!/fetch|Page not found/.test(L.message)&&!/^\/404(\.html|\/)?$/.test(l)&&console.error(L),!u)try{const O=await fetch(mt.value.base+"hashmap.json");window.__VP_HASH_MAP__=await O.json(),await o(l,c,!0);return}catch{}if(i===h){i=null,n.path=pe?h:Fr(h),n.component=t?hn(t):null;const O=pe?h.replace(/(^|\/)$/,"$1index").replace(/(\.html)?$/,".md").replace(/^\//,""):"404.md";n.data={...go,relativePath:O}}}}return pe&&(history.state===null&&history.replaceState({},""),window.addEventListener("click",l=>{if(l.defaultPrevented||!(l.target instanceof Element)||l.target.closest("button")||l.button!==0||l.ctrlKey||l.shiftKey||l.altKey||l.metaKey)return;const c=l.target.closest("a");if(!c||c.closest(".vp-raw")||c.hasAttribute("download")||c.hasAttribute("target"))return;const u=c.getAttribute("href")??(c instanceof SVGAElement?c.getAttribute("xlink:href"):null);if(u==null)return;const{href:a,origin:h,pathname:y,hash:b,search:L}=new URL(u,c.baseURI),O=new URL(location.href);h===O.origin&&Ha(y)&&(l.preventDefault(),y===O.pathname&&L===O.search?(b!==O.hash&&(history.pushState({},"",a),window.dispatchEvent(new HashChangeEvent("hashchange",{oldURL:O.href,newURL:a}))),b?$r(c,b,c.classList.contains("header-anchor")):window.scrollTo(0,0)):r(a))},{capture:!0}),window.addEventListener("popstate",async l=>{var c;l.state!==null&&(await o(ls(location.href),l.state&&l.state.scrollPosition||0),(c=s.onAfterRouteChanged)==null||c.call(s,location.href))}),window.addEventListener("hashchange",l=>{l.preventDefault()})),s}function Wa(){const e=At(ka);if(!e)throw new Error("useRouter() is called without provider.");return e}function _o(){return Wa().route}function $r(e,t,n=!1){let s=null;try{s=e.classList.contains("header-anchor")?e:document.getElementById(decodeURIComponent(t).slice(1))}catch(r){console.warn(r)}if(s){let r=function(){!n||Math.abs(o-window.scrollY)>window.innerHeight?window.scrollTo(0,o):window.scrollTo({left:0,top:o,behavior:"smooth"})};const i=parseInt(window.getComputedStyle(s).paddingTop,10),o=window.scrollY+s.getBoundingClientRect().top-Ua()+i;requestAnimationFrame(r)}}function ls(e){const t=new URL(e,vo);return t.pathname=t.pathname.replace(/(^|\/)index(\.html)?$/,"$1"),mt.value.cleanUrls?t.pathname=t.pathname.replace(/\.html$/,""):!t.pathname.endsWith("/")&&!t.pathname.endsWith(".html")&&(t.pathname+=".html"),t.pathname+t.search+t.hash}const fn=()=>mn.forEach(e=>e()),Sf=Si({name:"VitePressContent",props:{as:{type:[Object,String],default:"div"}},setup(e){const t=_o(),{frontmatter:n,site:s}=Da();return Fe(n,fn,{deep:!0,flush:"post"}),()=>Ss(e.as,s.value.contentProps??{style:{position:"relative"}},[t.component?Ss(t.component,{onVnodeMounted:fn,onVnodeUpdated:fn,onVnodeUnmounted:fn}):"404 Page Not Found"])}}),Ka="modulepreload",qa=function(e){return"/learn-wgpu-zh/"+e},Dr={},xf=function(t,n,s){let r=Promise.resolve();if(n&&n.length>0){document.getElementsByTagName("link");const o=document.querySelector("meta[property=csp-nonce]"),l=(o==null?void 0:o.nonce)||(o==null?void 0:o.getAttribute("nonce"));r=Promise.allSettled(n.map(c=>{if(c=qa(c),c in Dr)return;Dr[c]=!0;const u=c.endsWith(".css"),a=u?'[rel="stylesheet"]':"";if(document.querySelector(`link[href="${c}"]${a}`))return;const h=document.createElement("link");if(h.rel=u?"stylesheet":Ka,u||(h.as="script"),h.crossOrigin="",h.href=c,l&&h.setAttribute("nonce",l),document.head.appendChild(h),u)return new Promise((y,b)=>{h.addEventListener("load",y),h.addEventListener("error",()=>b(new Error(`Unable to preload CSS for ${c}`)))})}))}function i(o){const l=new Event("vite:preloadError",{cancelable:!0});if(l.payload=o,window.dispatchEvent(l),!l.defaultPrevented)throw o}return r.then(o=>{for(const l of o||[])l.status==="rejected"&&i(l.reason);return t().catch(i)})},Ef=Si({setup(e,{slots:t}){const n=ue(!1);return Ot(()=>{n.value=!0}),()=>n.value&&t.default?t.default():null}});function Cf(){pe&&window.addEventListener("click",e=>{var n;const t=e.target;if(t.matches(".vp-code-group input")){const s=(n=t.parentElement)==null?void 0:n.parentElement;if(!s)return;const r=Array.from(s.querySelectorAll("input")).indexOf(t);if(r<0)return;const i=s.querySelector(".blocks");if(!i)return;const o=Array.from(i.children).find(u=>u.classList.contains("active"));if(!o)return;const l=i.children[r];if(!l||o===l)return;o.classList.remove("active"),l.classList.add("active");const c=s==null?void 0:s.querySelector(`label[for="${t.id}"]`);c==null||c.scrollIntoView({block:"nearest"})}})}function Tf(){if(pe){const e=new WeakMap;window.addEventListener("click",t=>{var s;const n=t.target;if(n.matches('div[class*="language-"] > button.copy')){const r=n.parentElement,i=(s=n.nextElementSibling)==null?void 0:s.nextElementSibling;if(!r||!i)return;const o=/language-(shellscript|shell|bash|sh|zsh)/.test(r.className),l=[".vp-copy-ignore",".diff.remove"],c=i.cloneNode(!0);c.querySelectorAll(l.join(",")).forEach(a=>a.remove());let u=c.textContent||"";o&&(u=u.replace(/^ *(\$|>) /gm,"").trim()),Ga(u).then(()=>{n.classList.add("copied"),clearTimeout(e.get(n));const a=setTimeout(()=>{n.classList.remove("copied"),n.blur(),e.delete(n)},2e3);e.set(n,a)})}})}}async function Ga(e){try{return navigator.clipboard.writeText(e)}catch{const t=document.createElement("textarea"),n=document.activeElement;t.value=e,t.setAttribute("readonly",""),t.style.contain="strict",t.style.position="absolute",t.style.left="-9999px",t.style.fontSize="12pt";const s=document.getSelection(),r=s?s.rangeCount>0&&s.getRangeAt(0):null;document.body.appendChild(t),t.select(),t.selectionStart=0,t.selectionEnd=e.length,document.execCommand("copy"),document.body.removeChild(t),r&&(s.removeAllRanges(),s.addRange(r)),n&&n.focus()}}function Af(e,t){let n=!0,s=[];const r=i=>{if(n){n=!1,i.forEach(l=>{const c=cs(l);for(const u of document.head.children)if(u.isEqualNode(c)){s.push(u);return}});return}const o=i.map(cs);s.forEach((l,c)=>{const u=o.findIndex(a=>a==null?void 0:a.isEqualNode(l??null));u!==-1?delete o[u]:(l==null||l.remove(),delete s[c])}),o.forEach(l=>l&&document.head.appendChild(l)),s=[...s,...o].filter(Boolean)};Wi(()=>{const i=e.data,o=t.value,l=i&&i.description,c=i&&i.frontmatter.head||[],u=mo(o,i);u!==document.title&&(document.title=u);const a=l||o.description;let h=document.querySelector("meta[name=description]");h?h.getAttribute("content")!==a&&h.setAttribute("content",a):cs(["meta",{name:"description",content:a}]),r(yo(o.head,Xa(c)))})}function cs([e,t,n]){const s=document.createElement(e);for(const r in t)s.setAttribute(r,t[r]);return n&&(s.innerHTML=n),e==="script"&&t.async==null&&(s.async=!1),s}function Ya(e){return e[0]==="meta"&&e[1]&&e[1].name==="description"}function Xa(e){return e.filter(t=>!Ya(t))}const as=new Set,bo=()=>document.createElement("link"),Ja=e=>{const t=bo();t.rel="prefetch",t.href=e,document.head.appendChild(t)},za=e=>{const t=new XMLHttpRequest;t.open("GET",e,t.withCredentials=!0),t.send()};let un;const Qa=pe&&(un=bo())&&un.relList&&un.relList.supports&&un.relList.supports("prefetch")?Ja:za;function Rf(){if(!pe||!window.IntersectionObserver)return;let e;if((e=navigator.connection)&&(e.saveData||/2g/.test(e.effectiveType)))return;const t=window.requestIdleCallback||setTimeout;let n=null;const s=()=>{n&&n.disconnect(),n=new IntersectionObserver(i=>{i.forEach(o=>{if(o.isIntersecting){const l=o.target;n.unobserve(l);const{pathname:c}=l;if(!as.has(c)){as.add(c);const u=Va(c);u&&Qa(u)}}})}),t(()=>{document.querySelectorAll("#app a").forEach(i=>{const{hostname:o,pathname:l}=new URL(i.href instanceof SVGAnimatedString?i.href.animVal:i.href,i.baseURI),c=l.match(/\.\w+$/);c&&c[0]!==".html"||i.target!=="_blank"&&o===location.hostname&&(l!==location.pathname?n.observe(i):as.add(l))})})};Ot(s);const r=_o();Fe(()=>r.path,s),Hn(()=>{n&&n.disconnect()})}export{rf as $,Nl as A,tf as B,Za as C,ci as D,bf as E,Se as F,de as G,po as H,ef as I,_o as J,gc as K,At as L,vf as M,Rs as N,gf as O,Mn as P,yf as Q,pe as R,In as S,ff as T,mf as U,Yl as V,df as W,sf as X,Ci as Y,uf as Z,pf as _,Zi as a,xf as a0,cf as a1,wf as a2,Va as a3,hf as a4,Rf as a5,Tf as a6,Cf as a7,Ss as a8,ka as a9,_f as aa,$a as ab,Sf as ac,Ef as ad,mt as ae,Af as af,bs as b,lf as c,Si as d,af as e,Ha as f,Fr as g,oe as h,Oa as i,Qi as j,fi as k,Ra as l,fo as m,Os as n,_s as o,ue as p,Fe as q,nf as r,Wi as s,Ho as t,Da as u,Ot as v,bl as w,Hn as x,of as y,Ua as z};
diff --git a/assets/chunks/theme.CcfFSRVj.js b/assets/chunks/theme.CcfFSRVj.js
new file mode 100644
index 000000000..f4d945b02
--- /dev/null
+++ b/assets/chunks/theme.CcfFSRVj.js
@@ -0,0 +1 @@
+import{d as f,o as a,c as l,r as u,a as U,t as T,n as N,b as k,w as v,e as m,T as ce,_,u as $e,i as Be,f as He,g as ue,h as $,j as d,k as i,l as j,m as ae,p as w,q as O,s as Y,v as W,x as de,y as pe,z as Fe,A as Oe,F as A,B as E,C as R,D as ye,E as Q,G as g,H as Pe,I as H,J as X,K as G,L as Z,M as De,N as Le,O as ze,P as Ve,Q as Se,R as ee,S as Ge,U as we,V as Te,W as We,X as Ue,Y as je,Z as Re,$ as qe,a0 as ve,a1 as xe}from"./framework.DyadSNS9.js";const Je=f({__name:"VPBadge",props:{text:{},type:{default:"tip"}},setup(o){return(e,t)=>(a(),l("span",{class:N(["VPBadge",e.type])},[u(e.$slots,"default",{},()=>[U(T(e.text),1)])],2))}}),Ke={key:0,class:"VPBackdrop"},Ye=f({__name:"VPBackdrop",props:{show:{type:Boolean}},setup(o){return(e,t)=>(a(),k(ce,{name:"fade"},{default:v(()=>[e.show?(a(),l("div",Ke)):m("",!0)]),_:1}))}}),Qe=_(Ye,[["__scopeId","data-v-c79a1216"]]),P=$e;function Xe(o,e){let t,s=!1;return()=>{t&&clearTimeout(t),s?t=setTimeout(o,e):(o(),(s=!0)&&setTimeout(()=>s=!1,e))}}function re(o){return/^\//.test(o)?o:`/${o}`}function he(o){const{pathname:e,search:t,hash:s,protocol:n}=new URL(o,"http://a.com");if(Be(o)||o.startsWith("#")||!n.startsWith("http")||!He(e))return o;const{site:r}=P(),c=e.endsWith("/")||e.endsWith(".html")?o:o.replace(/(?:(^\.+)\/)?.*$/,`$1${e.replace(/(\.md)?$/,r.value.cleanUrls?"":".html")}${t}${s}`);return ue(c)}function x({correspondingLink:o=!1}={}){const{site:e,localeIndex:t,page:s,theme:n,hash:r}=P(),c=$(()=>{var p,y;return{label:(p=e.value.locales[t.value])==null?void 0:p.label,link:((y=e.value.locales[t.value])==null?void 0:y.link)||(t.value==="root"?"/":`/${t.value}/`)}});return{localeLinks:$(()=>Object.entries(e.value.locales).flatMap(([p,y])=>c.value.label===y.label?[]:{text:y.label,link:Ze(y.link||(p==="root"?"/":`/${p}/`),n.value.i18nRouting!==!1&&o,s.value.relativePath.slice(c.value.link.length-1),!e.value.cleanUrls)+r.value})),currentLang:c}}function Ze(o,e,t,s){return e?o.replace(/\/$/,"")+re(t.replace(/(^|\/)index\.md$/,"$1").replace(/\.md$/,s?".html":"")):o}const et={class:"NotFound"},tt={class:"code"},nt={class:"title"},ot={class:"quote"},st={class:"action"},at=["href","aria-label"],rt=f({__name:"NotFound",setup(o){const{theme:e}=P(),{currentLang:t}=x();return(s,n)=>{var r,c,h,p,y;return a(),l("div",et,[d("p",tt,T(((r=i(e).notFound)==null?void 0:r.code)??"404"),1),d("h1",nt,T(((c=i(e).notFound)==null?void 0:c.title)??"PAGE NOT FOUND"),1),n[0]||(n[0]=d("div",{class:"divider"},null,-1)),d("blockquote",ot,T(((h=i(e).notFound)==null?void 0:h.quote)??"But if you don't change your direction, and if you keep looking, you may end up where you are heading."),1),d("div",st,[d("a",{class:"link",href:i(ue)(i(t).link),"aria-label":((p=i(e).notFound)==null?void 0:p.linkLabel)??"go to home"},T(((y=i(e).notFound)==null?void 0:y.linkText)??"Take me home"),9,at)])])}}}),it=_(rt,[["__scopeId","data-v-d6be1790"]]);function Ne(o,e){if(Array.isArray(o))return J(o);if(o==null)return[];e=re(e);const t=Object.keys(o).sort((n,r)=>r.split("/").length-n.split("/").length).find(n=>e.startsWith(re(n))),s=t?o[t]:[];return Array.isArray(s)?J(s):J(s.items,s.base)}function lt(o){const e=[];let t=0;for(const s in o){const n=o[s];if(n.items){t=e.push(n);continue}e[t]||e.push({items:[]}),e[t].items.push(n)}return e}function ct(o){const e=[];function t(s){for(const n of s)n.text&&n.link&&e.push({text:n.text,link:n.link,docFooterText:n.docFooterText}),n.items&&t(n.items)}return t(o),e}function ie(o,e){return Array.isArray(e)?e.some(t=>ie(o,t)):j(o,e.link)?!0:e.items?ie(o,e.items):!1}function J(o,e){return[...o].map(t=>{const s={...t},n=s.base||e;return n&&s.link&&(s.link=n+s.link),s.items&&(s.items=J(s.items,n)),s})}function D(){const{frontmatter:o,page:e,theme:t}=P(),s=ae("(min-width: 960px)"),n=w(!1),r=$(()=>{const C=t.value.sidebar,S=e.value.relativePath;return C?Ne(C,S):[]}),c=w(r.value);O(r,(C,S)=>{JSON.stringify(C)!==JSON.stringify(S)&&(c.value=r.value)});const h=$(()=>o.value.sidebar!==!1&&c.value.length>0&&o.value.layout!=="home"),p=$(()=>y?o.value.aside==null?t.value.aside==="left":o.value.aside==="left":!1),y=$(()=>o.value.layout==="home"?!1:o.value.aside!=null?!!o.value.aside:t.value.aside!==!1),L=$(()=>h.value&&s.value),b=$(()=>h.value?lt(c.value):[]);function V(){n.value=!0}function I(){n.value=!1}function M(){n.value?I():V()}return{isOpen:n,sidebar:c,sidebarGroups:b,hasSidebar:h,hasAside:y,leftAside:p,isSidebarEnabled:L,open:V,close:I,toggle:M}}function ut(o,e){let t;Y(()=>{t=o.value?document.activeElement:void 0}),W(()=>{window.addEventListener("keyup",s)}),de(()=>{window.removeEventListener("keyup",s)});function s(n){n.key==="Escape"&&o.value&&(e(),t==null||t.focus())}}function dt(o){const{page:e,hash:t}=P(),s=w(!1),n=$(()=>o.value.collapsed!=null),r=$(()=>!!o.value.link),c=w(!1),h=()=>{c.value=j(e.value.relativePath,o.value.link)};O([e,o,t],h),W(h);const p=$(()=>c.value?!0:o.value.items?ie(e.value.relativePath,o.value.items):!1),y=$(()=>!!(o.value.items&&o.value.items.length));Y(()=>{s.value=!!(n.value&&o.value.collapsed)}),pe(()=>{(c.value||p.value)&&(s.value=!1)});function L(){n.value&&(s.value=!s.value)}return{collapsed:s,collapsible:n,isLink:r,isActiveLink:c,hasActiveLink:p,hasChildren:y,toggle:L}}function pt(){const{hasSidebar:o}=D(),e=ae("(min-width: 960px)"),t=ae("(min-width: 1280px)");return{isAsideEnabled:$(()=>!t.value&&!e.value?!1:o.value?t.value:e.value)}}const le=[];function Ie(o){return typeof o.outline=="object"&&!Array.isArray(o.outline)&&o.outline.label||o.outlineTitle||"On this page"}function me(o){const e=[...document.querySelectorAll(".VPDoc :where(h1,h2,h3,h4,h5,h6)")].filter(t=>t.id&&t.hasChildNodes()).map(t=>{const s=Number(t.tagName[1]);return{element:t,title:vt(t),link:"#"+t.id,level:s}});return ht(e,o)}function vt(o){let e="";for(const t of o.childNodes)if(t.nodeType===1){if(t.classList.contains("VPBadge")||t.classList.contains("header-anchor")||t.classList.contains("ignore-header"))continue;e+=t.textContent}else t.nodeType===3&&(e+=t.textContent);return e.trim()}function ht(o,e){if(e===!1)return[];const t=(typeof e=="object"&&!Array.isArray(e)?e.level:e)||2,[s,n]=typeof t=="number"?[t,t]:t==="deep"?[2,6]:t;return _t(o,s,n)}function mt(o,e){const{isAsideEnabled:t}=pt(),s=Xe(r,100);let n=null;W(()=>{requestAnimationFrame(r),window.addEventListener("scroll",s)}),Oe(()=>{c(location.hash)}),de(()=>{window.removeEventListener("scroll",s)});function r(){if(!t.value)return;const h=window.scrollY,p=window.innerHeight,y=document.body.offsetHeight,L=Math.abs(h+p-y)<1,b=le.map(({element:I,link:M})=>({link:M,top:ft(I)})).filter(({top:I})=>!Number.isNaN(I)).sort((I,M)=>I.top-M.top);if(!b.length){c(null);return}if(h<1){c(null);return}if(L){c(b[b.length-1].link);return}let V=null;for(const{link:I,top:M}of b){if(M>h+Fe()+4)break;V=I}c(V)}function c(h){n&&n.classList.remove("active"),h==null?n=null:n=o.value.querySelector(`a[href="${decodeURIComponent(h)}"]`);const p=n;p?(p.classList.add("active"),e.value.style.top=p.offsetTop+39+"px",e.value.style.opacity="1"):(e.value.style.top="33px",e.value.style.opacity="0")}}function ft(o){let e=0;for(;o!==document.body;){if(o===null)return NaN;e+=o.offsetTop,o=o.offsetParent}return e}function _t(o,e,t){le.length=0;const s=[],n=[];return o.forEach(r=>{const c={...r,children:[]};let h=n[n.length-1];for(;h&&h.level>=c.level;)n.pop(),h=n[n.length-1];if(c.element.classList.contains("ignore-header")||h&&"shouldIgnore"in h){n.push({level:c.level,shouldIgnore:!0});return}c.level>t||c.level{const n=R("VPDocOutlineItem",!0);return a(),l("ul",{class:N(["VPDocOutlineItem",t.root?"root":"nested"])},[(a(!0),l(A,null,E(t.headers,({children:r,link:c,title:h})=>(a(),l("li",null,[d("a",{class:"outline-link",href:c,onClick:e,title:h},T(h),9,gt),r!=null&&r.length?(a(),k(n,{key:0,headers:r},null,8,["headers"])):m("",!0)]))),256))],2)}}}),Ae=_(kt,[["__scopeId","data-v-b933a997"]]),bt={class:"content"},$t={"aria-level":"2",class:"outline-title",id:"doc-outline-aria-label",role:"heading"},yt=f({__name:"VPDocAsideOutline",setup(o){const{frontmatter:e,theme:t}=P(),s=ye([]);Q(()=>{s.value=me(e.value.outline??t.value.outline)});const n=w(),r=w();return mt(n,r),(c,h)=>(a(),l("nav",{"aria-labelledby":"doc-outline-aria-label",class:N(["VPDocAsideOutline",{"has-outline":s.value.length>0}]),ref_key:"container",ref:n},[d("div",bt,[d("div",{class:"outline-marker",ref_key:"marker",ref:r},null,512),d("div",$t,T(i(Ie)(i(t))),1),g(Ae,{headers:s.value,root:!0},null,8,["headers"])])],2))}}),Pt=_(yt,[["__scopeId","data-v-a5bbad30"]]),Lt={class:"VPDocAsideCarbonAds"},Vt=f({__name:"VPDocAsideCarbonAds",props:{carbonAds:{}},setup(o){const e=()=>null;return(t,s)=>(a(),l("div",Lt,[g(i(e),{"carbon-ads":t.carbonAds},null,8,["carbon-ads"])]))}}),St={class:"VPDocAside"},wt=f({__name:"VPDocAside",setup(o){const{theme:e}=P();return(t,s)=>(a(),l("div",St,[u(t.$slots,"aside-top",{},void 0,!0),u(t.$slots,"aside-outline-before",{},void 0,!0),g(Pt),u(t.$slots,"aside-outline-after",{},void 0,!0),s[0]||(s[0]=d("div",{class:"spacer"},null,-1)),u(t.$slots,"aside-ads-before",{},void 0,!0),i(e).carbonAds?(a(),k(Vt,{key:0,"carbon-ads":i(e).carbonAds},null,8,["carbon-ads"])):m("",!0),u(t.$slots,"aside-ads-after",{},void 0,!0),u(t.$slots,"aside-bottom",{},void 0,!0)]))}}),Tt=_(wt,[["__scopeId","data-v-3f215769"]]);function Nt(){const{theme:o,page:e}=P();return $(()=>{const{text:t="Edit this page",pattern:s=""}=o.value.editLink||{};let n;return typeof s=="function"?n=s(e.value):n=s.replace(/:path/g,e.value.filePath),{url:n,text:t}})}function It(){const{page:o,theme:e,frontmatter:t}=P();return $(()=>{var y,L,b,V,I,M,C,S;const s=Ne(e.value.sidebar,o.value.relativePath),n=ct(s),r=At(n,B=>B.link.replace(/[?#].*$/,"")),c=r.findIndex(B=>j(o.value.relativePath,B.link)),h=((y=e.value.docFooter)==null?void 0:y.prev)===!1&&!t.value.prev||t.value.prev===!1,p=((L=e.value.docFooter)==null?void 0:L.next)===!1&&!t.value.next||t.value.next===!1;return{prev:h?void 0:{text:(typeof t.value.prev=="string"?t.value.prev:typeof t.value.prev=="object"?t.value.prev.text:void 0)??((b=r[c-1])==null?void 0:b.docFooterText)??((V=r[c-1])==null?void 0:V.text),link:(typeof t.value.prev=="object"?t.value.prev.link:void 0)??((I=r[c-1])==null?void 0:I.link)},next:p?void 0:{text:(typeof t.value.next=="string"?t.value.next:typeof t.value.next=="object"?t.value.next.text:void 0)??((M=r[c+1])==null?void 0:M.docFooterText)??((C=r[c+1])==null?void 0:C.text),link:(typeof t.value.next=="object"?t.value.next.link:void 0)??((S=r[c+1])==null?void 0:S.link)}}})}function At(o,e){const t=new Set;return o.filter(s=>{const n=e(s);return t.has(n)?!1:t.add(n)})}const F=f({__name:"VPLink",props:{tag:{},href:{},noIcon:{type:Boolean},target:{},rel:{}},setup(o){const e=o,t=$(()=>e.tag??(e.href?"a":"span")),s=$(()=>e.href&&Pe.test(e.href)||e.target==="_blank");return(n,r)=>(a(),k(H(t.value),{class:N(["VPLink",{link:n.href,"vp-external-link-icon":s.value,"no-icon":n.noIcon}]),href:n.href?i(he)(n.href):void 0,target:n.target??(s.value?"_blank":void 0),rel:n.rel??(s.value?"noreferrer":void 0)},{default:v(()=>[u(n.$slots,"default")]),_:3},8,["class","href","target","rel"]))}}),Mt={class:"VPLastUpdated"},Ct=["datetime"],Et=f({__name:"VPDocFooterLastUpdated",setup(o){const{theme:e,page:t,lang:s}=P(),n=$(()=>new Date(t.value.lastUpdated)),r=$(()=>n.value.toISOString()),c=w("");return W(()=>{Y(()=>{var h,p,y;c.value=new Intl.DateTimeFormat((p=(h=e.value.lastUpdated)==null?void 0:h.formatOptions)!=null&&p.forceLocale?s.value:void 0,((y=e.value.lastUpdated)==null?void 0:y.formatOptions)??{dateStyle:"short",timeStyle:"short"}).format(n.value)})}),(h,p)=>{var y;return a(),l("p",Mt,[U(T(((y=i(e).lastUpdated)==null?void 0:y.text)||i(e).lastUpdatedText||"Last updated")+": ",1),d("time",{datetime:r.value},T(c.value),9,Ct)])}}}),Bt=_(Et,[["__scopeId","data-v-e98dd255"]]),Ht={key:0,class:"VPDocFooter"},Ft={key:0,class:"edit-info"},Ot={key:0,class:"edit-link"},Dt={key:1,class:"last-updated"},zt={key:1,class:"prev-next","aria-labelledby":"doc-footer-aria-label"},Gt={class:"pager"},Wt=["innerHTML"],Ut=["innerHTML"],jt={class:"pager"},Rt=["innerHTML"],qt=["innerHTML"],xt=f({__name:"VPDocFooter",setup(o){const{theme:e,page:t,frontmatter:s}=P(),n=Nt(),r=It(),c=$(()=>e.value.editLink&&s.value.editLink!==!1),h=$(()=>t.value.lastUpdated),p=$(()=>c.value||h.value||r.value.prev||r.value.next);return(y,L)=>{var b,V,I,M;return p.value?(a(),l("footer",Ht,[u(y.$slots,"doc-footer-before",{},void 0,!0),c.value||h.value?(a(),l("div",Ft,[c.value?(a(),l("div",Ot,[g(F,{class:"edit-link-button",href:i(n).url,"no-icon":!0},{default:v(()=>[L[0]||(L[0]=d("span",{class:"vpi-square-pen edit-link-icon"},null,-1)),U(" "+T(i(n).text),1)]),_:1},8,["href"])])):m("",!0),h.value?(a(),l("div",Dt,[g(Bt)])):m("",!0)])):m("",!0),(b=i(r).prev)!=null&&b.link||(V=i(r).next)!=null&&V.link?(a(),l("nav",zt,[L[1]||(L[1]=d("span",{class:"visually-hidden",id:"doc-footer-aria-label"},"Pager",-1)),d("div",Gt,[(I=i(r).prev)!=null&&I.link?(a(),k(F,{key:0,class:"pager-link prev",href:i(r).prev.link},{default:v(()=>{var C;return[d("span",{class:"desc",innerHTML:((C=i(e).docFooter)==null?void 0:C.prev)||"Previous page"},null,8,Wt),d("span",{class:"title",innerHTML:i(r).prev.text},null,8,Ut)]}),_:1},8,["href"])):m("",!0)]),d("div",jt,[(M=i(r).next)!=null&&M.link?(a(),k(F,{key:0,class:"pager-link next",href:i(r).next.link},{default:v(()=>{var C;return[d("span",{class:"desc",innerHTML:((C=i(e).docFooter)==null?void 0:C.next)||"Next page"},null,8,Rt),d("span",{class:"title",innerHTML:i(r).next.text},null,8,qt)]}),_:1},8,["href"])):m("",!0)])])):m("",!0)])):m("",!0)}}}),Jt=_(xt,[["__scopeId","data-v-e257564d"]]),Kt={class:"container"},Yt={class:"aside-container"},Qt={class:"aside-content"},Xt={class:"content"},Zt={class:"content-container"},en={class:"main"},tn=f({__name:"VPDoc",setup(o){const{theme:e}=P(),t=X(),{hasSidebar:s,hasAside:n,leftAside:r}=D(),c=$(()=>t.path.replace(/[./]+/g,"_").replace(/_html$/,""));return(h,p)=>{const y=R("Content");return a(),l("div",{class:N(["VPDoc",{"has-sidebar":i(s),"has-aside":i(n)}])},[u(h.$slots,"doc-top",{},void 0,!0),d("div",Kt,[i(n)?(a(),l("div",{key:0,class:N(["aside",{"left-aside":i(r)}])},[p[0]||(p[0]=d("div",{class:"aside-curtain"},null,-1)),d("div",Yt,[d("div",Qt,[g(Tt,null,{"aside-top":v(()=>[u(h.$slots,"aside-top",{},void 0,!0)]),"aside-bottom":v(()=>[u(h.$slots,"aside-bottom",{},void 0,!0)]),"aside-outline-before":v(()=>[u(h.$slots,"aside-outline-before",{},void 0,!0)]),"aside-outline-after":v(()=>[u(h.$slots,"aside-outline-after",{},void 0,!0)]),"aside-ads-before":v(()=>[u(h.$slots,"aside-ads-before",{},void 0,!0)]),"aside-ads-after":v(()=>[u(h.$slots,"aside-ads-after",{},void 0,!0)]),_:3})])])],2)):m("",!0),d("div",Xt,[d("div",Zt,[u(h.$slots,"doc-before",{},void 0,!0),d("main",en,[g(y,{class:N(["vp-doc",[c.value,i(e).externalLinkIcon&&"external-link-icon-enabled"]])},null,8,["class"])]),g(Jt,null,{"doc-footer-before":v(()=>[u(h.$slots,"doc-footer-before",{},void 0,!0)]),_:3}),u(h.$slots,"doc-after",{},void 0,!0)])])]),u(h.$slots,"doc-bottom",{},void 0,!0)],2)}}}),nn=_(tn,[["__scopeId","data-v-39a288b8"]]),on=f({__name:"VPButton",props:{tag:{},size:{default:"medium"},theme:{default:"brand"},text:{},href:{},target:{},rel:{}},setup(o){const e=o,t=$(()=>e.href&&Pe.test(e.href)),s=$(()=>e.tag||(e.href?"a":"button"));return(n,r)=>(a(),k(H(s.value),{class:N(["VPButton",[n.size,n.theme]]),href:n.href?i(he)(n.href):void 0,target:e.target??(t.value?"_blank":void 0),rel:e.rel??(t.value?"noreferrer":void 0)},{default:v(()=>[U(T(n.text),1)]),_:1},8,["class","href","target","rel"]))}}),sn=_(on,[["__scopeId","data-v-fa7799d5"]]),an=["src","alt"],rn=f({inheritAttrs:!1,__name:"VPImage",props:{image:{},alt:{}},setup(o){return(e,t)=>{const s=R("VPImage",!0);return e.image?(a(),l(A,{key:0},[typeof e.image=="string"||"src"in e.image?(a(),l("img",G({key:0,class:"VPImage"},typeof e.image=="string"?e.$attrs:{...e.image,...e.$attrs},{src:i(ue)(typeof e.image=="string"?e.image:e.image.src),alt:e.alt??(typeof e.image=="string"?"":e.image.alt||"")}),null,16,an)):(a(),l(A,{key:1},[g(s,G({class:"dark",image:e.image.dark,alt:e.image.alt},e.$attrs),null,16,["image","alt"]),g(s,G({class:"light",image:e.image.light,alt:e.image.alt},e.$attrs),null,16,["image","alt"])],64))],64)):m("",!0)}}}),K=_(rn,[["__scopeId","data-v-8426fc1a"]]),ln={class:"container"},cn={class:"main"},un={key:0,class:"name"},dn=["innerHTML"],pn=["innerHTML"],vn=["innerHTML"],hn={key:0,class:"actions"},mn={key:0,class:"image"},fn={class:"image-container"},_n=f({__name:"VPHero",props:{name:{},text:{},tagline:{},image:{},actions:{}},setup(o){const e=Z("hero-image-slot-exists");return(t,s)=>(a(),l("div",{class:N(["VPHero",{"has-image":t.image||i(e)}])},[d("div",ln,[d("div",cn,[u(t.$slots,"home-hero-info-before",{},void 0,!0),u(t.$slots,"home-hero-info",{},()=>[t.name?(a(),l("h1",un,[d("span",{innerHTML:t.name,class:"clip"},null,8,dn)])):m("",!0),t.text?(a(),l("p",{key:1,innerHTML:t.text,class:"text"},null,8,pn)):m("",!0),t.tagline?(a(),l("p",{key:2,innerHTML:t.tagline,class:"tagline"},null,8,vn)):m("",!0)],!0),u(t.$slots,"home-hero-info-after",{},void 0,!0),t.actions?(a(),l("div",hn,[(a(!0),l(A,null,E(t.actions,n=>(a(),l("div",{key:n.link,class:"action"},[g(sn,{tag:"a",size:"medium",theme:n.theme,text:n.text,href:n.link,target:n.target,rel:n.rel},null,8,["theme","text","href","target","rel"])]))),128))])):m("",!0),u(t.$slots,"home-hero-actions-after",{},void 0,!0)]),t.image||i(e)?(a(),l("div",mn,[d("div",fn,[s[0]||(s[0]=d("div",{class:"image-bg"},null,-1)),u(t.$slots,"home-hero-image",{},()=>[t.image?(a(),k(K,{key:0,class:"image-src",image:t.image},null,8,["image"])):m("",!0)],!0)])])):m("",!0)])],2))}}),gn=_(_n,[["__scopeId","data-v-303bb580"]]),kn=f({__name:"VPHomeHero",setup(o){const{frontmatter:e}=P();return(t,s)=>i(e).hero?(a(),k(gn,{key:0,class:"VPHomeHero",name:i(e).hero.name,text:i(e).hero.text,tagline:i(e).hero.tagline,image:i(e).hero.image,actions:i(e).hero.actions},{"home-hero-info-before":v(()=>[u(t.$slots,"home-hero-info-before")]),"home-hero-info":v(()=>[u(t.$slots,"home-hero-info")]),"home-hero-info-after":v(()=>[u(t.$slots,"home-hero-info-after")]),"home-hero-actions-after":v(()=>[u(t.$slots,"home-hero-actions-after")]),"home-hero-image":v(()=>[u(t.$slots,"home-hero-image")]),_:3},8,["name","text","tagline","image","actions"])):m("",!0)}}),bn={class:"box"},$n={key:0,class:"icon"},yn=["innerHTML"],Pn=["innerHTML"],Ln=["innerHTML"],Vn={key:4,class:"link-text"},Sn={class:"link-text-value"},wn=f({__name:"VPFeature",props:{icon:{},title:{},details:{},link:{},linkText:{},rel:{},target:{}},setup(o){return(e,t)=>(a(),k(F,{class:"VPFeature",href:e.link,rel:e.rel,target:e.target,"no-icon":!0,tag:e.link?"a":"div"},{default:v(()=>[d("article",bn,[typeof e.icon=="object"&&e.icon.wrap?(a(),l("div",$n,[g(K,{image:e.icon,alt:e.icon.alt,height:e.icon.height||48,width:e.icon.width||48},null,8,["image","alt","height","width"])])):typeof e.icon=="object"?(a(),k(K,{key:1,image:e.icon,alt:e.icon.alt,height:e.icon.height||48,width:e.icon.width||48},null,8,["image","alt","height","width"])):e.icon?(a(),l("div",{key:2,class:"icon",innerHTML:e.icon},null,8,yn)):m("",!0),d("h2",{class:"title",innerHTML:e.title},null,8,Pn),e.details?(a(),l("p",{key:3,class:"details",innerHTML:e.details},null,8,Ln)):m("",!0),e.linkText?(a(),l("div",Vn,[d("p",Sn,[U(T(e.linkText)+" ",1),t[0]||(t[0]=d("span",{class:"vpi-arrow-right link-text-icon"},null,-1))])])):m("",!0)])]),_:1},8,["href","rel","target","tag"]))}}),Tn=_(wn,[["__scopeId","data-v-a3976bdc"]]),Nn={key:0,class:"VPFeatures"},In={class:"container"},An={class:"items"},Mn=f({__name:"VPFeatures",props:{features:{}},setup(o){const e=o,t=$(()=>{const s=e.features.length;if(s){if(s===2)return"grid-2";if(s===3)return"grid-3";if(s%3===0)return"grid-6";if(s>3)return"grid-4"}else return});return(s,n)=>s.features?(a(),l("div",Nn,[d("div",In,[d("div",An,[(a(!0),l(A,null,E(s.features,r=>(a(),l("div",{key:r.title,class:N(["item",[t.value]])},[g(Tn,{icon:r.icon,title:r.title,details:r.details,link:r.link,"link-text":r.linkText,rel:r.rel,target:r.target},null,8,["icon","title","details","link","link-text","rel","target"])],2))),128))])])])):m("",!0)}}),Cn=_(Mn,[["__scopeId","data-v-a6181336"]]),En=f({__name:"VPHomeFeatures",setup(o){const{frontmatter:e}=P();return(t,s)=>i(e).features?(a(),k(Cn,{key:0,class:"VPHomeFeatures",features:i(e).features},null,8,["features"])):m("",!0)}}),Bn=f({__name:"VPHomeContent",setup(o){const{width:e}=De({initialWidth:0,includeScrollbar:!1});return(t,s)=>(a(),l("div",{class:"vp-doc container",style:Le(i(e)?{"--vp-offset":`calc(50% - ${i(e)/2}px)`}:{})},[u(t.$slots,"default",{},void 0,!0)],4))}}),Hn=_(Bn,[["__scopeId","data-v-8e2d4988"]]),Fn={class:"VPHome"},On=f({__name:"VPHome",setup(o){const{frontmatter:e}=P();return(t,s)=>{const n=R("Content");return a(),l("div",Fn,[u(t.$slots,"home-hero-before",{},void 0,!0),g(kn,null,{"home-hero-info-before":v(()=>[u(t.$slots,"home-hero-info-before",{},void 0,!0)]),"home-hero-info":v(()=>[u(t.$slots,"home-hero-info",{},void 0,!0)]),"home-hero-info-after":v(()=>[u(t.$slots,"home-hero-info-after",{},void 0,!0)]),"home-hero-actions-after":v(()=>[u(t.$slots,"home-hero-actions-after",{},void 0,!0)]),"home-hero-image":v(()=>[u(t.$slots,"home-hero-image",{},void 0,!0)]),_:3}),u(t.$slots,"home-hero-after",{},void 0,!0),u(t.$slots,"home-features-before",{},void 0,!0),g(En),u(t.$slots,"home-features-after",{},void 0,!0),i(e).markdownStyles!==!1?(a(),k(Hn,{key:0},{default:v(()=>[g(n)]),_:1})):(a(),k(n,{key:1}))])}}}),Dn=_(On,[["__scopeId","data-v-686f80a6"]]),zn={},Gn={class:"VPPage"};function Wn(o,e){const t=R("Content");return a(),l("div",Gn,[u(o.$slots,"page-top"),g(t),u(o.$slots,"page-bottom")])}const Un=_(zn,[["render",Wn]]),jn=f({__name:"VPContent",setup(o){const{page:e,frontmatter:t}=P(),{hasSidebar:s}=D();return(n,r)=>(a(),l("div",{class:N(["VPContent",{"has-sidebar":i(s),"is-home":i(t).layout==="home"}]),id:"VPContent"},[i(e).isNotFound?u(n.$slots,"not-found",{key:0},()=>[g(it)],!0):i(t).layout==="page"?(a(),k(Un,{key:1},{"page-top":v(()=>[u(n.$slots,"page-top",{},void 0,!0)]),"page-bottom":v(()=>[u(n.$slots,"page-bottom",{},void 0,!0)]),_:3})):i(t).layout==="home"?(a(),k(Dn,{key:2},{"home-hero-before":v(()=>[u(n.$slots,"home-hero-before",{},void 0,!0)]),"home-hero-info-before":v(()=>[u(n.$slots,"home-hero-info-before",{},void 0,!0)]),"home-hero-info":v(()=>[u(n.$slots,"home-hero-info",{},void 0,!0)]),"home-hero-info-after":v(()=>[u(n.$slots,"home-hero-info-after",{},void 0,!0)]),"home-hero-actions-after":v(()=>[u(n.$slots,"home-hero-actions-after",{},void 0,!0)]),"home-hero-image":v(()=>[u(n.$slots,"home-hero-image",{},void 0,!0)]),"home-hero-after":v(()=>[u(n.$slots,"home-hero-after",{},void 0,!0)]),"home-features-before":v(()=>[u(n.$slots,"home-features-before",{},void 0,!0)]),"home-features-after":v(()=>[u(n.$slots,"home-features-after",{},void 0,!0)]),_:3})):i(t).layout&&i(t).layout!=="doc"?(a(),k(H(i(t).layout),{key:3})):(a(),k(nn,{key:4},{"doc-top":v(()=>[u(n.$slots,"doc-top",{},void 0,!0)]),"doc-bottom":v(()=>[u(n.$slots,"doc-bottom",{},void 0,!0)]),"doc-footer-before":v(()=>[u(n.$slots,"doc-footer-before",{},void 0,!0)]),"doc-before":v(()=>[u(n.$slots,"doc-before",{},void 0,!0)]),"doc-after":v(()=>[u(n.$slots,"doc-after",{},void 0,!0)]),"aside-top":v(()=>[u(n.$slots,"aside-top",{},void 0,!0)]),"aside-outline-before":v(()=>[u(n.$slots,"aside-outline-before",{},void 0,!0)]),"aside-outline-after":v(()=>[u(n.$slots,"aside-outline-after",{},void 0,!0)]),"aside-ads-before":v(()=>[u(n.$slots,"aside-ads-before",{},void 0,!0)]),"aside-ads-after":v(()=>[u(n.$slots,"aside-ads-after",{},void 0,!0)]),"aside-bottom":v(()=>[u(n.$slots,"aside-bottom",{},void 0,!0)]),_:3}))],2))}}),Rn=_(jn,[["__scopeId","data-v-1428d186"]]),qn={class:"container"},xn=["innerHTML"],Jn=["innerHTML"],Kn=f({__name:"VPFooter",setup(o){const{theme:e,frontmatter:t}=P(),{hasSidebar:s}=D();return(n,r)=>i(e).footer&&i(t).footer!==!1?(a(),l("footer",{key:0,class:N(["VPFooter",{"has-sidebar":i(s)}])},[d("div",qn,[i(e).footer.message?(a(),l("p",{key:0,class:"message",innerHTML:i(e).footer.message},null,8,xn)):m("",!0),i(e).footer.copyright?(a(),l("p",{key:1,class:"copyright",innerHTML:i(e).footer.copyright},null,8,Jn)):m("",!0)])],2)):m("",!0)}}),Yn=_(Kn,[["__scopeId","data-v-e315a0ad"]]);function Qn(){const{theme:o,frontmatter:e}=P(),t=ye([]),s=$(()=>t.value.length>0);return Q(()=>{t.value=me(e.value.outline??o.value.outline)}),{headers:t,hasLocalNav:s}}const Xn={class:"menu-text"},Zn={class:"header"},eo={class:"outline"},to=f({__name:"VPLocalNavOutlineDropdown",props:{headers:{},navHeight:{}},setup(o){const e=o,{theme:t}=P(),s=w(!1),n=w(0),r=w(),c=w();function h(b){var V;(V=r.value)!=null&&V.contains(b.target)||(s.value=!1)}O(s,b=>{if(b){document.addEventListener("click",h);return}document.removeEventListener("click",h)}),ze("Escape",()=>{s.value=!1}),Q(()=>{s.value=!1});function p(){s.value=!s.value,n.value=window.innerHeight+Math.min(window.scrollY-e.navHeight,0)}function y(b){b.target.classList.contains("outline-link")&&(c.value&&(c.value.style.transition="none"),Ve(()=>{s.value=!1}))}function L(){s.value=!1,window.scrollTo({top:0,left:0,behavior:"smooth"})}return(b,V)=>(a(),l("div",{class:"VPLocalNavOutlineDropdown",style:Le({"--vp-vh":n.value+"px"}),ref_key:"main",ref:r},[b.headers.length>0?(a(),l("button",{key:0,onClick:p,class:N({open:s.value})},[d("span",Xn,T(i(Ie)(i(t))),1),V[0]||(V[0]=d("span",{class:"vpi-chevron-right icon"},null,-1))],2)):(a(),l("button",{key:1,onClick:L},T(i(t).returnToTopLabel||"Return to top"),1)),g(ce,{name:"flyout"},{default:v(()=>[s.value?(a(),l("div",{key:0,ref_key:"items",ref:c,class:"items",onClick:y},[d("div",Zn,[d("a",{class:"top-link",href:"#",onClick:L},T(i(t).returnToTopLabel||"Return to top"),1)]),d("div",eo,[g(Ae,{headers:b.headers},null,8,["headers"])])],512)):m("",!0)]),_:1})],4))}}),no=_(to,[["__scopeId","data-v-17a5e62e"]]),oo={class:"container"},so=["aria-expanded"],ao={class:"menu-text"},ro=f({__name:"VPLocalNav",props:{open:{type:Boolean}},emits:["open-menu"],setup(o){const{theme:e,frontmatter:t}=P(),{hasSidebar:s}=D(),{headers:n}=Qn(),{y:r}=Se(),c=w(0);W(()=>{c.value=parseInt(getComputedStyle(document.documentElement).getPropertyValue("--vp-nav-height"))}),Q(()=>{n.value=me(t.value.outline??e.value.outline)});const h=$(()=>n.value.length===0),p=$(()=>h.value&&!s.value),y=$(()=>({VPLocalNav:!0,"has-sidebar":s.value,empty:h.value,fixed:p.value}));return(L,b)=>i(t).layout!=="home"&&(!p.value||i(r)>=c.value)?(a(),l("div",{key:0,class:N(y.value)},[d("div",oo,[i(s)?(a(),l("button",{key:0,class:"menu","aria-expanded":L.open,"aria-controls":"VPSidebarNav",onClick:b[0]||(b[0]=V=>L.$emit("open-menu"))},[b[1]||(b[1]=d("span",{class:"vpi-align-left menu-icon"},null,-1)),d("span",ao,T(i(e).sidebarMenuLabel||"Menu"),1)],8,so)):m("",!0),g(no,{headers:i(n),navHeight:c.value},null,8,["headers","navHeight"])])],2)):m("",!0)}}),io=_(ro,[["__scopeId","data-v-a6f0e41e"]]);function lo(){const o=w(!1);function e(){o.value=!0,window.addEventListener("resize",n)}function t(){o.value=!1,window.removeEventListener("resize",n)}function s(){o.value?t():e()}function n(){window.outerWidth>=768&&t()}const r=X();return O(()=>r.path,t),{isScreenOpen:o,openScreen:e,closeScreen:t,toggleScreen:s}}const co={},uo={class:"VPSwitch",type:"button",role:"switch"},po={class:"check"},vo={key:0,class:"icon"};function ho(o,e){return a(),l("button",uo,[d("span",po,[o.$slots.default?(a(),l("span",vo,[u(o.$slots,"default",{},void 0,!0)])):m("",!0)])])}const mo=_(co,[["render",ho],["__scopeId","data-v-1d5665e3"]]),fo=f({__name:"VPSwitchAppearance",setup(o){const{isDark:e,theme:t}=P(),s=Z("toggle-appearance",()=>{e.value=!e.value}),n=w("");return pe(()=>{n.value=e.value?t.value.lightModeSwitchTitle||"Switch to light theme":t.value.darkModeSwitchTitle||"Switch to dark theme"}),(r,c)=>(a(),k(mo,{title:n.value,class:"VPSwitchAppearance","aria-checked":i(e),onClick:i(s)},{default:v(()=>c[0]||(c[0]=[d("span",{class:"vpi-sun sun"},null,-1),d("span",{class:"vpi-moon moon"},null,-1)])),_:1},8,["title","aria-checked","onClick"]))}}),fe=_(fo,[["__scopeId","data-v-5337faa4"]]),_o={key:0,class:"VPNavBarAppearance"},go=f({__name:"VPNavBarAppearance",setup(o){const{site:e}=P();return(t,s)=>i(e).appearance&&i(e).appearance!=="force-dark"&&i(e).appearance!=="force-auto"?(a(),l("div",_o,[g(fe)])):m("",!0)}}),ko=_(go,[["__scopeId","data-v-6c893767"]]),_e=w();let Me=!1,se=0;function bo(o){const e=w(!1);if(ee){!Me&&$o(),se++;const t=O(_e,s=>{var n,r,c;s===o.el.value||(n=o.el.value)!=null&&n.contains(s)?(e.value=!0,(r=o.onFocus)==null||r.call(o)):(e.value=!1,(c=o.onBlur)==null||c.call(o))});de(()=>{t(),se--,se||yo()})}return Ge(e)}function $o(){document.addEventListener("focusin",Ce),Me=!0,_e.value=document.activeElement}function yo(){document.removeEventListener("focusin",Ce)}function Ce(){_e.value=document.activeElement}const Po={class:"VPMenuLink"},Lo=["innerHTML"],Vo=f({__name:"VPMenuLink",props:{item:{}},setup(o){const{page:e}=P();return(t,s)=>(a(),l("div",Po,[g(F,{class:N({active:i(j)(i(e).relativePath,t.item.activeMatch||t.item.link,!!t.item.activeMatch)}),href:t.item.link,target:t.item.target,rel:t.item.rel,"no-icon":t.item.noIcon},{default:v(()=>[d("span",{innerHTML:t.item.text},null,8,Lo)]),_:1},8,["class","href","target","rel","no-icon"])]))}}),te=_(Vo,[["__scopeId","data-v-35975db6"]]),So={class:"VPMenuGroup"},wo={key:0,class:"title"},To=f({__name:"VPMenuGroup",props:{text:{},items:{}},setup(o){return(e,t)=>(a(),l("div",So,[e.text?(a(),l("p",wo,T(e.text),1)):m("",!0),(a(!0),l(A,null,E(e.items,s=>(a(),l(A,null,["link"in s?(a(),k(te,{key:0,item:s},null,8,["item"])):m("",!0)],64))),256))]))}}),No=_(To,[["__scopeId","data-v-69e747b5"]]),Io={class:"VPMenu"},Ao={key:0,class:"items"},Mo=f({__name:"VPMenu",props:{items:{}},setup(o){return(e,t)=>(a(),l("div",Io,[e.items?(a(),l("div",Ao,[(a(!0),l(A,null,E(e.items,s=>(a(),l(A,{key:JSON.stringify(s)},["link"in s?(a(),k(te,{key:0,item:s},null,8,["item"])):"component"in s?(a(),k(H(s.component),G({key:1,ref_for:!0},s.props),null,16)):(a(),k(No,{key:2,text:s.text,items:s.items},null,8,["text","items"]))],64))),128))])):m("",!0),u(e.$slots,"default",{},void 0,!0)]))}}),Co=_(Mo,[["__scopeId","data-v-b98bc113"]]),Eo=["aria-expanded","aria-label"],Bo={key:0,class:"text"},Ho=["innerHTML"],Fo={key:1,class:"vpi-more-horizontal icon"},Oo={class:"menu"},Do=f({__name:"VPFlyout",props:{icon:{},button:{},label:{},items:{}},setup(o){const e=w(!1),t=w();bo({el:t,onBlur:s});function s(){e.value=!1}return(n,r)=>(a(),l("div",{class:"VPFlyout",ref_key:"el",ref:t,onMouseenter:r[1]||(r[1]=c=>e.value=!0),onMouseleave:r[2]||(r[2]=c=>e.value=!1)},[d("button",{type:"button",class:"button","aria-haspopup":"true","aria-expanded":e.value,"aria-label":n.label,onClick:r[0]||(r[0]=c=>e.value=!e.value)},[n.button||n.icon?(a(),l("span",Bo,[n.icon?(a(),l("span",{key:0,class:N([n.icon,"option-icon"])},null,2)):m("",!0),n.button?(a(),l("span",{key:1,innerHTML:n.button},null,8,Ho)):m("",!0),r[3]||(r[3]=d("span",{class:"vpi-chevron-down text-icon"},null,-1))])):(a(),l("span",Fo))],8,Eo),d("div",Oo,[g(Co,{items:n.items},{default:v(()=>[u(n.$slots,"default",{},void 0,!0)]),_:3},8,["items"])])],544))}}),ge=_(Do,[["__scopeId","data-v-cf11d7a2"]]),zo=["href","aria-label","innerHTML"],Go=f({__name:"VPSocialLink",props:{icon:{},link:{},ariaLabel:{}},setup(o){const e=o,t=w();W(async()=>{var r;await Ve();const n=(r=t.value)==null?void 0:r.children[0];n instanceof HTMLElement&&n.className.startsWith("vpi-social-")&&(getComputedStyle(n).maskImage||getComputedStyle(n).webkitMaskImage)==="none"&&n.style.setProperty("--icon",`url('https://api.iconify.design/simple-icons/${e.icon}.svg')`)});const s=$(()=>typeof e.icon=="object"?e.icon.svg:``);return(n,r)=>(a(),l("a",{ref_key:"el",ref:t,class:"VPSocialLink no-icon",href:n.link,"aria-label":n.ariaLabel??(typeof n.icon=="string"?n.icon:""),target:"_blank",rel:"noopener",innerHTML:s.value},null,8,zo))}}),Wo=_(Go,[["__scopeId","data-v-bd121fe5"]]),Uo={class:"VPSocialLinks"},jo=f({__name:"VPSocialLinks",props:{links:{}},setup(o){return(e,t)=>(a(),l("div",Uo,[(a(!0),l(A,null,E(e.links,({link:s,icon:n,ariaLabel:r})=>(a(),k(Wo,{key:s,icon:n,link:s,ariaLabel:r},null,8,["icon","link","ariaLabel"]))),128))]))}}),ke=_(jo,[["__scopeId","data-v-7bc22406"]]),Ro={key:0,class:"group translations"},qo={class:"trans-title"},xo={key:1,class:"group"},Jo={class:"item appearance"},Ko={class:"label"},Yo={class:"appearance-action"},Qo={key:2,class:"group"},Xo={class:"item social-links"},Zo=f({__name:"VPNavBarExtra",setup(o){const{site:e,theme:t}=P(),{localeLinks:s,currentLang:n}=x({correspondingLink:!0}),r=$(()=>s.value.length&&n.value.label||e.value.appearance||t.value.socialLinks);return(c,h)=>r.value?(a(),k(ge,{key:0,class:"VPNavBarExtra",label:"extra navigation"},{default:v(()=>[i(s).length&&i(n).label?(a(),l("div",Ro,[d("p",qo,T(i(n).label),1),(a(!0),l(A,null,E(i(s),p=>(a(),k(te,{key:p.link,item:p},null,8,["item"]))),128))])):m("",!0),i(e).appearance&&i(e).appearance!=="force-dark"&&i(e).appearance!=="force-auto"?(a(),l("div",xo,[d("div",Jo,[d("p",Ko,T(i(t).darkModeSwitchLabel||"Appearance"),1),d("div",Yo,[g(fe)])])])):m("",!0),i(t).socialLinks?(a(),l("div",Qo,[d("div",Xo,[g(ke,{class:"social-links-list",links:i(t).socialLinks},null,8,["links"])])])):m("",!0)]),_:1})):m("",!0)}}),es=_(Zo,[["__scopeId","data-v-bb2aa2f0"]]),ts=["aria-expanded"],ns=f({__name:"VPNavBarHamburger",props:{active:{type:Boolean}},emits:["click"],setup(o){return(e,t)=>(a(),l("button",{type:"button",class:N(["VPNavBarHamburger",{active:e.active}]),"aria-label":"mobile navigation","aria-expanded":e.active,"aria-controls":"VPNavScreen",onClick:t[0]||(t[0]=s=>e.$emit("click"))},t[1]||(t[1]=[d("span",{class:"container"},[d("span",{class:"top"}),d("span",{class:"middle"}),d("span",{class:"bottom"})],-1)]),10,ts))}}),os=_(ns,[["__scopeId","data-v-e5dd9c1c"]]),ss=["innerHTML"],as=f({__name:"VPNavBarMenuLink",props:{item:{}},setup(o){const{page:e}=P();return(t,s)=>(a(),k(F,{class:N({VPNavBarMenuLink:!0,active:i(j)(i(e).relativePath,t.item.activeMatch||t.item.link,!!t.item.activeMatch)}),href:t.item.link,target:t.item.target,rel:t.item.rel,"no-icon":t.item.noIcon,tabindex:"0"},{default:v(()=>[d("span",{innerHTML:t.item.text},null,8,ss)]),_:1},8,["class","href","target","rel","no-icon"]))}}),rs=_(as,[["__scopeId","data-v-e56f3d57"]]),is=f({__name:"VPNavBarMenuGroup",props:{item:{}},setup(o){const e=o,{page:t}=P(),s=r=>"component"in r?!1:"link"in r?j(t.value.relativePath,r.link,!!e.item.activeMatch):r.items.some(s),n=$(()=>s(e.item));return(r,c)=>(a(),k(ge,{class:N({VPNavBarMenuGroup:!0,active:i(j)(i(t).relativePath,r.item.activeMatch,!!r.item.activeMatch)||n.value}),button:r.item.text,items:r.item.items},null,8,["class","button","items"]))}}),ls={key:0,"aria-labelledby":"main-nav-aria-label",class:"VPNavBarMenu"},cs=f({__name:"VPNavBarMenu",setup(o){const{theme:e}=P();return(t,s)=>i(e).nav?(a(),l("nav",ls,[s[0]||(s[0]=d("span",{id:"main-nav-aria-label",class:"visually-hidden"}," Main Navigation ",-1)),(a(!0),l(A,null,E(i(e).nav,n=>(a(),l(A,{key:JSON.stringify(n)},["link"in n?(a(),k(rs,{key:0,item:n},null,8,["item"])):"component"in n?(a(),k(H(n.component),G({key:1,ref_for:!0},n.props),null,16)):(a(),k(is,{key:2,item:n},null,8,["item"]))],64))),128))])):m("",!0)}}),us=_(cs,[["__scopeId","data-v-dc692963"]]);function ds(o){const{localeIndex:e,theme:t}=P();function s(n){var M,C,S;const r=n.split("."),c=(M=t.value.search)==null?void 0:M.options,h=c&&typeof c=="object",p=h&&((S=(C=c.locales)==null?void 0:C[e.value])==null?void 0:S.translations)||null,y=h&&c.translations||null;let L=p,b=y,V=o;const I=r.pop();for(const B of r){let z=null;const q=V==null?void 0:V[B];q&&(z=V=q);const ne=b==null?void 0:b[B];ne&&(z=b=ne);const oe=L==null?void 0:L[B];oe&&(z=L=oe),q||(V=z),ne||(b=z),oe||(L=z)}return(L==null?void 0:L[I])??(b==null?void 0:b[I])??(V==null?void 0:V[I])??""}return s}const ps=["aria-label"],vs={class:"DocSearch-Button-Container"},hs={class:"DocSearch-Button-Placeholder"},be=f({__name:"VPNavBarSearchButton",setup(o){const t=ds({button:{buttonText:"Search",buttonAriaLabel:"Search"}});return(s,n)=>(a(),l("button",{type:"button",class:"DocSearch DocSearch-Button","aria-label":i(t)("button.buttonAriaLabel")},[d("span",vs,[n[0]||(n[0]=d("span",{class:"vp-icon DocSearch-Search-Icon"},null,-1)),d("span",hs,T(i(t)("button.buttonText")),1)]),n[1]||(n[1]=d("span",{class:"DocSearch-Button-Keys"},[d("kbd",{class:"DocSearch-Button-Key"}),d("kbd",{class:"DocSearch-Button-Key"},"K")],-1))],8,ps))}}),ms={class:"VPNavBarSearch"},fs={id:"local-search"},_s={key:1,id:"docsearch"},gs=f({__name:"VPNavBarSearch",setup(o){const e=()=>null,t=()=>null,{theme:s}=P(),n=w(!1),r=w(!1);W(()=>{});function c(){n.value||(n.value=!0,setTimeout(h,16))}function h(){const L=new Event("keydown");L.key="k",L.metaKey=!0,window.dispatchEvent(L),setTimeout(()=>{document.querySelector(".DocSearch-Modal")||h()},16)}const p=w(!1),y="";return(L,b)=>{var V;return a(),l("div",ms,[i(y)==="local"?(a(),l(A,{key:0},[p.value?(a(),k(i(e),{key:0,onClose:b[0]||(b[0]=I=>p.value=!1)})):m("",!0),d("div",fs,[g(be,{onClick:b[1]||(b[1]=I=>p.value=!0)})])],64)):i(y)==="algolia"?(a(),l(A,{key:1},[n.value?(a(),k(i(t),{key:0,algolia:((V=i(s).search)==null?void 0:V.options)??i(s).algolia,onVnodeBeforeMount:b[2]||(b[2]=I=>r.value=!0)},null,8,["algolia"])):m("",!0),r.value?m("",!0):(a(),l("div",_s,[g(be,{onClick:c})]))],64)):m("",!0)])}}}),ks=f({__name:"VPNavBarSocialLinks",setup(o){const{theme:e}=P();return(t,s)=>i(e).socialLinks?(a(),k(ke,{key:0,class:"VPNavBarSocialLinks",links:i(e).socialLinks},null,8,["links"])):m("",!0)}}),bs=_(ks,[["__scopeId","data-v-0394ad82"]]),$s=["href","rel","target"],ys=["innerHTML"],Ps={key:2},Ls=f({__name:"VPNavBarTitle",setup(o){const{site:e,theme:t}=P(),{hasSidebar:s}=D(),{currentLang:n}=x(),r=$(()=>{var p;return typeof t.value.logoLink=="string"?t.value.logoLink:(p=t.value.logoLink)==null?void 0:p.link}),c=$(()=>{var p;return typeof t.value.logoLink=="string"||(p=t.value.logoLink)==null?void 0:p.rel}),h=$(()=>{var p;return typeof t.value.logoLink=="string"||(p=t.value.logoLink)==null?void 0:p.target});return(p,y)=>(a(),l("div",{class:N(["VPNavBarTitle",{"has-sidebar":i(s)}])},[d("a",{class:"title",href:r.value??i(he)(i(n).link),rel:c.value,target:h.value},[u(p.$slots,"nav-bar-title-before",{},void 0,!0),i(t).logo?(a(),k(K,{key:0,class:"logo",image:i(t).logo},null,8,["image"])):m("",!0),i(t).siteTitle?(a(),l("span",{key:1,innerHTML:i(t).siteTitle},null,8,ys)):i(t).siteTitle===void 0?(a(),l("span",Ps,T(i(e).title),1)):m("",!0),u(p.$slots,"nav-bar-title-after",{},void 0,!0)],8,$s)],2))}}),Vs=_(Ls,[["__scopeId","data-v-1168a8e4"]]),Ss={class:"items"},ws={class:"title"},Ts=f({__name:"VPNavBarTranslations",setup(o){const{theme:e}=P(),{localeLinks:t,currentLang:s}=x({correspondingLink:!0});return(n,r)=>i(t).length&&i(s).label?(a(),k(ge,{key:0,class:"VPNavBarTranslations",icon:"vpi-languages",label:i(e).langMenuLabel||"Change language"},{default:v(()=>[d("div",Ss,[d("p",ws,T(i(s).label),1),(a(!0),l(A,null,E(i(t),c=>(a(),k(te,{key:c.link,item:c},null,8,["item"]))),128))])]),_:1},8,["label"])):m("",!0)}}),Ns=_(Ts,[["__scopeId","data-v-88af2de4"]]),Is={class:"wrapper"},As={class:"container"},Ms={class:"title"},Cs={class:"content"},Es={class:"content-body"},Bs=f({__name:"VPNavBar",props:{isScreenOpen:{type:Boolean}},emits:["toggle-screen"],setup(o){const e=o,{y:t}=Se(),{hasSidebar:s}=D(),{frontmatter:n}=P(),r=w({});return pe(()=>{r.value={"has-sidebar":s.value,home:n.value.layout==="home",top:t.value===0,"screen-open":e.isScreenOpen}}),(c,h)=>(a(),l("div",{class:N(["VPNavBar",r.value])},[d("div",Is,[d("div",As,[d("div",Ms,[g(Vs,null,{"nav-bar-title-before":v(()=>[u(c.$slots,"nav-bar-title-before",{},void 0,!0)]),"nav-bar-title-after":v(()=>[u(c.$slots,"nav-bar-title-after",{},void 0,!0)]),_:3})]),d("div",Cs,[d("div",Es,[u(c.$slots,"nav-bar-content-before",{},void 0,!0),g(gs,{class:"search"}),g(us,{class:"menu"}),g(Ns,{class:"translations"}),g(ko,{class:"appearance"}),g(bs,{class:"social-links"}),g(es,{class:"extra"}),u(c.$slots,"nav-bar-content-after",{},void 0,!0),g(os,{class:"hamburger",active:c.isScreenOpen,onClick:h[0]||(h[0]=p=>c.$emit("toggle-screen"))},null,8,["active"])])])])]),h[1]||(h[1]=d("div",{class:"divider"},[d("div",{class:"divider-line"})],-1))],2))}}),Hs=_(Bs,[["__scopeId","data-v-6aa21345"]]),Fs={key:0,class:"VPNavScreenAppearance"},Os={class:"text"},Ds=f({__name:"VPNavScreenAppearance",setup(o){const{site:e,theme:t}=P();return(s,n)=>i(e).appearance&&i(e).appearance!=="force-dark"&&i(e).appearance!=="force-auto"?(a(),l("div",Fs,[d("p",Os,T(i(t).darkModeSwitchLabel||"Appearance"),1),g(fe)])):m("",!0)}}),zs=_(Ds,[["__scopeId","data-v-b44890b2"]]),Gs=["innerHTML"],Ws=f({__name:"VPNavScreenMenuLink",props:{item:{}},setup(o){const e=Z("close-screen");return(t,s)=>(a(),k(F,{class:"VPNavScreenMenuLink",href:t.item.link,target:t.item.target,rel:t.item.rel,"no-icon":t.item.noIcon,onClick:i(e)},{default:v(()=>[d("span",{innerHTML:t.item.text},null,8,Gs)]),_:1},8,["href","target","rel","no-icon","onClick"]))}}),Us=_(Ws,[["__scopeId","data-v-df37e6dd"]]),js=["innerHTML"],Rs=f({__name:"VPNavScreenMenuGroupLink",props:{item:{}},setup(o){const e=Z("close-screen");return(t,s)=>(a(),k(F,{class:"VPNavScreenMenuGroupLink",href:t.item.link,target:t.item.target,rel:t.item.rel,"no-icon":t.item.noIcon,onClick:i(e)},{default:v(()=>[d("span",{innerHTML:t.item.text},null,8,js)]),_:1},8,["href","target","rel","no-icon","onClick"]))}}),Ee=_(Rs,[["__scopeId","data-v-3e9c20e4"]]),qs={class:"VPNavScreenMenuGroupSection"},xs={key:0,class:"title"},Js=f({__name:"VPNavScreenMenuGroupSection",props:{text:{},items:{}},setup(o){return(e,t)=>(a(),l("div",qs,[e.text?(a(),l("p",xs,T(e.text),1)):m("",!0),(a(!0),l(A,null,E(e.items,s=>(a(),k(Ee,{key:s.text,item:s},null,8,["item"]))),128))]))}}),Ks=_(Js,[["__scopeId","data-v-8133b170"]]),Ys=["aria-controls","aria-expanded"],Qs=["innerHTML"],Xs=["id"],Zs={key:0,class:"item"},ea={key:1,class:"item"},ta={key:2,class:"group"},na=f({__name:"VPNavScreenMenuGroup",props:{text:{},items:{}},setup(o){const e=o,t=w(!1),s=$(()=>`NavScreenGroup-${e.text.replace(" ","-").toLowerCase()}`);function n(){t.value=!t.value}return(r,c)=>(a(),l("div",{class:N(["VPNavScreenMenuGroup",{open:t.value}])},[d("button",{class:"button","aria-controls":s.value,"aria-expanded":t.value,onClick:n},[d("span",{class:"button-text",innerHTML:r.text},null,8,Qs),c[0]||(c[0]=d("span",{class:"vpi-plus button-icon"},null,-1))],8,Ys),d("div",{id:s.value,class:"items"},[(a(!0),l(A,null,E(r.items,h=>(a(),l(A,{key:JSON.stringify(h)},["link"in h?(a(),l("div",Zs,[g(Ee,{item:h},null,8,["item"])])):"component"in h?(a(),l("div",ea,[(a(),k(H(h.component),G({ref_for:!0},h.props,{"screen-menu":""}),null,16))])):(a(),l("div",ta,[g(Ks,{text:h.text,items:h.items},null,8,["text","items"])]))],64))),128))],8,Xs)],2))}}),oa=_(na,[["__scopeId","data-v-b9ab8c58"]]),sa={key:0,class:"VPNavScreenMenu"},aa=f({__name:"VPNavScreenMenu",setup(o){const{theme:e}=P();return(t,s)=>i(e).nav?(a(),l("nav",sa,[(a(!0),l(A,null,E(i(e).nav,n=>(a(),l(A,{key:JSON.stringify(n)},["link"in n?(a(),k(Us,{key:0,item:n},null,8,["item"])):"component"in n?(a(),k(H(n.component),G({key:1,ref_for:!0},n.props,{"screen-menu":""}),null,16)):(a(),k(oa,{key:2,text:n.text||"",items:n.items},null,8,["text","items"]))],64))),128))])):m("",!0)}}),ra=f({__name:"VPNavScreenSocialLinks",setup(o){const{theme:e}=P();return(t,s)=>i(e).socialLinks?(a(),k(ke,{key:0,class:"VPNavScreenSocialLinks",links:i(e).socialLinks},null,8,["links"])):m("",!0)}}),ia={class:"list"},la=f({__name:"VPNavScreenTranslations",setup(o){const{localeLinks:e,currentLang:t}=x({correspondingLink:!0}),s=w(!1);function n(){s.value=!s.value}return(r,c)=>i(e).length&&i(t).label?(a(),l("div",{key:0,class:N(["VPNavScreenTranslations",{open:s.value}])},[d("button",{class:"title",onClick:n},[c[0]||(c[0]=d("span",{class:"vpi-languages icon lang"},null,-1)),U(" "+T(i(t).label)+" ",1),c[1]||(c[1]=d("span",{class:"vpi-chevron-down icon chevron"},null,-1))]),d("ul",ia,[(a(!0),l(A,null,E(i(e),h=>(a(),l("li",{key:h.link,class:"item"},[g(F,{class:"link",href:h.link},{default:v(()=>[U(T(h.text),1)]),_:2},1032,["href"])]))),128))])],2)):m("",!0)}}),ca=_(la,[["__scopeId","data-v-858fe1a4"]]),ua={class:"container"},da=f({__name:"VPNavScreen",props:{open:{type:Boolean}},setup(o){const e=w(null),t=we(ee?document.body:null);return(s,n)=>(a(),k(ce,{name:"fade",onEnter:n[0]||(n[0]=r=>t.value=!0),onAfterLeave:n[1]||(n[1]=r=>t.value=!1)},{default:v(()=>[s.open?(a(),l("div",{key:0,class:"VPNavScreen",ref_key:"screen",ref:e,id:"VPNavScreen"},[d("div",ua,[u(s.$slots,"nav-screen-content-before",{},void 0,!0),g(aa,{class:"menu"}),g(ca,{class:"translations"}),g(zs,{class:"appearance"}),g(ra,{class:"social-links"}),u(s.$slots,"nav-screen-content-after",{},void 0,!0)])],512)):m("",!0)]),_:3}))}}),pa=_(da,[["__scopeId","data-v-f2779853"]]),va={key:0,class:"VPNav"},ha=f({__name:"VPNav",setup(o){const{isScreenOpen:e,closeScreen:t,toggleScreen:s}=lo(),{frontmatter:n}=P(),r=$(()=>n.value.navbar!==!1);return Te("close-screen",t),Y(()=>{ee&&document.documentElement.classList.toggle("hide-nav",!r.value)}),(c,h)=>r.value?(a(),l("header",va,[g(Hs,{"is-screen-open":i(e),onToggleScreen:i(s)},{"nav-bar-title-before":v(()=>[u(c.$slots,"nav-bar-title-before",{},void 0,!0)]),"nav-bar-title-after":v(()=>[u(c.$slots,"nav-bar-title-after",{},void 0,!0)]),"nav-bar-content-before":v(()=>[u(c.$slots,"nav-bar-content-before",{},void 0,!0)]),"nav-bar-content-after":v(()=>[u(c.$slots,"nav-bar-content-after",{},void 0,!0)]),_:3},8,["is-screen-open","onToggleScreen"]),g(pa,{open:i(e)},{"nav-screen-content-before":v(()=>[u(c.$slots,"nav-screen-content-before",{},void 0,!0)]),"nav-screen-content-after":v(()=>[u(c.$slots,"nav-screen-content-after",{},void 0,!0)]),_:3},8,["open"])])):m("",!0)}}),ma=_(ha,[["__scopeId","data-v-ae24b3ad"]]),fa=["role","tabindex"],_a={key:1,class:"items"},ga=f({__name:"VPSidebarItem",props:{item:{},depth:{}},setup(o){const e=o,{collapsed:t,collapsible:s,isLink:n,isActiveLink:r,hasActiveLink:c,hasChildren:h,toggle:p}=dt($(()=>e.item)),y=$(()=>h.value?"section":"div"),L=$(()=>n.value?"a":"div"),b=$(()=>h.value?e.depth+2===7?"p":`h${e.depth+2}`:"p"),V=$(()=>n.value?void 0:"button"),I=$(()=>[[`level-${e.depth}`],{collapsible:s.value},{collapsed:t.value},{"is-link":n.value},{"is-active":r.value},{"has-active":c.value}]);function M(S){"key"in S&&S.key!=="Enter"||!e.item.link&&p()}function C(){e.item.link&&p()}return(S,B)=>{const z=R("VPSidebarItem",!0);return a(),k(H(y.value),{class:N(["VPSidebarItem",I.value])},{default:v(()=>[S.item.text?(a(),l("div",G({key:0,class:"item",role:V.value},Ue(S.item.items?{click:M,keydown:M}:{},!0),{tabindex:S.item.items&&0}),[B[1]||(B[1]=d("div",{class:"indicator"},null,-1)),S.item.link?(a(),k(F,{key:0,tag:L.value,class:"link",href:S.item.link,rel:S.item.rel,target:S.item.target},{default:v(()=>[(a(),k(H(b.value),{class:"text",innerHTML:S.item.text},null,8,["innerHTML"]))]),_:1},8,["tag","href","rel","target"])):(a(),k(H(b.value),{key:1,class:"text",innerHTML:S.item.text},null,8,["innerHTML"])),S.item.collapsed!=null&&S.item.items&&S.item.items.length?(a(),l("div",{key:2,class:"caret",role:"button","aria-label":"toggle section",onClick:C,onKeydown:We(C,["enter"]),tabindex:"0"},B[0]||(B[0]=[d("span",{class:"vpi-chevron-right caret-icon"},null,-1)]),32)):m("",!0)],16,fa)):m("",!0),S.item.items&&S.item.items.length?(a(),l("div",_a,[S.depth<5?(a(!0),l(A,{key:0},E(S.item.items,q=>(a(),k(z,{key:q.text,item:q,depth:S.depth+1},null,8,["item","depth"]))),128)):m("",!0)])):m("",!0)]),_:1},8,["class"])}}}),ka=_(ga,[["__scopeId","data-v-b7550ba0"]]),ba=f({__name:"VPSidebarGroup",props:{items:{}},setup(o){const e=w(!0);let t=null;return W(()=>{t=setTimeout(()=>{t=null,e.value=!1},300)}),je(()=>{t!=null&&(clearTimeout(t),t=null)}),(s,n)=>(a(!0),l(A,null,E(s.items,r=>(a(),l("div",{key:r.text,class:N(["group",{"no-transition":e.value}])},[g(ka,{item:r,depth:0},null,8,["item"])],2))),128))}}),$a=_(ba,[["__scopeId","data-v-c40bc020"]]),ya={class:"nav",id:"VPSidebarNav","aria-labelledby":"sidebar-aria-label",tabindex:"-1"},Pa=f({__name:"VPSidebar",props:{open:{type:Boolean}},setup(o){const{sidebarGroups:e,hasSidebar:t}=D(),s=o,n=w(null),r=we(ee?document.body:null);O([s,n],()=>{var h;s.open?(r.value=!0,(h=n.value)==null||h.focus()):r.value=!1},{immediate:!0,flush:"post"});const c=w(0);return O(e,()=>{c.value+=1},{deep:!0}),(h,p)=>i(t)?(a(),l("aside",{key:0,class:N(["VPSidebar",{open:h.open}]),ref_key:"navEl",ref:n,onClick:p[0]||(p[0]=Re(()=>{},["stop"]))},[p[2]||(p[2]=d("div",{class:"curtain"},null,-1)),d("nav",ya,[p[1]||(p[1]=d("span",{class:"visually-hidden",id:"sidebar-aria-label"}," Sidebar Navigation ",-1)),u(h.$slots,"sidebar-nav-before",{},void 0,!0),(a(),k($a,{items:i(e),key:c.value},null,8,["items"])),u(h.$slots,"sidebar-nav-after",{},void 0,!0)])],2)):m("",!0)}}),La=_(Pa,[["__scopeId","data-v-319d5ca6"]]),Va=f({__name:"VPSkipLink",setup(o){const e=X(),t=w();O(()=>e.path,()=>t.value.focus());function s({target:n}){const r=document.getElementById(decodeURIComponent(n.hash).slice(1));if(r){const c=()=>{r.removeAttribute("tabindex"),r.removeEventListener("blur",c)};r.setAttribute("tabindex","-1"),r.addEventListener("blur",c),r.focus(),window.scrollTo(0,0)}}return(n,r)=>(a(),l(A,null,[d("span",{ref_key:"backToTop",ref:t,tabindex:"-1"},null,512),d("a",{href:"#VPContent",class:"VPSkipLink visually-hidden",onClick:s}," Skip to content ")],64))}}),Sa=_(Va,[["__scopeId","data-v-0f60ec36"]]),wa=f({__name:"Layout",setup(o){const{isOpen:e,open:t,close:s}=D(),n=X();O(()=>n.path,s),ut(e,s);const{frontmatter:r}=P(),c=qe(),h=$(()=>!!c["home-hero-image"]);return Te("hero-image-slot-exists",h),(p,y)=>{const L=R("Content");return i(r).layout!==!1?(a(),l("div",{key:0,class:N(["Layout",i(r).pageClass])},[u(p.$slots,"layout-top",{},void 0,!0),g(Sa),g(Qe,{class:"backdrop",show:i(e),onClick:i(s)},null,8,["show","onClick"]),g(ma,null,{"nav-bar-title-before":v(()=>[u(p.$slots,"nav-bar-title-before",{},void 0,!0)]),"nav-bar-title-after":v(()=>[u(p.$slots,"nav-bar-title-after",{},void 0,!0)]),"nav-bar-content-before":v(()=>[u(p.$slots,"nav-bar-content-before",{},void 0,!0)]),"nav-bar-content-after":v(()=>[u(p.$slots,"nav-bar-content-after",{},void 0,!0)]),"nav-screen-content-before":v(()=>[u(p.$slots,"nav-screen-content-before",{},void 0,!0)]),"nav-screen-content-after":v(()=>[u(p.$slots,"nav-screen-content-after",{},void 0,!0)]),_:3}),g(io,{open:i(e),onOpenMenu:i(t)},null,8,["open","onOpenMenu"]),g(La,{open:i(e)},{"sidebar-nav-before":v(()=>[u(p.$slots,"sidebar-nav-before",{},void 0,!0)]),"sidebar-nav-after":v(()=>[u(p.$slots,"sidebar-nav-after",{},void 0,!0)]),_:3},8,["open"]),g(Rn,null,{"page-top":v(()=>[u(p.$slots,"page-top",{},void 0,!0)]),"page-bottom":v(()=>[u(p.$slots,"page-bottom",{},void 0,!0)]),"not-found":v(()=>[u(p.$slots,"not-found",{},void 0,!0)]),"home-hero-before":v(()=>[u(p.$slots,"home-hero-before",{},void 0,!0)]),"home-hero-info-before":v(()=>[u(p.$slots,"home-hero-info-before",{},void 0,!0)]),"home-hero-info":v(()=>[u(p.$slots,"home-hero-info",{},void 0,!0)]),"home-hero-info-after":v(()=>[u(p.$slots,"home-hero-info-after",{},void 0,!0)]),"home-hero-actions-after":v(()=>[u(p.$slots,"home-hero-actions-after",{},void 0,!0)]),"home-hero-image":v(()=>[u(p.$slots,"home-hero-image",{},void 0,!0)]),"home-hero-after":v(()=>[u(p.$slots,"home-hero-after",{},void 0,!0)]),"home-features-before":v(()=>[u(p.$slots,"home-features-before",{},void 0,!0)]),"home-features-after":v(()=>[u(p.$slots,"home-features-after",{},void 0,!0)]),"doc-footer-before":v(()=>[u(p.$slots,"doc-footer-before",{},void 0,!0)]),"doc-before":v(()=>[u(p.$slots,"doc-before",{},void 0,!0)]),"doc-after":v(()=>[u(p.$slots,"doc-after",{},void 0,!0)]),"doc-top":v(()=>[u(p.$slots,"doc-top",{},void 0,!0)]),"doc-bottom":v(()=>[u(p.$slots,"doc-bottom",{},void 0,!0)]),"aside-top":v(()=>[u(p.$slots,"aside-top",{},void 0,!0)]),"aside-bottom":v(()=>[u(p.$slots,"aside-bottom",{},void 0,!0)]),"aside-outline-before":v(()=>[u(p.$slots,"aside-outline-before",{},void 0,!0)]),"aside-outline-after":v(()=>[u(p.$slots,"aside-outline-after",{},void 0,!0)]),"aside-ads-before":v(()=>[u(p.$slots,"aside-ads-before",{},void 0,!0)]),"aside-ads-after":v(()=>[u(p.$slots,"aside-ads-after",{},void 0,!0)]),_:3}),g(Yn),u(p.$slots,"layout-bottom",{},void 0,!0)],2)):(a(),k(L,{key:1}))}}}),Ta=_(wa,[["__scopeId","data-v-5d98c3a5"]]),Na={Layout:Ta,enhanceApp:({app:o})=>{o.component("Badge",Je)}},Ia={name:"AutoGithubLink",props:{customCodePath:""},data(){return{codePath:""}},mounted(){const o="https://github.com/jinleili/learn-wgpu-zh/tree/master/code/",{page:e}=$e();!this.customCodePath||this.customCodePath==""?this.codePath=o+e.value.relativePath.replace("index.md","").replace(".md",""):this.codePath=o+this.customCodePath}},Aa={class:"auto-github-link"},Ma=["href"];function Ca(o,e,t,s,n,r){return a(),l("div",Aa,[d("a",{href:n.codePath,target:"_blank",rel:"noopener noreferrer"}," 查看源码！ ",8,Ma)])}const Ea=_(Ia,[["render",Ca]]),Ba="/learn-wgpu-zh/res/wx.jpg",Ha={name:"JoinWeiChatGroup"},Fa={src:Ba,style:{width:"312px","margin-top":"24px"}};function Oa(o,e,t,s,n,r){return a(),l("img",Fa)}const Da=_(Ha,[["render",Oa]]);function za(o){return o.replace(/\w\S*/g,function(e){return e.charAt(0).toUpperCase()+e.substr(1).toLowerCase()})}const Ga={name:"WasmExample",props:{example:"",autoLoad:!1,aspectRatio:.7},data(){return{error:"",loading:!1,exampleStarted:!1}},computed:{exampleName(){return za(this.example)}},methods:{async loadExample(){this.loading=!0,this.exampleStarted=!0;try{const o=window.location.protocol+"//"+window.location.host+"/learn-wgpu-zh";(await ve(()=>import(`${o}/wasm/${this.example}.js`.replace("_","-")),[])).default().then(t=>{this.wgpuAppLoaded()},t=>{`${t}`.includes("don't mind me. This isn't actually an error!")?this.wgpuAppLoaded():this.showErr(t)})}catch(o){this.showErr(o)}},wgpuAppLoaded(){this.exampleStarted=!0,this.loading=!1;const o=document.getElementById("wgpu-app-container");if(o){let e=o.getBoundingClientRect().width;o.style.height=`${e*this.aspectRatio}px`}},showErr(o){this.error=`An error occurred loading "${this.example}": ${o}`,console.error(o),this.exampleStarted=!1,this.loading=!1}},async mounted(){await this.$nextTick(),this.autoLoad&&await this.loadExample()}},Wa={id:"wgpu-app-container"},Ua={key:0,class:"error"},ja={key:1,class:"loading"},Ra=["disabled"];function qa(o,e,t,s,n,r){return a(),l("div",Wa,[n.error?(a(),l("div",Ua,T(n.error),1)):m("",!0),n.loading?(a(),l("div",ja," 正在加载 WASM 模块 ... ")):m("",!0),n.exampleStarted?m("",!0):(a(),l("button",{key:2,onClick:e[0]||(e[0]=c=>r.loadExample()),disabled:n.loading},"点此运行 "+T(r.exampleName)+" 示例",9,Ra))])}const xa=_(Ga,[["render",qa]]),Ja={name:"WasmFullScreen",props:{wasmName:""},data(){return{timeOutFunctionId:0,missedResizeCount:0,can_resize_canvas:!0}},methods:{canvas_resize_completed(){this.can_resize_canvas=!0},dispatch_resize_event(){this.can_resize_canvas=!1;let o=document.getElementById("simuverse_container"),e=o.getElementsByTagName("canvas")[0];if(e!=null){let t=window.devicePixelRatio;e.width=o.clientWidth*t,e.height=o.clientHeight*t,e.style.width=o.clientWidth+"px",e.style.height=o.clientHeight+"px",e.style.maxWidth=o.clientWidth+"px",e.style.maxHeight=o.clientHeight+"px"}},window_resized(){let o=document.getElementsByClassName("VPLocalNav");var e=64;o[0]&&(e+=o[0].clientHeight);let t=document.getElementById("simuverse_container");t.style.top=e+"px",clearTimeout(this.timeOutFunctionId),this.can_resize_canvas||this.missedResizeCount>10?(this.missedResizeCount=0,this.timeOutFunctionId=setTimeout(this.dispatch_resize_event,100)):(this.missedResizeCount++,this.timeOutFunctionId=setTimeout(this.window_resized,100))},showAlert(){this.hideLoading();let o=document.getElementById("alert");o!=null&&(o.style.display="block")},hideLoading(){let o=document.getElementById("loading");o!=null&&(o.style.display="none")},async loadSimuverse(){ve(()=>import(`https://jinleili.github.io/simuverse/${this.wasmName}.js`),[]).then(o=>{this.hideLoading(),o.default()}).catch(o=>{})}},async mounted(){window.onresize=this.window_resized,window.dispatch_resize_event=this.dispatch_resize_event,window.canvas_resize_completed=this.canvas_resize_completed,"navigator"in window&&"gpu"in navigator?navigator.gpu.requestAdapter().then(o=>{this.loadSimuverse()}).catch(o=>{this.showAlert()}):this.showAlert()},beforeDestroy(){delete window.onresize,delete window.dispatch_resize_event,delete window.canvas_resize_completed}},Ka={id:"simuverse_container"};function Ya(o,e,t,s,n,r){return a(),l("div",Ka,e[0]||(e[0]=[xe('
 WASM 加载中...
',2)]))}const Qa=_(Ja,[["render",Ya]]);function Xa(o){return o.replace(/\w\S*/g,function(e){return e.charAt(0).toUpperCase()+e.substr(1).toLowerCase()})}const Za={name:"WebGPUExample",props:{example:"",autoLoad:!0,aspectRatio:1},data(){return{error:"",loading:!1,exampleStarted:!1,showAlert:!1}},computed:{exampleName(){return Xa(this.example)}},methods:{detectWebGPUThenLoad(){"navigator"in window&&"gpu"in navigator?navigator.gpu.requestAdapter().then(o=>{this.loadExample()}).catch(o=>{this.showAlert=!0}):this.showAlert=!0},async loadExample(){this.loading=!0,this.exampleStarted=!0;try{const o=window.location.protocol+"//"+window.location.host+"/learn-wgpu-zh";(await ve(()=>import(`${o}/wasm/${this.example}.js`.replace("_","-")),[])).default().then(t=>{this.wgpuAppLoaded()},t=>{`${t}`.includes("don't mind me. This isn't actually an error!")?this.wgpuAppLoaded():this.showErr(t)})}catch(o){this.showErr(o)}},wgpuAppLoaded(){this.exampleStarted=!0,this.loading=!1;const o=document.getElementById("wgpu-app-container");if(o){let e=o.getBoundingClientRect().width;o.style.height=`${e*this.aspectRatio}px`}},showErr(o){this.error=`An error occurred loading "${this.example}": ${o}`,console.error(o),this.exampleStarted=!1,this.loading=!1,this.showAlert=!0}},async mounted(){this.autoLoad&&this.detectWebGPUThenLoad()}},er={id:"wgpu-app-container"},tr={key:0,style:{color:"#353535","margin-top":"20px"}},nr={key:1},or=["disabled"];function sr(o,e,t,s,n,r){return a(),l("div",er,[n.showAlert?(a(),l("div",tr,e[1]||(e[1]=[d("div",{style:{"line-height":"40px"}},"此浏览器版本不支持 WebGPU",-1),d("div",{style:{"font-size":"16px",color:"#999999"}}," 请使用 Chrome / Edge 113+，Arc 或者 Safari 18 ",-1)]))):m("",!0),n.loading?(a(),l("div",nr," 正在加载 WASM 模块 ... ")):m("",!0),n.exampleStarted?m("",!0):(a(),l("button",{key:2,class:"webgpu_example_button",onClick:e[0]||(e[0]=c=>r.detectWebGPUThenLoad()),disabled:n.loading},"点击运行 "+T(r.exampleName),9,or))])}const ar=_(Za,[["render",sr]]),ir={...Na,enhanceApp({app:o}){o.component("AutoGithubLink",Ea),o.component("JoinWeiChatGroup",Da),o.component("WasmExample",xa),o.component("WebGPUExample",ar),o.component("WasmFullScreen",Qa)}};export{ir as R};
diff --git a/assets/chunks/theme.Co5BiKAQ.js b/assets/chunks/theme.Co5BiKAQ.js
deleted file mode 100644
index 931a34925..000000000
--- a/assets/chunks/theme.Co5BiKAQ.js
+++ /dev/null
@@ -1 +0,0 @@
-import{d as f,o as a,c as l,r as u,n as N,a as U,t as T,b as k,w as v,e as m,T as ce,_,u as $e,i as Be,f as He,g as ue,h as $,j as d,k as i,l as j,m as ae,p as w,q as O,s as Y,v as W,x as de,y as pe,z as Fe,A as Oe,B as R,F as A,C as E,D as ye,E as Q,G as g,H,I as Pe,J as X,K as G,L as Z,M as De,N as Le,O as ze,P as Ve,Q as Se,R as ee,S as Ge,U as we,V as Te,W as We,X as Ue,Y as je,Z as Re,$ as qe,a0 as ve,a1 as xe}from"./framework.DdYVMT1V.js";const Je=f({__name:"VPBadge",props:{text:{},type:{default:"tip"}},setup(o){return(e,t)=>(a(),l("span",{class:N(["VPBadge",e.type])},[u(e.$slots,"default",{},()=>[U(T(e.text),1)])],2))}}),Ke={key:0,class:"VPBackdrop"},Ye=f({__name:"VPBackdrop",props:{show:{type:Boolean}},setup(o){return(e,t)=>(a(),k(ce,{name:"fade"},{default:v(()=>[e.show?(a(),l("div",Ke)):m("",!0)]),_:1}))}}),Qe=_(Ye,[["__scopeId","data-v-c79a1216"]]),P=$e;function Xe(o,e){let t,s=!1;return()=>{t&&clearTimeout(t),s?t=setTimeout(o,e):(o(),(s=!0)&&setTimeout(()=>s=!1,e))}}function re(o){return/^\//.test(o)?o:`/${o}`}function he(o){const{pathname:e,search:t,hash:s,protocol:n}=new URL(o,"http://a.com");if(Be(o)||o.startsWith("#")||!n.startsWith("http")||!He(e))return o;const{site:r}=P(),c=e.endsWith("/")||e.endsWith(".html")?o:o.replace(/(?:(^\.+)\/)?.*$/,`$1${e.replace(/(\.md)?$/,r.value.cleanUrls?"":".html")}${t}${s}`);return ue(c)}function x({correspondingLink:o=!1}={}){const{site:e,localeIndex:t,page:s,theme:n,hash:r}=P(),c=$(()=>{var p,y;return{label:(p=e.value.locales[t.value])==null?void 0:p.label,link:((y=e.value.locales[t.value])==null?void 0:y.link)||(t.value==="root"?"/":`/${t.value}/`)}});return{localeLinks:$(()=>Object.entries(e.value.locales).flatMap(([p,y])=>c.value.label===y.label?[]:{text:y.label,link:Ze(y.link||(p==="root"?"/":`/${p}/`),n.value.i18nRouting!==!1&&o,s.value.relativePath.slice(c.value.link.length-1),!e.value.cleanUrls)+r.value})),currentLang:c}}function Ze(o,e,t,s){return e?o.replace(/\/$/,"")+re(t.replace(/(^|\/)index\.md$/,"$1").replace(/\.md$/,s?".html":"")):o}const et={class:"NotFound"},tt={class:"code"},nt={class:"title"},ot={class:"quote"},st={class:"action"},at=["href","aria-label"],rt=f({__name:"NotFound",setup(o){const{theme:e}=P(),{currentLang:t}=x();return(s,n)=>{var r,c,h,p,y;return a(),l("div",et,[d("p",tt,T(((r=i(e).notFound)==null?void 0:r.code)??"404"),1),d("h1",nt,T(((c=i(e).notFound)==null?void 0:c.title)??"PAGE NOT FOUND"),1),n[0]||(n[0]=d("div",{class:"divider"},null,-1)),d("blockquote",ot,T(((h=i(e).notFound)==null?void 0:h.quote)??"But if you don't change your direction, and if you keep looking, you may end up where you are heading."),1),d("div",st,[d("a",{class:"link",href:i(ue)(i(t).link),"aria-label":((p=i(e).notFound)==null?void 0:p.linkLabel)??"go to home"},T(((y=i(e).notFound)==null?void 0:y.linkText)??"Take me home"),9,at)])])}}}),it=_(rt,[["__scopeId","data-v-d6be1790"]]);function Ne(o,e){if(Array.isArray(o))return J(o);if(o==null)return[];e=re(e);const t=Object.keys(o).sort((n,r)=>r.split("/").length-n.split("/").length).find(n=>e.startsWith(re(n))),s=t?o[t]:[];return Array.isArray(s)?J(s):J(s.items,s.base)}function lt(o){const e=[];let t=0;for(const s in o){const n=o[s];if(n.items){t=e.push(n);continue}e[t]||e.push({items:[]}),e[t].items.push(n)}return e}function ct(o){const e=[];function t(s){for(const n of s)n.text&&n.link&&e.push({text:n.text,link:n.link,docFooterText:n.docFooterText}),n.items&&t(n.items)}return t(o),e}function ie(o,e){return Array.isArray(e)?e.some(t=>ie(o,t)):j(o,e.link)?!0:e.items?ie(o,e.items):!1}function J(o,e){return[...o].map(t=>{const s={...t},n=s.base||e;return n&&s.link&&(s.link=n+s.link),s.items&&(s.items=J(s.items,n)),s})}function D(){const{frontmatter:o,page:e,theme:t}=P(),s=ae("(min-width: 960px)"),n=w(!1),r=$(()=>{const C=t.value.sidebar,S=e.value.relativePath;return C?Ne(C,S):[]}),c=w(r.value);O(r,(C,S)=>{JSON.stringify(C)!==JSON.stringify(S)&&(c.value=r.value)});const h=$(()=>o.value.sidebar!==!1&&c.value.length>0&&o.value.layout!=="home"),p=$(()=>y?o.value.aside==null?t.value.aside==="left":o.value.aside==="left":!1),y=$(()=>o.value.layout==="home"?!1:o.value.aside!=null?!!o.value.aside:t.value.aside!==!1),L=$(()=>h.value&&s.value),b=$(()=>h.value?lt(c.value):[]);function V(){n.value=!0}function I(){n.value=!1}function M(){n.value?I():V()}return{isOpen:n,sidebar:c,sidebarGroups:b,hasSidebar:h,hasAside:y,leftAside:p,isSidebarEnabled:L,open:V,close:I,toggle:M}}function ut(o,e){let t;Y(()=>{t=o.value?document.activeElement:void 0}),W(()=>{window.addEventListener("keyup",s)}),de(()=>{window.removeEventListener("keyup",s)});function s(n){n.key==="Escape"&&o.value&&(e(),t==null||t.focus())}}function dt(o){const{page:e,hash:t}=P(),s=w(!1),n=$(()=>o.value.collapsed!=null),r=$(()=>!!o.value.link),c=w(!1),h=()=>{c.value=j(e.value.relativePath,o.value.link)};O([e,o,t],h),W(h);const p=$(()=>c.value?!0:o.value.items?ie(e.value.relativePath,o.value.items):!1),y=$(()=>!!(o.value.items&&o.value.items.length));Y(()=>{s.value=!!(n.value&&o.value.collapsed)}),pe(()=>{(c.value||p.value)&&(s.value=!1)});function L(){n.value&&(s.value=!s.value)}return{collapsed:s,collapsible:n,isLink:r,isActiveLink:c,hasActiveLink:p,hasChildren:y,toggle:L}}function pt(){const{hasSidebar:o}=D(),e=ae("(min-width: 960px)"),t=ae("(min-width: 1280px)");return{isAsideEnabled:$(()=>!t.value&&!e.value?!1:o.value?t.value:e.value)}}const le=[];function Ie(o){return typeof o.outline=="object"&&!Array.isArray(o.outline)&&o.outline.label||o.outlineTitle||"On this page"}function me(o){const e=[...document.querySelectorAll(".VPDoc :where(h1,h2,h3,h4,h5,h6)")].filter(t=>t.id&&t.hasChildNodes()).map(t=>{const s=Number(t.tagName[1]);return{element:t,title:vt(t),link:"#"+t.id,level:s}});return ht(e,o)}function vt(o){let e="";for(const t of o.childNodes)if(t.nodeType===1){if(t.classList.contains("VPBadge")||t.classList.contains("header-anchor")||t.classList.contains("ignore-header"))continue;e+=t.textContent}else t.nodeType===3&&(e+=t.textContent);return e.trim()}function ht(o,e){if(e===!1)return[];const t=(typeof e=="object"&&!Array.isArray(e)?e.level:e)||2,[s,n]=typeof t=="number"?[t,t]:t==="deep"?[2,6]:t;return _t(o,s,n)}function mt(o,e){const{isAsideEnabled:t}=pt(),s=Xe(r,100);let n=null;W(()=>{requestAnimationFrame(r),window.addEventListener("scroll",s)}),Fe(()=>{c(location.hash)}),de(()=>{window.removeEventListener("scroll",s)});function r(){if(!t.value)return;const h=window.scrollY,p=window.innerHeight,y=document.body.offsetHeight,L=Math.abs(h+p-y)<1,b=le.map(({element:I,link:M})=>({link:M,top:ft(I)})).filter(({top:I})=>!Number.isNaN(I)).sort((I,M)=>I.top-M.top);if(!b.length){c(null);return}if(h<1){c(null);return}if(L){c(b[b.length-1].link);return}let V=null;for(const{link:I,top:M}of b){if(M>h+Oe()+4)break;V=I}c(V)}function c(h){n&&n.classList.remove("active"),h==null?n=null:n=o.value.querySelector(`a[href="${decodeURIComponent(h)}"]`);const p=n;p?(p.classList.add("active"),e.value.style.top=p.offsetTop+39+"px",e.value.style.opacity="1"):(e.value.style.top="33px",e.value.style.opacity="0")}}function ft(o){let e=0;for(;o!==document.body;){if(o===null)return NaN;e+=o.offsetTop,o=o.offsetParent}return e}function _t(o,e,t){le.length=0;const s=[],n=[];return o.forEach(r=>{const c={...r,children:[]};let h=n[n.length-1];for(;h&&h.level>=c.level;)n.pop(),h=n[n.length-1];if(c.element.classList.contains("ignore-header")||h&&"shouldIgnore"in h){n.push({level:c.level,shouldIgnore:!0});return}c.level>t||c.level{const n=R("VPDocOutlineItem",!0);return a(),l("ul",{class:N(["VPDocOutlineItem",t.root?"root":"nested"])},[(a(!0),l(A,null,E(t.headers,({children:r,link:c,title:h})=>(a(),l("li",null,[d("a",{class:"outline-link",href:c,onClick:e,title:h},T(h),9,gt),r!=null&&r.length?(a(),k(n,{key:0,headers:r},null,8,["headers"])):m("",!0)]))),256))],2)}}}),Ae=_(kt,[["__scopeId","data-v-b933a997"]]),bt={class:"content"},$t={"aria-level":"2",class:"outline-title",id:"doc-outline-aria-label",role:"heading"},yt=f({__name:"VPDocAsideOutline",setup(o){const{frontmatter:e,theme:t}=P(),s=ye([]);Q(()=>{s.value=me(e.value.outline??t.value.outline)});const n=w(),r=w();return mt(n,r),(c,h)=>(a(),l("nav",{"aria-labelledby":"doc-outline-aria-label",class:N(["VPDocAsideOutline",{"has-outline":s.value.length>0}]),ref_key:"container",ref:n},[d("div",bt,[d("div",{class:"outline-marker",ref_key:"marker",ref:r},null,512),d("div",$t,T(i(Ie)(i(t))),1),g(Ae,{headers:s.value,root:!0},null,8,["headers"])])],2))}}),Pt=_(yt,[["__scopeId","data-v-a5bbad30"]]),Lt={class:"VPDocAsideCarbonAds"},Vt=f({__name:"VPDocAsideCarbonAds",props:{carbonAds:{}},setup(o){const e=()=>null;return(t,s)=>(a(),l("div",Lt,[g(i(e),{"carbon-ads":t.carbonAds},null,8,["carbon-ads"])]))}}),St={class:"VPDocAside"},wt=f({__name:"VPDocAside",setup(o){const{theme:e}=P();return(t,s)=>(a(),l("div",St,[u(t.$slots,"aside-top",{},void 0,!0),u(t.$slots,"aside-outline-before",{},void 0,!0),g(Pt),u(t.$slots,"aside-outline-after",{},void 0,!0),s[0]||(s[0]=d("div",{class:"spacer"},null,-1)),u(t.$slots,"aside-ads-before",{},void 0,!0),i(e).carbonAds?(a(),k(Vt,{key:0,"carbon-ads":i(e).carbonAds},null,8,["carbon-ads"])):m("",!0),u(t.$slots,"aside-ads-after",{},void 0,!0),u(t.$slots,"aside-bottom",{},void 0,!0)]))}}),Tt=_(wt,[["__scopeId","data-v-3f215769"]]);function Nt(){const{theme:o,page:e}=P();return $(()=>{const{text:t="Edit this page",pattern:s=""}=o.value.editLink||{};let n;return typeof s=="function"?n=s(e.value):n=s.replace(/:path/g,e.value.filePath),{url:n,text:t}})}function It(){const{page:o,theme:e,frontmatter:t}=P();return $(()=>{var y,L,b,V,I,M,C,S;const s=Ne(e.value.sidebar,o.value.relativePath),n=ct(s),r=At(n,B=>B.link.replace(/[?#].*$/,"")),c=r.findIndex(B=>j(o.value.relativePath,B.link)),h=((y=e.value.docFooter)==null?void 0:y.prev)===!1&&!t.value.prev||t.value.prev===!1,p=((L=e.value.docFooter)==null?void 0:L.next)===!1&&!t.value.next||t.value.next===!1;return{prev:h?void 0:{text:(typeof t.value.prev=="string"?t.value.prev:typeof t.value.prev=="object"?t.value.prev.text:void 0)??((b=r[c-1])==null?void 0:b.docFooterText)??((V=r[c-1])==null?void 0:V.text),link:(typeof t.value.prev=="object"?t.value.prev.link:void 0)??((I=r[c-1])==null?void 0:I.link)},next:p?void 0:{text:(typeof t.value.next=="string"?t.value.next:typeof t.value.next=="object"?t.value.next.text:void 0)??((M=r[c+1])==null?void 0:M.docFooterText)??((C=r[c+1])==null?void 0:C.text),link:(typeof t.value.next=="object"?t.value.next.link:void 0)??((S=r[c+1])==null?void 0:S.link)}}})}function At(o,e){const t=new Set;return o.filter(s=>{const n=e(s);return t.has(n)?!1:t.add(n)})}const F=f({__name:"VPLink",props:{tag:{},href:{},noIcon:{type:Boolean},target:{},rel:{}},setup(o){const e=o,t=$(()=>e.tag??(e.href?"a":"span")),s=$(()=>e.href&&Pe.test(e.href)||e.target==="_blank");return(n,r)=>(a(),k(H(t.value),{class:N(["VPLink",{link:n.href,"vp-external-link-icon":s.value,"no-icon":n.noIcon}]),href:n.href?i(he)(n.href):void 0,target:n.target??(s.value?"_blank":void 0),rel:n.rel??(s.value?"noreferrer":void 0)},{default:v(()=>[u(n.$slots,"default")]),_:3},8,["class","href","target","rel"]))}}),Mt={class:"VPLastUpdated"},Ct=["datetime"],Et=f({__name:"VPDocFooterLastUpdated",setup(o){const{theme:e,page:t,lang:s}=P(),n=$(()=>new Date(t.value.lastUpdated)),r=$(()=>n.value.toISOString()),c=w("");return W(()=>{Y(()=>{var h,p,y;c.value=new Intl.DateTimeFormat((p=(h=e.value.lastUpdated)==null?void 0:h.formatOptions)!=null&&p.forceLocale?s.value:void 0,((y=e.value.lastUpdated)==null?void 0:y.formatOptions)??{dateStyle:"short",timeStyle:"short"}).format(n.value)})}),(h,p)=>{var y;return a(),l("p",Mt,[U(T(((y=i(e).lastUpdated)==null?void 0:y.text)||i(e).lastUpdatedText||"Last updated")+": ",1),d("time",{datetime:r.value},T(c.value),9,Ct)])}}}),Bt=_(Et,[["__scopeId","data-v-e98dd255"]]),Ht={key:0,class:"VPDocFooter"},Ft={key:0,class:"edit-info"},Ot={key:0,class:"edit-link"},Dt={key:1,class:"last-updated"},zt={key:1,class:"prev-next","aria-labelledby":"doc-footer-aria-label"},Gt={class:"pager"},Wt=["innerHTML"],Ut=["innerHTML"],jt={class:"pager"},Rt=["innerHTML"],qt=["innerHTML"],xt=f({__name:"VPDocFooter",setup(o){const{theme:e,page:t,frontmatter:s}=P(),n=Nt(),r=It(),c=$(()=>e.value.editLink&&s.value.editLink!==!1),h=$(()=>t.value.lastUpdated),p=$(()=>c.value||h.value||r.value.prev||r.value.next);return(y,L)=>{var b,V,I,M;return p.value?(a(),l("footer",Ht,[u(y.$slots,"doc-footer-before",{},void 0,!0),c.value||h.value?(a(),l("div",Ft,[c.value?(a(),l("div",Ot,[g(F,{class:"edit-link-button",href:i(n).url,"no-icon":!0},{default:v(()=>[L[0]||(L[0]=d("span",{class:"vpi-square-pen edit-link-icon"},null,-1)),U(" "+T(i(n).text),1)]),_:1},8,["href"])])):m("",!0),h.value?(a(),l("div",Dt,[g(Bt)])):m("",!0)])):m("",!0),(b=i(r).prev)!=null&&b.link||(V=i(r).next)!=null&&V.link?(a(),l("nav",zt,[L[1]||(L[1]=d("span",{class:"visually-hidden",id:"doc-footer-aria-label"},"Pager",-1)),d("div",Gt,[(I=i(r).prev)!=null&&I.link?(a(),k(F,{key:0,class:"pager-link prev",href:i(r).prev.link},{default:v(()=>{var C;return[d("span",{class:"desc",innerHTML:((C=i(e).docFooter)==null?void 0:C.prev)||"Previous page"},null,8,Wt),d("span",{class:"title",innerHTML:i(r).prev.text},null,8,Ut)]}),_:1},8,["href"])):m("",!0)]),d("div",jt,[(M=i(r).next)!=null&&M.link?(a(),k(F,{key:0,class:"pager-link next",href:i(r).next.link},{default:v(()=>{var C;return[d("span",{class:"desc",innerHTML:((C=i(e).docFooter)==null?void 0:C.next)||"Next page"},null,8,Rt),d("span",{class:"title",innerHTML:i(r).next.text},null,8,qt)]}),_:1},8,["href"])):m("",!0)])])):m("",!0)])):m("",!0)}}}),Jt=_(xt,[["__scopeId","data-v-e257564d"]]),Kt={class:"container"},Yt={class:"aside-container"},Qt={class:"aside-content"},Xt={class:"content"},Zt={class:"content-container"},en={class:"main"},tn=f({__name:"VPDoc",setup(o){const{theme:e}=P(),t=X(),{hasSidebar:s,hasAside:n,leftAside:r}=D(),c=$(()=>t.path.replace(/[./]+/g,"_").replace(/_html$/,""));return(h,p)=>{const y=R("Content");return a(),l("div",{class:N(["VPDoc",{"has-sidebar":i(s),"has-aside":i(n)}])},[u(h.$slots,"doc-top",{},void 0,!0),d("div",Kt,[i(n)?(a(),l("div",{key:0,class:N(["aside",{"left-aside":i(r)}])},[p[0]||(p[0]=d("div",{class:"aside-curtain"},null,-1)),d("div",Yt,[d("div",Qt,[g(Tt,null,{"aside-top":v(()=>[u(h.$slots,"aside-top",{},void 0,!0)]),"aside-bottom":v(()=>[u(h.$slots,"aside-bottom",{},void 0,!0)]),"aside-outline-before":v(()=>[u(h.$slots,"aside-outline-before",{},void 0,!0)]),"aside-outline-after":v(()=>[u(h.$slots,"aside-outline-after",{},void 0,!0)]),"aside-ads-before":v(()=>[u(h.$slots,"aside-ads-before",{},void 0,!0)]),"aside-ads-after":v(()=>[u(h.$slots,"aside-ads-after",{},void 0,!0)]),_:3})])])],2)):m("",!0),d("div",Xt,[d("div",Zt,[u(h.$slots,"doc-before",{},void 0,!0),d("main",en,[g(y,{class:N(["vp-doc",[c.value,i(e).externalLinkIcon&&"external-link-icon-enabled"]])},null,8,["class"])]),g(Jt,null,{"doc-footer-before":v(()=>[u(h.$slots,"doc-footer-before",{},void 0,!0)]),_:3}),u(h.$slots,"doc-after",{},void 0,!0)])])]),u(h.$slots,"doc-bottom",{},void 0,!0)],2)}}}),nn=_(tn,[["__scopeId","data-v-39a288b8"]]),on=f({__name:"VPButton",props:{tag:{},size:{default:"medium"},theme:{default:"brand"},text:{},href:{},target:{},rel:{}},setup(o){const e=o,t=$(()=>e.href&&Pe.test(e.href)),s=$(()=>e.tag||(e.href?"a":"button"));return(n,r)=>(a(),k(H(s.value),{class:N(["VPButton",[n.size,n.theme]]),href:n.href?i(he)(n.href):void 0,target:e.target??(t.value?"_blank":void 0),rel:e.rel??(t.value?"noreferrer":void 0)},{default:v(()=>[U(T(n.text),1)]),_:1},8,["class","href","target","rel"]))}}),sn=_(on,[["__scopeId","data-v-fa7799d5"]]),an=["src","alt"],rn=f({inheritAttrs:!1,__name:"VPImage",props:{image:{},alt:{}},setup(o){return(e,t)=>{const s=R("VPImage",!0);return e.image?(a(),l(A,{key:0},[typeof e.image=="string"||"src"in e.image?(a(),l("img",G({key:0,class:"VPImage"},typeof e.image=="string"?e.$attrs:{...e.image,...e.$attrs},{src:i(ue)(typeof e.image=="string"?e.image:e.image.src),alt:e.alt??(typeof e.image=="string"?"":e.image.alt||"")}),null,16,an)):(a(),l(A,{key:1},[g(s,G({class:"dark",image:e.image.dark,alt:e.image.alt},e.$attrs),null,16,["image","alt"]),g(s,G({class:"light",image:e.image.light,alt:e.image.alt},e.$attrs),null,16,["image","alt"])],64))],64)):m("",!0)}}}),K=_(rn,[["__scopeId","data-v-8426fc1a"]]),ln={class:"container"},cn={class:"main"},un={key:0,class:"name"},dn=["innerHTML"],pn=["innerHTML"],vn=["innerHTML"],hn={key:0,class:"actions"},mn={key:0,class:"image"},fn={class:"image-container"},_n=f({__name:"VPHero",props:{name:{},text:{},tagline:{},image:{},actions:{}},setup(o){const e=Z("hero-image-slot-exists");return(t,s)=>(a(),l("div",{class:N(["VPHero",{"has-image":t.image||i(e)}])},[d("div",ln,[d("div",cn,[u(t.$slots,"home-hero-info-before",{},void 0,!0),u(t.$slots,"home-hero-info",{},()=>[t.name?(a(),l("h1",un,[d("span",{innerHTML:t.name,class:"clip"},null,8,dn)])):m("",!0),t.text?(a(),l("p",{key:1,innerHTML:t.text,class:"text"},null,8,pn)):m("",!0),t.tagline?(a(),l("p",{key:2,innerHTML:t.tagline,class:"tagline"},null,8,vn)):m("",!0)],!0),u(t.$slots,"home-hero-info-after",{},void 0,!0),t.actions?(a(),l("div",hn,[(a(!0),l(A,null,E(t.actions,n=>(a(),l("div",{key:n.link,class:"action"},[g(sn,{tag:"a",size:"medium",theme:n.theme,text:n.text,href:n.link,target:n.target,rel:n.rel},null,8,["theme","text","href","target","rel"])]))),128))])):m("",!0),u(t.$slots,"home-hero-actions-after",{},void 0,!0)]),t.image||i(e)?(a(),l("div",mn,[d("div",fn,[s[0]||(s[0]=d("div",{class:"image-bg"},null,-1)),u(t.$slots,"home-hero-image",{},()=>[t.image?(a(),k(K,{key:0,class:"image-src",image:t.image},null,8,["image"])):m("",!0)],!0)])])):m("",!0)])],2))}}),gn=_(_n,[["__scopeId","data-v-303bb580"]]),kn=f({__name:"VPHomeHero",setup(o){const{frontmatter:e}=P();return(t,s)=>i(e).hero?(a(),k(gn,{key:0,class:"VPHomeHero",name:i(e).hero.name,text:i(e).hero.text,tagline:i(e).hero.tagline,image:i(e).hero.image,actions:i(e).hero.actions},{"home-hero-info-before":v(()=>[u(t.$slots,"home-hero-info-before")]),"home-hero-info":v(()=>[u(t.$slots,"home-hero-info")]),"home-hero-info-after":v(()=>[u(t.$slots,"home-hero-info-after")]),"home-hero-actions-after":v(()=>[u(t.$slots,"home-hero-actions-after")]),"home-hero-image":v(()=>[u(t.$slots,"home-hero-image")]),_:3},8,["name","text","tagline","image","actions"])):m("",!0)}}),bn={class:"box"},$n={key:0,class:"icon"},yn=["innerHTML"],Pn=["innerHTML"],Ln=["innerHTML"],Vn={key:4,class:"link-text"},Sn={class:"link-text-value"},wn=f({__name:"VPFeature",props:{icon:{},title:{},details:{},link:{},linkText:{},rel:{},target:{}},setup(o){return(e,t)=>(a(),k(F,{class:"VPFeature",href:e.link,rel:e.rel,target:e.target,"no-icon":!0,tag:e.link?"a":"div"},{default:v(()=>[d("article",bn,[typeof e.icon=="object"&&e.icon.wrap?(a(),l("div",$n,[g(K,{image:e.icon,alt:e.icon.alt,height:e.icon.height||48,width:e.icon.width||48},null,8,["image","alt","height","width"])])):typeof e.icon=="object"?(a(),k(K,{key:1,image:e.icon,alt:e.icon.alt,height:e.icon.height||48,width:e.icon.width||48},null,8,["image","alt","height","width"])):e.icon?(a(),l("div",{key:2,class:"icon",innerHTML:e.icon},null,8,yn)):m("",!0),d("h2",{class:"title",innerHTML:e.title},null,8,Pn),e.details?(a(),l("p",{key:3,class:"details",innerHTML:e.details},null,8,Ln)):m("",!0),e.linkText?(a(),l("div",Vn,[d("p",Sn,[U(T(e.linkText)+" ",1),t[0]||(t[0]=d("span",{class:"vpi-arrow-right link-text-icon"},null,-1))])])):m("",!0)])]),_:1},8,["href","rel","target","tag"]))}}),Tn=_(wn,[["__scopeId","data-v-a3976bdc"]]),Nn={key:0,class:"VPFeatures"},In={class:"container"},An={class:"items"},Mn=f({__name:"VPFeatures",props:{features:{}},setup(o){const e=o,t=$(()=>{const s=e.features.length;if(s){if(s===2)return"grid-2";if(s===3)return"grid-3";if(s%3===0)return"grid-6";if(s>3)return"grid-4"}else return});return(s,n)=>s.features?(a(),l("div",Nn,[d("div",In,[d("div",An,[(a(!0),l(A,null,E(s.features,r=>(a(),l("div",{key:r.title,class:N(["item",[t.value]])},[g(Tn,{icon:r.icon,title:r.title,details:r.details,link:r.link,"link-text":r.linkText,rel:r.rel,target:r.target},null,8,["icon","title","details","link","link-text","rel","target"])],2))),128))])])])):m("",!0)}}),Cn=_(Mn,[["__scopeId","data-v-a6181336"]]),En=f({__name:"VPHomeFeatures",setup(o){const{frontmatter:e}=P();return(t,s)=>i(e).features?(a(),k(Cn,{key:0,class:"VPHomeFeatures",features:i(e).features},null,8,["features"])):m("",!0)}}),Bn=f({__name:"VPHomeContent",setup(o){const{width:e}=De({initialWidth:0,includeScrollbar:!1});return(t,s)=>(a(),l("div",{class:"vp-doc container",style:Le(i(e)?{"--vp-offset":`calc(50% - ${i(e)/2}px)`}:{})},[u(t.$slots,"default",{},void 0,!0)],4))}}),Hn=_(Bn,[["__scopeId","data-v-8e2d4988"]]),Fn={class:"VPHome"},On=f({__name:"VPHome",setup(o){const{frontmatter:e}=P();return(t,s)=>{const n=R("Content");return a(),l("div",Fn,[u(t.$slots,"home-hero-before",{},void 0,!0),g(kn,null,{"home-hero-info-before":v(()=>[u(t.$slots,"home-hero-info-before",{},void 0,!0)]),"home-hero-info":v(()=>[u(t.$slots,"home-hero-info",{},void 0,!0)]),"home-hero-info-after":v(()=>[u(t.$slots,"home-hero-info-after",{},void 0,!0)]),"home-hero-actions-after":v(()=>[u(t.$slots,"home-hero-actions-after",{},void 0,!0)]),"home-hero-image":v(()=>[u(t.$slots,"home-hero-image",{},void 0,!0)]),_:3}),u(t.$slots,"home-hero-after",{},void 0,!0),u(t.$slots,"home-features-before",{},void 0,!0),g(En),u(t.$slots,"home-features-after",{},void 0,!0),i(e).markdownStyles!==!1?(a(),k(Hn,{key:0},{default:v(()=>[g(n)]),_:1})):(a(),k(n,{key:1}))])}}}),Dn=_(On,[["__scopeId","data-v-686f80a6"]]),zn={},Gn={class:"VPPage"};function Wn(o,e){const t=R("Content");return a(),l("div",Gn,[u(o.$slots,"page-top"),g(t),u(o.$slots,"page-bottom")])}const Un=_(zn,[["render",Wn]]),jn=f({__name:"VPContent",setup(o){const{page:e,frontmatter:t}=P(),{hasSidebar:s}=D();return(n,r)=>(a(),l("div",{class:N(["VPContent",{"has-sidebar":i(s),"is-home":i(t).layout==="home"}]),id:"VPContent"},[i(e).isNotFound?u(n.$slots,"not-found",{key:0},()=>[g(it)],!0):i(t).layout==="page"?(a(),k(Un,{key:1},{"page-top":v(()=>[u(n.$slots,"page-top",{},void 0,!0)]),"page-bottom":v(()=>[u(n.$slots,"page-bottom",{},void 0,!0)]),_:3})):i(t).layout==="home"?(a(),k(Dn,{key:2},{"home-hero-before":v(()=>[u(n.$slots,"home-hero-before",{},void 0,!0)]),"home-hero-info-before":v(()=>[u(n.$slots,"home-hero-info-before",{},void 0,!0)]),"home-hero-info":v(()=>[u(n.$slots,"home-hero-info",{},void 0,!0)]),"home-hero-info-after":v(()=>[u(n.$slots,"home-hero-info-after",{},void 0,!0)]),"home-hero-actions-after":v(()=>[u(n.$slots,"home-hero-actions-after",{},void 0,!0)]),"home-hero-image":v(()=>[u(n.$slots,"home-hero-image",{},void 0,!0)]),"home-hero-after":v(()=>[u(n.$slots,"home-hero-after",{},void 0,!0)]),"home-features-before":v(()=>[u(n.$slots,"home-features-before",{},void 0,!0)]),"home-features-after":v(()=>[u(n.$slots,"home-features-after",{},void 0,!0)]),_:3})):i(t).layout&&i(t).layout!=="doc"?(a(),k(H(i(t).layout),{key:3})):(a(),k(nn,{key:4},{"doc-top":v(()=>[u(n.$slots,"doc-top",{},void 0,!0)]),"doc-bottom":v(()=>[u(n.$slots,"doc-bottom",{},void 0,!0)]),"doc-footer-before":v(()=>[u(n.$slots,"doc-footer-before",{},void 0,!0)]),"doc-before":v(()=>[u(n.$slots,"doc-before",{},void 0,!0)]),"doc-after":v(()=>[u(n.$slots,"doc-after",{},void 0,!0)]),"aside-top":v(()=>[u(n.$slots,"aside-top",{},void 0,!0)]),"aside-outline-before":v(()=>[u(n.$slots,"aside-outline-before",{},void 0,!0)]),"aside-outline-after":v(()=>[u(n.$slots,"aside-outline-after",{},void 0,!0)]),"aside-ads-before":v(()=>[u(n.$slots,"aside-ads-before",{},void 0,!0)]),"aside-ads-after":v(()=>[u(n.$slots,"aside-ads-after",{},void 0,!0)]),"aside-bottom":v(()=>[u(n.$slots,"aside-bottom",{},void 0,!0)]),_:3}))],2))}}),Rn=_(jn,[["__scopeId","data-v-1428d186"]]),qn={class:"container"},xn=["innerHTML"],Jn=["innerHTML"],Kn=f({__name:"VPFooter",setup(o){const{theme:e,frontmatter:t}=P(),{hasSidebar:s}=D();return(n,r)=>i(e).footer&&i(t).footer!==!1?(a(),l("footer",{key:0,class:N(["VPFooter",{"has-sidebar":i(s)}])},[d("div",qn,[i(e).footer.message?(a(),l("p",{key:0,class:"message",innerHTML:i(e).footer.message},null,8,xn)):m("",!0),i(e).footer.copyright?(a(),l("p",{key:1,class:"copyright",innerHTML:i(e).footer.copyright},null,8,Jn)):m("",!0)])],2)):m("",!0)}}),Yn=_(Kn,[["__scopeId","data-v-e315a0ad"]]);function Qn(){const{theme:o,frontmatter:e}=P(),t=ye([]),s=$(()=>t.value.length>0);return Q(()=>{t.value=me(e.value.outline??o.value.outline)}),{headers:t,hasLocalNav:s}}const Xn={class:"menu-text"},Zn={class:"header"},eo={class:"outline"},to=f({__name:"VPLocalNavOutlineDropdown",props:{headers:{},navHeight:{}},setup(o){const e=o,{theme:t}=P(),s=w(!1),n=w(0),r=w(),c=w();function h(b){var V;(V=r.value)!=null&&V.contains(b.target)||(s.value=!1)}O(s,b=>{if(b){document.addEventListener("click",h);return}document.removeEventListener("click",h)}),ze("Escape",()=>{s.value=!1}),Q(()=>{s.value=!1});function p(){s.value=!s.value,n.value=window.innerHeight+Math.min(window.scrollY-e.navHeight,0)}function y(b){b.target.classList.contains("outline-link")&&(c.value&&(c.value.style.transition="none"),Ve(()=>{s.value=!1}))}function L(){s.value=!1,window.scrollTo({top:0,left:0,behavior:"smooth"})}return(b,V)=>(a(),l("div",{class:"VPLocalNavOutlineDropdown",style:Le({"--vp-vh":n.value+"px"}),ref_key:"main",ref:r},[b.headers.length>0?(a(),l("button",{key:0,onClick:p,class:N({open:s.value})},[d("span",Xn,T(i(Ie)(i(t))),1),V[0]||(V[0]=d("span",{class:"vpi-chevron-right icon"},null,-1))],2)):(a(),l("button",{key:1,onClick:L},T(i(t).returnToTopLabel||"Return to top"),1)),g(ce,{name:"flyout"},{default:v(()=>[s.value?(a(),l("div",{key:0,ref_key:"items",ref:c,class:"items",onClick:y},[d("div",Zn,[d("a",{class:"top-link",href:"#",onClick:L},T(i(t).returnToTopLabel||"Return to top"),1)]),d("div",eo,[g(Ae,{headers:b.headers},null,8,["headers"])])],512)):m("",!0)]),_:1})],4))}}),no=_(to,[["__scopeId","data-v-17a5e62e"]]),oo={class:"container"},so=["aria-expanded"],ao={class:"menu-text"},ro=f({__name:"VPLocalNav",props:{open:{type:Boolean}},emits:["open-menu"],setup(o){const{theme:e,frontmatter:t}=P(),{hasSidebar:s}=D(),{headers:n}=Qn(),{y:r}=Se(),c=w(0);W(()=>{c.value=parseInt(getComputedStyle(document.documentElement).getPropertyValue("--vp-nav-height"))}),Q(()=>{n.value=me(t.value.outline??e.value.outline)});const h=$(()=>n.value.length===0),p=$(()=>h.value&&!s.value),y=$(()=>({VPLocalNav:!0,"has-sidebar":s.value,empty:h.value,fixed:p.value}));return(L,b)=>i(t).layout!=="home"&&(!p.value||i(r)>=c.value)?(a(),l("div",{key:0,class:N(y.value)},[d("div",oo,[i(s)?(a(),l("button",{key:0,class:"menu","aria-expanded":L.open,"aria-controls":"VPSidebarNav",onClick:b[0]||(b[0]=V=>L.$emit("open-menu"))},[b[1]||(b[1]=d("span",{class:"vpi-align-left menu-icon"},null,-1)),d("span",ao,T(i(e).sidebarMenuLabel||"Menu"),1)],8,so)):m("",!0),g(no,{headers:i(n),navHeight:c.value},null,8,["headers","navHeight"])])],2)):m("",!0)}}),io=_(ro,[["__scopeId","data-v-a6f0e41e"]]);function lo(){const o=w(!1);function e(){o.value=!0,window.addEventListener("resize",n)}function t(){o.value=!1,window.removeEventListener("resize",n)}function s(){o.value?t():e()}function n(){window.outerWidth>=768&&t()}const r=X();return O(()=>r.path,t),{isScreenOpen:o,openScreen:e,closeScreen:t,toggleScreen:s}}const co={},uo={class:"VPSwitch",type:"button",role:"switch"},po={class:"check"},vo={key:0,class:"icon"};function ho(o,e){return a(),l("button",uo,[d("span",po,[o.$slots.default?(a(),l("span",vo,[u(o.$slots,"default",{},void 0,!0)])):m("",!0)])])}const mo=_(co,[["render",ho],["__scopeId","data-v-1d5665e3"]]),fo=f({__name:"VPSwitchAppearance",setup(o){const{isDark:e,theme:t}=P(),s=Z("toggle-appearance",()=>{e.value=!e.value}),n=w("");return pe(()=>{n.value=e.value?t.value.lightModeSwitchTitle||"Switch to light theme":t.value.darkModeSwitchTitle||"Switch to dark theme"}),(r,c)=>(a(),k(mo,{title:n.value,class:"VPSwitchAppearance","aria-checked":i(e),onClick:i(s)},{default:v(()=>c[0]||(c[0]=[d("span",{class:"vpi-sun sun"},null,-1),d("span",{class:"vpi-moon moon"},null,-1)])),_:1},8,["title","aria-checked","onClick"]))}}),fe=_(fo,[["__scopeId","data-v-5337faa4"]]),_o={key:0,class:"VPNavBarAppearance"},go=f({__name:"VPNavBarAppearance",setup(o){const{site:e}=P();return(t,s)=>i(e).appearance&&i(e).appearance!=="force-dark"&&i(e).appearance!=="force-auto"?(a(),l("div",_o,[g(fe)])):m("",!0)}}),ko=_(go,[["__scopeId","data-v-6c893767"]]),_e=w();let Me=!1,se=0;function bo(o){const e=w(!1);if(ee){!Me&&$o(),se++;const t=O(_e,s=>{var n,r,c;s===o.el.value||(n=o.el.value)!=null&&n.contains(s)?(e.value=!0,(r=o.onFocus)==null||r.call(o)):(e.value=!1,(c=o.onBlur)==null||c.call(o))});de(()=>{t(),se--,se||yo()})}return Ge(e)}function $o(){document.addEventListener("focusin",Ce),Me=!0,_e.value=document.activeElement}function yo(){document.removeEventListener("focusin",Ce)}function Ce(){_e.value=document.activeElement}const Po={class:"VPMenuLink"},Lo=["innerHTML"],Vo=f({__name:"VPMenuLink",props:{item:{}},setup(o){const{page:e}=P();return(t,s)=>(a(),l("div",Po,[g(F,{class:N({active:i(j)(i(e).relativePath,t.item.activeMatch||t.item.link,!!t.item.activeMatch)}),href:t.item.link,target:t.item.target,rel:t.item.rel,"no-icon":t.item.noIcon},{default:v(()=>[d("span",{innerHTML:t.item.text},null,8,Lo)]),_:1},8,["class","href","target","rel","no-icon"])]))}}),te=_(Vo,[["__scopeId","data-v-35975db6"]]),So={class:"VPMenuGroup"},wo={key:0,class:"title"},To=f({__name:"VPMenuGroup",props:{text:{},items:{}},setup(o){return(e,t)=>(a(),l("div",So,[e.text?(a(),l("p",wo,T(e.text),1)):m("",!0),(a(!0),l(A,null,E(e.items,s=>(a(),l(A,null,["link"in s?(a(),k(te,{key:0,item:s},null,8,["item"])):m("",!0)],64))),256))]))}}),No=_(To,[["__scopeId","data-v-69e747b5"]]),Io={class:"VPMenu"},Ao={key:0,class:"items"},Mo=f({__name:"VPMenu",props:{items:{}},setup(o){return(e,t)=>(a(),l("div",Io,[e.items?(a(),l("div",Ao,[(a(!0),l(A,null,E(e.items,s=>(a(),l(A,{key:JSON.stringify(s)},["link"in s?(a(),k(te,{key:0,item:s},null,8,["item"])):"component"in s?(a(),k(H(s.component),G({key:1,ref_for:!0},s.props),null,16)):(a(),k(No,{key:2,text:s.text,items:s.items},null,8,["text","items"]))],64))),128))])):m("",!0),u(e.$slots,"default",{},void 0,!0)]))}}),Co=_(Mo,[["__scopeId","data-v-b98bc113"]]),Eo=["aria-expanded","aria-label"],Bo={key:0,class:"text"},Ho=["innerHTML"],Fo={key:1,class:"vpi-more-horizontal icon"},Oo={class:"menu"},Do=f({__name:"VPFlyout",props:{icon:{},button:{},label:{},items:{}},setup(o){const e=w(!1),t=w();bo({el:t,onBlur:s});function s(){e.value=!1}return(n,r)=>(a(),l("div",{class:"VPFlyout",ref_key:"el",ref:t,onMouseenter:r[1]||(r[1]=c=>e.value=!0),onMouseleave:r[2]||(r[2]=c=>e.value=!1)},[d("button",{type:"button",class:"button","aria-haspopup":"true","aria-expanded":e.value,"aria-label":n.label,onClick:r[0]||(r[0]=c=>e.value=!e.value)},[n.button||n.icon?(a(),l("span",Bo,[n.icon?(a(),l("span",{key:0,class:N([n.icon,"option-icon"])},null,2)):m("",!0),n.button?(a(),l("span",{key:1,innerHTML:n.button},null,8,Ho)):m("",!0),r[3]||(r[3]=d("span",{class:"vpi-chevron-down text-icon"},null,-1))])):(a(),l("span",Fo))],8,Eo),d("div",Oo,[g(Co,{items:n.items},{default:v(()=>[u(n.$slots,"default",{},void 0,!0)]),_:3},8,["items"])])],544))}}),ge=_(Do,[["__scopeId","data-v-cf11d7a2"]]),zo=["href","aria-label","innerHTML"],Go=f({__name:"VPSocialLink",props:{icon:{},link:{},ariaLabel:{}},setup(o){const e=o,t=w();W(async()=>{var r;await Ve();const n=(r=t.value)==null?void 0:r.children[0];n instanceof HTMLElement&&n.className.startsWith("vpi-social-")&&(getComputedStyle(n).maskImage||getComputedStyle(n).webkitMaskImage)==="none"&&n.style.setProperty("--icon",`url('https://api.iconify.design/simple-icons/${e.icon}.svg')`)});const s=$(()=>typeof e.icon=="object"?e.icon.svg:``);return(n,r)=>(a(),l("a",{ref_key:"el",ref:t,class:"VPSocialLink no-icon",href:n.link,"aria-label":n.ariaLabel??(typeof n.icon=="string"?n.icon:""),target:"_blank",rel:"noopener",innerHTML:s.value},null,8,zo))}}),Wo=_(Go,[["__scopeId","data-v-bd121fe5"]]),Uo={class:"VPSocialLinks"},jo=f({__name:"VPSocialLinks",props:{links:{}},setup(o){return(e,t)=>(a(),l("div",Uo,[(a(!0),l(A,null,E(e.links,({link:s,icon:n,ariaLabel:r})=>(a(),k(Wo,{key:s,icon:n,link:s,ariaLabel:r},null,8,["icon","link","ariaLabel"]))),128))]))}}),ke=_(jo,[["__scopeId","data-v-7bc22406"]]),Ro={key:0,class:"group translations"},qo={class:"trans-title"},xo={key:1,class:"group"},Jo={class:"item appearance"},Ko={class:"label"},Yo={class:"appearance-action"},Qo={key:2,class:"group"},Xo={class:"item social-links"},Zo=f({__name:"VPNavBarExtra",setup(o){const{site:e,theme:t}=P(),{localeLinks:s,currentLang:n}=x({correspondingLink:!0}),r=$(()=>s.value.length&&n.value.label||e.value.appearance||t.value.socialLinks);return(c,h)=>r.value?(a(),k(ge,{key:0,class:"VPNavBarExtra",label:"extra navigation"},{default:v(()=>[i(s).length&&i(n).label?(a(),l("div",Ro,[d("p",qo,T(i(n).label),1),(a(!0),l(A,null,E(i(s),p=>(a(),k(te,{key:p.link,item:p},null,8,["item"]))),128))])):m("",!0),i(e).appearance&&i(e).appearance!=="force-dark"&&i(e).appearance!=="force-auto"?(a(),l("div",xo,[d("div",Jo,[d("p",Ko,T(i(t).darkModeSwitchLabel||"Appearance"),1),d("div",Yo,[g(fe)])])])):m("",!0),i(t).socialLinks?(a(),l("div",Qo,[d("div",Xo,[g(ke,{class:"social-links-list",links:i(t).socialLinks},null,8,["links"])])])):m("",!0)]),_:1})):m("",!0)}}),es=_(Zo,[["__scopeId","data-v-bb2aa2f0"]]),ts=["aria-expanded"],ns=f({__name:"VPNavBarHamburger",props:{active:{type:Boolean}},emits:["click"],setup(o){return(e,t)=>(a(),l("button",{type:"button",class:N(["VPNavBarHamburger",{active:e.active}]),"aria-label":"mobile navigation","aria-expanded":e.active,"aria-controls":"VPNavScreen",onClick:t[0]||(t[0]=s=>e.$emit("click"))},t[1]||(t[1]=[d("span",{class:"container"},[d("span",{class:"top"}),d("span",{class:"middle"}),d("span",{class:"bottom"})],-1)]),10,ts))}}),os=_(ns,[["__scopeId","data-v-e5dd9c1c"]]),ss=["innerHTML"],as=f({__name:"VPNavBarMenuLink",props:{item:{}},setup(o){const{page:e}=P();return(t,s)=>(a(),k(F,{class:N({VPNavBarMenuLink:!0,active:i(j)(i(e).relativePath,t.item.activeMatch||t.item.link,!!t.item.activeMatch)}),href:t.item.link,target:t.item.target,rel:t.item.rel,"no-icon":t.item.noIcon,tabindex:"0"},{default:v(()=>[d("span",{innerHTML:t.item.text},null,8,ss)]),_:1},8,["class","href","target","rel","no-icon"]))}}),rs=_(as,[["__scopeId","data-v-e56f3d57"]]),is=f({__name:"VPNavBarMenuGroup",props:{item:{}},setup(o){const e=o,{page:t}=P(),s=r=>"component"in r?!1:"link"in r?j(t.value.relativePath,r.link,!!e.item.activeMatch):r.items.some(s),n=$(()=>s(e.item));return(r,c)=>(a(),k(ge,{class:N({VPNavBarMenuGroup:!0,active:i(j)(i(t).relativePath,r.item.activeMatch,!!r.item.activeMatch)||n.value}),button:r.item.text,items:r.item.items},null,8,["class","button","items"]))}}),ls={key:0,"aria-labelledby":"main-nav-aria-label",class:"VPNavBarMenu"},cs=f({__name:"VPNavBarMenu",setup(o){const{theme:e}=P();return(t,s)=>i(e).nav?(a(),l("nav",ls,[s[0]||(s[0]=d("span",{id:"main-nav-aria-label",class:"visually-hidden"}," Main Navigation ",-1)),(a(!0),l(A,null,E(i(e).nav,n=>(a(),l(A,{key:JSON.stringify(n)},["link"in n?(a(),k(rs,{key:0,item:n},null,8,["item"])):"component"in n?(a(),k(H(n.component),G({key:1,ref_for:!0},n.props),null,16)):(a(),k(is,{key:2,item:n},null,8,["item"]))],64))),128))])):m("",!0)}}),us=_(cs,[["__scopeId","data-v-dc692963"]]);function ds(o){const{localeIndex:e,theme:t}=P();function s(n){var M,C,S;const r=n.split("."),c=(M=t.value.search)==null?void 0:M.options,h=c&&typeof c=="object",p=h&&((S=(C=c.locales)==null?void 0:C[e.value])==null?void 0:S.translations)||null,y=h&&c.translations||null;let L=p,b=y,V=o;const I=r.pop();for(const B of r){let z=null;const q=V==null?void 0:V[B];q&&(z=V=q);const ne=b==null?void 0:b[B];ne&&(z=b=ne);const oe=L==null?void 0:L[B];oe&&(z=L=oe),q||(V=z),ne||(b=z),oe||(L=z)}return(L==null?void 0:L[I])??(b==null?void 0:b[I])??(V==null?void 0:V[I])??""}return s}const ps=["aria-label"],vs={class:"DocSearch-Button-Container"},hs={class:"DocSearch-Button-Placeholder"},be=f({__name:"VPNavBarSearchButton",setup(o){const t=ds({button:{buttonText:"Search",buttonAriaLabel:"Search"}});return(s,n)=>(a(),l("button",{type:"button",class:"DocSearch DocSearch-Button","aria-label":i(t)("button.buttonAriaLabel")},[d("span",vs,[n[0]||(n[0]=d("span",{class:"vp-icon DocSearch-Search-Icon"},null,-1)),d("span",hs,T(i(t)("button.buttonText")),1)]),n[1]||(n[1]=d("span",{class:"DocSearch-Button-Keys"},[d("kbd",{class:"DocSearch-Button-Key"}),d("kbd",{class:"DocSearch-Button-Key"},"K")],-1))],8,ps))}}),ms={class:"VPNavBarSearch"},fs={id:"local-search"},_s={key:1,id:"docsearch"},gs=f({__name:"VPNavBarSearch",setup(o){const e=()=>null,t=()=>null,{theme:s}=P(),n=w(!1),r=w(!1);W(()=>{});function c(){n.value||(n.value=!0,setTimeout(h,16))}function h(){const L=new Event("keydown");L.key="k",L.metaKey=!0,window.dispatchEvent(L),setTimeout(()=>{document.querySelector(".DocSearch-Modal")||h()},16)}const p=w(!1),y="";return(L,b)=>{var V;return a(),l("div",ms,[i(y)==="local"?(a(),l(A,{key:0},[p.value?(a(),k(i(e),{key:0,onClose:b[0]||(b[0]=I=>p.value=!1)})):m("",!0),d("div",fs,[g(be,{onClick:b[1]||(b[1]=I=>p.value=!0)})])],64)):i(y)==="algolia"?(a(),l(A,{key:1},[n.value?(a(),k(i(t),{key:0,algolia:((V=i(s).search)==null?void 0:V.options)??i(s).algolia,onVnodeBeforeMount:b[2]||(b[2]=I=>r.value=!0)},null,8,["algolia"])):m("",!0),r.value?m("",!0):(a(),l("div",_s,[g(be,{onClick:c})]))],64)):m("",!0)])}}}),ks=f({__name:"VPNavBarSocialLinks",setup(o){const{theme:e}=P();return(t,s)=>i(e).socialLinks?(a(),k(ke,{key:0,class:"VPNavBarSocialLinks",links:i(e).socialLinks},null,8,["links"])):m("",!0)}}),bs=_(ks,[["__scopeId","data-v-0394ad82"]]),$s=["href","rel","target"],ys=["innerHTML"],Ps={key:2},Ls=f({__name:"VPNavBarTitle",setup(o){const{site:e,theme:t}=P(),{hasSidebar:s}=D(),{currentLang:n}=x(),r=$(()=>{var p;return typeof t.value.logoLink=="string"?t.value.logoLink:(p=t.value.logoLink)==null?void 0:p.link}),c=$(()=>{var p;return typeof t.value.logoLink=="string"||(p=t.value.logoLink)==null?void 0:p.rel}),h=$(()=>{var p;return typeof t.value.logoLink=="string"||(p=t.value.logoLink)==null?void 0:p.target});return(p,y)=>(a(),l("div",{class:N(["VPNavBarTitle",{"has-sidebar":i(s)}])},[d("a",{class:"title",href:r.value??i(he)(i(n).link),rel:c.value,target:h.value},[u(p.$slots,"nav-bar-title-before",{},void 0,!0),i(t).logo?(a(),k(K,{key:0,class:"logo",image:i(t).logo},null,8,["image"])):m("",!0),i(t).siteTitle?(a(),l("span",{key:1,innerHTML:i(t).siteTitle},null,8,ys)):i(t).siteTitle===void 0?(a(),l("span",Ps,T(i(e).title),1)):m("",!0),u(p.$slots,"nav-bar-title-after",{},void 0,!0)],8,$s)],2))}}),Vs=_(Ls,[["__scopeId","data-v-1168a8e4"]]),Ss={class:"items"},ws={class:"title"},Ts=f({__name:"VPNavBarTranslations",setup(o){const{theme:e}=P(),{localeLinks:t,currentLang:s}=x({correspondingLink:!0});return(n,r)=>i(t).length&&i(s).label?(a(),k(ge,{key:0,class:"VPNavBarTranslations",icon:"vpi-languages",label:i(e).langMenuLabel||"Change language"},{default:v(()=>[d("div",Ss,[d("p",ws,T(i(s).label),1),(a(!0),l(A,null,E(i(t),c=>(a(),k(te,{key:c.link,item:c},null,8,["item"]))),128))])]),_:1},8,["label"])):m("",!0)}}),Ns=_(Ts,[["__scopeId","data-v-88af2de4"]]),Is={class:"wrapper"},As={class:"container"},Ms={class:"title"},Cs={class:"content"},Es={class:"content-body"},Bs=f({__name:"VPNavBar",props:{isScreenOpen:{type:Boolean}},emits:["toggle-screen"],setup(o){const e=o,{y:t}=Se(),{hasSidebar:s}=D(),{frontmatter:n}=P(),r=w({});return pe(()=>{r.value={"has-sidebar":s.value,home:n.value.layout==="home",top:t.value===0,"screen-open":e.isScreenOpen}}),(c,h)=>(a(),l("div",{class:N(["VPNavBar",r.value])},[d("div",Is,[d("div",As,[d("div",Ms,[g(Vs,null,{"nav-bar-title-before":v(()=>[u(c.$slots,"nav-bar-title-before",{},void 0,!0)]),"nav-bar-title-after":v(()=>[u(c.$slots,"nav-bar-title-after",{},void 0,!0)]),_:3})]),d("div",Cs,[d("div",Es,[u(c.$slots,"nav-bar-content-before",{},void 0,!0),g(gs,{class:"search"}),g(us,{class:"menu"}),g(Ns,{class:"translations"}),g(ko,{class:"appearance"}),g(bs,{class:"social-links"}),g(es,{class:"extra"}),u(c.$slots,"nav-bar-content-after",{},void 0,!0),g(os,{class:"hamburger",active:c.isScreenOpen,onClick:h[0]||(h[0]=p=>c.$emit("toggle-screen"))},null,8,["active"])])])])]),h[1]||(h[1]=d("div",{class:"divider"},[d("div",{class:"divider-line"})],-1))],2))}}),Hs=_(Bs,[["__scopeId","data-v-6aa21345"]]),Fs={key:0,class:"VPNavScreenAppearance"},Os={class:"text"},Ds=f({__name:"VPNavScreenAppearance",setup(o){const{site:e,theme:t}=P();return(s,n)=>i(e).appearance&&i(e).appearance!=="force-dark"&&i(e).appearance!=="force-auto"?(a(),l("div",Fs,[d("p",Os,T(i(t).darkModeSwitchLabel||"Appearance"),1),g(fe)])):m("",!0)}}),zs=_(Ds,[["__scopeId","data-v-b44890b2"]]),Gs=["innerHTML"],Ws=f({__name:"VPNavScreenMenuLink",props:{item:{}},setup(o){const e=Z("close-screen");return(t,s)=>(a(),k(F,{class:"VPNavScreenMenuLink",href:t.item.link,target:t.item.target,rel:t.item.rel,"no-icon":t.item.noIcon,onClick:i(e)},{default:v(()=>[d("span",{innerHTML:t.item.text},null,8,Gs)]),_:1},8,["href","target","rel","no-icon","onClick"]))}}),Us=_(Ws,[["__scopeId","data-v-df37e6dd"]]),js=["innerHTML"],Rs=f({__name:"VPNavScreenMenuGroupLink",props:{item:{}},setup(o){const e=Z("close-screen");return(t,s)=>(a(),k(F,{class:"VPNavScreenMenuGroupLink",href:t.item.link,target:t.item.target,rel:t.item.rel,"no-icon":t.item.noIcon,onClick:i(e)},{default:v(()=>[d("span",{innerHTML:t.item.text},null,8,js)]),_:1},8,["href","target","rel","no-icon","onClick"]))}}),Ee=_(Rs,[["__scopeId","data-v-3e9c20e4"]]),qs={class:"VPNavScreenMenuGroupSection"},xs={key:0,class:"title"},Js=f({__name:"VPNavScreenMenuGroupSection",props:{text:{},items:{}},setup(o){return(e,t)=>(a(),l("div",qs,[e.text?(a(),l("p",xs,T(e.text),1)):m("",!0),(a(!0),l(A,null,E(e.items,s=>(a(),k(Ee,{key:s.text,item:s},null,8,["item"]))),128))]))}}),Ks=_(Js,[["__scopeId","data-v-8133b170"]]),Ys=["aria-controls","aria-expanded"],Qs=["innerHTML"],Xs=["id"],Zs={key:0,class:"item"},ea={key:1,class:"item"},ta={key:2,class:"group"},na=f({__name:"VPNavScreenMenuGroup",props:{text:{},items:{}},setup(o){const e=o,t=w(!1),s=$(()=>`NavScreenGroup-${e.text.replace(" ","-").toLowerCase()}`);function n(){t.value=!t.value}return(r,c)=>(a(),l("div",{class:N(["VPNavScreenMenuGroup",{open:t.value}])},[d("button",{class:"button","aria-controls":s.value,"aria-expanded":t.value,onClick:n},[d("span",{class:"button-text",innerHTML:r.text},null,8,Qs),c[0]||(c[0]=d("span",{class:"vpi-plus button-icon"},null,-1))],8,Ys),d("div",{id:s.value,class:"items"},[(a(!0),l(A,null,E(r.items,h=>(a(),l(A,{key:JSON.stringify(h)},["link"in h?(a(),l("div",Zs,[g(Ee,{item:h},null,8,["item"])])):"component"in h?(a(),l("div",ea,[(a(),k(H(h.component),G({ref_for:!0},h.props,{"screen-menu":""}),null,16))])):(a(),l("div",ta,[g(Ks,{text:h.text,items:h.items},null,8,["text","items"])]))],64))),128))],8,Xs)],2))}}),oa=_(na,[["__scopeId","data-v-b9ab8c58"]]),sa={key:0,class:"VPNavScreenMenu"},aa=f({__name:"VPNavScreenMenu",setup(o){const{theme:e}=P();return(t,s)=>i(e).nav?(a(),l("nav",sa,[(a(!0),l(A,null,E(i(e).nav,n=>(a(),l(A,{key:JSON.stringify(n)},["link"in n?(a(),k(Us,{key:0,item:n},null,8,["item"])):"component"in n?(a(),k(H(n.component),G({key:1,ref_for:!0},n.props,{"screen-menu":""}),null,16)):(a(),k(oa,{key:2,text:n.text||"",items:n.items},null,8,["text","items"]))],64))),128))])):m("",!0)}}),ra=f({__name:"VPNavScreenSocialLinks",setup(o){const{theme:e}=P();return(t,s)=>i(e).socialLinks?(a(),k(ke,{key:0,class:"VPNavScreenSocialLinks",links:i(e).socialLinks},null,8,["links"])):m("",!0)}}),ia={class:"list"},la=f({__name:"VPNavScreenTranslations",setup(o){const{localeLinks:e,currentLang:t}=x({correspondingLink:!0}),s=w(!1);function n(){s.value=!s.value}return(r,c)=>i(e).length&&i(t).label?(a(),l("div",{key:0,class:N(["VPNavScreenTranslations",{open:s.value}])},[d("button",{class:"title",onClick:n},[c[0]||(c[0]=d("span",{class:"vpi-languages icon lang"},null,-1)),U(" "+T(i(t).label)+" ",1),c[1]||(c[1]=d("span",{class:"vpi-chevron-down icon chevron"},null,-1))]),d("ul",ia,[(a(!0),l(A,null,E(i(e),h=>(a(),l("li",{key:h.link,class:"item"},[g(F,{class:"link",href:h.link},{default:v(()=>[U(T(h.text),1)]),_:2},1032,["href"])]))),128))])],2)):m("",!0)}}),ca=_(la,[["__scopeId","data-v-858fe1a4"]]),ua={class:"container"},da=f({__name:"VPNavScreen",props:{open:{type:Boolean}},setup(o){const e=w(null),t=we(ee?document.body:null);return(s,n)=>(a(),k(ce,{name:"fade",onEnter:n[0]||(n[0]=r=>t.value=!0),onAfterLeave:n[1]||(n[1]=r=>t.value=!1)},{default:v(()=>[s.open?(a(),l("div",{key:0,class:"VPNavScreen",ref_key:"screen",ref:e,id:"VPNavScreen"},[d("div",ua,[u(s.$slots,"nav-screen-content-before",{},void 0,!0),g(aa,{class:"menu"}),g(ca,{class:"translations"}),g(zs,{class:"appearance"}),g(ra,{class:"social-links"}),u(s.$slots,"nav-screen-content-after",{},void 0,!0)])],512)):m("",!0)]),_:3}))}}),pa=_(da,[["__scopeId","data-v-f2779853"]]),va={key:0,class:"VPNav"},ha=f({__name:"VPNav",setup(o){const{isScreenOpen:e,closeScreen:t,toggleScreen:s}=lo(),{frontmatter:n}=P(),r=$(()=>n.value.navbar!==!1);return Te("close-screen",t),Y(()=>{ee&&document.documentElement.classList.toggle("hide-nav",!r.value)}),(c,h)=>r.value?(a(),l("header",va,[g(Hs,{"is-screen-open":i(e),onToggleScreen:i(s)},{"nav-bar-title-before":v(()=>[u(c.$slots,"nav-bar-title-before",{},void 0,!0)]),"nav-bar-title-after":v(()=>[u(c.$slots,"nav-bar-title-after",{},void 0,!0)]),"nav-bar-content-before":v(()=>[u(c.$slots,"nav-bar-content-before",{},void 0,!0)]),"nav-bar-content-after":v(()=>[u(c.$slots,"nav-bar-content-after",{},void 0,!0)]),_:3},8,["is-screen-open","onToggleScreen"]),g(pa,{open:i(e)},{"nav-screen-content-before":v(()=>[u(c.$slots,"nav-screen-content-before",{},void 0,!0)]),"nav-screen-content-after":v(()=>[u(c.$slots,"nav-screen-content-after",{},void 0,!0)]),_:3},8,["open"])])):m("",!0)}}),ma=_(ha,[["__scopeId","data-v-ae24b3ad"]]),fa=["role","tabindex"],_a={key:1,class:"items"},ga=f({__name:"VPSidebarItem",props:{item:{},depth:{}},setup(o){const e=o,{collapsed:t,collapsible:s,isLink:n,isActiveLink:r,hasActiveLink:c,hasChildren:h,toggle:p}=dt($(()=>e.item)),y=$(()=>h.value?"section":"div"),L=$(()=>n.value?"a":"div"),b=$(()=>h.value?e.depth+2===7?"p":`h${e.depth+2}`:"p"),V=$(()=>n.value?void 0:"button"),I=$(()=>[[`level-${e.depth}`],{collapsible:s.value},{collapsed:t.value},{"is-link":n.value},{"is-active":r.value},{"has-active":c.value}]);function M(S){"key"in S&&S.key!=="Enter"||!e.item.link&&p()}function C(){e.item.link&&p()}return(S,B)=>{const z=R("VPSidebarItem",!0);return a(),k(H(y.value),{class:N(["VPSidebarItem",I.value])},{default:v(()=>[S.item.text?(a(),l("div",G({key:0,class:"item",role:V.value},Ue(S.item.items?{click:M,keydown:M}:{},!0),{tabindex:S.item.items&&0}),[B[1]||(B[1]=d("div",{class:"indicator"},null,-1)),S.item.link?(a(),k(F,{key:0,tag:L.value,class:"link",href:S.item.link,rel:S.item.rel,target:S.item.target},{default:v(()=>[(a(),k(H(b.value),{class:"text",innerHTML:S.item.text},null,8,["innerHTML"]))]),_:1},8,["tag","href","rel","target"])):(a(),k(H(b.value),{key:1,class:"text",innerHTML:S.item.text},null,8,["innerHTML"])),S.item.collapsed!=null&&S.item.items&&S.item.items.length?(a(),l("div",{key:2,class:"caret",role:"button","aria-label":"toggle section",onClick:C,onKeydown:We(C,["enter"]),tabindex:"0"},B[0]||(B[0]=[d("span",{class:"vpi-chevron-right caret-icon"},null,-1)]),32)):m("",!0)],16,fa)):m("",!0),S.item.items&&S.item.items.length?(a(),l("div",_a,[S.depth<5?(a(!0),l(A,{key:0},E(S.item.items,q=>(a(),k(z,{key:q.text,item:q,depth:S.depth+1},null,8,["item","depth"]))),128)):m("",!0)])):m("",!0)]),_:1},8,["class"])}}}),ka=_(ga,[["__scopeId","data-v-b7550ba0"]]),ba=f({__name:"VPSidebarGroup",props:{items:{}},setup(o){const e=w(!0);let t=null;return W(()=>{t=setTimeout(()=>{t=null,e.value=!1},300)}),je(()=>{t!=null&&(clearTimeout(t),t=null)}),(s,n)=>(a(!0),l(A,null,E(s.items,r=>(a(),l("div",{key:r.text,class:N(["group",{"no-transition":e.value}])},[g(ka,{item:r,depth:0},null,8,["item"])],2))),128))}}),$a=_(ba,[["__scopeId","data-v-c40bc020"]]),ya={class:"nav",id:"VPSidebarNav","aria-labelledby":"sidebar-aria-label",tabindex:"-1"},Pa=f({__name:"VPSidebar",props:{open:{type:Boolean}},setup(o){const{sidebarGroups:e,hasSidebar:t}=D(),s=o,n=w(null),r=we(ee?document.body:null);O([s,n],()=>{var h;s.open?(r.value=!0,(h=n.value)==null||h.focus()):r.value=!1},{immediate:!0,flush:"post"});const c=w(0);return O(e,()=>{c.value+=1},{deep:!0}),(h,p)=>i(t)?(a(),l("aside",{key:0,class:N(["VPSidebar",{open:h.open}]),ref_key:"navEl",ref:n,onClick:p[0]||(p[0]=Re(()=>{},["stop"]))},[p[2]||(p[2]=d("div",{class:"curtain"},null,-1)),d("nav",ya,[p[1]||(p[1]=d("span",{class:"visually-hidden",id:"sidebar-aria-label"}," Sidebar Navigation ",-1)),u(h.$slots,"sidebar-nav-before",{},void 0,!0),(a(),k($a,{items:i(e),key:c.value},null,8,["items"])),u(h.$slots,"sidebar-nav-after",{},void 0,!0)])],2)):m("",!0)}}),La=_(Pa,[["__scopeId","data-v-319d5ca6"]]),Va=f({__name:"VPSkipLink",setup(o){const e=X(),t=w();O(()=>e.path,()=>t.value.focus());function s({target:n}){const r=document.getElementById(decodeURIComponent(n.hash).slice(1));if(r){const c=()=>{r.removeAttribute("tabindex"),r.removeEventListener("blur",c)};r.setAttribute("tabindex","-1"),r.addEventListener("blur",c),r.focus(),window.scrollTo(0,0)}}return(n,r)=>(a(),l(A,null,[d("span",{ref_key:"backToTop",ref:t,tabindex:"-1"},null,512),d("a",{href:"#VPContent",class:"VPSkipLink visually-hidden",onClick:s}," Skip to content ")],64))}}),Sa=_(Va,[["__scopeId","data-v-0f60ec36"]]),wa=f({__name:"Layout",setup(o){const{isOpen:e,open:t,close:s}=D(),n=X();O(()=>n.path,s),ut(e,s);const{frontmatter:r}=P(),c=qe(),h=$(()=>!!c["home-hero-image"]);return Te("hero-image-slot-exists",h),(p,y)=>{const L=R("Content");return i(r).layout!==!1?(a(),l("div",{key:0,class:N(["Layout",i(r).pageClass])},[u(p.$slots,"layout-top",{},void 0,!0),g(Sa),g(Qe,{class:"backdrop",show:i(e),onClick:i(s)},null,8,["show","onClick"]),g(ma,null,{"nav-bar-title-before":v(()=>[u(p.$slots,"nav-bar-title-before",{},void 0,!0)]),"nav-bar-title-after":v(()=>[u(p.$slots,"nav-bar-title-after",{},void 0,!0)]),"nav-bar-content-before":v(()=>[u(p.$slots,"nav-bar-content-before",{},void 0,!0)]),"nav-bar-content-after":v(()=>[u(p.$slots,"nav-bar-content-after",{},void 0,!0)]),"nav-screen-content-before":v(()=>[u(p.$slots,"nav-screen-content-before",{},void 0,!0)]),"nav-screen-content-after":v(()=>[u(p.$slots,"nav-screen-content-after",{},void 0,!0)]),_:3}),g(io,{open:i(e),onOpenMenu:i(t)},null,8,["open","onOpenMenu"]),g(La,{open:i(e)},{"sidebar-nav-before":v(()=>[u(p.$slots,"sidebar-nav-before",{},void 0,!0)]),"sidebar-nav-after":v(()=>[u(p.$slots,"sidebar-nav-after",{},void 0,!0)]),_:3},8,["open"]),g(Rn,null,{"page-top":v(()=>[u(p.$slots,"page-top",{},void 0,!0)]),"page-bottom":v(()=>[u(p.$slots,"page-bottom",{},void 0,!0)]),"not-found":v(()=>[u(p.$slots,"not-found",{},void 0,!0)]),"home-hero-before":v(()=>[u(p.$slots,"home-hero-before",{},void 0,!0)]),"home-hero-info-before":v(()=>[u(p.$slots,"home-hero-info-before",{},void 0,!0)]),"home-hero-info":v(()=>[u(p.$slots,"home-hero-info",{},void 0,!0)]),"home-hero-info-after":v(()=>[u(p.$slots,"home-hero-info-after",{},void 0,!0)]),"home-hero-actions-after":v(()=>[u(p.$slots,"home-hero-actions-after",{},void 0,!0)]),"home-hero-image":v(()=>[u(p.$slots,"home-hero-image",{},void 0,!0)]),"home-hero-after":v(()=>[u(p.$slots,"home-hero-after",{},void 0,!0)]),"home-features-before":v(()=>[u(p.$slots,"home-features-before",{},void 0,!0)]),"home-features-after":v(()=>[u(p.$slots,"home-features-after",{},void 0,!0)]),"doc-footer-before":v(()=>[u(p.$slots,"doc-footer-before",{},void 0,!0)]),"doc-before":v(()=>[u(p.$slots,"doc-before",{},void 0,!0)]),"doc-after":v(()=>[u(p.$slots,"doc-after",{},void 0,!0)]),"doc-top":v(()=>[u(p.$slots,"doc-top",{},void 0,!0)]),"doc-bottom":v(()=>[u(p.$slots,"doc-bottom",{},void 0,!0)]),"aside-top":v(()=>[u(p.$slots,"aside-top",{},void 0,!0)]),"aside-bottom":v(()=>[u(p.$slots,"aside-bottom",{},void 0,!0)]),"aside-outline-before":v(()=>[u(p.$slots,"aside-outline-before",{},void 0,!0)]),"aside-outline-after":v(()=>[u(p.$slots,"aside-outline-after",{},void 0,!0)]),"aside-ads-before":v(()=>[u(p.$slots,"aside-ads-before",{},void 0,!0)]),"aside-ads-after":v(()=>[u(p.$slots,"aside-ads-after",{},void 0,!0)]),_:3}),g(Yn),u(p.$slots,"layout-bottom",{},void 0,!0)],2)):(a(),k(L,{key:1}))}}}),Ta=_(wa,[["__scopeId","data-v-5d98c3a5"]]),Na={Layout:Ta,enhanceApp:({app:o})=>{o.component("Badge",Je)}},Ia={name:"AutoGithubLink",props:{customCodePath:""},data(){return{codePath:""}},mounted(){const o="https://github.com/jinleili/learn-wgpu-zh/tree/master/code/",{page:e}=$e();!this.customCodePath||this.customCodePath==""?this.codePath=o+e.value.relativePath.replace("index.md","").replace(".md",""):this.codePath=o+this.customCodePath}},Aa={class:"auto-github-link"},Ma=["href"];function Ca(o,e,t,s,n,r){return a(),l("div",Aa,[d("a",{href:n.codePath,target:"_blank",rel:"noopener noreferrer"}," 查看源码！ ",8,Ma)])}const Ea=_(Ia,[["render",Ca]]),Ba="/learn-wgpu-zh/res/wx.jpg",Ha={name:"JoinWeiChatGroup"},Fa={src:Ba,style:{width:"312px","margin-top":"24px"}};function Oa(o,e,t,s,n,r){return a(),l("img",Fa)}const Da=_(Ha,[["render",Oa]]);function za(o){return o.replace(/\w\S*/g,function(e){return e.charAt(0).toUpperCase()+e.substr(1).toLowerCase()})}const Ga={name:"WasmExample",props:{example:"",autoLoad:!1,aspectRatio:.7},data(){return{error:"",loading:!1,exampleStarted:!1}},computed:{exampleName(){return za(this.example)}},methods:{async loadExample(){this.loading=!0,this.exampleStarted=!0;try{const o=window.location.protocol+"//"+window.location.host+"/learn-wgpu-zh";(await ve(()=>import(`${o}/wasm/${this.example}.js`.replace("_","-")),[])).default().then(t=>{this.wgpuAppLoaded()},t=>{`${t}`.includes("don't mind me. This isn't actually an error!")?this.wgpuAppLoaded():this.showErr(t)})}catch(o){this.showErr(o)}},wgpuAppLoaded(){this.exampleStarted=!0,this.loading=!1;const o=document.getElementById("wgpu-app-container");if(o){let e=o.getBoundingClientRect().width;o.style.height=`${e*this.aspectRatio}px`}},showErr(o){this.error=`An error occurred loading "${this.example}": ${o}`,console.error(o),this.exampleStarted=!1,this.loading=!1}},async mounted(){await this.$nextTick(),this.autoLoad&&await this.loadExample()}},Wa={id:"wgpu-app-container"},Ua={key:0,class:"error"},ja={key:1,class:"loading"},Ra=["disabled"];function qa(o,e,t,s,n,r){return a(),l("div",Wa,[n.error?(a(),l("div",Ua,T(n.error),1)):m("",!0),n.loading?(a(),l("div",ja," 正在加载 WASM 模块 ... ")):m("",!0),n.exampleStarted?m("",!0):(a(),l("button",{key:2,onClick:e[0]||(e[0]=c=>r.loadExample()),disabled:n.loading},"点此运行 "+T(r.exampleName)+" 示例",9,Ra))])}const xa=_(Ga,[["render",qa]]),Ja={name:"WasmFullScreen",props:{wasmName:""},data(){return{timeOutFunctionId:0,missedResizeCount:0,can_resize_canvas:!0}},methods:{canvas_resize_completed(){this.can_resize_canvas=!0},dispatch_resize_event(){this.can_resize_canvas=!1;let o=document.getElementById("simuverse_container"),e=o.getElementsByTagName("canvas")[0];if(e!=null){let t=window.devicePixelRatio;e.width=o.clientWidth*t,e.height=o.clientHeight*t,e.style.width=o.clientWidth+"px",e.style.height=o.clientHeight+"px",e.style.maxWidth=o.clientWidth+"px",e.style.maxHeight=o.clientHeight+"px"}},window_resized(){let o=document.getElementsByClassName("VPLocalNav");var e=64;o[0]&&(e+=o[0].clientHeight);let t=document.getElementById("simuverse_container");t.style.top=e+"px",clearTimeout(this.timeOutFunctionId),this.can_resize_canvas||this.missedResizeCount>10?(this.missedResizeCount=0,this.timeOutFunctionId=setTimeout(this.dispatch_resize_event,100)):(this.missedResizeCount++,this.timeOutFunctionId=setTimeout(this.window_resized,100))},showAlert(){this.hideLoading();let o=document.getElementById("alert");o!=null&&(o.style.display="block")},hideLoading(){let o=document.getElementById("loading");o!=null&&(o.style.display="none")},async loadSimuverse(){ve(()=>import(`https://jinleili.github.io/simuverse/${this.wasmName}.js`),[]).then(o=>{this.hideLoading(),o.default()}).catch(o=>{})}},async mounted(){window.onresize=this.window_resized,window.dispatch_resize_event=this.dispatch_resize_event,window.canvas_resize_completed=this.canvas_resize_completed,"navigator"in window&&"gpu"in navigator?navigator.gpu.requestAdapter().then(o=>{this.loadSimuverse()}).catch(o=>{this.showAlert()}):this.showAlert()},beforeDestroy(){delete window.onresize,delete window.dispatch_resize_event,delete window.canvas_resize_completed}},Ka={id:"simuverse_container"};function Ya(o,e,t,s,n,r){return a(),l("div",Ka,e[0]||(e[0]=[xe('
 WASM 加载中...
',2)]))}const Qa=_(Ja,[["render",Ya]]);function Xa(o){return o.replace(/\w\S*/g,function(e){return e.charAt(0).toUpperCase()+e.substr(1).toLowerCase()})}const Za={name:"WebGPUExample",props:{example:"",autoLoad:!0,aspectRatio:1},data(){return{error:"",loading:!1,exampleStarted:!1,showAlert:!1}},computed:{exampleName(){return Xa(this.example)}},methods:{detectWebGPUThenLoad(){"navigator"in window&&"gpu"in navigator?navigator.gpu.requestAdapter().then(o=>{this.loadExample()}).catch(o=>{this.showAlert=!0}):this.showAlert=!0},async loadExample(){this.loading=!0,this.exampleStarted=!0;try{const o=window.location.protocol+"//"+window.location.host+"/learn-wgpu-zh";(await ve(()=>import(`${o}/wasm/${this.example}.js`.replace("_","-")),[])).default().then(t=>{this.wgpuAppLoaded()},t=>{`${t}`.includes("don't mind me. This isn't actually an error!")?this.wgpuAppLoaded():this.showErr(t)})}catch(o){this.showErr(o)}},wgpuAppLoaded(){this.exampleStarted=!0,this.loading=!1;const o=document.getElementById("wgpu-app-container");if(o){let e=o.getBoundingClientRect().width;o.style.height=`${e*this.aspectRatio}px`}},showErr(o){this.error=`An error occurred loading "${this.example}": ${o}`,console.error(o),this.exampleStarted=!1,this.loading=!1,this.showAlert=!0}},async mounted(){this.autoLoad&&this.detectWebGPUThenLoad()}},er={id:"wgpu-app-container"},tr={key:0,style:{color:"#353535","margin-top":"20px"}},nr={key:1},or=["disabled"];function sr(o,e,t,s,n,r){return a(),l("div",er,[n.showAlert?(a(),l("div",tr,e[1]||(e[1]=[d("div",{style:{"line-height":"40px"}},"此浏览器版本不支持 WebGPU",-1),d("div",{style:{"font-size":"16px",color:"#999999"}}," 请使用 Chrome / Edge 113+，Arc 或者 Safari 18 ",-1)]))):m("",!0),n.loading?(a(),l("div",nr," 正在加载 WASM 模块 ... ")):m("",!0),n.exampleStarted?m("",!0):(a(),l("button",{key:2,class:"webgpu_example_button",onClick:e[0]||(e[0]=c=>r.detectWebGPUThenLoad()),disabled:n.loading},"点击运行 "+T(r.exampleName),9,or))])}const ar=_(Za,[["render",sr]]),ir={...Na,enhanceApp({app:o}){o.component("AutoGithubLink",Ea),o.component("JoinWeiChatGroup",Da),o.component("WasmExample",xa),o.component("WebGPUExample",ar),o.component("WasmFullScreen",Qa)}};export{ir as R};
diff --git a/assets/index.md.DIgl1ov4.js b/assets/index.md.BxEXWWEG.js
similarity index 97%
rename from assets/index.md.DIgl1ov4.js
rename to assets/index.md.BxEXWWEG.js
index 4f80fe020..22967afd3 100644
--- a/assets/index.md.DIgl1ov4.js
+++ b/assets/index.md.BxEXWWEG.js
@@ -1,4 +1,4 @@
-import{_ as r,c as s,a1 as i,G as n,B as t,o as p}from"./chunks/framework.DdYVMT1V.js";const l="/learn-wgpu-zh/res/WebGPU-1.0.png",o="/learn-wgpu-zh/res/safari.png",h="/learn-wgpu-zh/res/firefox.png",w=JSON.parse('{"title":"介绍","description":"","frontmatter":{},"headers":[],"relativePath":"index.md","filePath":"index.md","lastUpdated":1730902479000}'),g={name:"index.md"};function u(b,e,c,d,k,m){const a=t("JoinWeiChatGroup");return p(),s("div",null,[e[0]||(e[0]=i('
介绍 ​
为了便于读者的理解，译者选择性的添加了一些内容，并对原文中有歧义或错误的地方进行重新表述。所有的添加与修改均不会做单独标记。
翻译时采用了第一人称视角，故，除了带 🆕 标记的章节，教程中的我主要指的是原作者 @sotrh。
另外，专有名词在一个段落中第一次出现时做了加粗处理，同一段落里反复出现时就不再加粗。
什么是 WebGPU ​
WebGPU 是由 W3C GPU for the Web 社区组所发布的规范，目标是允许网页代码以高性能且安全可靠的方式访问 GPU 功能。它通过借鉴 Vulkan API，并将其转换为宿主硬件上使用的各式 API（如 DirectX、Metal、Vulkan）来实现这一目标。
wgpu 与 WebGPU 的关系 ​
wgpu 是基于 WebGPU API 规范的、跨平台的、安全的、纯 Rust 图形 API。它是 Firefox、Servo 和 Deno 中 WebGPU 整合的核心。
wgpu 不仅可以在 Web 环境运行，还可以在 macOS / iOS、Android、Window 和 Linux 等系统上原生运行。
为什么选择 Rust ​
wgpu 实际上提供了 C 语言绑定 (wgpu-native)，你可以写 C/C++ 或其他能与 C 互通的语言来使用它。尽管如此，wgpu 本身是用 Rust 实现的，它便利的 Rust 绑定能减少你使用中的阻碍。更重要的是，Rust 是一门高性能，内存和线程安全且极具生产力的现代底层语言。
在学习本教程之前你需要先熟悉 Rust，因为这里不会详细介绍 Rust 的语法知识。如果对 Rust 还不太熟悉，可以回顾一下 Rust 教程或 Rust 语言圣经。另外还需要熟悉 Rust 包管理工具 Cargo。
为什么要学习 wgpu，直接用 JS/TS 搞 WebGPU 开发不香吗？ ​
从 wgpu 及 dawn 这两个主要的 WebGPU 标准的实现库的开发动向可以看出，大量的扩展特性目前只有在 Native 端（Windows、macOS、Linux、iOS、Android）原生运行才能支持。wgpu 更是将 Native 端运行做为首要目标，WebGPU 是做为最低支持的特性集而存在。
使用 wgpu 在桌面及移动端做跨平台原生应用开发的体验极好，甚至我偏向于认为：WebGPU 更容易在 Native 端得到普及。因为不用受限于 1.0 标准啥时候发布，用户的浏览器是否支持等问题，现在就可以发布采用了 wgpu 的商业应用。
学习 wgpu 还有另一个重要的优势，那就是可以利用各种强大的桌面端 GPU 调试工具。在开发大型 2D/3D 应用时，通过使用命令记录/回放、帧捕捉、Buffer 视图等功能，可以快速定位 GPU 层代码/数据的性能瓶颈和程序缺陷。相较于仅依靠浏览器提供的有限调试能力，这些工具能够事半功倍，帮助开发者更快地解决问题。
wgpu/WebGPU 的学习资料是不是很少？ ​
其实不用纠结于 WebGPU 方面的直接学习资料的多少。
WebGPU 就是一套图形接口，绝大部分概念都是各图形接口里通用的，任何一本经典图形学书籍都是我们的学习资料。 要利用好这些经典资料，前提仅仅就是要先学习一套图形接口。因为图形学的书不是使用统一的特定图形接口所写，先学会一个图形接口及常见的概念，然后再去深入学习某个方面的资料就会事半功倍。
现在学习 wgpu 是不是为时尚早？ ​
WebGPU 1.0 API 已经稳定，Google 已经在 2023/4/6 宣布从 Chrome 113 版本开始正式支持 WebGPU。
WebGPU Spec 1.0 补充一下 @Kangz 的话: Web 规范有点滑稽，因为“草案”或“推荐”之类的名称在很大程度上是一个管理细节，实际上对规范是否稳定可用没有任何影响。事实上，W3C 程序建议至少有两个浏览器在规范通过“草案”之前已经发布了兼容的实现，但显然这些浏览器会认为规范相当稳定,然后才愿意发布实现。然而，这确实令开发人员感到困惑，我们对此深表歉意。 
如何运行示例代码 ​
本教程的示例代码大部分放在 code/ 目录下，且示例程序的名称与程序目录同名。 比如，第一章 依赖与窗口 所有在的目录是 code/beginner/tutorial1-window, 此示例程序的名称也叫 tutorial1-window:
sh
# 在桌面环境本地运行
+import{_ as r,C as s,o as i,c as n,a1 as t,G as p}from"./chunks/framework.DyadSNS9.js";const l="/learn-wgpu-zh/res/WebGPU-1.0.png",o="/learn-wgpu-zh/res/safari.png",h="/learn-wgpu-zh/res/firefox.png",w=JSON.parse('{"title":"介绍","description":"","frontmatter":{},"headers":[],"relativePath":"index.md","filePath":"index.md","lastUpdated":1731720800000}'),g={name:"index.md"};function u(b,e,c,d,k,m){const a=s("JoinWeiChatGroup");return i(),n("div",null,[e[0]||(e[0]=t('
介绍 ​
为了便于读者的理解，译者选择性的添加了一些内容，并对原文中有歧义或错误的地方进行重新表述。所有的添加与修改均不会做单独标记。
翻译时采用了第一人称视角，故，除了带 🆕 标记的章节，教程中的我主要指的是原作者 @sotrh。
另外，专有名词在一个段落中第一次出现时做了加粗处理，同一段落里反复出现时就不再加粗。
什么是 WebGPU ​
WebGPU 是由 W3C GPU for the Web 社区组所发布的规范，目标是允许网页代码以高性能且安全可靠的方式访问 GPU 功能。它通过借鉴 Vulkan API，并将其转换为宿主硬件上使用的各式 API（如 DirectX、Metal、Vulkan）来实现这一目标。
wgpu 与 WebGPU 的关系 ​
wgpu 是基于 WebGPU API 规范的、跨平台的、安全的、纯 Rust 图形 API。它是 Firefox、Servo 和 Deno 中 WebGPU 整合的核心。
wgpu 不仅可以在 Web 环境运行，还可以在 macOS / iOS、Android、Window 和 Linux 等系统上原生运行。
为什么选择 Rust ​
wgpu 实际上提供了 C 语言绑定 (wgpu-native)，你可以写 C/C++ 或其他能与 C 互通的语言来使用它。尽管如此，wgpu 本身是用 Rust 实现的，它便利的 Rust 绑定能减少你使用中的阻碍。更重要的是，Rust 是一门高性能，内存和线程安全且极具生产力的现代底层语言。
在学习本教程之前你需要先熟悉 Rust，因为这里不会详细介绍 Rust 的语法知识。如果对 Rust 还不太熟悉，可以回顾一下 Rust 教程或 Rust 语言圣经。另外还需要熟悉 Rust 包管理工具 Cargo。
为什么要学习 wgpu，直接用 JS/TS 搞 WebGPU 开发不香吗？ ​
从 wgpu 及 dawn 这两个主要的 WebGPU 标准的实现库的开发动向可以看出，大量的扩展特性目前只有在 Native 端（Windows、macOS、Linux、iOS、Android）原生运行才能支持。wgpu 更是将 Native 端运行做为首要目标，WebGPU 是做为最低支持的特性集而存在。
使用 wgpu 在桌面及移动端做跨平台原生应用开发的体验极好，甚至我偏向于认为：WebGPU 更容易在 Native 端得到普及。因为不用受限于 1.0 标准啥时候发布，用户的浏览器是否支持等问题，现在就可以发布采用了 wgpu 的商业应用。
学习 wgpu 还有另一个重要的优势，那就是可以利用各种强大的桌面端 GPU 调试工具。在开发大型 2D/3D 应用时，通过使用命令记录/回放、帧捕捉、Buffer 视图等功能，可以快速定位 GPU 层代码/数据的性能瓶颈和程序缺陷。相较于仅依靠浏览器提供的有限调试能力，这些工具能够事半功倍，帮助开发者更快地解决问题。
wgpu/WebGPU 的学习资料是不是很少？ ​
其实不用纠结于 WebGPU 方面的直接学习资料的多少。
WebGPU 就是一套图形接口，绝大部分概念都是各图形接口里通用的，任何一本经典图形学书籍都是我们的学习资料。 要利用好这些经典资料，前提仅仅就是要先学习一套图形接口。因为图形学的书不是使用统一的特定图形接口所写，先学会一个图形接口及常见的概念，然后再去深入学习某个方面的资料就会事半功倍。
现在学习 wgpu 是不是为时尚早？ ​
WebGPU 1.0 API 已经稳定，Google 已经在 2023/4/6 宣布从 Chrome 113 版本开始正式支持 WebGPU。
WebGPU Spec 1.0 补充一下 @Kangz 的话: Web 规范有点滑稽，因为“草案”或“推荐”之类的名称在很大程度上是一个管理细节，实际上对规范是否稳定可用没有任何影响。事实上，W3C 程序建议至少有两个浏览器在规范通过“草案”之前已经发布了兼容的实现，但显然这些浏览器会认为规范相当稳定,然后才愿意发布实现。然而，这确实令开发人员感到困惑，我们对此深表歉意。 
如何运行示例代码 ​
本教程的示例代码大部分放在 code/ 目录下，且示例程序的名称与程序目录同名。 比如，第一章 依赖与窗口 所有在的目录是 code/beginner/tutorial1-window, 此示例程序的名称也叫 tutorial1-window:
sh
# 在桌面环境本地运行
 cargo run --bin tutorial3-pipeline
 
 # 在浏览器中运行
@@ -8,4 +8,4 @@ import{_ as r,c as s,a1 as i,G as n,B as t,o as p}from"./chunks/framework.DdYVMT
 # compute-pipeline, vertex-animation 及 hilbert-curve 示例只能在桌面端与浏览器端 WebGPU 环境运行
 cargo run-wasm --bin vertex-animation
 # 使用 WebGL 2.0
-cargo run-wasm --bin tutorial2-surface --features webgl
调试与集成 部分的代码是 2 个独立的项目： wgpu-in-app 和 bevy-in-app
simuverse 是基于 wgpu + egui 的扩展示例，提供了粒子矢量场，流体场及 GPU 程序化纹理的实现。
如何开启浏览器 WebGPU 功能支持 ​
Chrome ​
Chrome 113+、Microsoft Edge 113+ 及 Arc 浏览器均已默认支持 WebGPU 功能。
Safari ​
Safari 18 (macOS 15) 已经默认开启了 WebGPU 功能。
macOS 14- 系统上，需安装 Safari Technology Preview 185+，从顶部菜单栏选择 开发 -> 功能标志 , 搜索并勾选 WebGPU: Safari Technology Preview
Firefox ​
安装 Nightly 版本，在地址栏中输入 about:config , 将 dom.webgpu.enabled 设置为 true: Firefox Nightly
关于译者 ​
我是一名移动端架构师，有多年使用 OpenGL / WebGL, Metal 的实践经验。2018 年开始接触 WebGPU，目前正积极地参与到 wgpu 开源项目的开发与完善之中，并且已于两年前在 AppStore 上架了基于 wgpu 实现的毛笔书法模拟 App 字习 Pro。
加入 wgpu 微信学习交流群 ​
',38)),n(a)])}const P=r(g,[["render",u]]);export{w as __pageData,P as default};
+cargo run-wasm --bin tutorial2-surface --features webgl
调试与集成 部分的代码是 2 个独立的项目： wgpu-in-app 和 bevy-in-app
simuverse 是基于 wgpu + egui 的扩展示例，提供了粒子矢量场，流体场及 GPU 程序化纹理的实现。
如何开启浏览器 WebGPU 功能支持 ​
Chrome ​
Chrome 113+、Microsoft Edge 113+ 及 Arc 浏览器均已默认支持 WebGPU 功能。
Safari ​
Safari 18 (macOS 15) 已经默认开启了 WebGPU 功能。
macOS 14- 系统上，需安装 Safari Technology Preview 185+，从顶部菜单栏选择 开发 -> 功能标志 , 搜索并勾选 WebGPU: Safari Technology Preview
Firefox ​
安装 Nightly 版本，在地址栏中输入 about:config , 将 dom.webgpu.enabled 设置为 true: Firefox Nightly
关于译者 ​
我是一名移动端架构师，有多年使用 OpenGL / WebGL, Metal 的实践经验。2018 年开始接触 WebGPU，目前正积极地参与到 wgpu 开源项目的开发与完善之中，并且已于两年前在 AppStore 上架了基于 wgpu 实现的毛笔书法模拟 App 字习 Pro。
加入 wgpu 微信学习交流群 ​
',38)),p(a)])}const P=r(g,[["render",u]]);export{w as __pageData,P as default};
diff --git a/assets/index.md.DIgl1ov4.lean.js b/assets/index.md.BxEXWWEG.lean.js
similarity index 97%
rename from assets/index.md.DIgl1ov4.lean.js
rename to assets/index.md.BxEXWWEG.lean.js
index 4f80fe020..22967afd3 100644
--- a/assets/index.md.DIgl1ov4.lean.js
+++ b/assets/index.md.BxEXWWEG.lean.js
@@ -1,4 +1,4 @@
-import{_ as r,c as s,a1 as i,G as n,B as t,o as p}from"./chunks/framework.DdYVMT1V.js";const l="/learn-wgpu-zh/res/WebGPU-1.0.png",o="/learn-wgpu-zh/res/safari.png",h="/learn-wgpu-zh/res/firefox.png",w=JSON.parse('{"title":"介绍","description":"","frontmatter":{},"headers":[],"relativePath":"index.md","filePath":"index.md","lastUpdated":1730902479000}'),g={name:"index.md"};function u(b,e,c,d,k,m){const a=t("JoinWeiChatGroup");return p(),s("div",null,[e[0]||(e[0]=i('
介绍 ​
为了便于读者的理解，译者选择性的添加了一些内容，并对原文中有歧义或错误的地方进行重新表述。所有的添加与修改均不会做单独标记。
翻译时采用了第一人称视角，故，除了带 🆕 标记的章节，教程中的我主要指的是原作者 @sotrh。
另外，专有名词在一个段落中第一次出现时做了加粗处理，同一段落里反复出现时就不再加粗。
什么是 WebGPU ​
WebGPU 是由 W3C GPU for the Web 社区组所发布的规范，目标是允许网页代码以高性能且安全可靠的方式访问 GPU 功能。它通过借鉴 Vulkan API，并将其转换为宿主硬件上使用的各式 API（如 DirectX、Metal、Vulkan）来实现这一目标。
wgpu 与 WebGPU 的关系 ​
wgpu 是基于 WebGPU API 规范的、跨平台的、安全的、纯 Rust 图形 API。它是 Firefox、Servo 和 Deno 中 WebGPU 整合的核心。
wgpu 不仅可以在 Web 环境运行，还可以在 macOS / iOS、Android、Window 和 Linux 等系统上原生运行。
为什么选择 Rust ​
wgpu 实际上提供了 C 语言绑定 (wgpu-native)，你可以写 C/C++ 或其他能与 C 互通的语言来使用它。尽管如此，wgpu 本身是用 Rust 实现的，它便利的 Rust 绑定能减少你使用中的阻碍。更重要的是，Rust 是一门高性能，内存和线程安全且极具生产力的现代底层语言。
在学习本教程之前你需要先熟悉 Rust，因为这里不会详细介绍 Rust 的语法知识。如果对 Rust 还不太熟悉，可以回顾一下 Rust 教程或 Rust 语言圣经。另外还需要熟悉 Rust 包管理工具 Cargo。
为什么要学习 wgpu，直接用 JS/TS 搞 WebGPU 开发不香吗？ ​
从 wgpu 及 dawn 这两个主要的 WebGPU 标准的实现库的开发动向可以看出，大量的扩展特性目前只有在 Native 端（Windows、macOS、Linux、iOS、Android）原生运行才能支持。wgpu 更是将 Native 端运行做为首要目标，WebGPU 是做为最低支持的特性集而存在。
使用 wgpu 在桌面及移动端做跨平台原生应用开发的体验极好，甚至我偏向于认为：WebGPU 更容易在 Native 端得到普及。因为不用受限于 1.0 标准啥时候发布，用户的浏览器是否支持等问题，现在就可以发布采用了 wgpu 的商业应用。
学习 wgpu 还有另一个重要的优势，那就是可以利用各种强大的桌面端 GPU 调试工具。在开发大型 2D/3D 应用时，通过使用命令记录/回放、帧捕捉、Buffer 视图等功能，可以快速定位 GPU 层代码/数据的性能瓶颈和程序缺陷。相较于仅依靠浏览器提供的有限调试能力，这些工具能够事半功倍，帮助开发者更快地解决问题。
wgpu/WebGPU 的学习资料是不是很少？ ​
其实不用纠结于 WebGPU 方面的直接学习资料的多少。
WebGPU 就是一套图形接口，绝大部分概念都是各图形接口里通用的，任何一本经典图形学书籍都是我们的学习资料。 要利用好这些经典资料，前提仅仅就是要先学习一套图形接口。因为图形学的书不是使用统一的特定图形接口所写，先学会一个图形接口及常见的概念，然后再去深入学习某个方面的资料就会事半功倍。
现在学习 wgpu 是不是为时尚早？ ​
WebGPU 1.0 API 已经稳定，Google 已经在 2023/4/6 宣布从 Chrome 113 版本开始正式支持 WebGPU。
WebGPU Spec 1.0 补充一下 @Kangz 的话: Web 规范有点滑稽，因为“草案”或“推荐”之类的名称在很大程度上是一个管理细节，实际上对规范是否稳定可用没有任何影响。事实上，W3C 程序建议至少有两个浏览器在规范通过“草案”之前已经发布了兼容的实现，但显然这些浏览器会认为规范相当稳定,然后才愿意发布实现。然而，这确实令开发人员感到困惑，我们对此深表歉意。 
如何运行示例代码 ​
本教程的示例代码大部分放在 code/ 目录下，且示例程序的名称与程序目录同名。 比如，第一章 依赖与窗口 所有在的目录是 code/beginner/tutorial1-window, 此示例程序的名称也叫 tutorial1-window:
sh
# 在桌面环境本地运行
+import{_ as r,C as s,o as i,c as n,a1 as t,G as p}from"./chunks/framework.DyadSNS9.js";const l="/learn-wgpu-zh/res/WebGPU-1.0.png",o="/learn-wgpu-zh/res/safari.png",h="/learn-wgpu-zh/res/firefox.png",w=JSON.parse('{"title":"介绍","description":"","frontmatter":{},"headers":[],"relativePath":"index.md","filePath":"index.md","lastUpdated":1731720800000}'),g={name:"index.md"};function u(b,e,c,d,k,m){const a=s("JoinWeiChatGroup");return i(),n("div",null,[e[0]||(e[0]=t('
介绍 ​
为了便于读者的理解，译者选择性的添加了一些内容，并对原文中有歧义或错误的地方进行重新表述。所有的添加与修改均不会做单独标记。
翻译时采用了第一人称视角，故，除了带 🆕 标记的章节，教程中的我主要指的是原作者 @sotrh。
另外，专有名词在一个段落中第一次出现时做了加粗处理，同一段落里反复出现时就不再加粗。
什么是 WebGPU ​
WebGPU 是由 W3C GPU for the Web 社区组所发布的规范，目标是允许网页代码以高性能且安全可靠的方式访问 GPU 功能。它通过借鉴 Vulkan API，并将其转换为宿主硬件上使用的各式 API（如 DirectX、Metal、Vulkan）来实现这一目标。
wgpu 与 WebGPU 的关系 ​
wgpu 是基于 WebGPU API 规范的、跨平台的、安全的、纯 Rust 图形 API。它是 Firefox、Servo 和 Deno 中 WebGPU 整合的核心。
wgpu 不仅可以在 Web 环境运行，还可以在 macOS / iOS、Android、Window 和 Linux 等系统上原生运行。
为什么选择 Rust ​
wgpu 实际上提供了 C 语言绑定 (wgpu-native)，你可以写 C/C++ 或其他能与 C 互通的语言来使用它。尽管如此，wgpu 本身是用 Rust 实现的，它便利的 Rust 绑定能减少你使用中的阻碍。更重要的是，Rust 是一门高性能，内存和线程安全且极具生产力的现代底层语言。
在学习本教程之前你需要先熟悉 Rust，因为这里不会详细介绍 Rust 的语法知识。如果对 Rust 还不太熟悉，可以回顾一下 Rust 教程或 Rust 语言圣经。另外还需要熟悉 Rust 包管理工具 Cargo。
为什么要学习 wgpu，直接用 JS/TS 搞 WebGPU 开发不香吗？ ​
从 wgpu 及 dawn 这两个主要的 WebGPU 标准的实现库的开发动向可以看出，大量的扩展特性目前只有在 Native 端（Windows、macOS、Linux、iOS、Android）原生运行才能支持。wgpu 更是将 Native 端运行做为首要目标，WebGPU 是做为最低支持的特性集而存在。
使用 wgpu 在桌面及移动端做跨平台原生应用开发的体验极好，甚至我偏向于认为：WebGPU 更容易在 Native 端得到普及。因为不用受限于 1.0 标准啥时候发布，用户的浏览器是否支持等问题，现在就可以发布采用了 wgpu 的商业应用。
学习 wgpu 还有另一个重要的优势，那就是可以利用各种强大的桌面端 GPU 调试工具。在开发大型 2D/3D 应用时，通过使用命令记录/回放、帧捕捉、Buffer 视图等功能，可以快速定位 GPU 层代码/数据的性能瓶颈和程序缺陷。相较于仅依靠浏览器提供的有限调试能力，这些工具能够事半功倍，帮助开发者更快地解决问题。
wgpu/WebGPU 的学习资料是不是很少？ ​
其实不用纠结于 WebGPU 方面的直接学习资料的多少。
WebGPU 就是一套图形接口，绝大部分概念都是各图形接口里通用的，任何一本经典图形学书籍都是我们的学习资料。 要利用好这些经典资料，前提仅仅就是要先学习一套图形接口。因为图形学的书不是使用统一的特定图形接口所写，先学会一个图形接口及常见的概念，然后再去深入学习某个方面的资料就会事半功倍。
现在学习 wgpu 是不是为时尚早？ ​
WebGPU 1.0 API 已经稳定，Google 已经在 2023/4/6 宣布从 Chrome 113 版本开始正式支持 WebGPU。
WebGPU Spec 1.0 补充一下 @Kangz 的话: Web 规范有点滑稽，因为“草案”或“推荐”之类的名称在很大程度上是一个管理细节，实际上对规范是否稳定可用没有任何影响。事实上，W3C 程序建议至少有两个浏览器在规范通过“草案”之前已经发布了兼容的实现，但显然这些浏览器会认为规范相当稳定,然后才愿意发布实现。然而，这确实令开发人员感到困惑，我们对此深表歉意。 
如何运行示例代码 ​
本教程的示例代码大部分放在 code/ 目录下，且示例程序的名称与程序目录同名。 比如，第一章 依赖与窗口 所有在的目录是 code/beginner/tutorial1-window, 此示例程序的名称也叫 tutorial1-window:
sh
# 在桌面环境本地运行
 cargo run --bin tutorial3-pipeline
 
 # 在浏览器中运行
@@ -8,4 +8,4 @@ import{_ as r,c as s,a1 as i,G as n,B as t,o as p}from"./chunks/framework.DdYVMT
 # compute-pipeline, vertex-animation 及 hilbert-curve 示例只能在桌面端与浏览器端 WebGPU 环境运行
 cargo run-wasm --bin vertex-animation
 # 使用 WebGL 2.0
-cargo run-wasm --bin tutorial2-surface --features webgl
调试与集成 部分的代码是 2 个独立的项目： wgpu-in-app 和 bevy-in-app
simuverse 是基于 wgpu + egui 的扩展示例，提供了粒子矢量场，流体场及 GPU 程序化纹理的实现。
如何开启浏览器 WebGPU 功能支持 ​
Chrome ​
Chrome 113+、Microsoft Edge 113+ 及 Arc 浏览器均已默认支持 WebGPU 功能。
Safari ​
Safari 18 (macOS 15) 已经默认开启了 WebGPU 功能。
macOS 14- 系统上，需安装 Safari Technology Preview 185+，从顶部菜单栏选择 开发 -> 功能标志 , 搜索并勾选 WebGPU: Safari Technology Preview
Firefox ​
安装 Nightly 版本，在地址栏中输入 about:config , 将 dom.webgpu.enabled 设置为 true: Firefox Nightly
关于译者 ​
我是一名移动端架构师，有多年使用 OpenGL / WebGL, Metal 的实践经验。2018 年开始接触 WebGPU，目前正积极地参与到 wgpu 开源项目的开发与完善之中，并且已于两年前在 AppStore 上架了基于 wgpu 实现的毛笔书法模拟 App 字习 Pro。
加入 wgpu 微信学习交流群 ​
',38)),n(a)])}const P=r(g,[["render",u]]);export{w as __pageData,P as default};
+cargo run-wasm --bin tutorial2-surface --features webgl
调试与集成 部分的代码是 2 个独立的项目： wgpu-in-app 和 bevy-in-app
simuverse 是基于 wgpu + egui 的扩展示例，提供了粒子矢量场，流体场及 GPU 程序化纹理的实现。
如何开启浏览器 WebGPU 功能支持 ​
Chrome ​
Chrome 113+、Microsoft Edge 113+ 及 Arc 浏览器均已默认支持 WebGPU 功能。
Safari ​
Safari 18 (macOS 15) 已经默认开启了 WebGPU 功能。
macOS 14- 系统上，需安装 Safari Technology Preview 185+，从顶部菜单栏选择 开发 -> 功能标志 , 搜索并勾选 WebGPU: Safari Technology Preview
Firefox ​
安装 Nightly 版本，在地址栏中输入 about:config , 将 dom.webgpu.enabled 设置为 true: Firefox Nightly
关于译者 ​
我是一名移动端架构师，有多年使用 OpenGL / WebGL, Metal 的实践经验。2018 年开始接触 WebGPU，目前正积极地参与到 wgpu 开源项目的开发与完善之中，并且已于两年前在 AppStore 上架了基于 wgpu 实现的毛笔书法模拟 App 字习 Pro。
加入 wgpu 微信学习交流群 ​
',38)),p(a)])}const P=r(g,[["render",u]]);export{w as __pageData,P as default};
diff --git a/assets/integration-and-debugging_android_index.md.DqRfaVoJ.js b/assets/integration-and-debugging_android_index.md.Dflin0CP.js
similarity index 99%
rename from assets/integration-and-debugging_android_index.md.DqRfaVoJ.js
rename to assets/integration-and-debugging_android_index.md.Dflin0CP.js
index 541a248ad..2d45bbc34 100644
--- a/assets/integration-and-debugging_android_index.md.DqRfaVoJ.js
+++ b/assets/integration-and-debugging_android_index.md.Dflin0CP.js
@@ -1,4 +1,4 @@
-import{_ as i,c as a,a1 as n,o as l}from"./chunks/framework.DdYVMT1V.js";const p="/learn-wgpu-zh/assets/tools.SDfH2BFP.png",h="/learn-wgpu-zh/assets/on_android.BmWZaLNk.png",c=JSON.parse('{"title":"与 Android App 集成","description":"","frontmatter":{},"headers":[],"relativePath":"integration-and-debugging/android/index.md","filePath":"integration-and-debugging/android/index.md","lastUpdated":1730902479000}'),k={name:"integration-and-debugging/android/index.md"};function e(t,s,r,d,E,g){return l(),a("div",null,s[0]||(s[0]=[n('
与 Android App 集成 ​
开发环境配置 ​
假设你的电脑上已经安装了 Android Studio，从菜单栏打开 SDK 管理器（Tools > SDK Manager > Android SDK > SDK Tools），勾选以下 3 个选项后点击 OK 按钮确认:
  • Android SDK Build-Tools
  • Android SDK Command-line Tools
  • NDK(Side by side)
然后，设置如下两个系统环境变量：
sh
export ANDROID_SDK_ROOT=$HOME/Library/Android/sdk
+import{_ as i,o as a,c as n,a1 as l}from"./chunks/framework.DyadSNS9.js";const p="/learn-wgpu-zh/assets/tools.SDfH2BFP.png",h="/learn-wgpu-zh/assets/on_android.BmWZaLNk.png",c=JSON.parse('{"title":"与 Android App 集成","description":"","frontmatter":{},"headers":[],"relativePath":"integration-and-debugging/android/index.md","filePath":"integration-and-debugging/android/index.md","lastUpdated":1731720800000}'),k={name:"integration-and-debugging/android/index.md"};function e(t,s,r,d,E,g){return a(),n("div",null,s[0]||(s[0]=[l('
与 Android App 集成 ​
开发环境配置 ​
假设你的电脑上已经安装了 Android Studio，从菜单栏打开 SDK 管理器（Tools > SDK Manager > Android SDK > SDK Tools），勾选以下 3 个选项后点击 OK 按钮确认:
  • Android SDK Build-Tools
  • Android SDK Command-line Tools
  • NDK(Side by side)
然后，设置如下两个系统环境变量：
sh
export ANDROID_SDK_ROOT=$HOME/Library/Android/sdk
 # 注意，此处需要替换为你电脑上安装的 NDK 的版本号
 export NDK_HOME=$ANDROID_SDK_ROOT/ndk/23.1.7779620
添加安卓构建目标支持 ​
到目前为止，Android 模拟器和虚拟设备还不支持 Vulkan 图形 API（仅支持 OpenGL ES），所以开发或调试 wgpu 程序在 Android 系统上的运行时，建议使用真机（各种云测平台的云真机也行）。
如果需要支持模拟器运行，还得加上 x86_64-linux-android 和 i686-linux-android 这两个构建目标的支持。需要注意的是，如果指定了 wgpu 项目使用 Vulkan 图形后端（Instance::new(wgpu::Backends::VULKAN)），则在模拟内运行时会崩溃：
sh
rustup target add aarch64-linux-android armv7-linux-androideabi
自定义窗口对象 ​
要实现一个 wgpu 里能使用的窗口对象，就必须实现 raw-window-handle 中 raw_window_handle() raw_display_handle() 这两个分别定义在 HasRawWindowHandle HasRawDisplayHandle trait 里的抽象接口。
实现 raw_display_handle() 最为简单, 只需要实例化一个空的 AndroidDisplayHandle 对象做为参数。查看 raw-window-handle 的源码就会发现，实现 raw_window_handle() 抽象接口需要用到 AndroidNdkWindowHandle 对象，此对象有一个叫 a_native_window 的字段，用来指向安卓 App 的 ANativeWindow 实例。 下面我们来一步步实现它。
先给项目添加必要的依赖：
toml
[target.'cfg(target_os = "android")'.dependencies]
 jni = "0.19"
diff --git a/assets/integration-and-debugging_android_index.md.DqRfaVoJ.lean.js b/assets/integration-and-debugging_android_index.md.Dflin0CP.lean.js
similarity index 99%
rename from assets/integration-and-debugging_android_index.md.DqRfaVoJ.lean.js
rename to assets/integration-and-debugging_android_index.md.Dflin0CP.lean.js
index 541a248ad..2d45bbc34 100644
--- a/assets/integration-and-debugging_android_index.md.DqRfaVoJ.lean.js
+++ b/assets/integration-and-debugging_android_index.md.Dflin0CP.lean.js
@@ -1,4 +1,4 @@
-import{_ as i,c as a,a1 as n,o as l}from"./chunks/framework.DdYVMT1V.js";const p="/learn-wgpu-zh/assets/tools.SDfH2BFP.png",h="/learn-wgpu-zh/assets/on_android.BmWZaLNk.png",c=JSON.parse('{"title":"与 Android App 集成","description":"","frontmatter":{},"headers":[],"relativePath":"integration-and-debugging/android/index.md","filePath":"integration-and-debugging/android/index.md","lastUpdated":1730902479000}'),k={name:"integration-and-debugging/android/index.md"};function e(t,s,r,d,E,g){return l(),a("div",null,s[0]||(s[0]=[n('
与 Android App 集成 ​
开发环境配置 ​
假设你的电脑上已经安装了 Android Studio，从菜单栏打开 SDK 管理器（Tools > SDK Manager > Android SDK > SDK Tools），勾选以下 3 个选项后点击 OK 按钮确认:
  • Android SDK Build-Tools
  • Android SDK Command-line Tools
  • NDK(Side by side)
然后，设置如下两个系统环境变量：
sh
export ANDROID_SDK_ROOT=$HOME/Library/Android/sdk
+import{_ as i,o as a,c as n,a1 as l}from"./chunks/framework.DyadSNS9.js";const p="/learn-wgpu-zh/assets/tools.SDfH2BFP.png",h="/learn-wgpu-zh/assets/on_android.BmWZaLNk.png",c=JSON.parse('{"title":"与 Android App 集成","description":"","frontmatter":{},"headers":[],"relativePath":"integration-and-debugging/android/index.md","filePath":"integration-and-debugging/android/index.md","lastUpdated":1731720800000}'),k={name:"integration-and-debugging/android/index.md"};function e(t,s,r,d,E,g){return a(),n("div",null,s[0]||(s[0]=[l('
与 Android App 集成 ​
开发环境配置 ​
假设你的电脑上已经安装了 Android Studio，从菜单栏打开 SDK 管理器（Tools > SDK Manager > Android SDK > SDK Tools），勾选以下 3 个选项后点击 OK 按钮确认:
  • Android SDK Build-Tools
  • Android SDK Command-line Tools
  • NDK(Side by side)
然后，设置如下两个系统环境变量：
sh
export ANDROID_SDK_ROOT=$HOME/Library/Android/sdk
 # 注意，此处需要替换为你电脑上安装的 NDK 的版本号
 export NDK_HOME=$ANDROID_SDK_ROOT/ndk/23.1.7779620
添加安卓构建目标支持 ​
到目前为止，Android 模拟器和虚拟设备还不支持 Vulkan 图形 API（仅支持 OpenGL ES），所以开发或调试 wgpu 程序在 Android 系统上的运行时，建议使用真机（各种云测平台的云真机也行）。
如果需要支持模拟器运行，还得加上 x86_64-linux-android 和 i686-linux-android 这两个构建目标的支持。需要注意的是，如果指定了 wgpu 项目使用 Vulkan 图形后端（Instance::new(wgpu::Backends::VULKAN)），则在模拟内运行时会崩溃：
sh
rustup target add aarch64-linux-android armv7-linux-androideabi
自定义窗口对象 ​
要实现一个 wgpu 里能使用的窗口对象，就必须实现 raw-window-handle 中 raw_window_handle() raw_display_handle() 这两个分别定义在 HasRawWindowHandle HasRawDisplayHandle trait 里的抽象接口。
实现 raw_display_handle() 最为简单, 只需要实例化一个空的 AndroidDisplayHandle 对象做为参数。查看 raw-window-handle 的源码就会发现，实现 raw_window_handle() 抽象接口需要用到 AndroidNdkWindowHandle 对象，此对象有一个叫 a_native_window 的字段，用来指向安卓 App 的 ANativeWindow 实例。 下面我们来一步步实现它。
先给项目添加必要的依赖：
toml
[target.'cfg(target_os = "android")'.dependencies]
 jni = "0.19"
diff --git a/assets/integration-and-debugging_bevy_index.md.LFcp1Mue.js b/assets/integration-and-debugging_bevy_index.md.Cbw3FKE-.js
similarity index 99%
rename from assets/integration-and-debugging_bevy_index.md.LFcp1Mue.js
rename to assets/integration-and-debugging_bevy_index.md.Cbw3FKE-.js
index 3c9e87390..b1cbb97d9 100644
--- a/assets/integration-and-debugging_bevy_index.md.LFcp1Mue.js
+++ b/assets/integration-and-debugging_bevy_index.md.Cbw3FKE-.js
@@ -1,4 +1,4 @@
-import{_ as i,c as a,a1 as n,o as p}from"./chunks/framework.DdYVMT1V.js";const l="/learn-wgpu-zh/assets/bevy_in_android.CCRFQ9-W.png",h="/learn-wgpu-zh/assets/bevy_in_ios.DGgIi9R9.png",F=JSON.parse('{"title":"在 iOS Android App 中集成 Bevy 游戏引擎","description":"","frontmatter":{},"headers":[],"relativePath":"integration-and-debugging/bevy/index.md","filePath":"integration-and-debugging/bevy/index.md","lastUpdated":1730902479000}'),k={name:"integration-and-debugging/bevy/index.md"};function e(t,s,r,d,E,g){return p(),a("div",null,s[0]||(s[0]=[n(`
在 iOS Android App 中集成 Bevy 游戏引擎 ​
认识 Bevy ​
Bevy 是一个开源、跨平台的 Rust 游戏引擎，设计目的是提供一个简单、高效且易于使用的游戏开发框架。它的特点包括：
  • 模块化设计：游戏引擎的各个组件皆为单独的模块，方便选择需要的组件并扩展。
  • 灵活的插件系统：支持自定义插件，可以创建并集成自己的插件。
  • 易于使用的 API：API 简单易懂，帮助快速开始游戏开发。
  • 强大的渲染系统：使用了 wgpu 作为渲染后端，以提供强大的图形渲染能力。
  • 跨平台：除了支持在 Windows、MacOS 和 Linux 桌面系统及 iOS、Android 移动设备上运行，还能在支持 WebGPU 的浏览器上运行。
Bevy 是一个适合新手的游戏引擎，其简单性和灵活性使得能够轻松地开始游戏开发，随着经验的增加，它也能满足更高级的定制需求。
需求场景 ​
如果需要给已有的 App 添加一个开屏小游戏，或者实现一些动态 UI 组件、图表...，又或者只是想充分利用手机上的 Motion Sensors 来实现令人惊艳的游戏体验，那么就不能使用 Bevy 默认的 WinitPlugin 了。因为 winit 会完全控制 App 的初始化过程和窗口，而我们需要的是在已有的 App 实例中创建 bevy::App， 并且我们可能还希望 bevy::App 能在任意大小的 iOS UIView 或 Android SurfaceView 中运行。
本章我们将逐步实现一个此类场景，并且利用手机的 Motion Sensor 来玩 breakout 小游戏。
Bevy 中的窗口插件 ​
Bevy 中有两个窗口插件：WindowPlugin 与 WinitPlugin。
WindowPlugin 是 Bevy 中构建游戏或应用程序的基础插件, 它提供了一套简单易用的接口来管理窗口的属性（标题、是否可见...）、行为（获取焦点，缩放约束，窗口显示层级...）、与事件（鼠标、键盘、触摸事件...）。WindowPlugin 并不负责实际的窗口创建，它需要与其他插件配合使用。
WinitPlugin 为 Bevy 提供实际的窗口及事件循环的创建与管理。顾名思义，它依赖了 winit 窗口管理库。
下面通过源码来看看 WinitPlugin 是如何完成工作的:
rust
// crates/bevy_winit/src/lib.rs
+import{_ as i,o as a,c as n,a1 as p}from"./chunks/framework.DyadSNS9.js";const l="/learn-wgpu-zh/assets/bevy_in_android.CCRFQ9-W.png",h="/learn-wgpu-zh/assets/bevy_in_ios.DGgIi9R9.png",F=JSON.parse('{"title":"在 iOS Android App 中集成 Bevy 游戏引擎","description":"","frontmatter":{},"headers":[],"relativePath":"integration-and-debugging/bevy/index.md","filePath":"integration-and-debugging/bevy/index.md","lastUpdated":1731720800000}'),k={name:"integration-and-debugging/bevy/index.md"};function e(t,s,r,d,E,g){return a(),n("div",null,s[0]||(s[0]=[p(`
在 iOS Android App 中集成 Bevy 游戏引擎 ​
认识 Bevy ​
Bevy 是一个开源、跨平台的 Rust 游戏引擎，设计目的是提供一个简单、高效且易于使用的游戏开发框架。它的特点包括：
  • 模块化设计：游戏引擎的各个组件皆为单独的模块，方便选择需要的组件并扩展。
  • 灵活的插件系统：支持自定义插件，可以创建并集成自己的插件。
  • 易于使用的 API：API 简单易懂，帮助快速开始游戏开发。
  • 强大的渲染系统：使用了 wgpu 作为渲染后端，以提供强大的图形渲染能力。
  • 跨平台：除了支持在 Windows、MacOS 和 Linux 桌面系统及 iOS、Android 移动设备上运行，还能在支持 WebGPU 的浏览器上运行。
Bevy 是一个适合新手的游戏引擎，其简单性和灵活性使得能够轻松地开始游戏开发，随着经验的增加，它也能满足更高级的定制需求。
需求场景 ​
如果需要给已有的 App 添加一个开屏小游戏，或者实现一些动态 UI 组件、图表...，又或者只是想充分利用手机上的 Motion Sensors 来实现令人惊艳的游戏体验，那么就不能使用 Bevy 默认的 WinitPlugin 了。因为 winit 会完全控制 App 的初始化过程和窗口，而我们需要的是在已有的 App 实例中创建 bevy::App， 并且我们可能还希望 bevy::App 能在任意大小的 iOS UIView 或 Android SurfaceView 中运行。
本章我们将逐步实现一个此类场景，并且利用手机的 Motion Sensor 来玩 breakout 小游戏。
Bevy 中的窗口插件 ​
Bevy 中有两个窗口插件：WindowPlugin 与 WinitPlugin。
WindowPlugin 是 Bevy 中构建游戏或应用程序的基础插件, 它提供了一套简单易用的接口来管理窗口的属性（标题、是否可见...）、行为（获取焦点，缩放约束，窗口显示层级...）、与事件（鼠标、键盘、触摸事件...）。WindowPlugin 并不负责实际的窗口创建，它需要与其他插件配合使用。
WinitPlugin 为 Bevy 提供实际的窗口及事件循环的创建与管理。顾名思义，它依赖了 winit 窗口管理库。
下面通过源码来看看 WinitPlugin 是如何完成工作的:
rust
// crates/bevy_winit/src/lib.rs
 
 #[derive(Default)]
 pub struct WinitPlugin;
diff --git a/assets/integration-and-debugging_bevy_index.md.LFcp1Mue.lean.js b/assets/integration-and-debugging_bevy_index.md.Cbw3FKE-.lean.js
similarity index 99%
rename from assets/integration-and-debugging_bevy_index.md.LFcp1Mue.lean.js
rename to assets/integration-and-debugging_bevy_index.md.Cbw3FKE-.lean.js
index 3c9e87390..b1cbb97d9 100644
--- a/assets/integration-and-debugging_bevy_index.md.LFcp1Mue.lean.js
+++ b/assets/integration-and-debugging_bevy_index.md.Cbw3FKE-.lean.js
@@ -1,4 +1,4 @@
-import{_ as i,c as a,a1 as n,o as p}from"./chunks/framework.DdYVMT1V.js";const l="/learn-wgpu-zh/assets/bevy_in_android.CCRFQ9-W.png",h="/learn-wgpu-zh/assets/bevy_in_ios.DGgIi9R9.png",F=JSON.parse('{"title":"在 iOS Android App 中集成 Bevy 游戏引擎","description":"","frontmatter":{},"headers":[],"relativePath":"integration-and-debugging/bevy/index.md","filePath":"integration-and-debugging/bevy/index.md","lastUpdated":1730902479000}'),k={name:"integration-and-debugging/bevy/index.md"};function e(t,s,r,d,E,g){return p(),a("div",null,s[0]||(s[0]=[n(`
在 iOS Android App 中集成 Bevy 游戏引擎 ​
认识 Bevy ​
Bevy 是一个开源、跨平台的 Rust 游戏引擎，设计目的是提供一个简单、高效且易于使用的游戏开发框架。它的特点包括：
  • 模块化设计：游戏引擎的各个组件皆为单独的模块，方便选择需要的组件并扩展。
  • 灵活的插件系统：支持自定义插件，可以创建并集成自己的插件。
  • 易于使用的 API：API 简单易懂，帮助快速开始游戏开发。
  • 强大的渲染系统：使用了 wgpu 作为渲染后端，以提供强大的图形渲染能力。
  • 跨平台：除了支持在 Windows、MacOS 和 Linux 桌面系统及 iOS、Android 移动设备上运行，还能在支持 WebGPU 的浏览器上运行。
Bevy 是一个适合新手的游戏引擎，其简单性和灵活性使得能够轻松地开始游戏开发，随着经验的增加，它也能满足更高级的定制需求。
需求场景 ​
如果需要给已有的 App 添加一个开屏小游戏，或者实现一些动态 UI 组件、图表...，又或者只是想充分利用手机上的 Motion Sensors 来实现令人惊艳的游戏体验，那么就不能使用 Bevy 默认的 WinitPlugin 了。因为 winit 会完全控制 App 的初始化过程和窗口，而我们需要的是在已有的 App 实例中创建 bevy::App， 并且我们可能还希望 bevy::App 能在任意大小的 iOS UIView 或 Android SurfaceView 中运行。
本章我们将逐步实现一个此类场景，并且利用手机的 Motion Sensor 来玩 breakout 小游戏。
Bevy 中的窗口插件 ​
Bevy 中有两个窗口插件：WindowPlugin 与 WinitPlugin。
WindowPlugin 是 Bevy 中构建游戏或应用程序的基础插件, 它提供了一套简单易用的接口来管理窗口的属性（标题、是否可见...）、行为（获取焦点，缩放约束，窗口显示层级...）、与事件（鼠标、键盘、触摸事件...）。WindowPlugin 并不负责实际的窗口创建，它需要与其他插件配合使用。
WinitPlugin 为 Bevy 提供实际的窗口及事件循环的创建与管理。顾名思义，它依赖了 winit 窗口管理库。
下面通过源码来看看 WinitPlugin 是如何完成工作的:
rust
// crates/bevy_winit/src/lib.rs
+import{_ as i,o as a,c as n,a1 as p}from"./chunks/framework.DyadSNS9.js";const l="/learn-wgpu-zh/assets/bevy_in_android.CCRFQ9-W.png",h="/learn-wgpu-zh/assets/bevy_in_ios.DGgIi9R9.png",F=JSON.parse('{"title":"在 iOS Android App 中集成 Bevy 游戏引擎","description":"","frontmatter":{},"headers":[],"relativePath":"integration-and-debugging/bevy/index.md","filePath":"integration-and-debugging/bevy/index.md","lastUpdated":1731720800000}'),k={name:"integration-and-debugging/bevy/index.md"};function e(t,s,r,d,E,g){return a(),n("div",null,s[0]||(s[0]=[p(`
在 iOS Android App 中集成 Bevy 游戏引擎 ​
认识 Bevy ​
Bevy 是一个开源、跨平台的 Rust 游戏引擎，设计目的是提供一个简单、高效且易于使用的游戏开发框架。它的特点包括：
  • 模块化设计：游戏引擎的各个组件皆为单独的模块，方便选择需要的组件并扩展。
  • 灵活的插件系统：支持自定义插件，可以创建并集成自己的插件。
  • 易于使用的 API：API 简单易懂，帮助快速开始游戏开发。
  • 强大的渲染系统：使用了 wgpu 作为渲染后端，以提供强大的图形渲染能力。
  • 跨平台：除了支持在 Windows、MacOS 和 Linux 桌面系统及 iOS、Android 移动设备上运行，还能在支持 WebGPU 的浏览器上运行。
Bevy 是一个适合新手的游戏引擎，其简单性和灵活性使得能够轻松地开始游戏开发，随着经验的增加，它也能满足更高级的定制需求。
需求场景 ​
如果需要给已有的 App 添加一个开屏小游戏，或者实现一些动态 UI 组件、图表...，又或者只是想充分利用手机上的 Motion Sensors 来实现令人惊艳的游戏体验，那么就不能使用 Bevy 默认的 WinitPlugin 了。因为 winit 会完全控制 App 的初始化过程和窗口，而我们需要的是在已有的 App 实例中创建 bevy::App， 并且我们可能还希望 bevy::App 能在任意大小的 iOS UIView 或 Android SurfaceView 中运行。
本章我们将逐步实现一个此类场景，并且利用手机的 Motion Sensor 来玩 breakout 小游戏。
Bevy 中的窗口插件 ​
Bevy 中有两个窗口插件：WindowPlugin 与 WinitPlugin。
WindowPlugin 是 Bevy 中构建游戏或应用程序的基础插件, 它提供了一套简单易用的接口来管理窗口的属性（标题、是否可见...）、行为（获取焦点，缩放约束，窗口显示层级...）、与事件（鼠标、键盘、触摸事件...）。WindowPlugin 并不负责实际的窗口创建，它需要与其他插件配合使用。
WinitPlugin 为 Bevy 提供实际的窗口及事件循环的创建与管理。顾名思义，它依赖了 winit 窗口管理库。
下面通过源码来看看 WinitPlugin 是如何完成工作的:
rust
// crates/bevy_winit/src/lib.rs
 
 #[derive(Default)]
 pub struct WinitPlugin;
diff --git a/assets/integration-and-debugging_index.md.DBgEh4wO.js b/assets/integration-and-debugging_index.md.Cp5TIMSu.js
similarity index 87%
rename from assets/integration-and-debugging_index.md.DBgEh4wO.js
rename to assets/integration-and-debugging_index.md.Cp5TIMSu.js
index a4c9457be..2a8002fb2 100644
--- a/assets/integration-and-debugging_index.md.DBgEh4wO.js
+++ b/assets/integration-and-debugging_index.md.Cp5TIMSu.js
@@ -1 +1 @@
-import{_ as n,c as r,a1 as a,G as o,B as i,o as p}from"./chunks/framework.DdYVMT1V.js";const s="/learn-wgpu-zh/res/tools.png",f=JSON.parse('{"title":"楔子","description":"","frontmatter":{},"headers":[],"relativePath":"integration-and-debugging/index.md","filePath":"integration-and-debugging/index.md","lastUpdated":1730902479000}'),d={name:"integration-and-debugging/index.md"};function g(u,e,c,w,l,h){const t=i("JoinWeiChatGroup");return p(),r("div",null,[e[0]||(e[0]=a('
楔子 ​
调试工具集
教程的开篇我们就已提到：wgpu 是基于 WebGPU 规范的跨平台图形 API。也就是说，wgpu 不光能运行在 Web 及桌面环境里，更是能运行在 iOS、Android 两大移动操作系统上。
wgpu 的运行并不依赖于任何窗口程序，所以也不提供窗口的创建及管理功能，只有在创建基于窗口的绘制表面（Surface）时，才可能需要一个实现了 raw-window-handle 抽象接口的实参（之所以说是可能需要，是因为在 iOS/macOS 上，使用 CAMetalLayer 也能创建绘制表面的实例）。 winit 是一个实现了 raw-window-handle 抽象接口的、跨平台的窗口创建及管理包（crate）。 在桌面端（macOS、Windows、Linux）及移动端（iOS、Android），winit 会接管整个 App （应用程序）的窗口管理（包括事件循环（Events loop））。
毫无疑问，对于游戏类 App, 使用 wgpu + winit 的组合是非常合适的。但是，大量非游戏类 App 也经常有使用图形 API 的需求（比如，图表、图片滤镜等），这些 App 需要用到大量的系统 UI 组件及交互，winit 这种接管整个 App 窗口的方式是不合适的。所以，将 wgpu 集成到现有的 iOS、Android App 且不使用 winit 将非常有用。
我们都知道，调试和分析是优化程序性能的必备技能。
虽然 wgpu 会在运行时验证 API 调用及参数设置来保证只有有效的工作负载才能提交给 GPU 执行，但是，这并不能保证渲染或计算着色（Compute Shading）的正确性。本章中我们还会学习到如何利用调试工具来分析 wgpu 程序的性能及查找难以发现的错误！
加入 wgpu 微信学习交流群 ​
',8)),o(t)])}const _=n(d,[["render",g]]);export{f as __pageData,_ as default};
+import{_ as n,C as r,o as a,c as o,a1 as i,G as p}from"./chunks/framework.DyadSNS9.js";const s="/learn-wgpu-zh/res/tools.png",f=JSON.parse('{"title":"楔子","description":"","frontmatter":{},"headers":[],"relativePath":"integration-and-debugging/index.md","filePath":"integration-and-debugging/index.md","lastUpdated":1731720800000}'),d={name:"integration-and-debugging/index.md"};function g(u,e,c,w,l,h){const t=r("JoinWeiChatGroup");return a(),o("div",null,[e[0]||(e[0]=i('
楔子 ​
调试工具集
教程的开篇我们就已提到：wgpu 是基于 WebGPU 规范的跨平台图形 API。也就是说，wgpu 不光能运行在 Web 及桌面环境里，更是能运行在 iOS、Android 两大移动操作系统上。
wgpu 的运行并不依赖于任何窗口程序，所以也不提供窗口的创建及管理功能，只有在创建基于窗口的绘制表面（Surface）时，才可能需要一个实现了 raw-window-handle 抽象接口的实参（之所以说是可能需要，是因为在 iOS/macOS 上，使用 CAMetalLayer 也能创建绘制表面的实例）。 winit 是一个实现了 raw-window-handle 抽象接口的、跨平台的窗口创建及管理包（crate）。 在桌面端（macOS、Windows、Linux）及移动端（iOS、Android），winit 会接管整个 App （应用程序）的窗口管理（包括事件循环（Events loop））。
毫无疑问，对于游戏类 App, 使用 wgpu + winit 的组合是非常合适的。但是，大量非游戏类 App 也经常有使用图形 API 的需求（比如，图表、图片滤镜等），这些 App 需要用到大量的系统 UI 组件及交互，winit 这种接管整个 App 窗口的方式是不合适的。所以，将 wgpu 集成到现有的 iOS、Android App 且不使用 winit 将非常有用。
我们都知道，调试和分析是优化程序性能的必备技能。
虽然 wgpu 会在运行时验证 API 调用及参数设置来保证只有有效的工作负载才能提交给 GPU 执行，但是，这并不能保证渲染或计算着色（Compute Shading）的正确性。本章中我们还会学习到如何利用调试工具来分析 wgpu 程序的性能及查找难以发现的错误！
加入 wgpu 微信学习交流群 ​
',8)),p(t)])}const _=n(d,[["render",g]]);export{f as __pageData,_ as default};
diff --git a/assets/integration-and-debugging_index.md.DBgEh4wO.lean.js b/assets/integration-and-debugging_index.md.Cp5TIMSu.lean.js
similarity index 87%
rename from assets/integration-and-debugging_index.md.DBgEh4wO.lean.js
rename to assets/integration-and-debugging_index.md.Cp5TIMSu.lean.js
index a4c9457be..2a8002fb2 100644
--- a/assets/integration-and-debugging_index.md.DBgEh4wO.lean.js
+++ b/assets/integration-and-debugging_index.md.Cp5TIMSu.lean.js
@@ -1 +1 @@
-import{_ as n,c as r,a1 as a,G as o,B as i,o as p}from"./chunks/framework.DdYVMT1V.js";const s="/learn-wgpu-zh/res/tools.png",f=JSON.parse('{"title":"楔子","description":"","frontmatter":{},"headers":[],"relativePath":"integration-and-debugging/index.md","filePath":"integration-and-debugging/index.md","lastUpdated":1730902479000}'),d={name:"integration-and-debugging/index.md"};function g(u,e,c,w,l,h){const t=i("JoinWeiChatGroup");return p(),r("div",null,[e[0]||(e[0]=a('
楔子 ​
调试工具集
教程的开篇我们就已提到：wgpu 是基于 WebGPU 规范的跨平台图形 API。也就是说，wgpu 不光能运行在 Web 及桌面环境里，更是能运行在 iOS、Android 两大移动操作系统上。
wgpu 的运行并不依赖于任何窗口程序，所以也不提供窗口的创建及管理功能，只有在创建基于窗口的绘制表面（Surface）时，才可能需要一个实现了 raw-window-handle 抽象接口的实参（之所以说是可能需要，是因为在 iOS/macOS 上，使用 CAMetalLayer 也能创建绘制表面的实例）。 winit 是一个实现了 raw-window-handle 抽象接口的、跨平台的窗口创建及管理包（crate）。 在桌面端（macOS、Windows、Linux）及移动端（iOS、Android），winit 会接管整个 App （应用程序）的窗口管理（包括事件循环（Events loop））。
毫无疑问，对于游戏类 App, 使用 wgpu + winit 的组合是非常合适的。但是，大量非游戏类 App 也经常有使用图形 API 的需求（比如，图表、图片滤镜等），这些 App 需要用到大量的系统 UI 组件及交互，winit 这种接管整个 App 窗口的方式是不合适的。所以，将 wgpu 集成到现有的 iOS、Android App 且不使用 winit 将非常有用。
我们都知道，调试和分析是优化程序性能的必备技能。
虽然 wgpu 会在运行时验证 API 调用及参数设置来保证只有有效的工作负载才能提交给 GPU 执行，但是，这并不能保证渲染或计算着色（Compute Shading）的正确性。本章中我们还会学习到如何利用调试工具来分析 wgpu 程序的性能及查找难以发现的错误！
加入 wgpu 微信学习交流群 ​
',8)),o(t)])}const _=n(d,[["render",g]]);export{f as __pageData,_ as default};
+import{_ as n,C as r,o as a,c as o,a1 as i,G as p}from"./chunks/framework.DyadSNS9.js";const s="/learn-wgpu-zh/res/tools.png",f=JSON.parse('{"title":"楔子","description":"","frontmatter":{},"headers":[],"relativePath":"integration-and-debugging/index.md","filePath":"integration-and-debugging/index.md","lastUpdated":1731720800000}'),d={name:"integration-and-debugging/index.md"};function g(u,e,c,w,l,h){const t=r("JoinWeiChatGroup");return a(),o("div",null,[e[0]||(e[0]=i('
楔子 ​
调试工具集
教程的开篇我们就已提到：wgpu 是基于 WebGPU 规范的跨平台图形 API。也就是说，wgpu 不光能运行在 Web 及桌面环境里，更是能运行在 iOS、Android 两大移动操作系统上。
wgpu 的运行并不依赖于任何窗口程序，所以也不提供窗口的创建及管理功能，只有在创建基于窗口的绘制表面（Surface）时，才可能需要一个实现了 raw-window-handle 抽象接口的实参（之所以说是可能需要，是因为在 iOS/macOS 上，使用 CAMetalLayer 也能创建绘制表面的实例）。 winit 是一个实现了 raw-window-handle 抽象接口的、跨平台的窗口创建及管理包（crate）。 在桌面端（macOS、Windows、Linux）及移动端（iOS、Android），winit 会接管整个 App （应用程序）的窗口管理（包括事件循环（Events loop））。
毫无疑问，对于游戏类 App, 使用 wgpu + winit 的组合是非常合适的。但是，大量非游戏类 App 也经常有使用图形 API 的需求（比如，图表、图片滤镜等），这些 App 需要用到大量的系统 UI 组件及交互，winit 这种接管整个 App 窗口的方式是不合适的。所以，将 wgpu 集成到现有的 iOS、Android App 且不使用 winit 将非常有用。
我们都知道，调试和分析是优化程序性能的必备技能。
虽然 wgpu 会在运行时验证 API 调用及参数设置来保证只有有效的工作负载才能提交给 GPU 执行，但是，这并不能保证渲染或计算着色（Compute Shading）的正确性。本章中我们还会学习到如何利用调试工具来分析 wgpu 程序的性能及查找难以发现的错误！
加入 wgpu 微信学习交流群 ​
',8)),p(t)])}const _=n(d,[["render",g]]);export{f as __pageData,_ as default};
diff --git a/assets/integration-and-debugging_ios_index.md.CdCnoMwo.js b/assets/integration-and-debugging_ios_index.md.uDYXVw51.js
similarity index 99%
rename from assets/integration-and-debugging_ios_index.md.CdCnoMwo.js
rename to assets/integration-and-debugging_ios_index.md.uDYXVw51.js
index 145cfa099..d494c987b 100644
--- a/assets/integration-and-debugging_ios_index.md.CdCnoMwo.js
+++ b/assets/integration-and-debugging_ios_index.md.uDYXVw51.js
@@ -1,4 +1,4 @@
-import{_ as i,c as a,a1 as n,o as l}from"./chunks/framework.DdYVMT1V.js";const p="/learn-wgpu-zh/assets/lib.C4KVABUI.png",e="/learn-wgpu-zh/assets/search.Be-o0PQT.png",h="/learn-wgpu-zh/assets/links.DKRFlC3q.png",k="/learn-wgpu-zh/assets/on_ios.C0AJlDAY.png",F=JSON.parse('{"title":"与 iOS App 集成","description":"","frontmatter":{},"headers":[],"relativePath":"integration-and-debugging/ios/index.md","filePath":"integration-and-debugging/ios/index.md","lastUpdated":1730902479000}'),t={name:"integration-and-debugging/ios/index.md"};function r(d,s,g,E,c,y){return l(),a("div",null,s[0]||(s[0]=[n(`
与 iOS App 集成 ​
与 iOS App 集成相比于 Android 要简单一些。
添加 iOS 构建目标支持 ​
sh
# 添加 iOS 构建目标支持
+import{_ as i,o as a,c as n,a1 as l}from"./chunks/framework.DyadSNS9.js";const p="/learn-wgpu-zh/assets/lib.C4KVABUI.png",e="/learn-wgpu-zh/assets/search.Be-o0PQT.png",h="/learn-wgpu-zh/assets/links.DKRFlC3q.png",k="/learn-wgpu-zh/assets/on_ios.C0AJlDAY.png",F=JSON.parse('{"title":"与 iOS App 集成","description":"","frontmatter":{},"headers":[],"relativePath":"integration-and-debugging/ios/index.md","filePath":"integration-and-debugging/ios/index.md","lastUpdated":1731720800000}'),t={name:"integration-and-debugging/ios/index.md"};function r(d,s,g,E,c,y){return a(),n("div",null,s[0]||(s[0]=[l(`
与 iOS App 集成 ​
与 iOS App 集成相比于 Android 要简单一些。
添加 iOS 构建目标支持 ​
sh
# 添加 iOS 构建目标支持
 rustup target add aarch64-apple-ios 
 
 # 添加 iOS 模拟器构建目标支持
diff --git a/assets/integration-and-debugging_ios_index.md.CdCnoMwo.lean.js b/assets/integration-and-debugging_ios_index.md.uDYXVw51.lean.js
similarity index 99%
rename from assets/integration-and-debugging_ios_index.md.CdCnoMwo.lean.js
rename to assets/integration-and-debugging_ios_index.md.uDYXVw51.lean.js
index 145cfa099..d494c987b 100644
--- a/assets/integration-and-debugging_ios_index.md.CdCnoMwo.lean.js
+++ b/assets/integration-and-debugging_ios_index.md.uDYXVw51.lean.js
@@ -1,4 +1,4 @@
-import{_ as i,c as a,a1 as n,o as l}from"./chunks/framework.DdYVMT1V.js";const p="/learn-wgpu-zh/assets/lib.C4KVABUI.png",e="/learn-wgpu-zh/assets/search.Be-o0PQT.png",h="/learn-wgpu-zh/assets/links.DKRFlC3q.png",k="/learn-wgpu-zh/assets/on_ios.C0AJlDAY.png",F=JSON.parse('{"title":"与 iOS App 集成","description":"","frontmatter":{},"headers":[],"relativePath":"integration-and-debugging/ios/index.md","filePath":"integration-and-debugging/ios/index.md","lastUpdated":1730902479000}'),t={name:"integration-and-debugging/ios/index.md"};function r(d,s,g,E,c,y){return l(),a("div",null,s[0]||(s[0]=[n(`
与 iOS App 集成 ​
与 iOS App 集成相比于 Android 要简单一些。
添加 iOS 构建目标支持 ​
sh
# 添加 iOS 构建目标支持
+import{_ as i,o as a,c as n,a1 as l}from"./chunks/framework.DyadSNS9.js";const p="/learn-wgpu-zh/assets/lib.C4KVABUI.png",e="/learn-wgpu-zh/assets/search.Be-o0PQT.png",h="/learn-wgpu-zh/assets/links.DKRFlC3q.png",k="/learn-wgpu-zh/assets/on_ios.C0AJlDAY.png",F=JSON.parse('{"title":"与 iOS App 集成","description":"","frontmatter":{},"headers":[],"relativePath":"integration-and-debugging/ios/index.md","filePath":"integration-and-debugging/ios/index.md","lastUpdated":1731720800000}'),t={name:"integration-and-debugging/ios/index.md"};function r(d,s,g,E,c,y){return a(),n("div",null,s[0]||(s[0]=[l(`
与 iOS App 集成 ​
与 iOS App 集成相比于 Android 要简单一些。
添加 iOS 构建目标支持 ​
sh
# 添加 iOS 构建目标支持
 rustup target add aarch64-apple-ios 
 
 # 添加 iOS 模拟器构建目标支持
diff --git a/assets/integration-and-debugging_snapdragon-profiler_index.md.aFfEe2ri.js b/assets/integration-and-debugging_snapdragon-profiler_index.md.BVGOZubA.js
similarity index 98%
rename from assets/integration-and-debugging_snapdragon-profiler_index.md.aFfEe2ri.js
rename to assets/integration-and-debugging_snapdragon-profiler_index.md.BVGOZubA.js
index 672ca6d1f..5fb34125b 100644
--- a/assets/integration-and-debugging_snapdragon-profiler_index.md.aFfEe2ri.js
+++ b/assets/integration-and-debugging_snapdragon-profiler_index.md.BVGOZubA.js
@@ -1,4 +1,4 @@
-import{_ as a,c as n,a1 as r,o as e}from"./chunks/framework.DdYVMT1V.js";const i="/learn-wgpu-zh/assets/connect.C0TAtll3.jpg",o="/learn-wgpu-zh/assets/realtime-left.CdlLCa0K.jpg",t="/learn-wgpu-zh/assets/realtime.CLyhQxd0.jpg",p="/learn-wgpu-zh/assets/trace.8lsKW7oK.png",l="/learn-wgpu-zh/assets/GMEM_load.oVBo5Sc9.jpg",d="/learn-wgpu-zh/assets/GMEM_store.CBuellf0.jpg",g="/learn-wgpu-zh/assets/frame.C0qmYsUH.jpg",c="/learn-wgpu-zh/assets/resource-left.Bra8lAST.jpg",h="/learn-wgpu-zh/assets/resource-right.rDQXVpUV.jpg",v=JSON.parse('{"title":"使用 Snapdragon Profiler 调试 wgpu 程序","description":"","frontmatter":{},"headers":[],"relativePath":"integration-and-debugging/snapdragon-profiler/index.md","filePath":"integration-and-debugging/snapdragon-profiler/index.md","lastUpdated":1730902479000}'),u={name:"integration-and-debugging/snapdragon-profiler/index.md"};function k(m,s,f,b,P,y){return e(),n("div",null,s[0]||(s[0]=[r('
使用 Snapdragon Profiler 调试 wgpu 程序 ​
在与 Android App 集成章节我们已经学习了 wgpu 与 Android App 的集成，现在来看看集成后的调试。
Snapdragon Profiler 工具介绍 ​
Snapdragon Profiler 是高通公司开发的一款可运行在 Windows、Mac 和 Linux 平台上的性能分析和帧调试工具。 它通过 USB 与安卓设备连接，允许开发人员分析 CPU、GPU、内存等数据，以便我们发现并修复性能瓶颈。
Snapdragon Profiler 工具的功能特点：
  • 实时监测 GPU 性能;
  • 查看 CPU 调度和 GPU 阶段数据，了解应用程序将时间花在哪里;
  • GPU 帧捕获;
  • 单步调试帧绘制;
  • 查看和编辑着色器并在设备上预览结果;
  • 查看和调试像素历史记录;
  • 捕获和查看每次绘制调用的 GPU 指标;
上面的官网链接提供了对应平台安装包的免费下载。如果是 Mac 和 Linux 平台, 在安装 Snapdragon Profiler 之前需要先安装 momo 框架（mono 是 Windows .Net 框架的跨平台开源实现）。 在运行 Snapdragon Profiler 之前需要确保系统上安装了 Android Studio 或者 AndroidSDK，并且已将 ADB 路径添加到系统环境变量中。
实时模式查看 GPU 统计数据 ​
USB 连接要调试的 Android 手机后打开 Snapdragon Profiler，点击窗口左边栏的 Start a Session, 此时右边出现的小弹窗里会列出当前与电脑连接的所有可调试设备，我们选中列表中的设备，勾选上弹窗左下角的 Auto connect 再点击右下角的 Connect，这样，下回再次调试同一台设备时就能自动连接到 Snapdragon Profiler 了：
连接后，有四种调试模式供我们选择：实时、追踪、帧捕获及 CPU 采样，现在选择实时（左图），在实时窗口的左边栏展示了实时指标列表，我们可以选择相应的指标项来收集 CPU、GPU、内存、网络、电源和散热的实时指标（右图）：
实时模式
实时预览
上面的右图中，我选择了 GPU General、GPU Stalls 两个指标类别，窗口右边展示了每个细分指标的实时数据图表，要添加新的指标图表，只需双击类别（以添加类别中的所有指标）或单个指标，或者将类别或指标拖放到右侧的“图表”窗格中。
追踪模式检查片上内存装载 ​
片上内存（on-chip memory）装载是影响移动应用中 GPU 性能的常见问题之一。在本节中，我们来学习如何使用 Snapdragon Profiler 查找和定位引起片上内存装载的应用程序代码。
Snapdragon Profiler 里将片上内存称之为图形内存（GMEM，全称 Graphic Memory），但是这里的图形内存跟显存容易混淆，它俩并不是一回事。故，下边统一使用片上内存来指代 GMEM。
什么是片上内存装载？ ​
移动 GPU 的 Tiling 架构管线包括一个渲染通道。在渲染过程中，每个 Tile 都是先被渲染到片上内存中。按照驱动程序的默认行为，先前的帧缓冲区数据被从设备内存加载到每个 Tile 的片上内存中，即发生片上内存装载。
所谓 Tiling，本质上就是管理 GPU 内存的技术。Tiling 利用片上内存（on-chip memory）去降低设备内存的访问次数，从而降低 GPU 内存带宽的消耗及访问延迟。 正确理解并利用 Tiling 架构的内存管理特性，可以有效的提高 GPU 程序的性能。
为什么要尽可能地减少或避免片上内存装载？ ​
因为每一次片上内存的加载都会减慢 GPU 的处理速度。
 如果在 begin_render_pass 时通过设置 Clear() 来清理片上内存，驱动程序就可以避免在片上内存中装载帧缓冲区数据。虽然这涉及到一个额外的图形指令调用及其相关的开销，但它比为每个正在渲染的 Tile 将帧缓冲区数据加载回片上内存的开销要低得多。
导致片上内存装载的最主要原因是: 对驱动程序的不恰当提示。 应用程序代码使驱动程序认为需要帧缓冲区的先前内容。
检测片上内存装载 ​
在 Snapdragon Profiler 的追踪模式下，我们可以让渲染阶段（Rendering Stages） 指标突出显示其自身通道中的片上内存装载（GMEM Loads）。
GPU 应用必须在项目的 AndroidManifest.xml 文件中包含 INTERNET 权限以启用图形 API 及 GPU 指标的追踪：
toml
<uses-permission android:name="android.permission.INTERNET" />
另外，Snapdragon Profiler 的追踪模式不允许追踪捕获超过 10 秒。也就是说，从点击 Start Capture 开始到点击 Stop Capture 结束，时长不得超过 10 秒。
启用追踪模式的操作步骤：
  • 连接好 Android 设备后，从 Start Page 界面单击左边栏的 System Trace Analysis，此时，就创建了一个新的 Trace 选项卡。
  • 选择刚创建的 Trace 选项卡，进入一个类似于实时模式的视图，然后在 Data Sources 边栏上端的应用列表中选中要追踪的应用（如果列表中找不到，就通过列表右上角的 Launch 按钮去启动要追踪的应用）。
  • 在 Data Sources 边栏下端，选中 Process -> Vulkan -> Rendering Stages 项。
点击 Start Capture 开始追踪，在 10 秒内的任意段点击 Stop Capture，在等待 N 秒（取决于电脑性能）后就会展示出如下图表：
上图渲染阶段的设置对话框显示，这些片上内存装载消耗了总渲染时间的 23% 左右。
我们来看看源码帧渲染中的这条 begin_render_pass() 命令，颜色附件的片上操作使用了 Load：
rust
ops: wgpu::Operations {
+import{_ as a,o as n,c as r,a1 as e}from"./chunks/framework.DyadSNS9.js";const i="/learn-wgpu-zh/assets/connect.C0TAtll3.jpg",o="/learn-wgpu-zh/assets/realtime-left.CdlLCa0K.jpg",t="/learn-wgpu-zh/assets/realtime.CLyhQxd0.jpg",p="/learn-wgpu-zh/assets/trace.8lsKW7oK.png",l="/learn-wgpu-zh/assets/GMEM_load.oVBo5Sc9.jpg",d="/learn-wgpu-zh/assets/GMEM_store.CBuellf0.jpg",g="/learn-wgpu-zh/assets/frame.C0qmYsUH.jpg",c="/learn-wgpu-zh/assets/resource-left.Bra8lAST.jpg",h="/learn-wgpu-zh/assets/resource-right.rDQXVpUV.jpg",v=JSON.parse('{"title":"使用 Snapdragon Profiler 调试 wgpu 程序","description":"","frontmatter":{},"headers":[],"relativePath":"integration-and-debugging/snapdragon-profiler/index.md","filePath":"integration-and-debugging/snapdragon-profiler/index.md","lastUpdated":1731720800000}'),u={name:"integration-and-debugging/snapdragon-profiler/index.md"};function k(m,s,f,b,P,y){return n(),r("div",null,s[0]||(s[0]=[e('
使用 Snapdragon Profiler 调试 wgpu 程序 ​
在与 Android App 集成章节我们已经学习了 wgpu 与 Android App 的集成，现在来看看集成后的调试。
Snapdragon Profiler 工具介绍 ​
Snapdragon Profiler 是高通公司开发的一款可运行在 Windows、Mac 和 Linux 平台上的性能分析和帧调试工具。 它通过 USB 与安卓设备连接，允许开发人员分析 CPU、GPU、内存等数据，以便我们发现并修复性能瓶颈。
Snapdragon Profiler 工具的功能特点：
  • 实时监测 GPU 性能;
  • 查看 CPU 调度和 GPU 阶段数据，了解应用程序将时间花在哪里;
  • GPU 帧捕获;
  • 单步调试帧绘制;
  • 查看和编辑着色器并在设备上预览结果;
  • 查看和调试像素历史记录;
  • 捕获和查看每次绘制调用的 GPU 指标;
上面的官网链接提供了对应平台安装包的免费下载。如果是 Mac 和 Linux 平台, 在安装 Snapdragon Profiler 之前需要先安装 momo 框架（mono 是 Windows .Net 框架的跨平台开源实现）。 在运行 Snapdragon Profiler 之前需要确保系统上安装了 Android Studio 或者 AndroidSDK，并且已将 ADB 路径添加到系统环境变量中。
实时模式查看 GPU 统计数据 ​
USB 连接要调试的 Android 手机后打开 Snapdragon Profiler，点击窗口左边栏的 Start a Session, 此时右边出现的小弹窗里会列出当前与电脑连接的所有可调试设备，我们选中列表中的设备，勾选上弹窗左下角的 Auto connect 再点击右下角的 Connect，这样，下回再次调试同一台设备时就能自动连接到 Snapdragon Profiler 了：
连接后，有四种调试模式供我们选择：实时、追踪、帧捕获及 CPU 采样，现在选择实时（左图），在实时窗口的左边栏展示了实时指标列表，我们可以选择相应的指标项来收集 CPU、GPU、内存、网络、电源和散热的实时指标（右图）：
实时模式
实时预览
上面的右图中，我选择了 GPU General、GPU Stalls 两个指标类别，窗口右边展示了每个细分指标的实时数据图表，要添加新的指标图表，只需双击类别（以添加类别中的所有指标）或单个指标，或者将类别或指标拖放到右侧的“图表”窗格中。
追踪模式检查片上内存装载 ​
片上内存（on-chip memory）装载是影响移动应用中 GPU 性能的常见问题之一。在本节中，我们来学习如何使用 Snapdragon Profiler 查找和定位引起片上内存装载的应用程序代码。
Snapdragon Profiler 里将片上内存称之为图形内存（GMEM，全称 Graphic Memory），但是这里的图形内存跟显存容易混淆，它俩并不是一回事。故，下边统一使用片上内存来指代 GMEM。
什么是片上内存装载？ ​
移动 GPU 的 Tiling 架构管线包括一个渲染通道。在渲染过程中，每个 Tile 都是先被渲染到片上内存中。按照驱动程序的默认行为，先前的帧缓冲区数据被从设备内存加载到每个 Tile 的片上内存中，即发生片上内存装载。
所谓 Tiling，本质上就是管理 GPU 内存的技术。Tiling 利用片上内存（on-chip memory）去降低设备内存的访问次数，从而降低 GPU 内存带宽的消耗及访问延迟。 正确理解并利用 Tiling 架构的内存管理特性，可以有效的提高 GPU 程序的性能。
为什么要尽可能地减少或避免片上内存装载？ ​
因为每一次片上内存的加载都会减慢 GPU 的处理速度。
 如果在 begin_render_pass 时通过设置 Clear() 来清理片上内存，驱动程序就可以避免在片上内存中装载帧缓冲区数据。虽然这涉及到一个额外的图形指令调用及其相关的开销，但它比为每个正在渲染的 Tile 将帧缓冲区数据加载回片上内存的开销要低得多。
导致片上内存装载的最主要原因是: 对驱动程序的不恰当提示。 应用程序代码使驱动程序认为需要帧缓冲区的先前内容。
检测片上内存装载 ​
在 Snapdragon Profiler 的追踪模式下，我们可以让渲染阶段（Rendering Stages） 指标突出显示其自身通道中的片上内存装载（GMEM Loads）。
GPU 应用必须在项目的 AndroidManifest.xml 文件中包含 INTERNET 权限以启用图形 API 及 GPU 指标的追踪：
toml
<uses-permission android:name="android.permission.INTERNET" />
另外，Snapdragon Profiler 的追踪模式不允许追踪捕获超过 10 秒。也就是说，从点击 Start Capture 开始到点击 Stop Capture 结束，时长不得超过 10 秒。
启用追踪模式的操作步骤：
  • 连接好 Android 设备后，从 Start Page 界面单击左边栏的 System Trace Analysis，此时，就创建了一个新的 Trace 选项卡。
  • 选择刚创建的 Trace 选项卡，进入一个类似于实时模式的视图，然后在 Data Sources 边栏上端的应用列表中选中要追踪的应用（如果列表中找不到，就通过列表右上角的 Launch 按钮去启动要追踪的应用）。
  • 在 Data Sources 边栏下端，选中 Process -> Vulkan -> Rendering Stages 项。
点击 Start Capture 开始追踪，在 10 秒内的任意段点击 Stop Capture，在等待 N 秒（取决于电脑性能）后就会展示出如下图表：
上图渲染阶段的设置对话框显示，这些片上内存装载消耗了总渲染时间的 23% 左右。
我们来看看源码帧渲染中的这条 begin_render_pass() 命令，颜色附件的片上操作使用了 Load：
rust
ops: wgpu::Operations {
     // load: wgpu::LoadOp::Clear(wgpu::Color::BLACK),
     load: wgpu::LoadOp::Load,
     store: wgpu::StoreOp::Store
diff --git a/assets/integration-and-debugging_snapdragon-profiler_index.md.aFfEe2ri.lean.js b/assets/integration-and-debugging_snapdragon-profiler_index.md.BVGOZubA.lean.js
similarity index 98%
rename from assets/integration-and-debugging_snapdragon-profiler_index.md.aFfEe2ri.lean.js
rename to assets/integration-and-debugging_snapdragon-profiler_index.md.BVGOZubA.lean.js
index 672ca6d1f..5fb34125b 100644
--- a/assets/integration-and-debugging_snapdragon-profiler_index.md.aFfEe2ri.lean.js
+++ b/assets/integration-and-debugging_snapdragon-profiler_index.md.BVGOZubA.lean.js
@@ -1,4 +1,4 @@
-import{_ as a,c as n,a1 as r,o as e}from"./chunks/framework.DdYVMT1V.js";const i="/learn-wgpu-zh/assets/connect.C0TAtll3.jpg",o="/learn-wgpu-zh/assets/realtime-left.CdlLCa0K.jpg",t="/learn-wgpu-zh/assets/realtime.CLyhQxd0.jpg",p="/learn-wgpu-zh/assets/trace.8lsKW7oK.png",l="/learn-wgpu-zh/assets/GMEM_load.oVBo5Sc9.jpg",d="/learn-wgpu-zh/assets/GMEM_store.CBuellf0.jpg",g="/learn-wgpu-zh/assets/frame.C0qmYsUH.jpg",c="/learn-wgpu-zh/assets/resource-left.Bra8lAST.jpg",h="/learn-wgpu-zh/assets/resource-right.rDQXVpUV.jpg",v=JSON.parse('{"title":"使用 Snapdragon Profiler 调试 wgpu 程序","description":"","frontmatter":{},"headers":[],"relativePath":"integration-and-debugging/snapdragon-profiler/index.md","filePath":"integration-and-debugging/snapdragon-profiler/index.md","lastUpdated":1730902479000}'),u={name:"integration-and-debugging/snapdragon-profiler/index.md"};function k(m,s,f,b,P,y){return e(),n("div",null,s[0]||(s[0]=[r('
使用 Snapdragon Profiler 调试 wgpu 程序 ​
在与 Android App 集成章节我们已经学习了 wgpu 与 Android App 的集成，现在来看看集成后的调试。
Snapdragon Profiler 工具介绍 ​
Snapdragon Profiler 是高通公司开发的一款可运行在 Windows、Mac 和 Linux 平台上的性能分析和帧调试工具。 它通过 USB 与安卓设备连接，允许开发人员分析 CPU、GPU、内存等数据，以便我们发现并修复性能瓶颈。
Snapdragon Profiler 工具的功能特点：
  • 实时监测 GPU 性能;
  • 查看 CPU 调度和 GPU 阶段数据，了解应用程序将时间花在哪里;
  • GPU 帧捕获;
  • 单步调试帧绘制;
  • 查看和编辑着色器并在设备上预览结果;
  • 查看和调试像素历史记录;
  • 捕获和查看每次绘制调用的 GPU 指标;
上面的官网链接提供了对应平台安装包的免费下载。如果是 Mac 和 Linux 平台, 在安装 Snapdragon Profiler 之前需要先安装 momo 框架（mono 是 Windows .Net 框架的跨平台开源实现）。 在运行 Snapdragon Profiler 之前需要确保系统上安装了 Android Studio 或者 AndroidSDK，并且已将 ADB 路径添加到系统环境变量中。
实时模式查看 GPU 统计数据 ​
USB 连接要调试的 Android 手机后打开 Snapdragon Profiler，点击窗口左边栏的 Start a Session, 此时右边出现的小弹窗里会列出当前与电脑连接的所有可调试设备，我们选中列表中的设备，勾选上弹窗左下角的 Auto connect 再点击右下角的 Connect，这样，下回再次调试同一台设备时就能自动连接到 Snapdragon Profiler 了：
连接后，有四种调试模式供我们选择：实时、追踪、帧捕获及 CPU 采样，现在选择实时（左图），在实时窗口的左边栏展示了实时指标列表，我们可以选择相应的指标项来收集 CPU、GPU、内存、网络、电源和散热的实时指标（右图）：
实时模式
实时预览
上面的右图中，我选择了 GPU General、GPU Stalls 两个指标类别，窗口右边展示了每个细分指标的实时数据图表，要添加新的指标图表，只需双击类别（以添加类别中的所有指标）或单个指标，或者将类别或指标拖放到右侧的“图表”窗格中。
追踪模式检查片上内存装载 ​
片上内存（on-chip memory）装载是影响移动应用中 GPU 性能的常见问题之一。在本节中，我们来学习如何使用 Snapdragon Profiler 查找和定位引起片上内存装载的应用程序代码。
Snapdragon Profiler 里将片上内存称之为图形内存（GMEM，全称 Graphic Memory），但是这里的图形内存跟显存容易混淆，它俩并不是一回事。故，下边统一使用片上内存来指代 GMEM。
什么是片上内存装载？ ​
移动 GPU 的 Tiling 架构管线包括一个渲染通道。在渲染过程中，每个 Tile 都是先被渲染到片上内存中。按照驱动程序的默认行为，先前的帧缓冲区数据被从设备内存加载到每个 Tile 的片上内存中，即发生片上内存装载。
所谓 Tiling，本质上就是管理 GPU 内存的技术。Tiling 利用片上内存（on-chip memory）去降低设备内存的访问次数，从而降低 GPU 内存带宽的消耗及访问延迟。 正确理解并利用 Tiling 架构的内存管理特性，可以有效的提高 GPU 程序的性能。
为什么要尽可能地减少或避免片上内存装载？ ​
因为每一次片上内存的加载都会减慢 GPU 的处理速度。
 如果在 begin_render_pass 时通过设置 Clear() 来清理片上内存，驱动程序就可以避免在片上内存中装载帧缓冲区数据。虽然这涉及到一个额外的图形指令调用及其相关的开销，但它比为每个正在渲染的 Tile 将帧缓冲区数据加载回片上内存的开销要低得多。
导致片上内存装载的最主要原因是: 对驱动程序的不恰当提示。 应用程序代码使驱动程序认为需要帧缓冲区的先前内容。
检测片上内存装载 ​
在 Snapdragon Profiler 的追踪模式下，我们可以让渲染阶段（Rendering Stages） 指标突出显示其自身通道中的片上内存装载（GMEM Loads）。
GPU 应用必须在项目的 AndroidManifest.xml 文件中包含 INTERNET 权限以启用图形 API 及 GPU 指标的追踪：
toml
<uses-permission android:name="android.permission.INTERNET" />
另外，Snapdragon Profiler 的追踪模式不允许追踪捕获超过 10 秒。也就是说，从点击 Start Capture 开始到点击 Stop Capture 结束，时长不得超过 10 秒。
启用追踪模式的操作步骤：
  • 连接好 Android 设备后，从 Start Page 界面单击左边栏的 System Trace Analysis，此时，就创建了一个新的 Trace 选项卡。
  • 选择刚创建的 Trace 选项卡，进入一个类似于实时模式的视图，然后在 Data Sources 边栏上端的应用列表中选中要追踪的应用（如果列表中找不到，就通过列表右上角的 Launch 按钮去启动要追踪的应用）。
  • 在 Data Sources 边栏下端，选中 Process -> Vulkan -> Rendering Stages 项。
点击 Start Capture 开始追踪，在 10 秒内的任意段点击 Stop Capture，在等待 N 秒（取决于电脑性能）后就会展示出如下图表：
上图渲染阶段的设置对话框显示，这些片上内存装载消耗了总渲染时间的 23% 左右。
我们来看看源码帧渲染中的这条 begin_render_pass() 命令，颜色附件的片上操作使用了 Load：
rust
ops: wgpu::Operations {
+import{_ as a,o as n,c as r,a1 as e}from"./chunks/framework.DyadSNS9.js";const i="/learn-wgpu-zh/assets/connect.C0TAtll3.jpg",o="/learn-wgpu-zh/assets/realtime-left.CdlLCa0K.jpg",t="/learn-wgpu-zh/assets/realtime.CLyhQxd0.jpg",p="/learn-wgpu-zh/assets/trace.8lsKW7oK.png",l="/learn-wgpu-zh/assets/GMEM_load.oVBo5Sc9.jpg",d="/learn-wgpu-zh/assets/GMEM_store.CBuellf0.jpg",g="/learn-wgpu-zh/assets/frame.C0qmYsUH.jpg",c="/learn-wgpu-zh/assets/resource-left.Bra8lAST.jpg",h="/learn-wgpu-zh/assets/resource-right.rDQXVpUV.jpg",v=JSON.parse('{"title":"使用 Snapdragon Profiler 调试 wgpu 程序","description":"","frontmatter":{},"headers":[],"relativePath":"integration-and-debugging/snapdragon-profiler/index.md","filePath":"integration-and-debugging/snapdragon-profiler/index.md","lastUpdated":1731720800000}'),u={name:"integration-and-debugging/snapdragon-profiler/index.md"};function k(m,s,f,b,P,y){return n(),r("div",null,s[0]||(s[0]=[e('
使用 Snapdragon Profiler 调试 wgpu 程序 ​
在与 Android App 集成章节我们已经学习了 wgpu 与 Android App 的集成，现在来看看集成后的调试。
Snapdragon Profiler 工具介绍 ​
Snapdragon Profiler 是高通公司开发的一款可运行在 Windows、Mac 和 Linux 平台上的性能分析和帧调试工具。 它通过 USB 与安卓设备连接，允许开发人员分析 CPU、GPU、内存等数据，以便我们发现并修复性能瓶颈。
Snapdragon Profiler 工具的功能特点：
  • 实时监测 GPU 性能;
  • 查看 CPU 调度和 GPU 阶段数据，了解应用程序将时间花在哪里;
  • GPU 帧捕获;
  • 单步调试帧绘制;
  • 查看和编辑着色器并在设备上预览结果;
  • 查看和调试像素历史记录;
  • 捕获和查看每次绘制调用的 GPU 指标;
上面的官网链接提供了对应平台安装包的免费下载。如果是 Mac 和 Linux 平台, 在安装 Snapdragon Profiler 之前需要先安装 momo 框架（mono 是 Windows .Net 框架的跨平台开源实现）。 在运行 Snapdragon Profiler 之前需要确保系统上安装了 Android Studio 或者 AndroidSDK，并且已将 ADB 路径添加到系统环境变量中。
实时模式查看 GPU 统计数据 ​
USB 连接要调试的 Android 手机后打开 Snapdragon Profiler，点击窗口左边栏的 Start a Session, 此时右边出现的小弹窗里会列出当前与电脑连接的所有可调试设备，我们选中列表中的设备，勾选上弹窗左下角的 Auto connect 再点击右下角的 Connect，这样，下回再次调试同一台设备时就能自动连接到 Snapdragon Profiler 了：
连接后，有四种调试模式供我们选择：实时、追踪、帧捕获及 CPU 采样，现在选择实时（左图），在实时窗口的左边栏展示了实时指标列表，我们可以选择相应的指标项来收集 CPU、GPU、内存、网络、电源和散热的实时指标（右图）：
实时模式
实时预览
上面的右图中，我选择了 GPU General、GPU Stalls 两个指标类别，窗口右边展示了每个细分指标的实时数据图表，要添加新的指标图表，只需双击类别（以添加类别中的所有指标）或单个指标，或者将类别或指标拖放到右侧的“图表”窗格中。
追踪模式检查片上内存装载 ​
片上内存（on-chip memory）装载是影响移动应用中 GPU 性能的常见问题之一。在本节中，我们来学习如何使用 Snapdragon Profiler 查找和定位引起片上内存装载的应用程序代码。
Snapdragon Profiler 里将片上内存称之为图形内存（GMEM，全称 Graphic Memory），但是这里的图形内存跟显存容易混淆，它俩并不是一回事。故，下边统一使用片上内存来指代 GMEM。
什么是片上内存装载？ ​
移动 GPU 的 Tiling 架构管线包括一个渲染通道。在渲染过程中，每个 Tile 都是先被渲染到片上内存中。按照驱动程序的默认行为，先前的帧缓冲区数据被从设备内存加载到每个 Tile 的片上内存中，即发生片上内存装载。
所谓 Tiling，本质上就是管理 GPU 内存的技术。Tiling 利用片上内存（on-chip memory）去降低设备内存的访问次数，从而降低 GPU 内存带宽的消耗及访问延迟。 正确理解并利用 Tiling 架构的内存管理特性，可以有效的提高 GPU 程序的性能。
为什么要尽可能地减少或避免片上内存装载？ ​
因为每一次片上内存的加载都会减慢 GPU 的处理速度。
 如果在 begin_render_pass 时通过设置 Clear() 来清理片上内存，驱动程序就可以避免在片上内存中装载帧缓冲区数据。虽然这涉及到一个额外的图形指令调用及其相关的开销，但它比为每个正在渲染的 Tile 将帧缓冲区数据加载回片上内存的开销要低得多。
导致片上内存装载的最主要原因是: 对驱动程序的不恰当提示。 应用程序代码使驱动程序认为需要帧缓冲区的先前内容。
检测片上内存装载 ​
在 Snapdragon Profiler 的追踪模式下，我们可以让渲染阶段（Rendering Stages） 指标突出显示其自身通道中的片上内存装载（GMEM Loads）。
GPU 应用必须在项目的 AndroidManifest.xml 文件中包含 INTERNET 权限以启用图形 API 及 GPU 指标的追踪：
toml
<uses-permission android:name="android.permission.INTERNET" />
另外，Snapdragon Profiler 的追踪模式不允许追踪捕获超过 10 秒。也就是说，从点击 Start Capture 开始到点击 Stop Capture 结束，时长不得超过 10 秒。
启用追踪模式的操作步骤：
  • 连接好 Android 设备后，从 Start Page 界面单击左边栏的 System Trace Analysis，此时，就创建了一个新的 Trace 选项卡。
  • 选择刚创建的 Trace 选项卡，进入一个类似于实时模式的视图，然后在 Data Sources 边栏上端的应用列表中选中要追踪的应用（如果列表中找不到，就通过列表右上角的 Launch 按钮去启动要追踪的应用）。
  • 在 Data Sources 边栏下端，选中 Process -> Vulkan -> Rendering Stages 项。
点击 Start Capture 开始追踪，在 10 秒内的任意段点击 Stop Capture，在等待 N 秒（取决于电脑性能）后就会展示出如下图表：
上图渲染阶段的设置对话框显示，这些片上内存装载消耗了总渲染时间的 23% 左右。
我们来看看源码帧渲染中的这条 begin_render_pass() 命令，颜色附件的片上操作使用了 Load：
rust
ops: wgpu::Operations {
     // load: wgpu::LoadOp::Clear(wgpu::Color::BLACK),
     load: wgpu::LoadOp::Load,
     store: wgpu::StoreOp::Store
diff --git a/assets/integration-and-debugging_xcode_index.md.CchvP_wB.js b/assets/integration-and-debugging_xcode_index.md.BxTvmEOJ.js
similarity index 97%
rename from assets/integration-and-debugging_xcode_index.md.CchvP_wB.js
rename to assets/integration-and-debugging_xcode_index.md.BxTvmEOJ.js
index 352161e8f..550bdc342 100644
--- a/assets/integration-and-debugging_xcode_index.md.CchvP_wB.js
+++ b/assets/integration-and-debugging_xcode_index.md.BxTvmEOJ.js
@@ -1,4 +1,4 @@
-import{_ as a,c as e,a1 as i,o as t}from"./chunks/framework.DdYVMT1V.js";const n="/learn-wgpu-zh/assets/create.8jrvG0KT.png",r="/learn-wgpu-zh/assets/template.BlpAS8O6.png",l="/learn-wgpu-zh/assets/name.Ts5Wzm2h.png",p="/learn-wgpu-zh/assets/project.4mJ4k618.png",o="/learn-wgpu-zh/assets/option.C2CxaI0C.png",d="/learn-wgpu-zh/assets/info.DMiHBHeW.png",h="/learn-wgpu-zh/assets/triangle.CzA8fH6i.png",c="/learn-wgpu-zh/assets/run.Bqd7ED1d.png",g="/learn-wgpu-zh/assets/result.3LSmTeIA.png",k="/learn-wgpu-zh/assets/fps.oe0BmjqE.png",u="/learn-wgpu-zh/assets/capture.BQ-IXEGO.png",m="/learn-wgpu-zh/assets/debug_navigator.f9gkzIxB.png",E="/learn-wgpu-zh/assets/buffer_data.DpIVszbr.png",A=JSON.parse('{"title":"使用 Xcode 调试 wgpu 程序","description":"","frontmatter":{},"headers":[],"relativePath":"integration-and-debugging/xcode/index.md","filePath":"integration-and-debugging/xcode/index.md","lastUpdated":1730902479000}'),b={name:"integration-and-debugging/xcode/index.md"};function y(P,s,f,v,F,_){return t(),e("div",null,s[0]||(s[0]=[i('
使用 Xcode 调试 wgpu 程序 ​
Xcode 与 Metal ​
Xcode 是苹果官方提供的运行在 macOS 系统上的 IDE，它提供了一整套工具来方便为苹果设备（比如，iPad、iPhone、Mac 等等）创建、测试、优化 App 并最终发布到 App Store。Xcode 是免费的，如果你使用的是 macOS 系统，就可以从 App Store 上下载安装。
Metal 是 wgpu 在苹果平台上使用的图形后端，Metal 框架（Framework）通过提供低开销的底层 GPU 编程 API、图形和计算管线之间的紧密集成以及一套强大的 GPU 分析和调试工具，为苹果平台上的图形硬件加速提供动力。
2014 年，苹果在全球开发者大会 (WWDC) 上宣布为 iOS 推出全新的 Metal 框架， 一年后的 WWDC 2015，苹果宣布了 macOS 上也将支持 Metal，随后是 watchOS 和 tvOS。 随着 Metal API 的不断发展，在 WWDC 2017 上推出了新版本，Metal 2。它增加了对虚拟现实 (VR)、增强现实 (AR) 和机器学习 (ML) 的支持，以及其它许多新功能.
今年（WWDC 2022）推出的 Metal 3，引入了更为强大的功能，能帮助游戏和专业应用程序充分挖掘苹果芯片的潜力：借助高性能放大和抗锯齿（anti-aliasing）功能，能在更短的时间内渲染高分辨率的图形; 使用异步 I/O 将资源数据直接从存储优化流式传输到 Metal 纹理和缓冲区，能更快地加载资源; 新的光线追踪（Metal Ray Tracing）构建加速结构所花费的 GPU 时间更少，可以通过将剔除（Culling）工作转移到 GPU 以减少 CPU 开销，并且通过直接访问原始数据来优化光线求交和着色; 还有机器学习加速及新的网格着色器（Mesh Shader）等等。
创建调试项目 ​
首先，我们打开 Xcode，使用菜单或启动对话框中的 Create a new Xcode project 来创建一个新项目（左图），然后单击 Other 选项卡, 选中外部构建系统（External Build System）作为项目模板（右图）:
创建一个新的 Xcode 项目
选择项目模板
然后，在构建工具（Build Tool）字段中填入要使用的构建工具，Xcode 在运行项目时，将会调用此处设置的构建工具。 如果希望 Xcode 运行 cargo 构建命令，就可以填写 cargo 在你的 macOS 上的安装路径（默认的路径是 ${HOME}/.cargo/bin/cargo），也可以留空来表示跳过构建步骤，以避免 Xcode 为我们构建项目。
其余的字段实际上对我们来说并不重要，因此可以随意填，但产品名称（Product Name）字段还是尽量填一个有意义的名称吧：
构建工具设置
编辑 Scheme ​
接着编辑项目的方案（Scheme）来启用 Metal 的 GPU 帧捕获（Frame Capture）及 接口验证（API Validation）工具集。 通常，如果 Xcode 项目里的代码调用了 Metal 框架或任何其他使用了 Metal API 的框架，Xcode 会自动启用 GPU 帧捕获 和 Metal 接口验证，但我们的这个项目使用的是外部构建系统（External Build System），只能手动设置。
手动设置其实非常简单：
1，单击项目名称，然后单击 Edit Scheme（左图）（或者，从顶部菜单栏上选择 Product -> Scheme -> Edit Scheme）;
2，在弹出的方案功能面板中选中左边栏的 Run，将右边的功能配置表切换至 Options 选项卡，设置 GPU Frame Capture 栏为 Metal 来启用 GPU 帧捕获（右图）;
GPU Frame Capture 栏三个选项的详细说明： ​
  • Automatically：自动捕获项目中的 Metal 或 OpenGL ES API 使用情况。如果项目未链接到 Metal 或 OpenGL ES 框架，则 Capture GPU Frame 按钮不会显示在调试栏中。如果项目同时使用 Metal 和 OpenGL ES API，则可以单击并按住 Capture GPU Frame 按钮来选择要捕获的 API;
  • Metal：仅捕获项目中的 Metal API 使用情况;
  • Disabled：禁用 GPU 帧捕获功能;
Edit Scheme
GPU frame capture
3，在 Info 选项卡下的 executable 栏（左图），我们来指定要运行的可执行文件：单击可选项里的 Other，然后在目标目录中找到由 cargo 创建的二进制文件（右图）。
Info 选项卡
如何找到 cargo 创建的二进制可执行文件？ ​
我们以管线教程的示例代码为例，先在项目根目录（learn-wgpu-zh/）运行管线示例：
cargo run --bin tutorial3-pipeline
然后在 learn-wgpu-zh/target/debug/ 路径下你就能找到一个名为 tutorial3-pipeline 的可执行文件。
接下来，点击 Start 按钮，Xcode 就能运行我们指定的二进制文件了：
你应该能看三角形绘制程序正在运行，并且 Xcode 控制台的一些输出告诉我们已启用了 Metal 接口验证：
查看实时 GPU 统计数据 ​
仅需点击 Start 按钮运行我们要调试的程序，然后将 Xcode 左边栏切换至调试导航栏（Debug Navigator，通常 Xcode 会在调试项目启动时自动跳转到调试导航栏), 就能查看到实时的内存、CPU 占用及帧率（FPS）等，选中每一栏还可查看详情，以帧率栏为例，详情内还提供了 CPU 与 GPU 的每帧耗时，GPU 顶点与片元运算单元的利用率等信息，方便我们诊断出程序的性能瓶颈之所在：
GPU 帧捕获 ​
要启动 Metal 的调试器（Debugger)，在点击 Start 按钮运行程序之后，需再点击 Xcode 调试区（Debug Area）工具栏的 Capture GPU Frame 按钮（上面有个 Metal 图标的按钮）。 捕获一帧之后，我们就能够使用所有常规的 Metal 调试工具（例如 GPU 统计、着色器及缓冲区调试等）了：
调试帧数据 ​
我们以 Uniform 缓冲区 教程的示例为例来调试 Uniform 缓冲区中的数据: 捕获一帧之后，在调试导航栏选择 Render Pass 下的 All Resources 项，右边的列表里将会列出当前程序使用到的各种资源（纹理，缓冲区等）（左图），双击 Camera Buffer 就能格式化展示此缓冲区的数据了，同时数据展示区的下边会多出来一栏工具，方便我们切换数据的格式化类型及展示列数等（右图）。
Debug 导航栏
Camera 缓冲区的数据
不知你有没有注意到 ​
左侧的调试导航栏中的 Render Pass 及右侧资源列表里展示的名称（如，Camera Buffer）都是我们在代码里设置的 labal 参数：
rust
let mut render_pass = encoder.begin_render_pass(&wgpu::RenderPassDescriptor {
+import{_ as a,o as e,c as i,a1 as t}from"./chunks/framework.DyadSNS9.js";const n="/learn-wgpu-zh/assets/create.8jrvG0KT.png",r="/learn-wgpu-zh/assets/template.BlpAS8O6.png",l="/learn-wgpu-zh/assets/name.Ts5Wzm2h.png",p="/learn-wgpu-zh/assets/project.4mJ4k618.png",o="/learn-wgpu-zh/assets/option.C2CxaI0C.png",d="/learn-wgpu-zh/assets/info.DMiHBHeW.png",h="/learn-wgpu-zh/assets/triangle.CzA8fH6i.png",c="/learn-wgpu-zh/assets/run.Bqd7ED1d.png",g="/learn-wgpu-zh/assets/result.3LSmTeIA.png",k="/learn-wgpu-zh/assets/fps.oe0BmjqE.png",u="/learn-wgpu-zh/assets/capture.BQ-IXEGO.png",m="/learn-wgpu-zh/assets/debug_navigator.f9gkzIxB.png",E="/learn-wgpu-zh/assets/buffer_data.DpIVszbr.png",A=JSON.parse('{"title":"使用 Xcode 调试 wgpu 程序","description":"","frontmatter":{},"headers":[],"relativePath":"integration-and-debugging/xcode/index.md","filePath":"integration-and-debugging/xcode/index.md","lastUpdated":1731720800000}'),b={name:"integration-and-debugging/xcode/index.md"};function y(P,s,f,v,F,_){return e(),i("div",null,s[0]||(s[0]=[t('
使用 Xcode 调试 wgpu 程序 ​
Xcode 与 Metal ​
Xcode 是苹果官方提供的运行在 macOS 系统上的 IDE，它提供了一整套工具来方便为苹果设备（比如，iPad、iPhone、Mac 等等）创建、测试、优化 App 并最终发布到 App Store。Xcode 是免费的，如果你使用的是 macOS 系统，就可以从 App Store 上下载安装。
Metal 是 wgpu 在苹果平台上使用的图形后端，Metal 框架（Framework）通过提供低开销的底层 GPU 编程 API、图形和计算管线之间的紧密集成以及一套强大的 GPU 分析和调试工具，为苹果平台上的图形硬件加速提供动力。
2014 年，苹果在全球开发者大会 (WWDC) 上宣布为 iOS 推出全新的 Metal 框架， 一年后的 WWDC 2015，苹果宣布了 macOS 上也将支持 Metal，随后是 watchOS 和 tvOS。 随着 Metal API 的不断发展，在 WWDC 2017 上推出了新版本，Metal 2。它增加了对虚拟现实 (VR)、增强现实 (AR) 和机器学习 (ML) 的支持，以及其它许多新功能.
今年（WWDC 2022）推出的 Metal 3，引入了更为强大的功能，能帮助游戏和专业应用程序充分挖掘苹果芯片的潜力：借助高性能放大和抗锯齿（anti-aliasing）功能，能在更短的时间内渲染高分辨率的图形; 使用异步 I/O 将资源数据直接从存储优化流式传输到 Metal 纹理和缓冲区，能更快地加载资源; 新的光线追踪（Metal Ray Tracing）构建加速结构所花费的 GPU 时间更少，可以通过将剔除（Culling）工作转移到 GPU 以减少 CPU 开销，并且通过直接访问原始数据来优化光线求交和着色; 还有机器学习加速及新的网格着色器（Mesh Shader）等等。
创建调试项目 ​
首先，我们打开 Xcode，使用菜单或启动对话框中的 Create a new Xcode project 来创建一个新项目（左图），然后单击 Other 选项卡, 选中外部构建系统（External Build System）作为项目模板（右图）:
创建一个新的 Xcode 项目
选择项目模板
然后，在构建工具（Build Tool）字段中填入要使用的构建工具，Xcode 在运行项目时，将会调用此处设置的构建工具。 如果希望 Xcode 运行 cargo 构建命令，就可以填写 cargo 在你的 macOS 上的安装路径（默认的路径是 ${HOME}/.cargo/bin/cargo），也可以留空来表示跳过构建步骤，以避免 Xcode 为我们构建项目。
其余的字段实际上对我们来说并不重要，因此可以随意填，但产品名称（Product Name）字段还是尽量填一个有意义的名称吧：
构建工具设置
编辑 Scheme ​
接着编辑项目的方案（Scheme）来启用 Metal 的 GPU 帧捕获（Frame Capture）及 接口验证（API Validation）工具集。 通常，如果 Xcode 项目里的代码调用了 Metal 框架或任何其他使用了 Metal API 的框架，Xcode 会自动启用 GPU 帧捕获 和 Metal 接口验证，但我们的这个项目使用的是外部构建系统（External Build System），只能手动设置。
手动设置其实非常简单：
1，单击项目名称，然后单击 Edit Scheme（左图）（或者，从顶部菜单栏上选择 Product -> Scheme -> Edit Scheme）;
2，在弹出的方案功能面板中选中左边栏的 Run，将右边的功能配置表切换至 Options 选项卡，设置 GPU Frame Capture 栏为 Metal 来启用 GPU 帧捕获（右图）;
GPU Frame Capture 栏三个选项的详细说明： ​
  • Automatically：自动捕获项目中的 Metal 或 OpenGL ES API 使用情况。如果项目未链接到 Metal 或 OpenGL ES 框架，则 Capture GPU Frame 按钮不会显示在调试栏中。如果项目同时使用 Metal 和 OpenGL ES API，则可以单击并按住 Capture GPU Frame 按钮来选择要捕获的 API;
  • Metal：仅捕获项目中的 Metal API 使用情况;
  • Disabled：禁用 GPU 帧捕获功能;
Edit Scheme
GPU frame capture
3，在 Info 选项卡下的 executable 栏（左图），我们来指定要运行的可执行文件：单击可选项里的 Other，然后在目标目录中找到由 cargo 创建的二进制文件（右图）。
Info 选项卡
如何找到 cargo 创建的二进制可执行文件？ ​
我们以管线教程的示例代码为例，先在项目根目录（learn-wgpu-zh/）运行管线示例：
cargo run --bin tutorial3-pipeline
然后在 learn-wgpu-zh/target/debug/ 路径下你就能找到一个名为 tutorial3-pipeline 的可执行文件。
接下来，点击 Start 按钮，Xcode 就能运行我们指定的二进制文件了：
你应该能看三角形绘制程序正在运行，并且 Xcode 控制台的一些输出告诉我们已启用了 Metal 接口验证：
查看实时 GPU 统计数据 ​
仅需点击 Start 按钮运行我们要调试的程序，然后将 Xcode 左边栏切换至调试导航栏（Debug Navigator，通常 Xcode 会在调试项目启动时自动跳转到调试导航栏), 就能查看到实时的内存、CPU 占用及帧率（FPS）等，选中每一栏还可查看详情，以帧率栏为例，详情内还提供了 CPU 与 GPU 的每帧耗时，GPU 顶点与片元运算单元的利用率等信息，方便我们诊断出程序的性能瓶颈之所在：
GPU 帧捕获 ​
要启动 Metal 的调试器（Debugger)，在点击 Start 按钮运行程序之后，需再点击 Xcode 调试区（Debug Area）工具栏的 Capture GPU Frame 按钮（上面有个 Metal 图标的按钮）。 捕获一帧之后，我们就能够使用所有常规的 Metal 调试工具（例如 GPU 统计、着色器及缓冲区调试等）了：
调试帧数据 ​
我们以 Uniform 缓冲区 教程的示例为例来调试 Uniform 缓冲区中的数据: 捕获一帧之后，在调试导航栏选择 Render Pass 下的 All Resources 项，右边的列表里将会列出当前程序使用到的各种资源（纹理，缓冲区等）（左图），双击 Camera Buffer 就能格式化展示此缓冲区的数据了，同时数据展示区的下边会多出来一栏工具，方便我们切换数据的格式化类型及展示列数等（右图）。
Debug 导航栏
Camera 缓冲区的数据
不知你有没有注意到 ​
左侧的调试导航栏中的 Render Pass 及右侧资源列表里展示的名称（如，Camera Buffer）都是我们在代码里设置的 labal 参数：
rust
let mut render_pass = encoder.begin_render_pass(&wgpu::RenderPassDescriptor {
     label: Some("Render Pass"),
     // ...
 };
diff --git a/assets/integration-and-debugging_xcode_index.md.CchvP_wB.lean.js b/assets/integration-and-debugging_xcode_index.md.BxTvmEOJ.lean.js
similarity index 97%
rename from assets/integration-and-debugging_xcode_index.md.CchvP_wB.lean.js
rename to assets/integration-and-debugging_xcode_index.md.BxTvmEOJ.lean.js
index 352161e8f..550bdc342 100644
--- a/assets/integration-and-debugging_xcode_index.md.CchvP_wB.lean.js
+++ b/assets/integration-and-debugging_xcode_index.md.BxTvmEOJ.lean.js
@@ -1,4 +1,4 @@
-import{_ as a,c as e,a1 as i,o as t}from"./chunks/framework.DdYVMT1V.js";const n="/learn-wgpu-zh/assets/create.8jrvG0KT.png",r="/learn-wgpu-zh/assets/template.BlpAS8O6.png",l="/learn-wgpu-zh/assets/name.Ts5Wzm2h.png",p="/learn-wgpu-zh/assets/project.4mJ4k618.png",o="/learn-wgpu-zh/assets/option.C2CxaI0C.png",d="/learn-wgpu-zh/assets/info.DMiHBHeW.png",h="/learn-wgpu-zh/assets/triangle.CzA8fH6i.png",c="/learn-wgpu-zh/assets/run.Bqd7ED1d.png",g="/learn-wgpu-zh/assets/result.3LSmTeIA.png",k="/learn-wgpu-zh/assets/fps.oe0BmjqE.png",u="/learn-wgpu-zh/assets/capture.BQ-IXEGO.png",m="/learn-wgpu-zh/assets/debug_navigator.f9gkzIxB.png",E="/learn-wgpu-zh/assets/buffer_data.DpIVszbr.png",A=JSON.parse('{"title":"使用 Xcode 调试 wgpu 程序","description":"","frontmatter":{},"headers":[],"relativePath":"integration-and-debugging/xcode/index.md","filePath":"integration-and-debugging/xcode/index.md","lastUpdated":1730902479000}'),b={name:"integration-and-debugging/xcode/index.md"};function y(P,s,f,v,F,_){return t(),e("div",null,s[0]||(s[0]=[i('
使用 Xcode 调试 wgpu 程序 ​
Xcode 与 Metal ​
Xcode 是苹果官方提供的运行在 macOS 系统上的 IDE，它提供了一整套工具来方便为苹果设备（比如，iPad、iPhone、Mac 等等）创建、测试、优化 App 并最终发布到 App Store。Xcode 是免费的，如果你使用的是 macOS 系统，就可以从 App Store 上下载安装。
Metal 是 wgpu 在苹果平台上使用的图形后端，Metal 框架（Framework）通过提供低开销的底层 GPU 编程 API、图形和计算管线之间的紧密集成以及一套强大的 GPU 分析和调试工具，为苹果平台上的图形硬件加速提供动力。
2014 年，苹果在全球开发者大会 (WWDC) 上宣布为 iOS 推出全新的 Metal 框架， 一年后的 WWDC 2015，苹果宣布了 macOS 上也将支持 Metal，随后是 watchOS 和 tvOS。 随着 Metal API 的不断发展，在 WWDC 2017 上推出了新版本，Metal 2。它增加了对虚拟现实 (VR)、增强现实 (AR) 和机器学习 (ML) 的支持，以及其它许多新功能.
今年（WWDC 2022）推出的 Metal 3，引入了更为强大的功能，能帮助游戏和专业应用程序充分挖掘苹果芯片的潜力：借助高性能放大和抗锯齿（anti-aliasing）功能，能在更短的时间内渲染高分辨率的图形; 使用异步 I/O 将资源数据直接从存储优化流式传输到 Metal 纹理和缓冲区，能更快地加载资源; 新的光线追踪（Metal Ray Tracing）构建加速结构所花费的 GPU 时间更少，可以通过将剔除（Culling）工作转移到 GPU 以减少 CPU 开销，并且通过直接访问原始数据来优化光线求交和着色; 还有机器学习加速及新的网格着色器（Mesh Shader）等等。
创建调试项目 ​
首先，我们打开 Xcode，使用菜单或启动对话框中的 Create a new Xcode project 来创建一个新项目（左图），然后单击 Other 选项卡, 选中外部构建系统（External Build System）作为项目模板（右图）:
创建一个新的 Xcode 项目
选择项目模板
然后，在构建工具（Build Tool）字段中填入要使用的构建工具，Xcode 在运行项目时，将会调用此处设置的构建工具。 如果希望 Xcode 运行 cargo 构建命令，就可以填写 cargo 在你的 macOS 上的安装路径（默认的路径是 ${HOME}/.cargo/bin/cargo），也可以留空来表示跳过构建步骤，以避免 Xcode 为我们构建项目。
其余的字段实际上对我们来说并不重要，因此可以随意填，但产品名称（Product Name）字段还是尽量填一个有意义的名称吧：
构建工具设置
编辑 Scheme ​
接着编辑项目的方案（Scheme）来启用 Metal 的 GPU 帧捕获（Frame Capture）及 接口验证（API Validation）工具集。 通常，如果 Xcode 项目里的代码调用了 Metal 框架或任何其他使用了 Metal API 的框架，Xcode 会自动启用 GPU 帧捕获 和 Metal 接口验证，但我们的这个项目使用的是外部构建系统（External Build System），只能手动设置。
手动设置其实非常简单：
1，单击项目名称，然后单击 Edit Scheme（左图）（或者，从顶部菜单栏上选择 Product -> Scheme -> Edit Scheme）;
2，在弹出的方案功能面板中选中左边栏的 Run，将右边的功能配置表切换至 Options 选项卡，设置 GPU Frame Capture 栏为 Metal 来启用 GPU 帧捕获（右图）;
GPU Frame Capture 栏三个选项的详细说明： ​
  • Automatically：自动捕获项目中的 Metal 或 OpenGL ES API 使用情况。如果项目未链接到 Metal 或 OpenGL ES 框架，则 Capture GPU Frame 按钮不会显示在调试栏中。如果项目同时使用 Metal 和 OpenGL ES API，则可以单击并按住 Capture GPU Frame 按钮来选择要捕获的 API;
  • Metal：仅捕获项目中的 Metal API 使用情况;
  • Disabled：禁用 GPU 帧捕获功能;
Edit Scheme
GPU frame capture
3，在 Info 选项卡下的 executable 栏（左图），我们来指定要运行的可执行文件：单击可选项里的 Other，然后在目标目录中找到由 cargo 创建的二进制文件（右图）。
Info 选项卡
如何找到 cargo 创建的二进制可执行文件？ ​
我们以管线教程的示例代码为例，先在项目根目录（learn-wgpu-zh/）运行管线示例：
cargo run --bin tutorial3-pipeline
然后在 learn-wgpu-zh/target/debug/ 路径下你就能找到一个名为 tutorial3-pipeline 的可执行文件。
接下来，点击 Start 按钮，Xcode 就能运行我们指定的二进制文件了：
你应该能看三角形绘制程序正在运行，并且 Xcode 控制台的一些输出告诉我们已启用了 Metal 接口验证：
查看实时 GPU 统计数据 ​
仅需点击 Start 按钮运行我们要调试的程序，然后将 Xcode 左边栏切换至调试导航栏（Debug Navigator，通常 Xcode 会在调试项目启动时自动跳转到调试导航栏), 就能查看到实时的内存、CPU 占用及帧率（FPS）等，选中每一栏还可查看详情，以帧率栏为例，详情内还提供了 CPU 与 GPU 的每帧耗时，GPU 顶点与片元运算单元的利用率等信息，方便我们诊断出程序的性能瓶颈之所在：
GPU 帧捕获 ​
要启动 Metal 的调试器（Debugger)，在点击 Start 按钮运行程序之后，需再点击 Xcode 调试区（Debug Area）工具栏的 Capture GPU Frame 按钮（上面有个 Metal 图标的按钮）。 捕获一帧之后，我们就能够使用所有常规的 Metal 调试工具（例如 GPU 统计、着色器及缓冲区调试等）了：
调试帧数据 ​
我们以 Uniform 缓冲区 教程的示例为例来调试 Uniform 缓冲区中的数据: 捕获一帧之后，在调试导航栏选择 Render Pass 下的 All Resources 项，右边的列表里将会列出当前程序使用到的各种资源（纹理，缓冲区等）（左图），双击 Camera Buffer 就能格式化展示此缓冲区的数据了，同时数据展示区的下边会多出来一栏工具，方便我们切换数据的格式化类型及展示列数等（右图）。
Debug 导航栏
Camera 缓冲区的数据
不知你有没有注意到 ​
左侧的调试导航栏中的 Render Pass 及右侧资源列表里展示的名称（如，Camera Buffer）都是我们在代码里设置的 labal 参数：
rust
let mut render_pass = encoder.begin_render_pass(&wgpu::RenderPassDescriptor {
+import{_ as a,o as e,c as i,a1 as t}from"./chunks/framework.DyadSNS9.js";const n="/learn-wgpu-zh/assets/create.8jrvG0KT.png",r="/learn-wgpu-zh/assets/template.BlpAS8O6.png",l="/learn-wgpu-zh/assets/name.Ts5Wzm2h.png",p="/learn-wgpu-zh/assets/project.4mJ4k618.png",o="/learn-wgpu-zh/assets/option.C2CxaI0C.png",d="/learn-wgpu-zh/assets/info.DMiHBHeW.png",h="/learn-wgpu-zh/assets/triangle.CzA8fH6i.png",c="/learn-wgpu-zh/assets/run.Bqd7ED1d.png",g="/learn-wgpu-zh/assets/result.3LSmTeIA.png",k="/learn-wgpu-zh/assets/fps.oe0BmjqE.png",u="/learn-wgpu-zh/assets/capture.BQ-IXEGO.png",m="/learn-wgpu-zh/assets/debug_navigator.f9gkzIxB.png",E="/learn-wgpu-zh/assets/buffer_data.DpIVszbr.png",A=JSON.parse('{"title":"使用 Xcode 调试 wgpu 程序","description":"","frontmatter":{},"headers":[],"relativePath":"integration-and-debugging/xcode/index.md","filePath":"integration-and-debugging/xcode/index.md","lastUpdated":1731720800000}'),b={name:"integration-and-debugging/xcode/index.md"};function y(P,s,f,v,F,_){return e(),i("div",null,s[0]||(s[0]=[t('
使用 Xcode 调试 wgpu 程序 ​
Xcode 与 Metal ​
Xcode 是苹果官方提供的运行在 macOS 系统上的 IDE，它提供了一整套工具来方便为苹果设备（比如，iPad、iPhone、Mac 等等）创建、测试、优化 App 并最终发布到 App Store。Xcode 是免费的，如果你使用的是 macOS 系统，就可以从 App Store 上下载安装。
Metal 是 wgpu 在苹果平台上使用的图形后端，Metal 框架（Framework）通过提供低开销的底层 GPU 编程 API、图形和计算管线之间的紧密集成以及一套强大的 GPU 分析和调试工具，为苹果平台上的图形硬件加速提供动力。
2014 年，苹果在全球开发者大会 (WWDC) 上宣布为 iOS 推出全新的 Metal 框架， 一年后的 WWDC 2015，苹果宣布了 macOS 上也将支持 Metal，随后是 watchOS 和 tvOS。 随着 Metal API 的不断发展，在 WWDC 2017 上推出了新版本，Metal 2。它增加了对虚拟现实 (VR)、增强现实 (AR) 和机器学习 (ML) 的支持，以及其它许多新功能.
今年（WWDC 2022）推出的 Metal 3，引入了更为强大的功能，能帮助游戏和专业应用程序充分挖掘苹果芯片的潜力：借助高性能放大和抗锯齿（anti-aliasing）功能，能在更短的时间内渲染高分辨率的图形; 使用异步 I/O 将资源数据直接从存储优化流式传输到 Metal 纹理和缓冲区，能更快地加载资源; 新的光线追踪（Metal Ray Tracing）构建加速结构所花费的 GPU 时间更少，可以通过将剔除（Culling）工作转移到 GPU 以减少 CPU 开销，并且通过直接访问原始数据来优化光线求交和着色; 还有机器学习加速及新的网格着色器（Mesh Shader）等等。
创建调试项目 ​
首先，我们打开 Xcode，使用菜单或启动对话框中的 Create a new Xcode project 来创建一个新项目（左图），然后单击 Other 选项卡, 选中外部构建系统（External Build System）作为项目模板（右图）:
创建一个新的 Xcode 项目
选择项目模板
然后，在构建工具（Build Tool）字段中填入要使用的构建工具，Xcode 在运行项目时，将会调用此处设置的构建工具。 如果希望 Xcode 运行 cargo 构建命令，就可以填写 cargo 在你的 macOS 上的安装路径（默认的路径是 ${HOME}/.cargo/bin/cargo），也可以留空来表示跳过构建步骤，以避免 Xcode 为我们构建项目。
其余的字段实际上对我们来说并不重要，因此可以随意填，但产品名称（Product Name）字段还是尽量填一个有意义的名称吧：
构建工具设置
编辑 Scheme ​
接着编辑项目的方案（Scheme）来启用 Metal 的 GPU 帧捕获（Frame Capture）及 接口验证（API Validation）工具集。 通常，如果 Xcode 项目里的代码调用了 Metal 框架或任何其他使用了 Metal API 的框架，Xcode 会自动启用 GPU 帧捕获 和 Metal 接口验证，但我们的这个项目使用的是外部构建系统（External Build System），只能手动设置。
手动设置其实非常简单：
1，单击项目名称，然后单击 Edit Scheme（左图）（或者，从顶部菜单栏上选择 Product -> Scheme -> Edit Scheme）;
2，在弹出的方案功能面板中选中左边栏的 Run，将右边的功能配置表切换至 Options 选项卡，设置 GPU Frame Capture 栏为 Metal 来启用 GPU 帧捕获（右图）;
GPU Frame Capture 栏三个选项的详细说明： ​
  • Automatically：自动捕获项目中的 Metal 或 OpenGL ES API 使用情况。如果项目未链接到 Metal 或 OpenGL ES 框架，则 Capture GPU Frame 按钮不会显示在调试栏中。如果项目同时使用 Metal 和 OpenGL ES API，则可以单击并按住 Capture GPU Frame 按钮来选择要捕获的 API;
  • Metal：仅捕获项目中的 Metal API 使用情况;
  • Disabled：禁用 GPU 帧捕获功能;
Edit Scheme
GPU frame capture
3，在 Info 选项卡下的 executable 栏（左图），我们来指定要运行的可执行文件：单击可选项里的 Other，然后在目标目录中找到由 cargo 创建的二进制文件（右图）。
Info 选项卡
如何找到 cargo 创建的二进制可执行文件？ ​
我们以管线教程的示例代码为例，先在项目根目录（learn-wgpu-zh/）运行管线示例：
cargo run --bin tutorial3-pipeline
然后在 learn-wgpu-zh/target/debug/ 路径下你就能找到一个名为 tutorial3-pipeline 的可执行文件。
接下来，点击 Start 按钮，Xcode 就能运行我们指定的二进制文件了：
你应该能看三角形绘制程序正在运行，并且 Xcode 控制台的一些输出告诉我们已启用了 Metal 接口验证：
查看实时 GPU 统计数据 ​
仅需点击 Start 按钮运行我们要调试的程序，然后将 Xcode 左边栏切换至调试导航栏（Debug Navigator，通常 Xcode 会在调试项目启动时自动跳转到调试导航栏), 就能查看到实时的内存、CPU 占用及帧率（FPS）等，选中每一栏还可查看详情，以帧率栏为例，详情内还提供了 CPU 与 GPU 的每帧耗时，GPU 顶点与片元运算单元的利用率等信息，方便我们诊断出程序的性能瓶颈之所在：
GPU 帧捕获 ​
要启动 Metal 的调试器（Debugger)，在点击 Start 按钮运行程序之后，需再点击 Xcode 调试区（Debug Area）工具栏的 Capture GPU Frame 按钮（上面有个 Metal 图标的按钮）。 捕获一帧之后，我们就能够使用所有常规的 Metal 调试工具（例如 GPU 统计、着色器及缓冲区调试等）了：
调试帧数据 ​
我们以 Uniform 缓冲区 教程的示例为例来调试 Uniform 缓冲区中的数据: 捕获一帧之后，在调试导航栏选择 Render Pass 下的 All Resources 项，右边的列表里将会列出当前程序使用到的各种资源（纹理，缓冲区等）（左图），双击 Camera Buffer 就能格式化展示此缓冲区的数据了，同时数据展示区的下边会多出来一栏工具，方便我们切换数据的格式化类型及展示列数等（右图）。
Debug 导航栏
Camera 缓冲区的数据
不知你有没有注意到 ​
左侧的调试导航栏中的 Render Pass 及右侧资源列表里展示的名称（如，Camera Buffer）都是我们在代码里设置的 labal 参数：
rust
let mut render_pass = encoder.begin_render_pass(&wgpu::RenderPassDescriptor {
     label: Some("Render Pass"),
     // ...
 };
diff --git a/assets/intermediate_compute-pipeline_index.md.BZ_cyLQo.js b/assets/intermediate_compute-pipeline_index.md.CG8IX7Ek.js
similarity index 98%
rename from assets/intermediate_compute-pipeline_index.md.BZ_cyLQo.js
rename to assets/intermediate_compute-pipeline_index.md.CG8IX7Ek.js
index 9581aa910..e97deda55 100644
--- a/assets/intermediate_compute-pipeline_index.md.BZ_cyLQo.js
+++ b/assets/intermediate_compute-pipeline_index.md.CG8IX7Ek.js
@@ -1,4 +1,4 @@
-import{_ as l,c as h,a1 as t,G as i,B as a,o as k}from"./chunks/framework.DdYVMT1V.js";const e="/learn-wgpu-zh/assets/workgroups.BldmKCe0.png",r="/learn-wgpu-zh/assets/global_invocation_id.BaWgH7wp.png",d="/learn-wgpu-zh/assets/local_invocation_id.loqc0bwp.png",m=JSON.parse('{"title":"计算管线","description":"","frontmatter":{},"headers":[],"relativePath":"intermediate/compute-pipeline/index.md","filePath":"intermediate/compute-pipeline/index.md","lastUpdated":1730902479000}'),E={name:"intermediate/compute-pipeline/index.md"};function g(o,s,y,c,F,u){const n=a("WebGPUExample"),p=a("AutoGithubLink");return k(),h("div",null,[s[0]||(s[0]=t(`
计算管线 ​
计算管线（ComputePipeline）是 WebGPU 中控制计算着色器（Compute Shader）阶段的管线。
计算管线适用于各种 GPU 通用计算场景，这是 WebGL 所不具备的。我们通过绑定的存储缓冲区（Storage Buffer）及存储纹理（Storage Texture）来获得计算输出。
创建一个计算管线 ​
计算管线的创建相比于渲染管线简单得多，甚至我们都不需要显式创建并指定绑定组布局（BindGroupLayout）：
rust
let compute_shader = device.create_shader_module(...);
+import{_ as l,C as i,o as h,c as t,a1 as k,G as a}from"./chunks/framework.DyadSNS9.js";const e="/learn-wgpu-zh/assets/workgroups.BldmKCe0.png",r="/learn-wgpu-zh/assets/global_invocation_id.BaWgH7wp.png",d="/learn-wgpu-zh/assets/local_invocation_id.loqc0bwp.png",m=JSON.parse('{"title":"计算管线","description":"","frontmatter":{},"headers":[],"relativePath":"intermediate/compute-pipeline/index.md","filePath":"intermediate/compute-pipeline/index.md","lastUpdated":1731720800000}'),E={name:"intermediate/compute-pipeline/index.md"};function g(o,s,y,c,F,u){const n=i("WebGPUExample"),p=i("AutoGithubLink");return h(),t("div",null,[s[0]||(s[0]=k(`
计算管线 ​
计算管线（ComputePipeline）是 WebGPU 中控制计算着色器（Compute Shader）阶段的管线。
计算管线适用于各种 GPU 通用计算场景，这是 WebGL 所不具备的。我们通过绑定的存储缓冲区（Storage Buffer）及存储纹理（Storage Texture）来获得计算输出。
创建一个计算管线 ​
计算管线的创建相比于渲染管线简单得多，甚至我们都不需要显式创建并指定绑定组布局（BindGroupLayout）：
rust
let compute_shader = device.create_shader_module(...);
 let compute_pipeline = device
     .create_compute_pipeline(&wgpu::ComputePipelineDescriptor {
         layout: None, // 此处使用了隐式布局
@@ -63,4 +63,4 @@ import{_ as l,c as h,a1 as t,G as i,B as a,o as k}from"./chunks/framework.DdYVMT
   var texel = textureLoad(from_tex, uv, 0)
   // ...
 }
使用计算着色器需要注意避免坐标越界问题，因为通常纹理图像的分辨率与我们的工作组大小不是整除关系。
确定工作组大小与数量 ​
工作组的最佳大小（指 x, y, z 三个维度的大小）并没有固定的值，需要结合实际使用场景来确定，而且能支持的最大值还与目标硬件有关。
我们从 adapter.limits() 里，能获取到当前设备支持的最大工作组大小 (maxComputeWorkgroupSizeX，maxComputeWorkgroupSizeY，maxComputeWorkgroupSizeZ)，它们的默认值分别为 (256, 256, 64)。
这三个维度的最大值容易让人误解，以为可以在计算着色器中设置 @workgroup_size(256, 256, 64)。
事实上 WebGPU spec 的验证规则是：x * y * z <= max(x, max(y, z)), 也就是说，设置的 @workgroup_size 三个维度的乘积不能大于 maxComputeWorkgroupSizeX，Y，Z 三个维度中的最大值。
通常，当只需要在计算着色器中操作存储缓冲区时，使用一维工作组 @workgroup_size(x) 是合适的, y、z 维度保持默认值 1; 当需要操作纹理，使用二维或三维工作组 @workgroup_size(x，y) 会更便利。
现在我们可以来回答开头的问题了：
rust
cpass.dispatch_workgroups(workgroup_count.0, workgroup_count.1, workgroup_count.2);
上面计算通道的调度命令接收的参数具体是什么意思呢？
它们就是工作组网格的 3 个维度量。
 以 1000 * 768 个线程组成的网格为例，假设工作组大小为@workgroup_size(32，16)，那么:
rust
// 计算维度值并向上取整
-workgroup_count = ((1000 + (32 -1)) / 32, (768 + (16 -1)) / 16, 1);
CPU 端读取计算管线输出 ​
在案例展示/离屏渲染章节已讲解过如何从缓冲区中读取数据，存储纹理的读取也是一样的，这里不再赘述。
实战：实现高斯模糊 ​
要掌握 WebGPU 计算管线，核心内容就是上边讲解的 “使用存储缓冲区与存储纹理” 及 “工作组”，某个具体实现的着色器逻辑代码并不重要，因为它们与顶点及片元着色器代码没有太大的区别。
点击下方的查看源码就能看到所有实现代码。如对图片模糊算法的细节感兴趣，可以查看这里
运行示例代码 ​
此示例可在桌面端及 Chrome / Edge 113+、Arc、Safari 18、Firefox Nightly、Safari Technology Preview 浏览器中运行（如何开启浏览器 WebGPU 功能支持)
`,54)),i(n,{example:"compute_pipeline",aspectRatio:"0.6"}),i(p)])}const C=l(E,[["render",g]]);export{m as __pageData,C as default};
+workgroup_count = ((1000 + (32 -1)) / 32, (768 + (16 -1)) / 16, 1);
CPU 端读取计算管线输出 ​
在案例展示/离屏渲染章节已讲解过如何从缓冲区中读取数据，存储纹理的读取也是一样的，这里不再赘述。
实战：实现高斯模糊 ​
要掌握 WebGPU 计算管线，核心内容就是上边讲解的 “使用存储缓冲区与存储纹理” 及 “工作组”，某个具体实现的着色器逻辑代码并不重要，因为它们与顶点及片元着色器代码没有太大的区别。
点击下方的查看源码就能看到所有实现代码。如对图片模糊算法的细节感兴趣，可以查看这里
运行示例代码 ​
此示例可在桌面端及 Chrome / Edge 113+、Arc、Safari 18、Firefox Nightly、Safari Technology Preview 浏览器中运行（如何开启浏览器 WebGPU 功能支持)
`,54)),a(n,{example:"compute_pipeline",aspectRatio:"0.6"}),a(p)])}const C=l(E,[["render",g]]);export{m as __pageData,C as default};
diff --git a/assets/intermediate_compute-pipeline_index.md.BZ_cyLQo.lean.js b/assets/intermediate_compute-pipeline_index.md.CG8IX7Ek.lean.js
similarity index 98%
rename from assets/intermediate_compute-pipeline_index.md.BZ_cyLQo.lean.js
rename to assets/intermediate_compute-pipeline_index.md.CG8IX7Ek.lean.js
index 9581aa910..e97deda55 100644
--- a/assets/intermediate_compute-pipeline_index.md.BZ_cyLQo.lean.js
+++ b/assets/intermediate_compute-pipeline_index.md.CG8IX7Ek.lean.js
@@ -1,4 +1,4 @@
-import{_ as l,c as h,a1 as t,G as i,B as a,o as k}from"./chunks/framework.DdYVMT1V.js";const e="/learn-wgpu-zh/assets/workgroups.BldmKCe0.png",r="/learn-wgpu-zh/assets/global_invocation_id.BaWgH7wp.png",d="/learn-wgpu-zh/assets/local_invocation_id.loqc0bwp.png",m=JSON.parse('{"title":"计算管线","description":"","frontmatter":{},"headers":[],"relativePath":"intermediate/compute-pipeline/index.md","filePath":"intermediate/compute-pipeline/index.md","lastUpdated":1730902479000}'),E={name:"intermediate/compute-pipeline/index.md"};function g(o,s,y,c,F,u){const n=a("WebGPUExample"),p=a("AutoGithubLink");return k(),h("div",null,[s[0]||(s[0]=t(`
计算管线 ​
计算管线（ComputePipeline）是 WebGPU 中控制计算着色器（Compute Shader）阶段的管线。
计算管线适用于各种 GPU 通用计算场景，这是 WebGL 所不具备的。我们通过绑定的存储缓冲区（Storage Buffer）及存储纹理（Storage Texture）来获得计算输出。
创建一个计算管线 ​
计算管线的创建相比于渲染管线简单得多，甚至我们都不需要显式创建并指定绑定组布局（BindGroupLayout）：
rust
let compute_shader = device.create_shader_module(...);
+import{_ as l,C as i,o as h,c as t,a1 as k,G as a}from"./chunks/framework.DyadSNS9.js";const e="/learn-wgpu-zh/assets/workgroups.BldmKCe0.png",r="/learn-wgpu-zh/assets/global_invocation_id.BaWgH7wp.png",d="/learn-wgpu-zh/assets/local_invocation_id.loqc0bwp.png",m=JSON.parse('{"title":"计算管线","description":"","frontmatter":{},"headers":[],"relativePath":"intermediate/compute-pipeline/index.md","filePath":"intermediate/compute-pipeline/index.md","lastUpdated":1731720800000}'),E={name:"intermediate/compute-pipeline/index.md"};function g(o,s,y,c,F,u){const n=i("WebGPUExample"),p=i("AutoGithubLink");return h(),t("div",null,[s[0]||(s[0]=k(`
计算管线 ​
计算管线（ComputePipeline）是 WebGPU 中控制计算着色器（Compute Shader）阶段的管线。
计算管线适用于各种 GPU 通用计算场景，这是 WebGL 所不具备的。我们通过绑定的存储缓冲区（Storage Buffer）及存储纹理（Storage Texture）来获得计算输出。
创建一个计算管线 ​
计算管线的创建相比于渲染管线简单得多，甚至我们都不需要显式创建并指定绑定组布局（BindGroupLayout）：
rust
let compute_shader = device.create_shader_module(...);
 let compute_pipeline = device
     .create_compute_pipeline(&wgpu::ComputePipelineDescriptor {
         layout: None, // 此处使用了隐式布局
@@ -63,4 +63,4 @@ import{_ as l,c as h,a1 as t,G as i,B as a,o as k}from"./chunks/framework.DdYVMT
   var texel = textureLoad(from_tex, uv, 0)
   // ...
 }
使用计算着色器需要注意避免坐标越界问题，因为通常纹理图像的分辨率与我们的工作组大小不是整除关系。
确定工作组大小与数量 ​
工作组的最佳大小（指 x, y, z 三个维度的大小）并没有固定的值，需要结合实际使用场景来确定，而且能支持的最大值还与目标硬件有关。
我们从 adapter.limits() 里，能获取到当前设备支持的最大工作组大小 (maxComputeWorkgroupSizeX，maxComputeWorkgroupSizeY，maxComputeWorkgroupSizeZ)，它们的默认值分别为 (256, 256, 64)。
这三个维度的最大值容易让人误解，以为可以在计算着色器中设置 @workgroup_size(256, 256, 64)。
事实上 WebGPU spec 的验证规则是：x * y * z <= max(x, max(y, z)), 也就是说，设置的 @workgroup_size 三个维度的乘积不能大于 maxComputeWorkgroupSizeX，Y，Z 三个维度中的最大值。
通常，当只需要在计算着色器中操作存储缓冲区时，使用一维工作组 @workgroup_size(x) 是合适的, y、z 维度保持默认值 1; 当需要操作纹理，使用二维或三维工作组 @workgroup_size(x，y) 会更便利。
现在我们可以来回答开头的问题了：
rust
cpass.dispatch_workgroups(workgroup_count.0, workgroup_count.1, workgroup_count.2);
上面计算通道的调度命令接收的参数具体是什么意思呢？
它们就是工作组网格的 3 个维度量。
 以 1000 * 768 个线程组成的网格为例，假设工作组大小为@workgroup_size(32，16)，那么:
rust
// 计算维度值并向上取整
-workgroup_count = ((1000 + (32 -1)) / 32, (768 + (16 -1)) / 16, 1);
CPU 端读取计算管线输出 ​
在案例展示/离屏渲染章节已讲解过如何从缓冲区中读取数据，存储纹理的读取也是一样的，这里不再赘述。
实战：实现高斯模糊 ​
要掌握 WebGPU 计算管线，核心内容就是上边讲解的 “使用存储缓冲区与存储纹理” 及 “工作组”，某个具体实现的着色器逻辑代码并不重要，因为它们与顶点及片元着色器代码没有太大的区别。
点击下方的查看源码就能看到所有实现代码。如对图片模糊算法的细节感兴趣，可以查看这里
运行示例代码 ​
此示例可在桌面端及 Chrome / Edge 113+、Arc、Safari 18、Firefox Nightly、Safari Technology Preview 浏览器中运行（如何开启浏览器 WebGPU 功能支持)
`,54)),i(n,{example:"compute_pipeline",aspectRatio:"0.6"}),i(p)])}const C=l(E,[["render",g]]);export{m as __pageData,C as default};
+workgroup_count = ((1000 + (32 -1)) / 32, (768 + (16 -1)) / 16, 1);
CPU 端读取计算管线输出 ​
在案例展示/离屏渲染章节已讲解过如何从缓冲区中读取数据，存储纹理的读取也是一样的，这里不再赘述。
实战：实现高斯模糊 ​
要掌握 WebGPU 计算管线，核心内容就是上边讲解的 “使用存储缓冲区与存储纹理” 及 “工作组”，某个具体实现的着色器逻辑代码并不重要，因为它们与顶点及片元着色器代码没有太大的区别。
点击下方的查看源码就能看到所有实现代码。如对图片模糊算法的细节感兴趣，可以查看这里
运行示例代码 ​
此示例可在桌面端及 Chrome / Edge 113+、Arc、Safari 18、Firefox Nightly、Safari Technology Preview 浏览器中运行（如何开启浏览器 WebGPU 功能支持)
`,54)),a(n,{example:"compute_pipeline",aspectRatio:"0.6"}),a(p)])}const C=l(E,[["render",g]]);export{m as __pageData,C as default};
diff --git a/assets/intermediate_hdr_index.md.Dm4mXg81.js b/assets/intermediate_hdr_index.md.CiUucJH7.js
similarity index 99%
rename from assets/intermediate_hdr_index.md.Dm4mXg81.js
rename to assets/intermediate_hdr_index.md.CiUucJH7.js
index 1a2625045..c178705ae 100644
--- a/assets/intermediate_hdr_index.md.Dm4mXg81.js
+++ b/assets/intermediate_hdr_index.md.CiUucJH7.js
@@ -1,4 +1,4 @@
-import{_ as l,c as h,a1 as k,G as i,B as a,o as t}from"./chunks/framework.DdYVMT1V.js";const e="/learn-wgpu-zh/assets/edr.DJ3sYJ_E.png",r="/learn-wgpu-zh/assets/before-hdr.CEYl_SyY.png",E="/learn-wgpu-zh/assets/after-hdr.cPEwQ_pk.png",d="/learn-wgpu-zh/assets/equirectangular.DJiZI1I5.svg",g="/learn-wgpu-zh/assets/kloofendal_43d_clear_puresky.DT0dA7dc.jpg",y="/learn-wgpu-zh/assets/just-reflections.BRxFgKvc.png",F="/learn-wgpu-zh/assets/with-reflections.BWSA02TJ.png",B=JSON.parse('{"title":"渲染高动态范围场景 (High Dynamic Range Rendering)","description":"","frontmatter":{},"headers":[],"relativePath":"intermediate/hdr/index.md","filePath":"intermediate/hdr/index.md","lastUpdated":1730902479000}'),c={name:"intermediate/hdr/index.md"};function b(u,s,m,D,A,C){const n=a("WebGPUExample"),p=a("AutoGithubLink");return t(),h("div",null,[s[0]||(s[0]=k('
渲染高动态范围场景 (High Dynamic Range Rendering) ​
到目前为止，我们一直在使用 sRGB 色彩空间来渲染场景。虽然这样做没问题，但它限制了在场景光照方面的可能性。我们通常使用 TextureFormat::Rgba8UnormSrgb | Rgba8Unorm 作为纹理格式，这种格式的红、绿、蓝和透明度 4 个颜色通道各占 8 位（1 个字节）。通道的存储值是介于 0 和 255 之间的整数，但它们在着色器中会被转换为 0.0 到 1.0 之间的浮点值。简而言之，使用 8 位的纹理，每个通道只有 256 个可能的值。
而这 256 个可能的值之中，大部分精度被用来表示场景中较暗的值，也就是说，灯泡等明亮的物体与太阳等极其明亮的物体具有相同的值。这种不准确性使得无法实现逼真的光照效果。因此，我们将切换渲染系统以使用高动态范围 (HDR，High Dynamic Range)，使场景更具灵活性，并能够利用更高级的技术，如基于物理的渲染。
什么是 HDR 纹理? ​
通俗地说，高动态范围纹理是一种每像素拥有更多位数的纹理。HDR 纹理以浮点数值而不是整数值存储，颜色通道可以拥有大于 1.0 的亮度值，也就是说可以拥有更高动态范围的亮度。
使用 HDR 纹理 ​
截至目前，并非所有显示设备都支持 HDR，因此我们需要以 HDR 格式渲染场景，然后使用色调映射 (tonemapping) 将 HDR 转换为支持的格式。
这里有一些关于 wgpu 中实现 HDR 展示平面 (Surface) 纹理支持的讨论。如果你想为这块出力，可以参考 GitHub 问题链接：https://github.com/gfx-rs/wgpu/issues/2920
译者注：
wgpu 中对 HDR 的支持起始于我提交的这几个 PR：
Metal backend ASTC HDR formats support
vulkan: HDR ASTC formats support
gl: add Rgba16Float format support for color attachments。
HDR 属于广色域（WCG，Wide Color Gamut）色彩空间的内容，但是 WebGPU 标准里目前还没有支持 WCG, 而我试图率先在 metal 后端引入色彩空间 的尝试也失败了。
虽然不能在 wgpu 中直接指定广色域色彩空间, 但给 SurfaceConfiguration 设置 TextureFormat::Rgba16Float 格式时，wgpu-hal 内部会开启对应图形后端的广色域支持：
所以英文原文中说 “wgpu doesn't allow us to use a floating point format such as ...” 的说法是不对的，原文备注里给出的 GitHub 问题链接里讨论的点我也不认为是 wgpu 需要解决的。
关于如何使用 Rgba16Float, 可以参考我的另一个开源项目：wgpu-in-app/src/hdr_image_view
在开始之前，我们需要切换到使用 HDR 纹理进行渲染。
首先，创建一个名为 hdr.rs 的文件：
rust
use wgpu::Operations;
+import{_ as l,C as i,o as h,c as k,a1 as t,G as a}from"./chunks/framework.DyadSNS9.js";const e="/learn-wgpu-zh/assets/edr.DJ3sYJ_E.png",r="/learn-wgpu-zh/assets/before-hdr.CEYl_SyY.png",E="/learn-wgpu-zh/assets/after-hdr.cPEwQ_pk.png",d="/learn-wgpu-zh/assets/equirectangular.DJiZI1I5.svg",g="/learn-wgpu-zh/assets/kloofendal_43d_clear_puresky.DT0dA7dc.jpg",y="/learn-wgpu-zh/assets/just-reflections.BRxFgKvc.png",F="/learn-wgpu-zh/assets/with-reflections.BWSA02TJ.png",B=JSON.parse('{"title":"渲染高动态范围场景 (High Dynamic Range Rendering)","description":"","frontmatter":{},"headers":[],"relativePath":"intermediate/hdr/index.md","filePath":"intermediate/hdr/index.md","lastUpdated":1731720800000}'),c={name:"intermediate/hdr/index.md"};function b(u,s,m,D,A,C){const n=i("WebGPUExample"),p=i("AutoGithubLink");return h(),k("div",null,[s[0]||(s[0]=t('
渲染高动态范围场景 (High Dynamic Range Rendering) ​
到目前为止，我们一直在使用 sRGB 色彩空间来渲染场景。虽然这样做没问题，但它限制了在场景光照方面的可能性。我们通常使用 TextureFormat::Rgba8UnormSrgb | Rgba8Unorm 作为纹理格式，这种格式的红、绿、蓝和透明度 4 个颜色通道各占 8 位（1 个字节）。通道的存储值是介于 0 和 255 之间的整数，但它们在着色器中会被转换为 0.0 到 1.0 之间的浮点值。简而言之，使用 8 位的纹理，每个通道只有 256 个可能的值。
而这 256 个可能的值之中，大部分精度被用来表示场景中较暗的值，也就是说，灯泡等明亮的物体与太阳等极其明亮的物体具有相同的值。这种不准确性使得无法实现逼真的光照效果。因此，我们将切换渲染系统以使用高动态范围 (HDR，High Dynamic Range)，使场景更具灵活性，并能够利用更高级的技术，如基于物理的渲染。
什么是 HDR 纹理? ​
通俗地说，高动态范围纹理是一种每像素拥有更多位数的纹理。HDR 纹理以浮点数值而不是整数值存储，颜色通道可以拥有大于 1.0 的亮度值，也就是说可以拥有更高动态范围的亮度。
使用 HDR 纹理 ​
截至目前，并非所有显示设备都支持 HDR，因此我们需要以 HDR 格式渲染场景，然后使用色调映射 (tonemapping) 将 HDR 转换为支持的格式。
这里有一些关于 wgpu 中实现 HDR 展示平面 (Surface) 纹理支持的讨论。如果你想为这块出力，可以参考 GitHub 问题链接：https://github.com/gfx-rs/wgpu/issues/2920
译者注：
wgpu 中对 HDR 的支持起始于我提交的这几个 PR：
Metal backend ASTC HDR formats support
vulkan: HDR ASTC formats support
gl: add Rgba16Float format support for color attachments。
HDR 属于广色域（WCG，Wide Color Gamut）色彩空间的内容，但是 WebGPU 标准里目前还没有支持 WCG, 而我试图率先在 metal 后端引入色彩空间 的尝试也失败了。
虽然不能在 wgpu 中直接指定广色域色彩空间, 但给 SurfaceConfiguration 设置 TextureFormat::Rgba16Float 格式时，wgpu-hal 内部会开启对应图形后端的广色域支持：
所以英文原文中说 “wgpu doesn't allow us to use a floating point format such as ...” 的说法是不对的，原文备注里给出的 GitHub 问题链接里讨论的点我也不认为是 wgpu 需要解决的。
关于如何使用 Rgba16Float, 可以参考我的另一个开源项目：wgpu-in-app/src/hdr_image_view
在开始之前，我们需要切换到使用 HDR 纹理进行渲染。
首先，创建一个名为 hdr.rs 的文件：
rust
use wgpu::Operations;
 
 use crate::{create_render_pipeline, texture};
 
@@ -897,4 +897,4 @@ import{_ as l,c as h,a1 as k,G as i,B as a,o as t}from"./chunks/framework.DdYVMT
     let result = (diffuse_color + specular_color) * object_color.xyz + reflection * shininess;
 
     return vec4<f32>(result, object_color.a);
-}
A little note on the reflection math. The view_dir gives us the direction to the camera from the surface. The reflection math needs the direction from the camera to the surface, so we negate view_dir. We then use wgsl's built-in reflect function to reflect the inverted view_dir about the world_normal. This gives us a direction that we can use to sample the environment map and get the color of the sky in that direction. Just looking at the reflection component gives us the following:
关于反射计算的一点说明：view_dir 给出了从屏幕到相机的方向。反射计算需要从相机到屏幕的方向，因此需要对 view_dir 取反。然后，使用 wgsl 内置的 reflect 函数将取反的 view_dir 关于 world_normal 进行反射，得到一个反射方向，我们使用它来采样环境贴图并获取该方向上的天空颜色。
仅查看反射分量的效果：
just-reflections
最终场景效果:
with-reflections
示例 ​
',98)),i(n,{example:"hdr",aspectRatio:"0.8"}),i(p)])}const _=l(c,[["render",b]]);export{B as __pageData,_ as default};
+}
A little note on the reflection math. The view_dir gives us the direction to the camera from the surface. The reflection math needs the direction from the camera to the surface, so we negate view_dir. We then use wgsl's built-in reflect function to reflect the inverted view_dir about the world_normal. This gives us a direction that we can use to sample the environment map and get the color of the sky in that direction. Just looking at the reflection component gives us the following:
关于反射计算的一点说明：view_dir 给出了从屏幕到相机的方向。反射计算需要从相机到屏幕的方向，因此需要对 view_dir 取反。然后，使用 wgsl 内置的 reflect 函数将取反的 view_dir 关于 world_normal 进行反射，得到一个反射方向，我们使用它来采样环境贴图并获取该方向上的天空颜色。
仅查看反射分量的效果：
just-reflections
最终场景效果:
with-reflections
示例 ​
',98)),a(n,{example:"hdr",aspectRatio:"0.8"}),a(p)])}const _=l(c,[["render",b]]);export{B as __pageData,_ as default};
diff --git a/assets/intermediate_hdr_index.md.Dm4mXg81.lean.js b/assets/intermediate_hdr_index.md.CiUucJH7.lean.js
similarity index 99%
rename from assets/intermediate_hdr_index.md.Dm4mXg81.lean.js
rename to assets/intermediate_hdr_index.md.CiUucJH7.lean.js
index 1a2625045..c178705ae 100644
--- a/assets/intermediate_hdr_index.md.Dm4mXg81.lean.js
+++ b/assets/intermediate_hdr_index.md.CiUucJH7.lean.js
@@ -1,4 +1,4 @@
-import{_ as l,c as h,a1 as k,G as i,B as a,o as t}from"./chunks/framework.DdYVMT1V.js";const e="/learn-wgpu-zh/assets/edr.DJ3sYJ_E.png",r="/learn-wgpu-zh/assets/before-hdr.CEYl_SyY.png",E="/learn-wgpu-zh/assets/after-hdr.cPEwQ_pk.png",d="/learn-wgpu-zh/assets/equirectangular.DJiZI1I5.svg",g="/learn-wgpu-zh/assets/kloofendal_43d_clear_puresky.DT0dA7dc.jpg",y="/learn-wgpu-zh/assets/just-reflections.BRxFgKvc.png",F="/learn-wgpu-zh/assets/with-reflections.BWSA02TJ.png",B=JSON.parse('{"title":"渲染高动态范围场景 (High Dynamic Range Rendering)","description":"","frontmatter":{},"headers":[],"relativePath":"intermediate/hdr/index.md","filePath":"intermediate/hdr/index.md","lastUpdated":1730902479000}'),c={name:"intermediate/hdr/index.md"};function b(u,s,m,D,A,C){const n=a("WebGPUExample"),p=a("AutoGithubLink");return t(),h("div",null,[s[0]||(s[0]=k('
渲染高动态范围场景 (High Dynamic Range Rendering) ​
到目前为止，我们一直在使用 sRGB 色彩空间来渲染场景。虽然这样做没问题，但它限制了在场景光照方面的可能性。我们通常使用 TextureFormat::Rgba8UnormSrgb | Rgba8Unorm 作为纹理格式，这种格式的红、绿、蓝和透明度 4 个颜色通道各占 8 位（1 个字节）。通道的存储值是介于 0 和 255 之间的整数，但它们在着色器中会被转换为 0.0 到 1.0 之间的浮点值。简而言之，使用 8 位的纹理，每个通道只有 256 个可能的值。
而这 256 个可能的值之中，大部分精度被用来表示场景中较暗的值，也就是说，灯泡等明亮的物体与太阳等极其明亮的物体具有相同的值。这种不准确性使得无法实现逼真的光照效果。因此，我们将切换渲染系统以使用高动态范围 (HDR，High Dynamic Range)，使场景更具灵活性，并能够利用更高级的技术，如基于物理的渲染。
什么是 HDR 纹理? ​
通俗地说，高动态范围纹理是一种每像素拥有更多位数的纹理。HDR 纹理以浮点数值而不是整数值存储，颜色通道可以拥有大于 1.0 的亮度值，也就是说可以拥有更高动态范围的亮度。
使用 HDR 纹理 ​
截至目前，并非所有显示设备都支持 HDR，因此我们需要以 HDR 格式渲染场景，然后使用色调映射 (tonemapping) 将 HDR 转换为支持的格式。
这里有一些关于 wgpu 中实现 HDR 展示平面 (Surface) 纹理支持的讨论。如果你想为这块出力，可以参考 GitHub 问题链接：https://github.com/gfx-rs/wgpu/issues/2920
译者注：
wgpu 中对 HDR 的支持起始于我提交的这几个 PR：
Metal backend ASTC HDR formats support
vulkan: HDR ASTC formats support
gl: add Rgba16Float format support for color attachments。
HDR 属于广色域（WCG，Wide Color Gamut）色彩空间的内容，但是 WebGPU 标准里目前还没有支持 WCG, 而我试图率先在 metal 后端引入色彩空间 的尝试也失败了。
虽然不能在 wgpu 中直接指定广色域色彩空间, 但给 SurfaceConfiguration 设置 TextureFormat::Rgba16Float 格式时，wgpu-hal 内部会开启对应图形后端的广色域支持：
所以英文原文中说 “wgpu doesn't allow us to use a floating point format such as ...” 的说法是不对的，原文备注里给出的 GitHub 问题链接里讨论的点我也不认为是 wgpu 需要解决的。
关于如何使用 Rgba16Float, 可以参考我的另一个开源项目：wgpu-in-app/src/hdr_image_view
在开始之前，我们需要切换到使用 HDR 纹理进行渲染。
首先，创建一个名为 hdr.rs 的文件：
rust
use wgpu::Operations;
+import{_ as l,C as i,o as h,c as k,a1 as t,G as a}from"./chunks/framework.DyadSNS9.js";const e="/learn-wgpu-zh/assets/edr.DJ3sYJ_E.png",r="/learn-wgpu-zh/assets/before-hdr.CEYl_SyY.png",E="/learn-wgpu-zh/assets/after-hdr.cPEwQ_pk.png",d="/learn-wgpu-zh/assets/equirectangular.DJiZI1I5.svg",g="/learn-wgpu-zh/assets/kloofendal_43d_clear_puresky.DT0dA7dc.jpg",y="/learn-wgpu-zh/assets/just-reflections.BRxFgKvc.png",F="/learn-wgpu-zh/assets/with-reflections.BWSA02TJ.png",B=JSON.parse('{"title":"渲染高动态范围场景 (High Dynamic Range Rendering)","description":"","frontmatter":{},"headers":[],"relativePath":"intermediate/hdr/index.md","filePath":"intermediate/hdr/index.md","lastUpdated":1731720800000}'),c={name:"intermediate/hdr/index.md"};function b(u,s,m,D,A,C){const n=i("WebGPUExample"),p=i("AutoGithubLink");return h(),k("div",null,[s[0]||(s[0]=t('
渲染高动态范围场景 (High Dynamic Range Rendering) ​
到目前为止，我们一直在使用 sRGB 色彩空间来渲染场景。虽然这样做没问题，但它限制了在场景光照方面的可能性。我们通常使用 TextureFormat::Rgba8UnormSrgb | Rgba8Unorm 作为纹理格式，这种格式的红、绿、蓝和透明度 4 个颜色通道各占 8 位（1 个字节）。通道的存储值是介于 0 和 255 之间的整数，但它们在着色器中会被转换为 0.0 到 1.0 之间的浮点值。简而言之，使用 8 位的纹理，每个通道只有 256 个可能的值。
而这 256 个可能的值之中，大部分精度被用来表示场景中较暗的值，也就是说，灯泡等明亮的物体与太阳等极其明亮的物体具有相同的值。这种不准确性使得无法实现逼真的光照效果。因此，我们将切换渲染系统以使用高动态范围 (HDR，High Dynamic Range)，使场景更具灵活性，并能够利用更高级的技术，如基于物理的渲染。
什么是 HDR 纹理? ​
通俗地说，高动态范围纹理是一种每像素拥有更多位数的纹理。HDR 纹理以浮点数值而不是整数值存储，颜色通道可以拥有大于 1.0 的亮度值，也就是说可以拥有更高动态范围的亮度。
使用 HDR 纹理 ​
截至目前，并非所有显示设备都支持 HDR，因此我们需要以 HDR 格式渲染场景，然后使用色调映射 (tonemapping) 将 HDR 转换为支持的格式。
这里有一些关于 wgpu 中实现 HDR 展示平面 (Surface) 纹理支持的讨论。如果你想为这块出力，可以参考 GitHub 问题链接：https://github.com/gfx-rs/wgpu/issues/2920
译者注：
wgpu 中对 HDR 的支持起始于我提交的这几个 PR：
Metal backend ASTC HDR formats support
vulkan: HDR ASTC formats support
gl: add Rgba16Float format support for color attachments。
HDR 属于广色域（WCG，Wide Color Gamut）色彩空间的内容，但是 WebGPU 标准里目前还没有支持 WCG, 而我试图率先在 metal 后端引入色彩空间 的尝试也失败了。
虽然不能在 wgpu 中直接指定广色域色彩空间, 但给 SurfaceConfiguration 设置 TextureFormat::Rgba16Float 格式时，wgpu-hal 内部会开启对应图形后端的广色域支持：
所以英文原文中说 “wgpu doesn't allow us to use a floating point format such as ...” 的说法是不对的，原文备注里给出的 GitHub 问题链接里讨论的点我也不认为是 wgpu 需要解决的。
关于如何使用 Rgba16Float, 可以参考我的另一个开源项目：wgpu-in-app/src/hdr_image_view
在开始之前，我们需要切换到使用 HDR 纹理进行渲染。
首先，创建一个名为 hdr.rs 的文件：
rust
use wgpu::Operations;
 
 use crate::{create_render_pipeline, texture};
 
@@ -897,4 +897,4 @@ import{_ as l,c as h,a1 as k,G as i,B as a,o as t}from"./chunks/framework.DdYVMT
     let result = (diffuse_color + specular_color) * object_color.xyz + reflection * shininess;
 
     return vec4<f32>(result, object_color.a);
-}
A little note on the reflection math. The view_dir gives us the direction to the camera from the surface. The reflection math needs the direction from the camera to the surface, so we negate view_dir. We then use wgsl's built-in reflect function to reflect the inverted view_dir about the world_normal. This gives us a direction that we can use to sample the environment map and get the color of the sky in that direction. Just looking at the reflection component gives us the following:
关于反射计算的一点说明：view_dir 给出了从屏幕到相机的方向。反射计算需要从相机到屏幕的方向，因此需要对 view_dir 取反。然后，使用 wgsl 内置的 reflect 函数将取反的 view_dir 关于 world_normal 进行反射，得到一个反射方向，我们使用它来采样环境贴图并获取该方向上的天空颜色。
仅查看反射分量的效果：
just-reflections
最终场景效果:
with-reflections
示例 ​
',98)),i(n,{example:"hdr",aspectRatio:"0.8"}),i(p)])}const _=l(c,[["render",b]]);export{B as __pageData,_ as default};
+}
A little note on the reflection math. The view_dir gives us the direction to the camera from the surface. The reflection math needs the direction from the camera to the surface, so we negate view_dir. We then use wgsl's built-in reflect function to reflect the inverted view_dir about the world_normal. This gives us a direction that we can use to sample the environment map and get the color of the sky in that direction. Just looking at the reflection component gives us the following:
关于反射计算的一点说明：view_dir 给出了从屏幕到相机的方向。反射计算需要从相机到屏幕的方向，因此需要对 view_dir 取反。然后，使用 wgsl 内置的 reflect 函数将取反的 view_dir 关于 world_normal 进行反射，得到一个反射方向，我们使用它来采样环境贴图并获取该方向上的天空颜色。
仅查看反射分量的效果：
just-reflections
最终场景效果:
with-reflections
示例 ​
',98)),a(n,{example:"hdr",aspectRatio:"0.8"}),a(p)])}const _=l(c,[["render",b]]);export{B as __pageData,_ as default};
diff --git a/assets/intermediate_pbr-notes.md.Dc4G-JN7.js b/assets/intermediate_pbr-notes.md.B17WIYua.js
similarity index 69%
rename from assets/intermediate_pbr-notes.md.Dc4G-JN7.js
rename to assets/intermediate_pbr-notes.md.B17WIYua.js
index 5d7af7155..c8f174382 100644
--- a/assets/intermediate_pbr-notes.md.Dc4G-JN7.js
+++ b/assets/intermediate_pbr-notes.md.B17WIYua.js
@@ -1 +1 @@
-import{_ as t,c as a,j as e,a as s,o as n}from"./chunks/framework.DdYVMT1V.js";const u=JSON.parse('{"title":"Sources","description":"","frontmatter":{},"headers":[],"relativePath":"intermediate/pbr-notes.md","filePath":"intermediate/pbr-notes.md","lastUpdated":1730902479000}'),i={name:"intermediate/pbr-notes.md"};function o(l,r,d,c,p,m){return n(),a("div",null,r[0]||(r[0]=[e("h1",{id:"sources",tabindex:"-1"},[s("Sources "),e("a",{class:"header-anchor",href:"#sources","aria-label":'Permalink to "Sources"'},"​")],-1),e("ul",null,[e("li",null,[e("a",{href:"https://www.scratchapixel.com/lessons/3d-basic-rendering/introduction-to-shading/diffuse-lambertian-shading",target:"_blank",rel:"noreferrer"},"https://www.scratchapixel.com/lessons/3d-basic-rendering/introduction-to-shading/diffuse-lambertian-shading")]),e("li",null,[e("a",{href:"http://jimmiejohnsson84.me/pages/rendering_pbr.html",target:"_blank",rel:"noreferrer"},"http://jimmiejohnsson84.me/pages/rendering_pbr.html")])],-1)]))}const f=t(i,[["render",o]]);export{u as __pageData,f as default};
+import{_ as t,o as a,c as s,j as e,a as n}from"./chunks/framework.DyadSNS9.js";const u=JSON.parse('{"title":"Sources","description":"","frontmatter":{},"headers":[],"relativePath":"intermediate/pbr-notes.md","filePath":"intermediate/pbr-notes.md","lastUpdated":1731720800000}'),i={name:"intermediate/pbr-notes.md"};function o(l,r,d,c,p,m){return a(),s("div",null,r[0]||(r[0]=[e("h1",{id:"sources",tabindex:"-1"},[n("Sources "),e("a",{class:"header-anchor",href:"#sources","aria-label":'Permalink to "Sources"'},"​")],-1),e("ul",null,[e("li",null,[e("a",{href:"https://www.scratchapixel.com/lessons/3d-basic-rendering/introduction-to-shading/diffuse-lambertian-shading",target:"_blank",rel:"noreferrer"},"https://www.scratchapixel.com/lessons/3d-basic-rendering/introduction-to-shading/diffuse-lambertian-shading")]),e("li",null,[e("a",{href:"http://jimmiejohnsson84.me/pages/rendering_pbr.html",target:"_blank",rel:"noreferrer"},"http://jimmiejohnsson84.me/pages/rendering_pbr.html")])],-1)]))}const f=t(i,[["render",o]]);export{u as __pageData,f as default};
diff --git a/assets/intermediate_pbr-notes.md.Dc4G-JN7.lean.js b/assets/intermediate_pbr-notes.md.B17WIYua.lean.js
similarity index 69%
rename from assets/intermediate_pbr-notes.md.Dc4G-JN7.lean.js
rename to assets/intermediate_pbr-notes.md.B17WIYua.lean.js
index 5d7af7155..c8f174382 100644
--- a/assets/intermediate_pbr-notes.md.Dc4G-JN7.lean.js
+++ b/assets/intermediate_pbr-notes.md.B17WIYua.lean.js
@@ -1 +1 @@
-import{_ as t,c as a,j as e,a as s,o as n}from"./chunks/framework.DdYVMT1V.js";const u=JSON.parse('{"title":"Sources","description":"","frontmatter":{},"headers":[],"relativePath":"intermediate/pbr-notes.md","filePath":"intermediate/pbr-notes.md","lastUpdated":1730902479000}'),i={name:"intermediate/pbr-notes.md"};function o(l,r,d,c,p,m){return n(),a("div",null,r[0]||(r[0]=[e("h1",{id:"sources",tabindex:"-1"},[s("Sources "),e("a",{class:"header-anchor",href:"#sources","aria-label":'Permalink to "Sources"'},"​")],-1),e("ul",null,[e("li",null,[e("a",{href:"https://www.scratchapixel.com/lessons/3d-basic-rendering/introduction-to-shading/diffuse-lambertian-shading",target:"_blank",rel:"noreferrer"},"https://www.scratchapixel.com/lessons/3d-basic-rendering/introduction-to-shading/diffuse-lambertian-shading")]),e("li",null,[e("a",{href:"http://jimmiejohnsson84.me/pages/rendering_pbr.html",target:"_blank",rel:"noreferrer"},"http://jimmiejohnsson84.me/pages/rendering_pbr.html")])],-1)]))}const f=t(i,[["render",o]]);export{u as __pageData,f as default};
+import{_ as t,o as a,c as s,j as e,a as n}from"./chunks/framework.DyadSNS9.js";const u=JSON.parse('{"title":"Sources","description":"","frontmatter":{},"headers":[],"relativePath":"intermediate/pbr-notes.md","filePath":"intermediate/pbr-notes.md","lastUpdated":1731720800000}'),i={name:"intermediate/pbr-notes.md"};function o(l,r,d,c,p,m){return a(),s("div",null,r[0]||(r[0]=[e("h1",{id:"sources",tabindex:"-1"},[n("Sources "),e("a",{class:"header-anchor",href:"#sources","aria-label":'Permalink to "Sources"'},"​")],-1),e("ul",null,[e("li",null,[e("a",{href:"https://www.scratchapixel.com/lessons/3d-basic-rendering/introduction-to-shading/diffuse-lambertian-shading",target:"_blank",rel:"noreferrer"},"https://www.scratchapixel.com/lessons/3d-basic-rendering/introduction-to-shading/diffuse-lambertian-shading")]),e("li",null,[e("a",{href:"http://jimmiejohnsson84.me/pages/rendering_pbr.html",target:"_blank",rel:"noreferrer"},"http://jimmiejohnsson84.me/pages/rendering_pbr.html")])],-1)]))}const f=t(i,[["render",o]]);export{u as __pageData,f as default};
diff --git a/assets/intermediate_tutorial10-lighting_index.md.DFm71_AX.js b/assets/intermediate_tutorial10-lighting_index.md.BW0w6Uav.js
similarity index 99%
rename from assets/intermediate_tutorial10-lighting_index.md.DFm71_AX.js
rename to assets/intermediate_tutorial10-lighting_index.md.BW0w6Uav.js
index 52133535f..7b4d1fe97 100644
--- a/assets/intermediate_tutorial10-lighting_index.md.DFm71_AX.js
+++ b/assets/intermediate_tutorial10-lighting_index.md.BW0w6Uav.js
@@ -1,4 +1,4 @@
-import{_ as p,c as l,a1 as k,G as i,B as a,o as t}from"./chunks/framework.DdYVMT1V.js";const e="/learn-wgpu-zh/assets/light-in-scene.nRMlcfDv.png",r="/learn-wgpu-zh/assets/ambient_lighting.BjPkN8pd.png",E="/learn-wgpu-zh/assets/normal_diagram.D92RsFVZ.png",d="/learn-wgpu-zh/assets/ambient_diffuse_wrong.BrpkwhHU.png",g="/learn-wgpu-zh/assets/diffuse_wrong.D5w5No9I.png",y="/learn-wgpu-zh/assets/normal_not_rotated.Bf9uTm-X.png",F="/learn-wgpu-zh/assets/diffuse_right.tzVN9tea.png",c="/learn-wgpu-zh/assets/ambient_diffuse_lighting.Cp3xjHBT.png",b="/learn-wgpu-zh/assets/normal-scale-issue.Cj925Vj8.png",u="/learn-wgpu-zh/assets/specular_diagram.Cr8bS0y4.png",o="/learn-wgpu-zh/assets/ambient_diffuse_specular_lighting.DmdSiDNr.png",m="/learn-wgpu-zh/assets/specular_lighting.BiMXxumT.png",C="/learn-wgpu-zh/assets/half_dir.BrIVpv9H.png",S=JSON.parse('{"title":"光照","description":"","frontmatter":{},"headers":[],"relativePath":"intermediate/tutorial10-lighting/index.md","filePath":"intermediate/tutorial10-lighting/index.md","lastUpdated":1730902479000}'),D={name:"intermediate/tutorial10-lighting/index.md"};function A(B,s,_,f,v,w){const n=a("WasmExample"),h=a("AutoGithubLink");return t(),l("div",null,[s[0]||(s[0]=k(`
光照 ​
虽然我们的场景是 3D 的，但它们看起来像是平的，对象表面缺乏现实光照环境中的明暗变化，所以无法体现模型的三维特性。这是因为我们的模型没有考虑光线和对象表面之间的相互作用，无论如何摆放都会保持着相同的着色。
如果想修正这一点，就需要在我们的场景中添加光照（Lighting）。
在现实世界中，光源发出的光子会四处反射，最后进入我们的眼睛。 当观察对象上的一点时，我们所看到的颜色取决于多个光源和多个反射表面之间的多次相互作用。
在计算机图形学领域，为单个光子建模的计算成本极高。一个 100 瓦的灯泡每秒钟发出大约 3.27×10^20 个光子，再试想一下太阳每秒发出的光子的数量级。为了解决这个问题，我们要用数学来 “作弊”（也就是模拟。严格来说，这不是作弊，计算机图形学里有这么一句名言："If it looks right, it is right.", 意思就是，如果它看起来是对的，那么它就是对的）。
我们来看看计算机图形学里常用的几个光照模型。
光线/路径追踪 ​
光线/路径追踪（Ray/Path tracing）以虛拟摄像机模型为基础，但是对于每条与某个三角形相交的投影线，在计算光源对交点处明暗值的直接贡献之前，还要确定是否有一个或者多个光源能够照射到这个交点。
它是最接近光的真实工作方式的模型，所以我觉得必须提到它。但这是一个高级话题，我们不会在这里深入讨论。
Blinn-Phong 反射模型 ​
对于大多数实时（real-time）应用来说，光线/路径追踪的计算成本十在太高了（尽管这种情况已经开始改变），所以通常使用一种更有效的，精度较低的 Phong 反射模型 来解决光照问题。它考虑了光线与材质的 3 种相互作用：环境光反射、漫反射和镜面反射。我们将学习 Blinn-Phong 反射模型，它能加速镜面反射的计算。
在开始学习之前，需要在我们的场景中添加一个光源：
rust
// lib.rs
+import{_ as p,C as i,o as l,c as k,a1 as t,G as a}from"./chunks/framework.DyadSNS9.js";const e="/learn-wgpu-zh/assets/light-in-scene.nRMlcfDv.png",r="/learn-wgpu-zh/assets/ambient_lighting.BjPkN8pd.png",E="/learn-wgpu-zh/assets/normal_diagram.D92RsFVZ.png",d="/learn-wgpu-zh/assets/ambient_diffuse_wrong.BrpkwhHU.png",g="/learn-wgpu-zh/assets/diffuse_wrong.D5w5No9I.png",y="/learn-wgpu-zh/assets/normal_not_rotated.Bf9uTm-X.png",F="/learn-wgpu-zh/assets/diffuse_right.tzVN9tea.png",c="/learn-wgpu-zh/assets/ambient_diffuse_lighting.Cp3xjHBT.png",b="/learn-wgpu-zh/assets/normal-scale-issue.Cj925Vj8.png",u="/learn-wgpu-zh/assets/specular_diagram.Cr8bS0y4.png",o="/learn-wgpu-zh/assets/ambient_diffuse_specular_lighting.DmdSiDNr.png",m="/learn-wgpu-zh/assets/specular_lighting.BiMXxumT.png",C="/learn-wgpu-zh/assets/half_dir.BrIVpv9H.png",S=JSON.parse('{"title":"光照","description":"","frontmatter":{},"headers":[],"relativePath":"intermediate/tutorial10-lighting/index.md","filePath":"intermediate/tutorial10-lighting/index.md","lastUpdated":1731720800000}'),D={name:"intermediate/tutorial10-lighting/index.md"};function A(B,s,_,f,v,w){const n=i("WasmExample"),h=i("AutoGithubLink");return l(),k("div",null,[s[0]||(s[0]=t(`
光照 ​
虽然我们的场景是 3D 的，但它们看起来像是平的，对象表面缺乏现实光照环境中的明暗变化，所以无法体现模型的三维特性。这是因为我们的模型没有考虑光线和对象表面之间的相互作用，无论如何摆放都会保持着相同的着色。
如果想修正这一点，就需要在我们的场景中添加光照（Lighting）。
在现实世界中，光源发出的光子会四处反射，最后进入我们的眼睛。 当观察对象上的一点时，我们所看到的颜色取决于多个光源和多个反射表面之间的多次相互作用。
在计算机图形学领域，为单个光子建模的计算成本极高。一个 100 瓦的灯泡每秒钟发出大约 3.27×10^20 个光子，再试想一下太阳每秒发出的光子的数量级。为了解决这个问题，我们要用数学来 “作弊”（也就是模拟。严格来说，这不是作弊，计算机图形学里有这么一句名言："If it looks right, it is right.", 意思就是，如果它看起来是对的，那么它就是对的）。
我们来看看计算机图形学里常用的几个光照模型。
光线/路径追踪 ​
光线/路径追踪（Ray/Path tracing）以虛拟摄像机模型为基础，但是对于每条与某个三角形相交的投影线，在计算光源对交点处明暗值的直接贡献之前，还要确定是否有一个或者多个光源能够照射到这个交点。
它是最接近光的真实工作方式的模型，所以我觉得必须提到它。但这是一个高级话题，我们不会在这里深入讨论。
Blinn-Phong 反射模型 ​
对于大多数实时（real-time）应用来说，光线/路径追踪的计算成本十在太高了（尽管这种情况已经开始改变），所以通常使用一种更有效的，精度较低的 Phong 反射模型 来解决光照问题。它考虑了光线与材质的 3 种相互作用：环境光反射、漫反射和镜面反射。我们将学习 Blinn-Phong 反射模型，它能加速镜面反射的计算。
在开始学习之前，需要在我们的场景中添加一个光源：
rust
// lib.rs
 #[repr(C)]
 #[derive(Debug, Copy, Clone, bytemuck::Pod, bytemuck::Zeroable)]
 struct LightUniform {
@@ -574,4 +574,4 @@ import{_ as p,c as l,a1 as k,G as i,B as a,o as t}from"./chunks/framework.DdYVMT
 let specular_color = specular_strength * light.color;
最后，将高光颜色合成到片元输出结果中：
rust
let result = (ambient_color + diffuse_color + specular_color) * object_color.xyz;
完成全部代码之后，就能得到如下渲染效果：
./ambient_diffuse_specular_lighting.png
假如只查看镜面反射得到的高光颜色 specular_color 本身，渲染效果如下：
./specular_lighting.png
半程向量 ​
所谓的半程向量（Halfway Vector）也是一个单位向量，它正好在视图方向和光源方向的中间。
到目前为止，我们实际上只实现了 Blinn-Phong 的 Phong 部分。Phong 反射模型很好用，但在某些情况下会产生 bug。 Blinn-Phong 的 Blinn 部分来自于这样的事实：如果把 view_dir 和 light_dir 加在一起，对结果进行归一化处理后得到一个半程向量，然后再与法向量 normal 求点积，就会得到大致相同的渲染结果，且不会有使用反射方向 reflect_dir 可能产生的问题。
rust
let view_dir = normalize(camera.view_pos.xyz - in.world_position);
 let half_dir = normalize(view_dir + light_dir);
 
-let specular_strength = pow(max(dot(in.world_normal, half_dir), 0.0), 32.0);
在我们这个场景下很难看出有何不同，但以下就是改进了光照计算后的渲染效果：
./half_dir.png
',119)),i(n,{example:"tutorial10_lighting"}),i(h)])}const V=p(D,[["render",A]]);export{S as __pageData,V as default};
+let specular_strength = pow(max(dot(in.world_normal, half_dir), 0.0), 32.0);
在我们这个场景下很难看出有何不同，但以下就是改进了光照计算后的渲染效果：
./half_dir.png
',119)),a(n,{example:"tutorial10_lighting"}),a(h)])}const V=p(D,[["render",A]]);export{S as __pageData,V as default};
diff --git a/assets/intermediate_tutorial10-lighting_index.md.DFm71_AX.lean.js b/assets/intermediate_tutorial10-lighting_index.md.BW0w6Uav.lean.js
similarity index 99%
rename from assets/intermediate_tutorial10-lighting_index.md.DFm71_AX.lean.js
rename to assets/intermediate_tutorial10-lighting_index.md.BW0w6Uav.lean.js
index 52133535f..7b4d1fe97 100644
--- a/assets/intermediate_tutorial10-lighting_index.md.DFm71_AX.lean.js
+++ b/assets/intermediate_tutorial10-lighting_index.md.BW0w6Uav.lean.js
@@ -1,4 +1,4 @@
-import{_ as p,c as l,a1 as k,G as i,B as a,o as t}from"./chunks/framework.DdYVMT1V.js";const e="/learn-wgpu-zh/assets/light-in-scene.nRMlcfDv.png",r="/learn-wgpu-zh/assets/ambient_lighting.BjPkN8pd.png",E="/learn-wgpu-zh/assets/normal_diagram.D92RsFVZ.png",d="/learn-wgpu-zh/assets/ambient_diffuse_wrong.BrpkwhHU.png",g="/learn-wgpu-zh/assets/diffuse_wrong.D5w5No9I.png",y="/learn-wgpu-zh/assets/normal_not_rotated.Bf9uTm-X.png",F="/learn-wgpu-zh/assets/diffuse_right.tzVN9tea.png",c="/learn-wgpu-zh/assets/ambient_diffuse_lighting.Cp3xjHBT.png",b="/learn-wgpu-zh/assets/normal-scale-issue.Cj925Vj8.png",u="/learn-wgpu-zh/assets/specular_diagram.Cr8bS0y4.png",o="/learn-wgpu-zh/assets/ambient_diffuse_specular_lighting.DmdSiDNr.png",m="/learn-wgpu-zh/assets/specular_lighting.BiMXxumT.png",C="/learn-wgpu-zh/assets/half_dir.BrIVpv9H.png",S=JSON.parse('{"title":"光照","description":"","frontmatter":{},"headers":[],"relativePath":"intermediate/tutorial10-lighting/index.md","filePath":"intermediate/tutorial10-lighting/index.md","lastUpdated":1730902479000}'),D={name:"intermediate/tutorial10-lighting/index.md"};function A(B,s,_,f,v,w){const n=a("WasmExample"),h=a("AutoGithubLink");return t(),l("div",null,[s[0]||(s[0]=k(`
光照 ​
虽然我们的场景是 3D 的，但它们看起来像是平的，对象表面缺乏现实光照环境中的明暗变化，所以无法体现模型的三维特性。这是因为我们的模型没有考虑光线和对象表面之间的相互作用，无论如何摆放都会保持着相同的着色。
如果想修正这一点，就需要在我们的场景中添加光照（Lighting）。
在现实世界中，光源发出的光子会四处反射，最后进入我们的眼睛。 当观察对象上的一点时，我们所看到的颜色取决于多个光源和多个反射表面之间的多次相互作用。
在计算机图形学领域，为单个光子建模的计算成本极高。一个 100 瓦的灯泡每秒钟发出大约 3.27×10^20 个光子，再试想一下太阳每秒发出的光子的数量级。为了解决这个问题，我们要用数学来 “作弊”（也就是模拟。严格来说，这不是作弊，计算机图形学里有这么一句名言："If it looks right, it is right.", 意思就是，如果它看起来是对的，那么它就是对的）。
我们来看看计算机图形学里常用的几个光照模型。
光线/路径追踪 ​
光线/路径追踪（Ray/Path tracing）以虛拟摄像机模型为基础，但是对于每条与某个三角形相交的投影线，在计算光源对交点处明暗值的直接贡献之前，还要确定是否有一个或者多个光源能够照射到这个交点。
它是最接近光的真实工作方式的模型，所以我觉得必须提到它。但这是一个高级话题，我们不会在这里深入讨论。
Blinn-Phong 反射模型 ​
对于大多数实时（real-time）应用来说，光线/路径追踪的计算成本十在太高了（尽管这种情况已经开始改变），所以通常使用一种更有效的，精度较低的 Phong 反射模型 来解决光照问题。它考虑了光线与材质的 3 种相互作用：环境光反射、漫反射和镜面反射。我们将学习 Blinn-Phong 反射模型，它能加速镜面反射的计算。
在开始学习之前，需要在我们的场景中添加一个光源：
rust
// lib.rs
+import{_ as p,C as i,o as l,c as k,a1 as t,G as a}from"./chunks/framework.DyadSNS9.js";const e="/learn-wgpu-zh/assets/light-in-scene.nRMlcfDv.png",r="/learn-wgpu-zh/assets/ambient_lighting.BjPkN8pd.png",E="/learn-wgpu-zh/assets/normal_diagram.D92RsFVZ.png",d="/learn-wgpu-zh/assets/ambient_diffuse_wrong.BrpkwhHU.png",g="/learn-wgpu-zh/assets/diffuse_wrong.D5w5No9I.png",y="/learn-wgpu-zh/assets/normal_not_rotated.Bf9uTm-X.png",F="/learn-wgpu-zh/assets/diffuse_right.tzVN9tea.png",c="/learn-wgpu-zh/assets/ambient_diffuse_lighting.Cp3xjHBT.png",b="/learn-wgpu-zh/assets/normal-scale-issue.Cj925Vj8.png",u="/learn-wgpu-zh/assets/specular_diagram.Cr8bS0y4.png",o="/learn-wgpu-zh/assets/ambient_diffuse_specular_lighting.DmdSiDNr.png",m="/learn-wgpu-zh/assets/specular_lighting.BiMXxumT.png",C="/learn-wgpu-zh/assets/half_dir.BrIVpv9H.png",S=JSON.parse('{"title":"光照","description":"","frontmatter":{},"headers":[],"relativePath":"intermediate/tutorial10-lighting/index.md","filePath":"intermediate/tutorial10-lighting/index.md","lastUpdated":1731720800000}'),D={name:"intermediate/tutorial10-lighting/index.md"};function A(B,s,_,f,v,w){const n=i("WasmExample"),h=i("AutoGithubLink");return l(),k("div",null,[s[0]||(s[0]=t(`
光照 ​
虽然我们的场景是 3D 的，但它们看起来像是平的，对象表面缺乏现实光照环境中的明暗变化，所以无法体现模型的三维特性。这是因为我们的模型没有考虑光线和对象表面之间的相互作用，无论如何摆放都会保持着相同的着色。
如果想修正这一点，就需要在我们的场景中添加光照（Lighting）。
在现实世界中，光源发出的光子会四处反射，最后进入我们的眼睛。 当观察对象上的一点时，我们所看到的颜色取决于多个光源和多个反射表面之间的多次相互作用。
在计算机图形学领域，为单个光子建模的计算成本极高。一个 100 瓦的灯泡每秒钟发出大约 3.27×10^20 个光子，再试想一下太阳每秒发出的光子的数量级。为了解决这个问题，我们要用数学来 “作弊”（也就是模拟。严格来说，这不是作弊，计算机图形学里有这么一句名言："If it looks right, it is right.", 意思就是，如果它看起来是对的，那么它就是对的）。
我们来看看计算机图形学里常用的几个光照模型。
光线/路径追踪 ​
光线/路径追踪（Ray/Path tracing）以虛拟摄像机模型为基础，但是对于每条与某个三角形相交的投影线，在计算光源对交点处明暗值的直接贡献之前，还要确定是否有一个或者多个光源能够照射到这个交点。
它是最接近光的真实工作方式的模型，所以我觉得必须提到它。但这是一个高级话题，我们不会在这里深入讨论。
Blinn-Phong 反射模型 ​
对于大多数实时（real-time）应用来说，光线/路径追踪的计算成本十在太高了（尽管这种情况已经开始改变），所以通常使用一种更有效的，精度较低的 Phong 反射模型 来解决光照问题。它考虑了光线与材质的 3 种相互作用：环境光反射、漫反射和镜面反射。我们将学习 Blinn-Phong 反射模型，它能加速镜面反射的计算。
在开始学习之前，需要在我们的场景中添加一个光源：
rust
// lib.rs
 #[repr(C)]
 #[derive(Debug, Copy, Clone, bytemuck::Pod, bytemuck::Zeroable)]
 struct LightUniform {
@@ -574,4 +574,4 @@ import{_ as p,c as l,a1 as k,G as i,B as a,o as t}from"./chunks/framework.DdYVMT
 let specular_color = specular_strength * light.color;
最后，将高光颜色合成到片元输出结果中：
rust
let result = (ambient_color + diffuse_color + specular_color) * object_color.xyz;
完成全部代码之后，就能得到如下渲染效果：
./ambient_diffuse_specular_lighting.png
假如只查看镜面反射得到的高光颜色 specular_color 本身，渲染效果如下：
./specular_lighting.png
半程向量 ​
所谓的半程向量（Halfway Vector）也是一个单位向量，它正好在视图方向和光源方向的中间。
到目前为止，我们实际上只实现了 Blinn-Phong 的 Phong 部分。Phong 反射模型很好用，但在某些情况下会产生 bug。 Blinn-Phong 的 Blinn 部分来自于这样的事实：如果把 view_dir 和 light_dir 加在一起，对结果进行归一化处理后得到一个半程向量，然后再与法向量 normal 求点积，就会得到大致相同的渲染结果，且不会有使用反射方向 reflect_dir 可能产生的问题。
rust
let view_dir = normalize(camera.view_pos.xyz - in.world_position);
 let half_dir = normalize(view_dir + light_dir);
 
-let specular_strength = pow(max(dot(in.world_normal, half_dir), 0.0), 32.0);
在我们这个场景下很难看出有何不同，但以下就是改进了光照计算后的渲染效果：
./half_dir.png
',119)),i(n,{example:"tutorial10_lighting"}),i(h)])}const V=p(D,[["render",A]]);export{S as __pageData,V as default};
+let specular_strength = pow(max(dot(in.world_normal, half_dir), 0.0), 32.0);
在我们这个场景下很难看出有何不同，但以下就是改进了光照计算后的渲染效果：
./half_dir.png
',119)),a(n,{example:"tutorial10_lighting"}),a(h)])}const V=p(D,[["render",A]]);export{S as __pageData,V as default};
diff --git a/assets/intermediate_tutorial11-normals_index.md.BX26UKPm.js b/assets/intermediate_tutorial11-normals_index.md.BgIYXHLp.js
similarity index 99%
rename from assets/intermediate_tutorial11-normals_index.md.BX26UKPm.js
rename to assets/intermediate_tutorial11-normals_index.md.BgIYXHLp.js
index 79c294773..daa7c8092 100644
--- a/assets/intermediate_tutorial11-normals_index.md.BX26UKPm.js
+++ b/assets/intermediate_tutorial11-normals_index.md.BgIYXHLp.js
@@ -1,4 +1,4 @@
-import{_ as l,c as k,a1 as p,G as i,B as a,o as t}from"./chunks/framework.DdYVMT1V.js";const e="/learn-wgpu-zh/assets/cube-normal.CiOKm_IM.png",r="/learn-wgpu-zh/assets/normal_mapping_wrong.DWVzspon.png",E="/learn-wgpu-zh/assets/ambient_diffuse_specular_lighting.DmdSiDNr.png",d="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAGQCAYAAACAvzbMAAABg2lDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV9TS0UqDmaQ4pChOlkQFXHUKhShQqgVWnUwufQLmrQkKS6OgmvBwY/FqoOLs64OroIg+AHi5Oik6CIl/i8ptIjx4Lgf7+497t4BQrPCdKtnHNAN20wnE1I2tyqFXxFCECKigMKs2pwsp+A7vu4R4OtdnGf5n/tz9Gt5iwEBiXiW1UybeIN4etOucd4nFllJ0YjPicdMuiDxI9dVj984F10WeKZoZtLzxCKxVOxitYtZydSJp4hjmm5QvpD1WOO8xVmv1Fn7nvyFkbyxssx1msNIYhFLkCFBRR1lVGAjTqtBioU07Sd8/FHXL5NLJVcZjBwLqEKH4vrB/+B3t1ZhcsJLiiSA0IvjfIwA4V2g1XCc72PHaZ0AwWfgyuj4q01g5pP0RkeLHQED28DFdUdT94DLHWDoqaaYiisFaQqFAvB+Rt+UAwZvgb41r7f2Pk4fgAx1lboBDg6B0SJlr/u8u7e7t3/PtPv7AfEscnMV1+LuAAAABmJLR0QAAACSAP8q1jhsAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH5AUDFCAS5kaN7AAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAApfSURBVHja7d1PbhNnHMfh14YjINTsuEXUayCx8BFKRGRlWXVZdYkiV0mP4EUkroFyi+yool4huCsH1409M55/7++d51khSAMYaT79vjOJZ2m12SQAaGjuJQBAQAAQEAAEBAABAQABAUBAABAQAAQEAAEBAAEBQEAAEBAABAQAAQEAAQFAQAAQEAAEBAABAQABAUBAABAQAAQEAAEBAAEBQEAAEBAABAQAAQEAAQFAQAAQEAAEBAABAQABAUBAAMjXay9BbN8uZ88/PlttvCDAYGZptXHVCR6OfUICCAiN4yEkwFDcAxEaAAERBQABQXAAAUFEAAEhbAhEBBAQ8RARQEAY/sIvIoCAiIeIAALC8Bd6EQEERDxEBBAQhr+wiwggIOIhIoCAACAgBFkCVgggIAAICAACQg1jvgGUN58CBAQAAbFCrA8gX94TPWN9PxklHICAiItQAINzhAWAgAAgIAAICAACAgACAoCAACAgAAgIAAICAAICgIAAICAACAgAAgIAAgKAgAAgIAAICAACAgACAoCAACAgAAgIAAICAAICgIAAkJXXXgKA8S0eb59/vH77UUAAqB+O/Z/LPSSOsAAyisf+r1d9jIAAEC4kAgKQ4fqIEBIBAZhAfAQEgGzWiIAACImAAAiJgAAUra+v8RgyJAICUOgiERCAAi/uQ1zg+/49fCsTgID/99/kz9LXcZmAAASNw9gEBKDwQPS1QgQEEAcEBBAIBARAHDriJjogDlgggEAQe30ICCAOBVvOn9LaAgEEgqbx6JuAgDgw8kX++vurXj7v+ZtPAgIIhBWQ3+8nIJTv179//PiPn8SBkBfrpn+evteHgDCdcOz/XICQCMR0ArGcP7U6xhojHgLCtOKx/+sjRkQcrIc+/i5DhUNAoMc1IhACUXo8BIRpro+Wa0QcxKGt8zef0v0/f/7v71X3GGvscAgIHIiIQIhD3/bjEWl1CAgciMhi+cXrIBCjvj7HVkhO8UgppVlabTb+2eL5djmr/bFnq+n8E2/Xw/r6fbvPIyTiMLLdkOQWDgERkLBxqNI2HiIiELnKKR4pOcIiWByGtL5+P5mIiINwCAiTD0RX62P/80UPiUCIh4BgPVgj4iAcAoJA1FkROV20x4qIQIhHrtxED6qzm+g7X3TX9uLY9sJ/7Pipzufr+viqzZ9FHCg9HhbIhBfESxfbU8/7u/hcVRf/qDe0BYISwyEgE9blxbrUC3+dv5M4MOV4pJTS3D8duQet6cdZFkQKR9R4CIiLdauPi3jhB6ujO46woKH7qzsvApMOh4CQjcXyS62Vsr2Xcuj4aO2lRDwG5Qhrghfrrj6uy89Vx3L+dDAe558/WB+IhwVCHWerTa2vBbn67SarP/ehACyv7o5GYOwLt3AgHAJCqj4yarIYqj5Xkwvv9mN3QyIciEe+fCV65BA83qbPv1+0Wh9Nvnq86tHVMS/8XR9hCQfCISBFx2PXbkhOObaK/nUNXQVEOBCP+hxhFaIqGr7wTTgQDgHh2cPFj9Xx7uZm0vG4r7gJLxyIh4CQUvr5wyw9HIjJsZAgHAhHl9wDCRiPKvsRmdLxVdUKEQ7EwwKBo4HYD4lwIB4WiPVR0+4KcQMdhKMPvpUJgHicxBEWgHBYIKX7elfvtNHxFYiHBQIgHBYIw6wQXwcC4mGBUBmJul+JDoiHgGBtgHBkwxFWMPvfhRcQDwsEQDgsEPLgEV4QDwsEQDgsEADxsEAYmcd4QTwEhJPDsf9zQgLCMRRHWIEsHm9fjEdVXEA8sEAAhCMb3lAqkCZvKHX918oLhnhggQAIR37cAwHEAwEpXd0nrDyJxVTCIR4CAmB1CAh92X4X3qp1YX0gHgzFTfSAvKEUwoGA0ElI9vkuvIgHAgIIB9lyDwQQDywQQDiwQADxQEBoa/sIL4gHOXGEBQgHFgge4UU8sEAA4UBA2Gryfh5f77xNC+KBgAhHg3C89N881PxvfDsThIMheUfCDOPRlncjRDwQEAFpHZHlL5fCgnggIOJhoSAc5MNjvBO0u0pAPDiVm+iAcGCB5CbnR3GtEMQDCwQQDiwQKwTEAwuEzHkSC+HAArFCQDwQEKwPxIM4HGENuEJy/cJCEA4skAARsT4QDywQwhEPhAMLxAoRD8QDCwQQDiwQMl0h1gfigYAgHogH2XCENeIK8VgvwoEFwskRsT4QDywQsiIeCAcWiBUiHogHFgggHFggZLpCrA/EAwEREfFAPMiaIywQDrBAprxCrA/EAwsE8UA4sEDof4WIB+KBBUJKKaXF42168DIgHFggnOLdzU2nH4d4gICIyH9+fTl/8kKJB4zGEVaAiDxcXFgdCAcCQvdrBPEAAQGEgzDcAwHxAAskusXjrRcB4cACAcQDC4QMeYRXOMACAcQDAQHEg+lwhAXCARZIZJ7AEg+wQADhwAIhT57AEg+wQEA4wAIBxAMBAcQDKjnCAuEACyQqj/CKB1ggIBxggZAnj/CKB1ggIBxggYB4gIAA4gG1OMIC4QALJCKP8IoHWCAgHGCBkCeP8IoHWCAgHGCBgHiABQLCAVggIB4gIMXyCK94QGSOsBAOwAIpmUd4xQMsEBAOsEBAPMACAeEALBAQDxCQYnmEVzwgOkdYCAdggZTKI7ziARYICAdYICAeYIGAcAAWCOIBCEixPMIrHlACR1gIB2CBlMgjvOIBFggIB1ggIB6ABYJwABYI4gFYIMXyCK9wgAUC4gECQp5Kf4RXPCA2R1gIB2CBIB6ABYJwABYI4iEeYIHQytQe4RUOsEBAPAABiSLyI7ziAdPgCAvhACwQxAOwQBAOwAJBPAALhJOV9AivcAAWCOIBCEhJcn2EVzyAXY6wWjh0LLV++9HqAASE+uGo++viAQiIeBRLOAABCej6+6vnH49xP0Q8gDpmabXZeBnirI8+gyIcQBOewgq4TnYXingAY3GEFTgkXawR4QAskAF4PBdAQIpZIeIBCIgVMtjqEA9AQLA6gNF4jPdEkR7pFQ7AAslIlKMs8QAsEEuk0foQDsACQTwAASnR0EdZ4gHkwhFWR/o+yhIOwAJBPAALhP5XyLF4CAcgICJidQDh+G68GbI6gAjcA+lY26eyxAOIwhFWT5oeZTmyAiwQOlkiu+EQD0BAaLQ+hAMQECvE6gCK4x7IAI7dD9ldH6IBCAiVISnt/dUBAQGAWtwDAUBAABAQAAQEAAEBAAEBQEAAEBAABAQAAQEAAQFAQAAQEAAEBAABAQABAUBAABAQAAQEAAEBAAEBQEAAEBAABAQAAQEAAQFAQAAQEAAEBAABAQABAUBAABAQAAQEAAEBAAEBQEAAEBAABAQABAQAAQFAQAAQEAAEBAAEBAABAUBAABAQAAQEAAQEAAEBQEAAEBAABAQABAQAAQFAQAAQEAAEBAAEBAABAUBAABAQAAQEAAQEAAEBQEAAEBAABAQABAQAAQFAQAAQEAAExEsAgIAAICAACAgAAgIAAgKAgAAgIAAICAACAgACAoCAACAgAAgIAAICAAICgIAAICAACAgAU/EvfiluCemVcXgAAAAASUVORK5CYII=",g="/learn-wgpu-zh/assets/normal_mapping_correct.QoeY9fn8.png",y="/learn-wgpu-zh/assets/no_srgb.BPN082ml.png",F="/learn-wgpu-zh/assets/debug_material.CSduOHVl.png",B=JSON.parse('{"title":"法线映射","description":"","frontmatter":{},"headers":[],"relativePath":"intermediate/tutorial11-normals/index.md","filePath":"intermediate/tutorial11-normals/index.md","lastUpdated":1730902479000}'),A={name:"intermediate/tutorial11-normals/index.md"};function c(b,s,u,m,D,o){const n=a("WasmExample"),h=a("AutoGithubLink");return t(),k("div",null,[s[0]||(s[0]=p('
法线映射 ​
添加光照后，我们的场景已经看起来很不错了。不过，对象表面还缺少实物的那种凹凸细节。如果使用的纹理是光滑的就不是问题，但是砖块纹理应该是比较粗糙的。 我们可以给模型添加更多的三角形来雕刻出表面的凹凸细节，但这将使得顶点数据倍增而渲染变慢，而且也很难知道在哪里添加新的三角形。这，就是法线映射（Normal Mapping）的用武之地了。
法线映射也叫凹凸映射（Bump Mapping），是一种纹理映射技术，它不用增加模型的几何复杂度就能够模拟具有复杂凹凸细节的表面。与简单的纹理映射不同，当绘制对象的表面时，法线映射技术通过扰动表面的法向量来改变它的形状，使得着色处理后的颜色能反映出表面几何特性的变化。
还记得在实例化绘制教程中，我们尝试了在纹理中存储实例数据吗？法线贴图（Normal Map）就是存储着法向量数据的纹理！除了顶点法向量外，我们还将在光照计算中使用法线贴图中的法向量。
我们的砖块纹理对应的法线贴图（也就是法线纹理）长这样：
./cube-normal.png
纹理的 r、g、b 分量对应于法向量的 x、y 和 z 坐标分量。所有的 z 值都应该是正的，这就是为什么法线贴图有一个蓝色的色调。
我们来修改 model.rs 中的材质 Material 结构体，新增一个法线纹理 normal_texture 字段：
rust
pub struct Material {
+import{_ as l,C as i,o as k,c as p,a1 as t,G as a}from"./chunks/framework.DyadSNS9.js";const e="/learn-wgpu-zh/assets/cube-normal.CiOKm_IM.png",r="/learn-wgpu-zh/assets/normal_mapping_wrong.DWVzspon.png",E="/learn-wgpu-zh/assets/ambient_diffuse_specular_lighting.DmdSiDNr.png",d="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAGQCAYAAACAvzbMAAABg2lDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV9TS0UqDmaQ4pChOlkQFXHUKhShQqgVWnUwufQLmrQkKS6OgmvBwY/FqoOLs64OroIg+AHi5Oik6CIl/i8ptIjx4Lgf7+497t4BQrPCdKtnHNAN20wnE1I2tyqFXxFCECKigMKs2pwsp+A7vu4R4OtdnGf5n/tz9Gt5iwEBiXiW1UybeIN4etOucd4nFllJ0YjPicdMuiDxI9dVj984F10WeKZoZtLzxCKxVOxitYtZydSJp4hjmm5QvpD1WOO8xVmv1Fn7nvyFkbyxssx1msNIYhFLkCFBRR1lVGAjTqtBioU07Sd8/FHXL5NLJVcZjBwLqEKH4vrB/+B3t1ZhcsJLiiSA0IvjfIwA4V2g1XCc72PHaZ0AwWfgyuj4q01g5pP0RkeLHQED28DFdUdT94DLHWDoqaaYiisFaQqFAvB+Rt+UAwZvgb41r7f2Pk4fgAx1lboBDg6B0SJlr/u8u7e7t3/PtPv7AfEscnMV1+LuAAAABmJLR0QAAACSAP8q1jhsAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH5AUDFCAS5kaN7AAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAApfSURBVHja7d1PbhNnHMfh14YjINTsuEXUayCx8BFKRGRlWXVZdYkiV0mP4EUkroFyi+yool4huCsH1409M55/7++d51khSAMYaT79vjOJZ2m12SQAaGjuJQBAQAAQEAAEBAABAQABAUBAABAQAAQEAAEBAAEBQEAAEBAABAQAAQEAAQFAQAAQEAAEBAABAQABAUBAABAQAAQEAAEBAAEBQEAAEBAABAQAAQEAAQFAQAAQEAAEBAABAQABAUBAAMjXay9BbN8uZ88/PlttvCDAYGZptXHVCR6OfUICCAiN4yEkwFDcAxEaAAERBQABQXAAAUFEAAEhbAhEBBAQ8RARQEAY/sIvIoCAiIeIAALC8Bd6EQEERDxEBBAQhr+wiwggIOIhIoCAACAgBFkCVgggIAAICAACQg1jvgGUN58CBAQAAbFCrA8gX94TPWN9PxklHICAiItQAINzhAWAgAAgIAAICAACAgACAoCAACAgAAgIAAICAAICgIAAICAACAgAAgIAAgKAgAAgIAAICAACAgACAoCAACAgAAgIAAICAAICgIAAkJXXXgKA8S0eb59/vH77UUAAqB+O/Z/LPSSOsAAyisf+r1d9jIAAEC4kAgKQ4fqIEBIBAZhAfAQEgGzWiIAACImAAAiJgAAUra+v8RgyJAICUOgiERCAAi/uQ1zg+/49fCsTgID/99/kz9LXcZmAAASNw9gEBKDwQPS1QgQEEAcEBBAIBARAHDriJjogDlgggEAQe30ICCAOBVvOn9LaAgEEgqbx6JuAgDgw8kX++vurXj7v+ZtPAgIIhBWQ3+8nIJTv179//PiPn8SBkBfrpn+evteHgDCdcOz/XICQCMR0ArGcP7U6xhojHgLCtOKx/+sjRkQcrIc+/i5DhUNAoMc1IhACUXo8BIRpro+Wa0QcxKGt8zef0v0/f/7v71X3GGvscAgIHIiIQIhD3/bjEWl1CAgciMhi+cXrIBCjvj7HVkhO8UgppVlabTb+2eL5djmr/bFnq+n8E2/Xw/r6fbvPIyTiMLLdkOQWDgERkLBxqNI2HiIiELnKKR4pOcIiWByGtL5+P5mIiINwCAiTD0RX62P/80UPiUCIh4BgPVgj4iAcAoJA1FkROV20x4qIQIhHrtxED6qzm+g7X3TX9uLY9sJ/7Pipzufr+viqzZ9FHCg9HhbIhBfESxfbU8/7u/hcVRf/qDe0BYISwyEgE9blxbrUC3+dv5M4MOV4pJTS3D8duQet6cdZFkQKR9R4CIiLdauPi3jhB6ujO46woKH7qzsvApMOh4CQjcXyS62Vsr2Xcuj4aO2lRDwG5Qhrghfrrj6uy89Vx3L+dDAe558/WB+IhwVCHWerTa2vBbn67SarP/ehACyv7o5GYOwLt3AgHAJCqj4yarIYqj5Xkwvv9mN3QyIciEe+fCV65BA83qbPv1+0Wh9Nvnq86tHVMS/8XR9hCQfCISBFx2PXbkhOObaK/nUNXQVEOBCP+hxhFaIqGr7wTTgQDgHh2cPFj9Xx7uZm0vG4r7gJLxyIh4CQUvr5wyw9HIjJsZAgHAhHl9wDCRiPKvsRmdLxVdUKEQ7EwwKBo4HYD4lwIB4WiPVR0+4KcQMdhKMPvpUJgHicxBEWgHBYIKX7elfvtNHxFYiHBQIgHBYIw6wQXwcC4mGBUBmJul+JDoiHgGBtgHBkwxFWMPvfhRcQDwsEQDgsEPLgEV4QDwsEQDgsEADxsEAYmcd4QTwEhJPDsf9zQgLCMRRHWIEsHm9fjEdVXEA8sEAAhCMb3lAqkCZvKHX918oLhnhggQAIR37cAwHEAwEpXd0nrDyJxVTCIR4CAmB1CAh92X4X3qp1YX0gHgzFTfSAvKEUwoGA0ElI9vkuvIgHAgIIB9lyDwQQDywQQDiwQADxQEBoa/sIL4gHOXGEBQgHFgge4UU8sEAA4UBA2Gryfh5f77xNC+KBgAhHg3C89N881PxvfDsThIMheUfCDOPRlncjRDwQEAFpHZHlL5fCgnggIOJhoSAc5MNjvBO0u0pAPDiVm+iAcGCB5CbnR3GtEMQDCwQQDiwQKwTEAwuEzHkSC+HAArFCQDwQEKwPxIM4HGENuEJy/cJCEA4skAARsT4QDywQwhEPhAMLxAoRD8QDCwQQDiwQMl0h1gfigYAgHogH2XCENeIK8VgvwoEFwskRsT4QDywQsiIeCAcWiBUiHogHFgggHFggZLpCrA/EAwEREfFAPMiaIywQDrBAprxCrA/EAwsE8UA4sEDof4WIB+KBBUJKKaXF42168DIgHFggnOLdzU2nH4d4gICIyH9+fTl/8kKJB4zGEVaAiDxcXFgdCAcCQvdrBPEAAQGEgzDcAwHxAAskusXjrRcB4cACAcQDC4QMeYRXOMACAcQDAQHEg+lwhAXCARZIZJ7AEg+wQADhwAIhT57AEg+wQEA4wAIBxAMBAcQDKjnCAuEACyQqj/CKB1ggIBxggZAnj/CKB1ggIBxggYB4gIAA4gG1OMIC4QALJCKP8IoHWCAgHGCBkCeP8IoHWCAgHGCBgHiABQLCAVggIB4gIMXyCK94QGSOsBAOwAIpmUd4xQMsEBAOsEBAPMACAeEALBAQDxCQYnmEVzwgOkdYCAdggZTKI7ziARYICAdYICAeYIGAcAAWCOIBCEixPMIrHlACR1gIB2CBlMgjvOIBFggIB1ggIB6ABYJwABYI4gFYIMXyCK9wgAUC4gECQp5Kf4RXPCA2R1gIB2CBIB6ABYJwABYI4iEeYIHQytQe4RUOsEBAPAABiSLyI7ziAdPgCAvhACwQxAOwQBAOwAJBPAALhJOV9AivcAAWCOIBCEhJcn2EVzyAXY6wWjh0LLV++9HqAASE+uGo++viAQiIeBRLOAABCej6+6vnH49xP0Q8gDpmabXZeBnirI8+gyIcQBOewgq4TnYXingAY3GEFTgkXawR4QAskAF4PBdAQIpZIeIBCIgVMtjqEA9AQLA6gNF4jPdEkR7pFQ7AAslIlKMs8QAsEEuk0foQDsACQTwAASnR0EdZ4gHkwhFWR/o+yhIOwAJBPAALhP5XyLF4CAcgICJidQDh+G68GbI6gAjcA+lY26eyxAOIwhFWT5oeZTmyAiwQOlkiu+EQD0BAaLQ+hAMQECvE6gCK4x7IAI7dD9ldH6IBCAiVISnt/dUBAQGAWtwDAUBAABAQAAQEAAEBAAEBQEAAEBAABAQAAQEAAQFAQAAQEAAEBAABAQABAUBAABAQAAQEAAEBAAEBQEAAEBAABAQAAQEAAQFAQAAQEAAEBAABAQABAUBAABAQAAQEAAEBAAEBQEAAEBAABAQABAQAAQFAQAAQEAAEBAAEBAABAUBAABAQAAQEAAQEAAEBQEAAEBAABAQABAQAAQFAQAAQEAAEBAAEBAABAUBAABAQAAQEAAQEAAEBQEAAEBAABAQABAQAAQFAQAAQEAAExEsAgIAAICAACAgAAgIAAgKAgAAgIAAICAACAgACAoCAACAgAAgIAAICAAICgIAAICAACAgAU/EvfiluCemVcXgAAAAASUVORK5CYII=",g="/learn-wgpu-zh/assets/normal_mapping_correct.QoeY9fn8.png",y="/learn-wgpu-zh/assets/no_srgb.BPN082ml.png",F="/learn-wgpu-zh/assets/debug_material.CSduOHVl.png",B=JSON.parse('{"title":"法线映射","description":"","frontmatter":{},"headers":[],"relativePath":"intermediate/tutorial11-normals/index.md","filePath":"intermediate/tutorial11-normals/index.md","lastUpdated":1731720800000}'),A={name:"intermediate/tutorial11-normals/index.md"};function c(b,s,u,m,D,o){const n=i("WasmExample"),h=i("AutoGithubLink");return k(),p("div",null,[s[0]||(s[0]=t('
法线映射 ​
添加光照后，我们的场景已经看起来很不错了。不过，对象表面还缺少实物的那种凹凸细节。如果使用的纹理是光滑的就不是问题，但是砖块纹理应该是比较粗糙的。 我们可以给模型添加更多的三角形来雕刻出表面的凹凸细节，但这将使得顶点数据倍增而渲染变慢，而且也很难知道在哪里添加新的三角形。这，就是法线映射（Normal Mapping）的用武之地了。
法线映射也叫凹凸映射（Bump Mapping），是一种纹理映射技术，它不用增加模型的几何复杂度就能够模拟具有复杂凹凸细节的表面。与简单的纹理映射不同，当绘制对象的表面时，法线映射技术通过扰动表面的法向量来改变它的形状，使得着色处理后的颜色能反映出表面几何特性的变化。
还记得在实例化绘制教程中，我们尝试了在纹理中存储实例数据吗？法线贴图（Normal Map）就是存储着法向量数据的纹理！除了顶点法向量外，我们还将在光照计算中使用法线贴图中的法向量。
我们的砖块纹理对应的法线贴图（也就是法线纹理）长这样：
./cube-normal.png
纹理的 r、g、b 分量对应于法向量的 x、y 和 z 坐标分量。所有的 z 值都应该是正的，这就是为什么法线贴图有一个蓝色的色调。
我们来修改 model.rs 中的材质 Material 结构体，新增一个法线纹理 normal_texture 字段：
rust
pub struct Material {
     pub name: String,
     pub diffuse_texture: texture::Texture,
     pub normal_texture: texture::Texture, // 更新!
@@ -429,4 +429,4 @@ import{_ as l,c as k,a1 as p,G as i,B as a,o as t}from"./chunks/framework.DdYVMT
     0..self.instances.len() as u32,
     &self.camera_bind_group,
     &self.light_bind_group,
-);
得到的渲染效果如下：
上面使用的纹理可以在 Github 源码库中找到。
',67)),i(n,{example:"tutorial11_normals"}),i(h)])}const _=l(A,[["render",c]]);export{B as __pageData,_ as default};
+);
得到的渲染效果如下：
上面使用的纹理可以在 Github 源码库中找到。
',67)),a(n,{example:"tutorial11_normals"}),a(h)])}const _=l(A,[["render",c]]);export{B as __pageData,_ as default};
diff --git a/assets/intermediate_tutorial11-normals_index.md.BX26UKPm.lean.js b/assets/intermediate_tutorial11-normals_index.md.BgIYXHLp.lean.js
similarity index 99%
rename from assets/intermediate_tutorial11-normals_index.md.BX26UKPm.lean.js
rename to assets/intermediate_tutorial11-normals_index.md.BgIYXHLp.lean.js
index 79c294773..daa7c8092 100644
--- a/assets/intermediate_tutorial11-normals_index.md.BX26UKPm.lean.js
+++ b/assets/intermediate_tutorial11-normals_index.md.BgIYXHLp.lean.js
@@ -1,4 +1,4 @@
-import{_ as l,c as k,a1 as p,G as i,B as a,o as t}from"./chunks/framework.DdYVMT1V.js";const e="/learn-wgpu-zh/assets/cube-normal.CiOKm_IM.png",r="/learn-wgpu-zh/assets/normal_mapping_wrong.DWVzspon.png",E="/learn-wgpu-zh/assets/ambient_diffuse_specular_lighting.DmdSiDNr.png",d="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAGQCAYAAACAvzbMAAABg2lDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV9TS0UqDmaQ4pChOlkQFXHUKhShQqgVWnUwufQLmrQkKS6OgmvBwY/FqoOLs64OroIg+AHi5Oik6CIl/i8ptIjx4Lgf7+497t4BQrPCdKtnHNAN20wnE1I2tyqFXxFCECKigMKs2pwsp+A7vu4R4OtdnGf5n/tz9Gt5iwEBiXiW1UybeIN4etOucd4nFllJ0YjPicdMuiDxI9dVj984F10WeKZoZtLzxCKxVOxitYtZydSJp4hjmm5QvpD1WOO8xVmv1Fn7nvyFkbyxssx1msNIYhFLkCFBRR1lVGAjTqtBioU07Sd8/FHXL5NLJVcZjBwLqEKH4vrB/+B3t1ZhcsJLiiSA0IvjfIwA4V2g1XCc72PHaZ0AwWfgyuj4q01g5pP0RkeLHQED28DFdUdT94DLHWDoqaaYiisFaQqFAvB+Rt+UAwZvgb41r7f2Pk4fgAx1lboBDg6B0SJlr/u8u7e7t3/PtPv7AfEscnMV1+LuAAAABmJLR0QAAACSAP8q1jhsAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH5AUDFCAS5kaN7AAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAApfSURBVHja7d1PbhNnHMfh14YjINTsuEXUayCx8BFKRGRlWXVZdYkiV0mP4EUkroFyi+yool4huCsH1409M55/7++d51khSAMYaT79vjOJZ2m12SQAaGjuJQBAQAAQEAAEBAABAQABAUBAABAQAAQEAAEBAAEBQEAAEBAABAQAAQEAAQFAQAAQEAAEBAABAQABAUBAABAQAAQEAAEBAAEBQEAAEBAABAQAAQEAAQFAQAAQEAAEBAABAQABAUBAAMjXay9BbN8uZ88/PlttvCDAYGZptXHVCR6OfUICCAiN4yEkwFDcAxEaAAERBQABQXAAAUFEAAEhbAhEBBAQ8RARQEAY/sIvIoCAiIeIAALC8Bd6EQEERDxEBBAQhr+wiwggIOIhIoCAACAgBFkCVgggIAAICAACQg1jvgGUN58CBAQAAbFCrA8gX94TPWN9PxklHICAiItQAINzhAWAgAAgIAAICAACAgACAoCAACAgAAgIAAICAAICgIAAICAACAgAAgIAAgKAgAAgIAAICAACAgACAoCAACAgAAgIAAICAAICgIAAkJXXXgKA8S0eb59/vH77UUAAqB+O/Z/LPSSOsAAyisf+r1d9jIAAEC4kAgKQ4fqIEBIBAZhAfAQEgGzWiIAACImAAAiJgAAUra+v8RgyJAICUOgiERCAAi/uQ1zg+/49fCsTgID/99/kz9LXcZmAAASNw9gEBKDwQPS1QgQEEAcEBBAIBARAHDriJjogDlgggEAQe30ICCAOBVvOn9LaAgEEgqbx6JuAgDgw8kX++vurXj7v+ZtPAgIIhBWQ3+8nIJTv179//PiPn8SBkBfrpn+evteHgDCdcOz/XICQCMR0ArGcP7U6xhojHgLCtOKx/+sjRkQcrIc+/i5DhUNAoMc1IhACUXo8BIRpro+Wa0QcxKGt8zef0v0/f/7v71X3GGvscAgIHIiIQIhD3/bjEWl1CAgciMhi+cXrIBCjvj7HVkhO8UgppVlabTb+2eL5djmr/bFnq+n8E2/Xw/r6fbvPIyTiMLLdkOQWDgERkLBxqNI2HiIiELnKKR4pOcIiWByGtL5+P5mIiINwCAiTD0RX62P/80UPiUCIh4BgPVgj4iAcAoJA1FkROV20x4qIQIhHrtxED6qzm+g7X3TX9uLY9sJ/7Pipzufr+viqzZ9FHCg9HhbIhBfESxfbU8/7u/hcVRf/qDe0BYISwyEgE9blxbrUC3+dv5M4MOV4pJTS3D8duQet6cdZFkQKR9R4CIiLdauPi3jhB6ujO46woKH7qzsvApMOh4CQjcXyS62Vsr2Xcuj4aO2lRDwG5Qhrghfrrj6uy89Vx3L+dDAe558/WB+IhwVCHWerTa2vBbn67SarP/ehACyv7o5GYOwLt3AgHAJCqj4yarIYqj5Xkwvv9mN3QyIciEe+fCV65BA83qbPv1+0Wh9Nvnq86tHVMS/8XR9hCQfCISBFx2PXbkhOObaK/nUNXQVEOBCP+hxhFaIqGr7wTTgQDgHh2cPFj9Xx7uZm0vG4r7gJLxyIh4CQUvr5wyw9HIjJsZAgHAhHl9wDCRiPKvsRmdLxVdUKEQ7EwwKBo4HYD4lwIB4WiPVR0+4KcQMdhKMPvpUJgHicxBEWgHBYIKX7elfvtNHxFYiHBQIgHBYIw6wQXwcC4mGBUBmJul+JDoiHgGBtgHBkwxFWMPvfhRcQDwsEQDgsEPLgEV4QDwsEQDgsEADxsEAYmcd4QTwEhJPDsf9zQgLCMRRHWIEsHm9fjEdVXEA8sEAAhCMb3lAqkCZvKHX918oLhnhggQAIR37cAwHEAwEpXd0nrDyJxVTCIR4CAmB1CAh92X4X3qp1YX0gHgzFTfSAvKEUwoGA0ElI9vkuvIgHAgIIB9lyDwQQDywQQDiwQADxQEBoa/sIL4gHOXGEBQgHFgge4UU8sEAA4UBA2Gryfh5f77xNC+KBgAhHg3C89N881PxvfDsThIMheUfCDOPRlncjRDwQEAFpHZHlL5fCgnggIOJhoSAc5MNjvBO0u0pAPDiVm+iAcGCB5CbnR3GtEMQDCwQQDiwQKwTEAwuEzHkSC+HAArFCQDwQEKwPxIM4HGENuEJy/cJCEA4skAARsT4QDywQwhEPhAMLxAoRD8QDCwQQDiwQMl0h1gfigYAgHogH2XCENeIK8VgvwoEFwskRsT4QDywQsiIeCAcWiBUiHogHFgggHFggZLpCrA/EAwEREfFAPMiaIywQDrBAprxCrA/EAwsE8UA4sEDof4WIB+KBBUJKKaXF42168DIgHFggnOLdzU2nH4d4gICIyH9+fTl/8kKJB4zGEVaAiDxcXFgdCAcCQvdrBPEAAQGEgzDcAwHxAAskusXjrRcB4cACAcQDC4QMeYRXOMACAcQDAQHEg+lwhAXCARZIZJ7AEg+wQADhwAIhT57AEg+wQEA4wAIBxAMBAcQDKjnCAuEACyQqj/CKB1ggIBxggZAnj/CKB1ggIBxggYB4gIAA4gG1OMIC4QALJCKP8IoHWCAgHGCBkCeP8IoHWCAgHGCBgHiABQLCAVggIB4gIMXyCK94QGSOsBAOwAIpmUd4xQMsEBAOsEBAPMACAeEALBAQDxCQYnmEVzwgOkdYCAdggZTKI7ziARYICAdYICAeYIGAcAAWCOIBCEixPMIrHlACR1gIB2CBlMgjvOIBFggIB1ggIB6ABYJwABYI4gFYIMXyCK9wgAUC4gECQp5Kf4RXPCA2R1gIB2CBIB6ABYJwABYI4iEeYIHQytQe4RUOsEBAPAABiSLyI7ziAdPgCAvhACwQxAOwQBAOwAJBPAALhJOV9AivcAAWCOIBCEhJcn2EVzyAXY6wWjh0LLV++9HqAASE+uGo++viAQiIeBRLOAABCej6+6vnH49xP0Q8gDpmabXZeBnirI8+gyIcQBOewgq4TnYXingAY3GEFTgkXawR4QAskAF4PBdAQIpZIeIBCIgVMtjqEA9AQLA6gNF4jPdEkR7pFQ7AAslIlKMs8QAsEEuk0foQDsACQTwAASnR0EdZ4gHkwhFWR/o+yhIOwAJBPAALhP5XyLF4CAcgICJidQDh+G68GbI6gAjcA+lY26eyxAOIwhFWT5oeZTmyAiwQOlkiu+EQD0BAaLQ+hAMQECvE6gCK4x7IAI7dD9ldH6IBCAiVISnt/dUBAQGAWtwDAUBAABAQAAQEAAEBAAEBQEAAEBAABAQAAQEAAQFAQAAQEAAEBAABAQABAUBAABAQAAQEAAEBAAEBQEAAEBAABAQAAQEAAQFAQAAQEAAEBAABAQABAUBAABAQAAQEAAEBAAEBQEAAEBAABAQABAQAAQFAQAAQEAAEBAAEBAABAUBAABAQAAQEAAQEAAEBQEAAEBAABAQABAQAAQFAQAAQEAAEBAAEBAABAUBAABAQAAQEAAQEAAEBQEAAEBAABAQABAQAAQFAQAAQEAAExEsAgIAAICAACAgAAgIAAgKAgAAgIAAICAACAgACAoCAACAgAAgIAAICAAICgIAAICAACAgAU/EvfiluCemVcXgAAAAASUVORK5CYII=",g="/learn-wgpu-zh/assets/normal_mapping_correct.QoeY9fn8.png",y="/learn-wgpu-zh/assets/no_srgb.BPN082ml.png",F="/learn-wgpu-zh/assets/debug_material.CSduOHVl.png",B=JSON.parse('{"title":"法线映射","description":"","frontmatter":{},"headers":[],"relativePath":"intermediate/tutorial11-normals/index.md","filePath":"intermediate/tutorial11-normals/index.md","lastUpdated":1730902479000}'),A={name:"intermediate/tutorial11-normals/index.md"};function c(b,s,u,m,D,o){const n=a("WasmExample"),h=a("AutoGithubLink");return t(),k("div",null,[s[0]||(s[0]=p('
法线映射 ​
添加光照后，我们的场景已经看起来很不错了。不过，对象表面还缺少实物的那种凹凸细节。如果使用的纹理是光滑的就不是问题，但是砖块纹理应该是比较粗糙的。 我们可以给模型添加更多的三角形来雕刻出表面的凹凸细节，但这将使得顶点数据倍增而渲染变慢，而且也很难知道在哪里添加新的三角形。这，就是法线映射（Normal Mapping）的用武之地了。
法线映射也叫凹凸映射（Bump Mapping），是一种纹理映射技术，它不用增加模型的几何复杂度就能够模拟具有复杂凹凸细节的表面。与简单的纹理映射不同，当绘制对象的表面时，法线映射技术通过扰动表面的法向量来改变它的形状，使得着色处理后的颜色能反映出表面几何特性的变化。
还记得在实例化绘制教程中，我们尝试了在纹理中存储实例数据吗？法线贴图（Normal Map）就是存储着法向量数据的纹理！除了顶点法向量外，我们还将在光照计算中使用法线贴图中的法向量。
我们的砖块纹理对应的法线贴图（也就是法线纹理）长这样：
./cube-normal.png
纹理的 r、g、b 分量对应于法向量的 x、y 和 z 坐标分量。所有的 z 值都应该是正的，这就是为什么法线贴图有一个蓝色的色调。
我们来修改 model.rs 中的材质 Material 结构体，新增一个法线纹理 normal_texture 字段：
rust
pub struct Material {
+import{_ as l,C as i,o as k,c as p,a1 as t,G as a}from"./chunks/framework.DyadSNS9.js";const e="/learn-wgpu-zh/assets/cube-normal.CiOKm_IM.png",r="/learn-wgpu-zh/assets/normal_mapping_wrong.DWVzspon.png",E="/learn-wgpu-zh/assets/ambient_diffuse_specular_lighting.DmdSiDNr.png",d="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAGQCAYAAACAvzbMAAABg2lDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV9TS0UqDmaQ4pChOlkQFXHUKhShQqgVWnUwufQLmrQkKS6OgmvBwY/FqoOLs64OroIg+AHi5Oik6CIl/i8ptIjx4Lgf7+497t4BQrPCdKtnHNAN20wnE1I2tyqFXxFCECKigMKs2pwsp+A7vu4R4OtdnGf5n/tz9Gt5iwEBiXiW1UybeIN4etOucd4nFllJ0YjPicdMuiDxI9dVj984F10WeKZoZtLzxCKxVOxitYtZydSJp4hjmm5QvpD1WOO8xVmv1Fn7nvyFkbyxssx1msNIYhFLkCFBRR1lVGAjTqtBioU07Sd8/FHXL5NLJVcZjBwLqEKH4vrB/+B3t1ZhcsJLiiSA0IvjfIwA4V2g1XCc72PHaZ0AwWfgyuj4q01g5pP0RkeLHQED28DFdUdT94DLHWDoqaaYiisFaQqFAvB+Rt+UAwZvgb41r7f2Pk4fgAx1lboBDg6B0SJlr/u8u7e7t3/PtPv7AfEscnMV1+LuAAAABmJLR0QAAACSAP8q1jhsAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH5AUDFCAS5kaN7AAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAApfSURBVHja7d1PbhNnHMfh14YjINTsuEXUayCx8BFKRGRlWXVZdYkiV0mP4EUkroFyi+yool4huCsH1409M55/7++d51khSAMYaT79vjOJZ2m12SQAaGjuJQBAQAAQEAAEBAABAQABAUBAABAQAAQEAAEBAAEBQEAAEBAABAQAAQEAAQFAQAAQEAAEBAABAQABAUBAABAQAAQEAAEBAAEBQEAAEBAABAQAAQEAAQFAQAAQEAAEBAABAQABAUBAAMjXay9BbN8uZ88/PlttvCDAYGZptXHVCR6OfUICCAiN4yEkwFDcAxEaAAERBQABQXAAAUFEAAEhbAhEBBAQ8RARQEAY/sIvIoCAiIeIAALC8Bd6EQEERDxEBBAQhr+wiwggIOIhIoCAACAgBFkCVgggIAAICAACQg1jvgGUN58CBAQAAbFCrA8gX94TPWN9PxklHICAiItQAINzhAWAgAAgIAAICAACAgACAoCAACAgAAgIAAICAAICgIAAICAACAgAAgIAAgKAgAAgIAAICAACAgACAoCAACAgAAgIAAICAAICgIAAkJXXXgKA8S0eb59/vH77UUAAqB+O/Z/LPSSOsAAyisf+r1d9jIAAEC4kAgKQ4fqIEBIBAZhAfAQEgGzWiIAACImAAAiJgAAUra+v8RgyJAICUOgiERCAAi/uQ1zg+/49fCsTgID/99/kz9LXcZmAAASNw9gEBKDwQPS1QgQEEAcEBBAIBARAHDriJjogDlgggEAQe30ICCAOBVvOn9LaAgEEgqbx6JuAgDgw8kX++vurXj7v+ZtPAgIIhBWQ3+8nIJTv179//PiPn8SBkBfrpn+evteHgDCdcOz/XICQCMR0ArGcP7U6xhojHgLCtOKx/+sjRkQcrIc+/i5DhUNAoMc1IhACUXo8BIRpro+Wa0QcxKGt8zef0v0/f/7v71X3GGvscAgIHIiIQIhD3/bjEWl1CAgciMhi+cXrIBCjvj7HVkhO8UgppVlabTb+2eL5djmr/bFnq+n8E2/Xw/r6fbvPIyTiMLLdkOQWDgERkLBxqNI2HiIiELnKKR4pOcIiWByGtL5+P5mIiINwCAiTD0RX62P/80UPiUCIh4BgPVgj4iAcAoJA1FkROV20x4qIQIhHrtxED6qzm+g7X3TX9uLY9sJ/7Pipzufr+viqzZ9FHCg9HhbIhBfESxfbU8/7u/hcVRf/qDe0BYISwyEgE9blxbrUC3+dv5M4MOV4pJTS3D8duQet6cdZFkQKR9R4CIiLdauPi3jhB6ujO46woKH7qzsvApMOh4CQjcXyS62Vsr2Xcuj4aO2lRDwG5Qhrghfrrj6uy89Vx3L+dDAe558/WB+IhwVCHWerTa2vBbn67SarP/ehACyv7o5GYOwLt3AgHAJCqj4yarIYqj5Xkwvv9mN3QyIciEe+fCV65BA83qbPv1+0Wh9Nvnq86tHVMS/8XR9hCQfCISBFx2PXbkhOObaK/nUNXQVEOBCP+hxhFaIqGr7wTTgQDgHh2cPFj9Xx7uZm0vG4r7gJLxyIh4CQUvr5wyw9HIjJsZAgHAhHl9wDCRiPKvsRmdLxVdUKEQ7EwwKBo4HYD4lwIB4WiPVR0+4KcQMdhKMPvpUJgHicxBEWgHBYIKX7elfvtNHxFYiHBQIgHBYIw6wQXwcC4mGBUBmJul+JDoiHgGBtgHBkwxFWMPvfhRcQDwsEQDgsEPLgEV4QDwsEQDgsEADxsEAYmcd4QTwEhJPDsf9zQgLCMRRHWIEsHm9fjEdVXEA8sEAAhCMb3lAqkCZvKHX918oLhnhggQAIR37cAwHEAwEpXd0nrDyJxVTCIR4CAmB1CAh92X4X3qp1YX0gHgzFTfSAvKEUwoGA0ElI9vkuvIgHAgIIB9lyDwQQDywQQDiwQADxQEBoa/sIL4gHOXGEBQgHFgge4UU8sEAA4UBA2Gryfh5f77xNC+KBgAhHg3C89N881PxvfDsThIMheUfCDOPRlncjRDwQEAFpHZHlL5fCgnggIOJhoSAc5MNjvBO0u0pAPDiVm+iAcGCB5CbnR3GtEMQDCwQQDiwQKwTEAwuEzHkSC+HAArFCQDwQEKwPxIM4HGENuEJy/cJCEA4skAARsT4QDywQwhEPhAMLxAoRD8QDCwQQDiwQMl0h1gfigYAgHogH2XCENeIK8VgvwoEFwskRsT4QDywQsiIeCAcWiBUiHogHFgggHFggZLpCrA/EAwEREfFAPMiaIywQDrBAprxCrA/EAwsE8UA4sEDof4WIB+KBBUJKKaXF42168DIgHFggnOLdzU2nH4d4gICIyH9+fTl/8kKJB4zGEVaAiDxcXFgdCAcCQvdrBPEAAQGEgzDcAwHxAAskusXjrRcB4cACAcQDC4QMeYRXOMACAcQDAQHEg+lwhAXCARZIZJ7AEg+wQADhwAIhT57AEg+wQEA4wAIBxAMBAcQDKjnCAuEACyQqj/CKB1ggIBxggZAnj/CKB1ggIBxggYB4gIAA4gG1OMIC4QALJCKP8IoHWCAgHGCBkCeP8IoHWCAgHGCBgHiABQLCAVggIB4gIMXyCK94QGSOsBAOwAIpmUd4xQMsEBAOsEBAPMACAeEALBAQDxCQYnmEVzwgOkdYCAdggZTKI7ziARYICAdYICAeYIGAcAAWCOIBCEixPMIrHlACR1gIB2CBlMgjvOIBFggIB1ggIB6ABYJwABYI4gFYIMXyCK9wgAUC4gECQp5Kf4RXPCA2R1gIB2CBIB6ABYJwABYI4iEeYIHQytQe4RUOsEBAPAABiSLyI7ziAdPgCAvhACwQxAOwQBAOwAJBPAALhJOV9AivcAAWCOIBCEhJcn2EVzyAXY6wWjh0LLV++9HqAASE+uGo++viAQiIeBRLOAABCej6+6vnH49xP0Q8gDpmabXZeBnirI8+gyIcQBOewgq4TnYXingAY3GEFTgkXawR4QAskAF4PBdAQIpZIeIBCIgVMtjqEA9AQLA6gNF4jPdEkR7pFQ7AAslIlKMs8QAsEEuk0foQDsACQTwAASnR0EdZ4gHkwhFWR/o+yhIOwAJBPAALhP5XyLF4CAcgICJidQDh+G68GbI6gAjcA+lY26eyxAOIwhFWT5oeZTmyAiwQOlkiu+EQD0BAaLQ+hAMQECvE6gCK4x7IAI7dD9ldH6IBCAiVISnt/dUBAQGAWtwDAUBAABAQAAQEAAEBAAEBQEAAEBAABAQAAQEAAQFAQAAQEAAEBAABAQABAUBAABAQAAQEAAEBAAEBQEAAEBAABAQAAQEAAQFAQAAQEAAEBAABAQABAUBAABAQAAQEAAEBAAEBQEAAEBAABAQABAQAAQFAQAAQEAAEBAAEBAABAUBAABAQAAQEAAQEAAEBQEAAEBAABAQABAQAAQFAQAAQEAAEBAAEBAABAUBAABAQAAQEAAQEAAEBQEAAEBAABAQABAQAAQFAQAAQEAAExEsAgIAAICAACAgAAgIAAgKAgAAgIAAICAACAgACAoCAACAgAAgIAAICAAICgIAAICAACAgAU/EvfiluCemVcXgAAAAASUVORK5CYII=",g="/learn-wgpu-zh/assets/normal_mapping_correct.QoeY9fn8.png",y="/learn-wgpu-zh/assets/no_srgb.BPN082ml.png",F="/learn-wgpu-zh/assets/debug_material.CSduOHVl.png",B=JSON.parse('{"title":"法线映射","description":"","frontmatter":{},"headers":[],"relativePath":"intermediate/tutorial11-normals/index.md","filePath":"intermediate/tutorial11-normals/index.md","lastUpdated":1731720800000}'),A={name:"intermediate/tutorial11-normals/index.md"};function c(b,s,u,m,D,o){const n=i("WasmExample"),h=i("AutoGithubLink");return k(),p("div",null,[s[0]||(s[0]=t('
法线映射 ​
添加光照后，我们的场景已经看起来很不错了。不过，对象表面还缺少实物的那种凹凸细节。如果使用的纹理是光滑的就不是问题，但是砖块纹理应该是比较粗糙的。 我们可以给模型添加更多的三角形来雕刻出表面的凹凸细节，但这将使得顶点数据倍增而渲染变慢，而且也很难知道在哪里添加新的三角形。这，就是法线映射（Normal Mapping）的用武之地了。
法线映射也叫凹凸映射（Bump Mapping），是一种纹理映射技术，它不用增加模型的几何复杂度就能够模拟具有复杂凹凸细节的表面。与简单的纹理映射不同，当绘制对象的表面时，法线映射技术通过扰动表面的法向量来改变它的形状，使得着色处理后的颜色能反映出表面几何特性的变化。
还记得在实例化绘制教程中，我们尝试了在纹理中存储实例数据吗？法线贴图（Normal Map）就是存储着法向量数据的纹理！除了顶点法向量外，我们还将在光照计算中使用法线贴图中的法向量。
我们的砖块纹理对应的法线贴图（也就是法线纹理）长这样：
./cube-normal.png
纹理的 r、g、b 分量对应于法向量的 x、y 和 z 坐标分量。所有的 z 值都应该是正的，这就是为什么法线贴图有一个蓝色的色调。
我们来修改 model.rs 中的材质 Material 结构体，新增一个法线纹理 normal_texture 字段：
rust
pub struct Material {
     pub name: String,
     pub diffuse_texture: texture::Texture,
     pub normal_texture: texture::Texture, // 更新!
@@ -429,4 +429,4 @@ import{_ as l,c as k,a1 as p,G as i,B as a,o as t}from"./chunks/framework.DdYVMT
     0..self.instances.len() as u32,
     &self.camera_bind_group,
     &self.light_bind_group,
-);
得到的渲染效果如下：
上面使用的纹理可以在 Github 源码库中找到。
',67)),i(n,{example:"tutorial11_normals"}),i(h)])}const _=l(A,[["render",c]]);export{B as __pageData,_ as default};
+);
得到的渲染效果如下：
上面使用的纹理可以在 Github 源码库中找到。
',67)),a(n,{example:"tutorial11_normals"}),a(h)])}const _=l(A,[["render",c]]);export{B as __pageData,_ as default};
diff --git a/assets/intermediate_tutorial12-camera_index.md.DzEfrSPE.js b/assets/intermediate_tutorial12-camera_index.md.CC3go-tG.js
similarity index 99%
rename from assets/intermediate_tutorial12-camera_index.md.DzEfrSPE.js
rename to assets/intermediate_tutorial12-camera_index.md.CC3go-tG.js
index d8eed8274..f01aa6b65 100644
--- a/assets/intermediate_tutorial12-camera_index.md.DzEfrSPE.js
+++ b/assets/intermediate_tutorial12-camera_index.md.CC3go-tG.js
@@ -1,4 +1,4 @@
-import{_ as h,c as p,a1 as k,G as i,B as a,o as t}from"./chunks/framework.DdYVMT1V.js";const e="/learn-wgpu-zh/assets/left_right_hand.D9m1ZeLO.gif",r="/learn-wgpu-zh/assets/screenshot.CF2c6Oit.png",m=JSON.parse('{"title":"更好的摄像机","description":"","frontmatter":{},"headers":[],"relativePath":"intermediate/tutorial12-camera/index.md","filePath":"intermediate/tutorial12-camera/index.md","lastUpdated":1730902479000}'),E={name:"intermediate/tutorial12-camera/index.md"};function d(g,s,y,F,c,b){const n=a("WasmExample"),l=a("AutoGithubLink");return t(),p("div",null,[s[0]||(s[0]=k(`
更好的摄像机 ​
这个问题已经被推迟了一段时间。实现一个虚拟摄像机与正确使用 wgpu 关系不大，但它一直困扰着我，所以现在来实现它吧。
lib.rs 已经堆砌很多代码了，所以我们创建一个 camera.rs 文件来放置摄像机代码。先导入一些要用到的文件：
rust
use winit::event::*;
+import{_ as h,C as i,o as p,c as k,a1 as t,G as a}from"./chunks/framework.DyadSNS9.js";const e="/learn-wgpu-zh/assets/left_right_hand.D9m1ZeLO.gif",r="/learn-wgpu-zh/assets/screenshot.CF2c6Oit.png",m=JSON.parse('{"title":"更好的摄像机","description":"","frontmatter":{},"headers":[],"relativePath":"intermediate/tutorial12-camera/index.md","filePath":"intermediate/tutorial12-camera/index.md","lastUpdated":1731720800000}'),E={name:"intermediate/tutorial12-camera/index.md"};function d(g,s,y,F,c,b){const n=i("WasmExample"),l=i("AutoGithubLink");return p(),k("div",null,[s[0]||(s[0]=t(`
更好的摄像机 ​
这个问题已经被推迟了一段时间。实现一个虚拟摄像机与正确使用 wgpu 关系不大，但它一直困扰着我，所以现在来实现它吧。
lib.rs 已经堆砌很多代码了，所以我们创建一个 camera.rs 文件来放置摄像机代码。先导入一些要用到的文件：
rust
use winit::event::*;
 use winit::dpi::PhysicalPosition;
 use instant::Duration;
 use std::f32::consts::FRAC_PI_2;
@@ -321,4 +321,4 @@ import{_ as h,c as p,a1 as k,G as i,B as a,o as t}from"./chunks/framework.DdYVMT
             _ => {}
         }
     });
-}
现在，我们应该可以自由控制摄像机了：
./screenshot.png
',42)),i(n,{example:"tutorial12_camera"}),i(l)])}const u=h(E,[["render",d]]);export{m as __pageData,u as default};
+}
现在，我们应该可以自由控制摄像机了：
./screenshot.png
',42)),a(n,{example:"tutorial12_camera"}),a(l)])}const u=h(E,[["render",d]]);export{m as __pageData,u as default};
diff --git a/assets/intermediate_tutorial12-camera_index.md.DzEfrSPE.lean.js b/assets/intermediate_tutorial12-camera_index.md.CC3go-tG.lean.js
similarity index 99%
rename from assets/intermediate_tutorial12-camera_index.md.DzEfrSPE.lean.js
rename to assets/intermediate_tutorial12-camera_index.md.CC3go-tG.lean.js
index d8eed8274..f01aa6b65 100644
--- a/assets/intermediate_tutorial12-camera_index.md.DzEfrSPE.lean.js
+++ b/assets/intermediate_tutorial12-camera_index.md.CC3go-tG.lean.js
@@ -1,4 +1,4 @@
-import{_ as h,c as p,a1 as k,G as i,B as a,o as t}from"./chunks/framework.DdYVMT1V.js";const e="/learn-wgpu-zh/assets/left_right_hand.D9m1ZeLO.gif",r="/learn-wgpu-zh/assets/screenshot.CF2c6Oit.png",m=JSON.parse('{"title":"更好的摄像机","description":"","frontmatter":{},"headers":[],"relativePath":"intermediate/tutorial12-camera/index.md","filePath":"intermediate/tutorial12-camera/index.md","lastUpdated":1730902479000}'),E={name:"intermediate/tutorial12-camera/index.md"};function d(g,s,y,F,c,b){const n=a("WasmExample"),l=a("AutoGithubLink");return t(),p("div",null,[s[0]||(s[0]=k(`
更好的摄像机 ​
这个问题已经被推迟了一段时间。实现一个虚拟摄像机与正确使用 wgpu 关系不大，但它一直困扰着我，所以现在来实现它吧。
lib.rs 已经堆砌很多代码了，所以我们创建一个 camera.rs 文件来放置摄像机代码。先导入一些要用到的文件：
rust
use winit::event::*;
+import{_ as h,C as i,o as p,c as k,a1 as t,G as a}from"./chunks/framework.DyadSNS9.js";const e="/learn-wgpu-zh/assets/left_right_hand.D9m1ZeLO.gif",r="/learn-wgpu-zh/assets/screenshot.CF2c6Oit.png",m=JSON.parse('{"title":"更好的摄像机","description":"","frontmatter":{},"headers":[],"relativePath":"intermediate/tutorial12-camera/index.md","filePath":"intermediate/tutorial12-camera/index.md","lastUpdated":1731720800000}'),E={name:"intermediate/tutorial12-camera/index.md"};function d(g,s,y,F,c,b){const n=i("WasmExample"),l=i("AutoGithubLink");return p(),k("div",null,[s[0]||(s[0]=t(`
更好的摄像机 ​
这个问题已经被推迟了一段时间。实现一个虚拟摄像机与正确使用 wgpu 关系不大，但它一直困扰着我，所以现在来实现它吧。
lib.rs 已经堆砌很多代码了，所以我们创建一个 camera.rs 文件来放置摄像机代码。先导入一些要用到的文件：
rust
use winit::event::*;
 use winit::dpi::PhysicalPosition;
 use instant::Duration;
 use std::f32::consts::FRAC_PI_2;
@@ -321,4 +321,4 @@ import{_ as h,c as p,a1 as k,G as i,B as a,o as t}from"./chunks/framework.DdYVMT
             _ => {}
         }
     });
-}
现在，我们应该可以自由控制摄像机了：
./screenshot.png
',42)),i(n,{example:"tutorial12_camera"}),i(l)])}const u=h(E,[["render",d]]);export{m as __pageData,u as default};
+}
现在，我们应该可以自由控制摄像机了：
./screenshot.png
',42)),a(n,{example:"tutorial12_camera"}),a(l)])}const u=h(E,[["render",d]]);export{m as __pageData,u as default};
diff --git a/assets/intermediate_tutorial13-terrain_index.md.UcGoe3Gi.js b/assets/intermediate_tutorial13-terrain_index.md.DVMgIRqh.js
similarity index 99%
rename from assets/intermediate_tutorial13-terrain_index.md.UcGoe3Gi.js
rename to assets/intermediate_tutorial13-terrain_index.md.DVMgIRqh.js
index d382c4715..3794811a3 100644
--- a/assets/intermediate_tutorial13-terrain_index.md.UcGoe3Gi.js
+++ b/assets/intermediate_tutorial13-terrain_index.md.DVMgIRqh.js
@@ -1,4 +1,4 @@
-import{_ as i,c as a,a1 as n,o as h}from"./chunks/framework.DdYVMT1V.js";const k="/learn-wgpu-zh/assets/figure_no-fbm.BbKBgr89.png",p="/learn-wgpu-zh/assets/figure_fbm.C9D55TOH.png",l="/learn-wgpu-zh/assets/figure_spiky.DiWu7hEd.png",t="/learn-wgpu-zh/assets/figure_work-groups.D7RHFIup.jpg",o=JSON.parse('{"title":"程序地形","description":"","frontmatter":{},"headers":[],"relativePath":"intermediate/tutorial13-terrain/index.md","filePath":"intermediate/tutorial13-terrain/index.md","lastUpdated":1730902479000}'),e={name:"intermediate/tutorial13-terrain/index.md"};function r(E,s,d,g,y,F){return h(),a("div",null,s[0]||(s[0]=[n(`
程序地形 ​
到目前为止，我们一直在一个空旷的场景里渲染模型。如果只是想测试着色代码，这是非常好的，但大多数应用程序会想让屏幕上填充更多有趣的元素。 你可以用各种方法来处理此问题，比如，在 Blender 中创建一堆模型，然后把它们加载到场景中。如果你有一些像样的艺术技巧和一些耐心，这是很有效的方法。我在这两个方面都很欠缺，所以让我们通过代码来制作一些看起来不错的东西。
正如本文的名字所示，我们将创建一个地形（Terrain）。现在，创建地形网格的经典方法是使用预先生成的噪声纹理（Noise Texture），并对其进行采样，以获得网格中每个点的高度值。这是一个相当有效的方法，但我选择了直接使用计算着色器来生成噪声。让我们开始吧!
计算着色器 ​
计算着色器（Compute Shader）允许你利用 GPU 的并行计算能力完成任意任务。虽然它也可以用于渲染任务，但通常用于与绘制三角形和像素没有直接关系的任务，比如，物理模拟、图像滤镜、创建程序纹理、运行神经网络等等。我稍后会详细介绍它们的工作原理，但现在只需用它们来为我们的地形创建顶点和索引缓冲区。
噪声函数 ​
让我们从计算着色器的代码开始，创建一个名为 terrain.wgsl 的新文件，在文件内先实现一个噪声函数（Noise Function），然后再创建着色器的入口函数。具体代码如下：
rust
// ============================
+import{_ as i,o as a,c as n,a1 as h}from"./chunks/framework.DyadSNS9.js";const k="/learn-wgpu-zh/assets/figure_no-fbm.BbKBgr89.png",p="/learn-wgpu-zh/assets/figure_fbm.C9D55TOH.png",l="/learn-wgpu-zh/assets/figure_spiky.DiWu7hEd.png",t="/learn-wgpu-zh/assets/figure_work-groups.D7RHFIup.jpg",o=JSON.parse('{"title":"程序地形","description":"","frontmatter":{},"headers":[],"relativePath":"intermediate/tutorial13-terrain/index.md","filePath":"intermediate/tutorial13-terrain/index.md","lastUpdated":1731720800000}'),e={name:"intermediate/tutorial13-terrain/index.md"};function r(E,s,d,g,y,F){return a(),n("div",null,s[0]||(s[0]=[h(`
程序地形 ​
到目前为止，我们一直在一个空旷的场景里渲染模型。如果只是想测试着色代码，这是非常好的，但大多数应用程序会想让屏幕上填充更多有趣的元素。 你可以用各种方法来处理此问题，比如，在 Blender 中创建一堆模型，然后把它们加载到场景中。如果你有一些像样的艺术技巧和一些耐心，这是很有效的方法。我在这两个方面都很欠缺，所以让我们通过代码来制作一些看起来不错的东西。
正如本文的名字所示，我们将创建一个地形（Terrain）。现在，创建地形网格的经典方法是使用预先生成的噪声纹理（Noise Texture），并对其进行采样，以获得网格中每个点的高度值。这是一个相当有效的方法，但我选择了直接使用计算着色器来生成噪声。让我们开始吧!
计算着色器 ​
计算着色器（Compute Shader）允许你利用 GPU 的并行计算能力完成任意任务。虽然它也可以用于渲染任务，但通常用于与绘制三角形和像素没有直接关系的任务，比如，物理模拟、图像滤镜、创建程序纹理、运行神经网络等等。我稍后会详细介绍它们的工作原理，但现在只需用它们来为我们的地形创建顶点和索引缓冲区。
噪声函数 ​
让我们从计算着色器的代码开始，创建一个名为 terrain.wgsl 的新文件，在文件内先实现一个噪声函数（Noise Function），然后再创建着色器的入口函数。具体代码如下：
rust
// ============================
 // 地形生成
 // ============================
 
diff --git a/assets/intermediate_tutorial13-terrain_index.md.UcGoe3Gi.lean.js b/assets/intermediate_tutorial13-terrain_index.md.DVMgIRqh.lean.js
similarity index 99%
rename from assets/intermediate_tutorial13-terrain_index.md.UcGoe3Gi.lean.js
rename to assets/intermediate_tutorial13-terrain_index.md.DVMgIRqh.lean.js
index d382c4715..3794811a3 100644
--- a/assets/intermediate_tutorial13-terrain_index.md.UcGoe3Gi.lean.js
+++ b/assets/intermediate_tutorial13-terrain_index.md.DVMgIRqh.lean.js
@@ -1,4 +1,4 @@
-import{_ as i,c as a,a1 as n,o as h}from"./chunks/framework.DdYVMT1V.js";const k="/learn-wgpu-zh/assets/figure_no-fbm.BbKBgr89.png",p="/learn-wgpu-zh/assets/figure_fbm.C9D55TOH.png",l="/learn-wgpu-zh/assets/figure_spiky.DiWu7hEd.png",t="/learn-wgpu-zh/assets/figure_work-groups.D7RHFIup.jpg",o=JSON.parse('{"title":"程序地形","description":"","frontmatter":{},"headers":[],"relativePath":"intermediate/tutorial13-terrain/index.md","filePath":"intermediate/tutorial13-terrain/index.md","lastUpdated":1730902479000}'),e={name:"intermediate/tutorial13-terrain/index.md"};function r(E,s,d,g,y,F){return h(),a("div",null,s[0]||(s[0]=[n(`
程序地形 ​
到目前为止，我们一直在一个空旷的场景里渲染模型。如果只是想测试着色代码，这是非常好的，但大多数应用程序会想让屏幕上填充更多有趣的元素。 你可以用各种方法来处理此问题，比如，在 Blender 中创建一堆模型，然后把它们加载到场景中。如果你有一些像样的艺术技巧和一些耐心，这是很有效的方法。我在这两个方面都很欠缺，所以让我们通过代码来制作一些看起来不错的东西。
正如本文的名字所示，我们将创建一个地形（Terrain）。现在，创建地形网格的经典方法是使用预先生成的噪声纹理（Noise Texture），并对其进行采样，以获得网格中每个点的高度值。这是一个相当有效的方法，但我选择了直接使用计算着色器来生成噪声。让我们开始吧!
计算着色器 ​
计算着色器（Compute Shader）允许你利用 GPU 的并行计算能力完成任意任务。虽然它也可以用于渲染任务，但通常用于与绘制三角形和像素没有直接关系的任务，比如，物理模拟、图像滤镜、创建程序纹理、运行神经网络等等。我稍后会详细介绍它们的工作原理，但现在只需用它们来为我们的地形创建顶点和索引缓冲区。
噪声函数 ​
让我们从计算着色器的代码开始，创建一个名为 terrain.wgsl 的新文件，在文件内先实现一个噪声函数（Noise Function），然后再创建着色器的入口函数。具体代码如下：
rust
// ============================
+import{_ as i,o as a,c as n,a1 as h}from"./chunks/framework.DyadSNS9.js";const k="/learn-wgpu-zh/assets/figure_no-fbm.BbKBgr89.png",p="/learn-wgpu-zh/assets/figure_fbm.C9D55TOH.png",l="/learn-wgpu-zh/assets/figure_spiky.DiWu7hEd.png",t="/learn-wgpu-zh/assets/figure_work-groups.D7RHFIup.jpg",o=JSON.parse('{"title":"程序地形","description":"","frontmatter":{},"headers":[],"relativePath":"intermediate/tutorial13-terrain/index.md","filePath":"intermediate/tutorial13-terrain/index.md","lastUpdated":1731720800000}'),e={name:"intermediate/tutorial13-terrain/index.md"};function r(E,s,d,g,y,F){return a(),n("div",null,s[0]||(s[0]=[h(`
程序地形 ​
到目前为止，我们一直在一个空旷的场景里渲染模型。如果只是想测试着色代码，这是非常好的，但大多数应用程序会想让屏幕上填充更多有趣的元素。 你可以用各种方法来处理此问题，比如，在 Blender 中创建一堆模型，然后把它们加载到场景中。如果你有一些像样的艺术技巧和一些耐心，这是很有效的方法。我在这两个方面都很欠缺，所以让我们通过代码来制作一些看起来不错的东西。
正如本文的名字所示，我们将创建一个地形（Terrain）。现在，创建地形网格的经典方法是使用预先生成的噪声纹理（Noise Texture），并对其进行采样，以获得网格中每个点的高度值。这是一个相当有效的方法，但我选择了直接使用计算着色器来生成噪声。让我们开始吧!
计算着色器 ​
计算着色器（Compute Shader）允许你利用 GPU 的并行计算能力完成任意任务。虽然它也可以用于渲染任务，但通常用于与绘制三角形和像素没有直接关系的任务，比如，物理模拟、图像滤镜、创建程序纹理、运行神经网络等等。我稍后会详细介绍它们的工作原理，但现在只需用它们来为我们的地形创建顶点和索引缓冲区。
噪声函数 ​
让我们从计算着色器的代码开始，创建一个名为 terrain.wgsl 的新文件，在文件内先实现一个噪声函数（Noise Function），然后再创建着色器的入口函数。具体代码如下：
rust
// ============================
 // 地形生成
 // ============================
 
diff --git a/assets/intermediate_vertex-animation_index.md.BZU0cHsD.js b/assets/intermediate_vertex-animation_index.md.BZU0cHsD.js
new file mode 100644
index 000000000..55995a72a
--- /dev/null
+++ b/assets/intermediate_vertex-animation_index.md.BZU0cHsD.js
@@ -0,0 +1 @@
+import{_ as d,C as t,o as s,c as m,j as a,a as n,G as o}from"./chunks/framework.DyadSNS9.js";const b=JSON.parse('{"title":"顶点动画","description":"","frontmatter":{},"headers":[],"relativePath":"intermediate/vertex-animation/index.md","filePath":"intermediate/vertex-animation/index.md","lastUpdated":1731720800000}'),l={name:"intermediate/vertex-animation/index.md"};function c(p,e,x,_,u,f){const i=t("WebGPUExample"),r=t("AutoGithubLink");return s(),m("div",null,[e[0]||(e[0]=a("h1",{id:"顶点动画",tabindex:"-1"},[n("顶点动画 "),a("a",{class:"header-anchor",href:"#顶点动画","aria-label":'Permalink to "顶点动画"'},"​")],-1)),e[1]||(e[1]=a("h2",{id:"示例-顶点网格模拟翻页动画",tabindex:"-1"},[n("示例：顶点网格模拟翻页动画 "),a("a",{class:"header-anchor",href:"#示例-顶点网格模拟翻页动画","aria-label":'Permalink to "示例：顶点网格模拟翻页动画"'},"​")],-1)),o(i,{example:"vertex_animation",autoLoad:"{true}"}),o(r)])}const v=d(l,[["render",c]]);export{b as __pageData,v as default};
diff --git a/assets/intermediate_vertex-animation_index.md.BZU0cHsD.lean.js b/assets/intermediate_vertex-animation_index.md.BZU0cHsD.lean.js
new file mode 100644
index 000000000..55995a72a
--- /dev/null
+++ b/assets/intermediate_vertex-animation_index.md.BZU0cHsD.lean.js
@@ -0,0 +1 @@
+import{_ as d,C as t,o as s,c as m,j as a,a as n,G as o}from"./chunks/framework.DyadSNS9.js";const b=JSON.parse('{"title":"顶点动画","description":"","frontmatter":{},"headers":[],"relativePath":"intermediate/vertex-animation/index.md","filePath":"intermediate/vertex-animation/index.md","lastUpdated":1731720800000}'),l={name:"intermediate/vertex-animation/index.md"};function c(p,e,x,_,u,f){const i=t("WebGPUExample"),r=t("AutoGithubLink");return s(),m("div",null,[e[0]||(e[0]=a("h1",{id:"顶点动画",tabindex:"-1"},[n("顶点动画 "),a("a",{class:"header-anchor",href:"#顶点动画","aria-label":'Permalink to "顶点动画"'},"​")],-1)),e[1]||(e[1]=a("h2",{id:"示例-顶点网格模拟翻页动画",tabindex:"-1"},[n("示例：顶点网格模拟翻页动画 "),a("a",{class:"header-anchor",href:"#示例-顶点网格模拟翻页动画","aria-label":'Permalink to "示例：顶点网格模拟翻页动画"'},"​")],-1)),o(i,{example:"vertex_animation",autoLoad:"{true}"}),o(r)])}const v=d(l,[["render",c]]);export{b as __pageData,v as default};
diff --git a/assets/intermediate_vertex-animation_index.md.DliElYT0.js b/assets/intermediate_vertex-animation_index.md.DliElYT0.js
deleted file mode 100644
index 0ef2850fb..000000000
--- a/assets/intermediate_vertex-animation_index.md.DliElYT0.js
+++ /dev/null
@@ -1 +0,0 @@
-import{_ as d,c as s,j as a,a as t,G as n,B as o,o as m}from"./chunks/framework.DdYVMT1V.js";const b=JSON.parse('{"title":"顶点动画","description":"","frontmatter":{},"headers":[],"relativePath":"intermediate/vertex-animation/index.md","filePath":"intermediate/vertex-animation/index.md","lastUpdated":1730902479000}'),l={name:"intermediate/vertex-animation/index.md"};function c(p,e,x,_,u,f){const i=o("WebGPUExample"),r=o("AutoGithubLink");return m(),s("div",null,[e[0]||(e[0]=a("h1",{id:"顶点动画",tabindex:"-1"},[t("顶点动画 "),a("a",{class:"header-anchor",href:"#顶点动画","aria-label":'Permalink to "顶点动画"'},"​")],-1)),e[1]||(e[1]=a("h2",{id:"示例-顶点网格模拟翻页动画",tabindex:"-1"},[t("示例：顶点网格模拟翻页动画 "),a("a",{class:"header-anchor",href:"#示例-顶点网格模拟翻页动画","aria-label":'Permalink to "示例：顶点网格模拟翻页动画"'},"​")],-1)),n(i,{example:"vertex_animation",autoLoad:"{true}"}),n(r)])}const v=d(l,[["render",c]]);export{b as __pageData,v as default};
diff --git a/assets/intermediate_vertex-animation_index.md.DliElYT0.lean.js b/assets/intermediate_vertex-animation_index.md.DliElYT0.lean.js
deleted file mode 100644
index 0ef2850fb..000000000
--- a/assets/intermediate_vertex-animation_index.md.DliElYT0.lean.js
+++ /dev/null
@@ -1 +0,0 @@
-import{_ as d,c as s,j as a,a as t,G as n,B as o,o as m}from"./chunks/framework.DdYVMT1V.js";const b=JSON.parse('{"title":"顶点动画","description":"","frontmatter":{},"headers":[],"relativePath":"intermediate/vertex-animation/index.md","filePath":"intermediate/vertex-animation/index.md","lastUpdated":1730902479000}'),l={name:"intermediate/vertex-animation/index.md"};function c(p,e,x,_,u,f){const i=o("WebGPUExample"),r=o("AutoGithubLink");return m(),s("div",null,[e[0]||(e[0]=a("h1",{id:"顶点动画",tabindex:"-1"},[t("顶点动画 "),a("a",{class:"header-anchor",href:"#顶点动画","aria-label":'Permalink to "顶点动画"'},"​")],-1)),e[1]||(e[1]=a("h2",{id:"示例-顶点网格模拟翻页动画",tabindex:"-1"},[t("示例：顶点网格模拟翻页动画 "),a("a",{class:"header-anchor",href:"#示例-顶点网格模拟翻页动画","aria-label":'Permalink to "示例：顶点网格模拟翻页动画"'},"​")],-1)),n(i,{example:"vertex_animation",autoLoad:"{true}"}),n(r)])}const v=d(l,[["render",c]]);export{b as __pageData,v as default};
diff --git a/assets/intermediate_vertex-animation_universal-animation-formula.md.BWO0w12h.js b/assets/intermediate_vertex-animation_universal-animation-formula.md.DBsHQKtB.js
similarity index 98%
rename from assets/intermediate_vertex-animation_universal-animation-formula.md.BWO0w12h.js
rename to assets/intermediate_vertex-animation_universal-animation-formula.md.DBsHQKtB.js
index 7ea36d663..3a410da12 100644
--- a/assets/intermediate_vertex-animation_universal-animation-formula.md.BWO0w12h.js
+++ b/assets/intermediate_vertex-animation_universal-animation-formula.md.DBsHQKtB.js
@@ -1,4 +1,4 @@
-import{_ as k,c as t,j as i,a,G as n,a1 as e,B as l,o as r}from"./chunks/framework.DdYVMT1V.js";const o=JSON.parse('{"title":"万能动画公式","description":"","frontmatter":{},"headers":[],"relativePath":"intermediate/vertex-animation/universal-animation-formula.md","filePath":"intermediate/vertex-animation/universal-animation-formula.md","lastUpdated":1730902479000}'),E={name:"intermediate/vertex-animation/universal-animation-formula.md"};function d(g,s,y,F,c,u){const h=l("WebGPUExample"),p=l("AutoGithubLink");return r(),t("div",null,[s[0]||(s[0]=i("h1",{id:"万能动画公式",tabindex:"-1"},[a("万能动画公式 "),i("a",{class:"header-anchor",href:"#万能动画公式","aria-label":'Permalink to "万能动画公式"'},"​")],-1)),s[1]||(s[1]=i("p",null,[a("要实现不同形态/形状之间的动态变换，核心算法很简单，就是通过"),i("strong",null,"构造同等数量的顶点/控制点"),a("来实现。")],-1)),s[2]||(s[2]=i("p",null,"在进行动态变换时，通常不同形态或形状之间的顶点数量会不相等。为了使两边的顶点能够一一对应起来，我们可以通过随机或插值的方式来补充顶点。这种方式不会破坏顶点数较少一边的造型，相当于某些点有了分身。通过对对应顶点的插值计算，就能够实现形态的变换。",-1)),s[3]||(s[3]=i("p",null,"此万能动画公式的优点在于它足够简单且通用。无论是对于简单的形状变换还是复杂的动态效果，都可以通过构造同等数量的顶点来实现。而且，运用不同的插值算法，还能灵活地控制形态变换的程度和速度。",-1)),s[4]||(s[4]=i("h2",{id:"示例-hilbert-曲线",tabindex:"-1"},[a("示例：Hilbert 曲线 "),i("a",{class:"header-anchor",href:"#示例-hilbert-曲线","aria-label":'Permalink to "示例：Hilbert 曲线"'},"​")],-1)),n(h,{example:"hilbert_curve",autoLoad:"{true}"}),s[5]||(s[5]=e(`
代码实现 ​
Hilbert 曲线是一种连续、自避免且自相似的空间填充曲线。
每升一个维度，曲线的顶点数就多 4 倍，基于这个规律，我们用上面的万能动画公式来完成升维/降维变换动画：
rust
pub struct HilbertCurveApp {
+import{_ as k,C as n,o as t,c as e,j as i,a,G as l,a1 as r}from"./chunks/framework.DyadSNS9.js";const o=JSON.parse('{"title":"万能动画公式","description":"","frontmatter":{},"headers":[],"relativePath":"intermediate/vertex-animation/universal-animation-formula.md","filePath":"intermediate/vertex-animation/universal-animation-formula.md","lastUpdated":1731720800000}'),E={name:"intermediate/vertex-animation/universal-animation-formula.md"};function d(g,s,y,F,c,u){const h=n("WebGPUExample"),p=n("AutoGithubLink");return t(),e("div",null,[s[0]||(s[0]=i("h1",{id:"万能动画公式",tabindex:"-1"},[a("万能动画公式 "),i("a",{class:"header-anchor",href:"#万能动画公式","aria-label":'Permalink to "万能动画公式"'},"​")],-1)),s[1]||(s[1]=i("p",null,[a("要实现不同形态/形状之间的动态变换，核心算法很简单，就是通过"),i("strong",null,"构造同等数量的顶点/控制点"),a("来实现。")],-1)),s[2]||(s[2]=i("p",null,"在进行动态变换时，通常不同形态或形状之间的顶点数量会不相等。为了使两边的顶点能够一一对应起来，我们可以通过随机或插值的方式来补充顶点。这种方式不会破坏顶点数较少一边的造型，相当于某些点有了分身。通过对对应顶点的插值计算，就能够实现形态的变换。",-1)),s[3]||(s[3]=i("p",null,"此万能动画公式的优点在于它足够简单且通用。无论是对于简单的形状变换还是复杂的动态效果，都可以通过构造同等数量的顶点来实现。而且，运用不同的插值算法，还能灵活地控制形态变换的程度和速度。",-1)),s[4]||(s[4]=i("h2",{id:"示例-hilbert-曲线",tabindex:"-1"},[a("示例：Hilbert 曲线 "),i("a",{class:"header-anchor",href:"#示例-hilbert-曲线","aria-label":'Permalink to "示例：Hilbert 曲线"'},"​")],-1)),l(h,{example:"hilbert_curve",autoLoad:"{true}"}),s[5]||(s[5]=r(`
代码实现 ​
Hilbert 曲线是一种连续、自避免且自相似的空间填充曲线。
每升一个维度，曲线的顶点数就多 4 倍，基于这个规律，我们用上面的万能动画公式来完成升维/降维变换动画：
rust
pub struct HilbertCurveApp {
     // 当前曲线与目标曲线的顶点缓冲区
     vertex_buffers: Vec<wgpu::Buffer>,
     // 当前曲线的顶点总数
@@ -48,4 +48,4 @@ import{_ as k,c as t,j as i,a,G as n,a1 as e,B as l,o as r}from"./chunks/framewo
 fn vs_main(@location(0) pos: vec3f, @location(1) target_pos: vec3f) -> @builtin(position) vec4f {
    let new_pos = pos + (target_pos - pos) * hilbert.near_target_ratio;
    return mvp_mat.mvp * vec4<f32>(new_pos, 1.0);
-}
查看完整源码 ​
`,11)),n(p,{customCodePath:"intermediate/hilbert-curve"})])}const m=k(E,[["render",d]]);export{o as __pageData,m as default};
+}
查看完整源码 ​
`,11)),l(p,{customCodePath:"intermediate/hilbert-curve"})])}const m=k(E,[["render",d]]);export{o as __pageData,m as default};
diff --git a/assets/intermediate_vertex-animation_universal-animation-formula.md.BWO0w12h.lean.js b/assets/intermediate_vertex-animation_universal-animation-formula.md.DBsHQKtB.lean.js
similarity index 98%
rename from assets/intermediate_vertex-animation_universal-animation-formula.md.BWO0w12h.lean.js
rename to assets/intermediate_vertex-animation_universal-animation-formula.md.DBsHQKtB.lean.js
index 7ea36d663..3a410da12 100644
--- a/assets/intermediate_vertex-animation_universal-animation-formula.md.BWO0w12h.lean.js
+++ b/assets/intermediate_vertex-animation_universal-animation-formula.md.DBsHQKtB.lean.js
@@ -1,4 +1,4 @@
-import{_ as k,c as t,j as i,a,G as n,a1 as e,B as l,o as r}from"./chunks/framework.DdYVMT1V.js";const o=JSON.parse('{"title":"万能动画公式","description":"","frontmatter":{},"headers":[],"relativePath":"intermediate/vertex-animation/universal-animation-formula.md","filePath":"intermediate/vertex-animation/universal-animation-formula.md","lastUpdated":1730902479000}'),E={name:"intermediate/vertex-animation/universal-animation-formula.md"};function d(g,s,y,F,c,u){const h=l("WebGPUExample"),p=l("AutoGithubLink");return r(),t("div",null,[s[0]||(s[0]=i("h1",{id:"万能动画公式",tabindex:"-1"},[a("万能动画公式 "),i("a",{class:"header-anchor",href:"#万能动画公式","aria-label":'Permalink to "万能动画公式"'},"​")],-1)),s[1]||(s[1]=i("p",null,[a("要实现不同形态/形状之间的动态变换，核心算法很简单，就是通过"),i("strong",null,"构造同等数量的顶点/控制点"),a("来实现。")],-1)),s[2]||(s[2]=i("p",null,"在进行动态变换时，通常不同形态或形状之间的顶点数量会不相等。为了使两边的顶点能够一一对应起来，我们可以通过随机或插值的方式来补充顶点。这种方式不会破坏顶点数较少一边的造型，相当于某些点有了分身。通过对对应顶点的插值计算，就能够实现形态的变换。",-1)),s[3]||(s[3]=i("p",null,"此万能动画公式的优点在于它足够简单且通用。无论是对于简单的形状变换还是复杂的动态效果，都可以通过构造同等数量的顶点来实现。而且，运用不同的插值算法，还能灵活地控制形态变换的程度和速度。",-1)),s[4]||(s[4]=i("h2",{id:"示例-hilbert-曲线",tabindex:"-1"},[a("示例：Hilbert 曲线 "),i("a",{class:"header-anchor",href:"#示例-hilbert-曲线","aria-label":'Permalink to "示例：Hilbert 曲线"'},"​")],-1)),n(h,{example:"hilbert_curve",autoLoad:"{true}"}),s[5]||(s[5]=e(`
代码实现 ​
Hilbert 曲线是一种连续、自避免且自相似的空间填充曲线。
每升一个维度，曲线的顶点数就多 4 倍，基于这个规律，我们用上面的万能动画公式来完成升维/降维变换动画：
rust
pub struct HilbertCurveApp {
+import{_ as k,C as n,o as t,c as e,j as i,a,G as l,a1 as r}from"./chunks/framework.DyadSNS9.js";const o=JSON.parse('{"title":"万能动画公式","description":"","frontmatter":{},"headers":[],"relativePath":"intermediate/vertex-animation/universal-animation-formula.md","filePath":"intermediate/vertex-animation/universal-animation-formula.md","lastUpdated":1731720800000}'),E={name:"intermediate/vertex-animation/universal-animation-formula.md"};function d(g,s,y,F,c,u){const h=n("WebGPUExample"),p=n("AutoGithubLink");return t(),e("div",null,[s[0]||(s[0]=i("h1",{id:"万能动画公式",tabindex:"-1"},[a("万能动画公式 "),i("a",{class:"header-anchor",href:"#万能动画公式","aria-label":'Permalink to "万能动画公式"'},"​")],-1)),s[1]||(s[1]=i("p",null,[a("要实现不同形态/形状之间的动态变换，核心算法很简单，就是通过"),i("strong",null,"构造同等数量的顶点/控制点"),a("来实现。")],-1)),s[2]||(s[2]=i("p",null,"在进行动态变换时，通常不同形态或形状之间的顶点数量会不相等。为了使两边的顶点能够一一对应起来，我们可以通过随机或插值的方式来补充顶点。这种方式不会破坏顶点数较少一边的造型，相当于某些点有了分身。通过对对应顶点的插值计算，就能够实现形态的变换。",-1)),s[3]||(s[3]=i("p",null,"此万能动画公式的优点在于它足够简单且通用。无论是对于简单的形状变换还是复杂的动态效果，都可以通过构造同等数量的顶点来实现。而且，运用不同的插值算法，还能灵活地控制形态变换的程度和速度。",-1)),s[4]||(s[4]=i("h2",{id:"示例-hilbert-曲线",tabindex:"-1"},[a("示例：Hilbert 曲线 "),i("a",{class:"header-anchor",href:"#示例-hilbert-曲线","aria-label":'Permalink to "示例：Hilbert 曲线"'},"​")],-1)),l(h,{example:"hilbert_curve",autoLoad:"{true}"}),s[5]||(s[5]=r(`
代码实现 ​
Hilbert 曲线是一种连续、自避免且自相似的空间填充曲线。
每升一个维度，曲线的顶点数就多 4 倍，基于这个规律，我们用上面的万能动画公式来完成升维/降维变换动画：
rust
pub struct HilbertCurveApp {
     // 当前曲线与目标曲线的顶点缓冲区
     vertex_buffers: Vec<wgpu::Buffer>,
     // 当前曲线的顶点总数
@@ -48,4 +48,4 @@ import{_ as k,c as t,j as i,a,G as n,a1 as e,B as l,o as r}from"./chunks/framewo
 fn vs_main(@location(0) pos: vec3f, @location(1) target_pos: vec3f) -> @builtin(position) vec4f {
    let new_pos = pos + (target_pos - pos) * hilbert.near_target_ratio;
    return mvp_mat.mvp * vec4<f32>(new_pos, 1.0);
-}
查看完整源码 ​
`,11)),n(p,{customCodePath:"intermediate/hilbert-curve"})])}const m=k(E,[["render",d]]);export{o as __pageData,m as default};
+}
查看完整源码 ​
`,11)),l(p,{customCodePath:"intermediate/hilbert-curve"})])}const m=k(E,[["render",d]]);export{o as __pageData,m as default};
diff --git a/assets/showcase_alignment.md.YdZf41U4.js b/assets/showcase_alignment.md.DLrIByQZ.js
similarity index 97%
rename from assets/showcase_alignment.md.YdZf41U4.js
rename to assets/showcase_alignment.md.DLrIByQZ.js
index 5ddbe6a27..2fe215220 100644
--- a/assets/showcase_alignment.md.YdZf41U4.js
+++ b/assets/showcase_alignment.md.DLrIByQZ.js
@@ -1,4 +1,4 @@
-import{_ as e,c as a,a1 as i,o as n}from"./chunks/framework.DdYVMT1V.js";const u=JSON.parse('{"title":"Memory Layout in WGSL","description":"","frontmatter":{},"headers":[],"relativePath":"showcase/alignment.md","filePath":"showcase/alignment.md","lastUpdated":1730902479000}'),t={name:"showcase/alignment.md"};function l(r,s,p,h,o,d){return n(),a("div",null,s[0]||(s[0]=[i(`
Memory Layout in WGSL ​
This page is currently being reworked. I want to understand the topics a bit better, but as 0.12 is out I want to release what I have for now.
Alignment of vertex and index buffers ​
Vertex buffers require defining a VertexBufferLayout, so the memory alignment is whatever you tell WebGPU it should be. This can be really convenient for keeping down memory usage on the GPU.
The Index Buffer uses the alignment of whatever primitive type you specify via the IndexFormat you pass into RenderEncoder::set_index_buffer().
Alignment of Uniform and Storage buffers ​
GPUs are designed to process thousands of pixels in parallel. In order to achieve this, some sacrifices had to be made. Graphics hardware likes to have all the bytes you intend on processing aligned by powers of 2. The exact specifics of why this is are beyond my level of knowledge, but it's important to know so that you can troubleshoot why your shaders aren't working.
Let's take a look at the following table:
TypeAlignment in BytesSize in Bytes
scalar (i32, u32, f32)44
vec2<T>88
vec3<T>1612
vec4<T>1616
You can see for vec3 the alignment is the next power of 2 from the size, 16. This can catch beginners (and even veterans) off guard as it's not the most intuitive. This becomes especially important when we start laying out structs. Take the light struct from the lighting tutorial:
You can see the full table of the alignments in section 4.3.7.1 of the WGSL spec
rust
struct Light {
+import{_ as e,o as a,c as i,a1 as n}from"./chunks/framework.DyadSNS9.js";const u=JSON.parse('{"title":"Memory Layout in WGSL","description":"","frontmatter":{},"headers":[],"relativePath":"showcase/alignment.md","filePath":"showcase/alignment.md","lastUpdated":1731720800000}'),t={name:"showcase/alignment.md"};function l(r,s,p,h,o,d){return a(),i("div",null,s[0]||(s[0]=[n(`
Memory Layout in WGSL ​
This page is currently being reworked. I want to understand the topics a bit better, but as 0.12 is out I want to release what I have for now.
Alignment of vertex and index buffers ​
Vertex buffers require defining a VertexBufferLayout, so the memory alignment is whatever you tell WebGPU it should be. This can be really convenient for keeping down memory usage on the GPU.
The Index Buffer uses the alignment of whatever primitive type you specify via the IndexFormat you pass into RenderEncoder::set_index_buffer().
Alignment of Uniform and Storage buffers ​
GPUs are designed to process thousands of pixels in parallel. In order to achieve this, some sacrifices had to be made. Graphics hardware likes to have all the bytes you intend on processing aligned by powers of 2. The exact specifics of why this is are beyond my level of knowledge, but it's important to know so that you can troubleshoot why your shaders aren't working.
Let's take a look at the following table:
TypeAlignment in BytesSize in Bytes
scalar (i32, u32, f32)44
vec2<T>88
vec3<T>1612
vec4<T>1616
You can see for vec3 the alignment is the next power of 2 from the size, 16. This can catch beginners (and even veterans) off guard as it's not the most intuitive. This becomes especially important when we start laying out structs. Take the light struct from the lighting tutorial:
You can see the full table of the alignments in section 4.3.7.1 of the WGSL spec
rust
struct Light {
     position: vec3f,
     color: vec3f,
 }
So what's the alignment of this struct? Your first guess would be that it's the sum of the alignments of the individual fields. That might make sense if we were in Rust-land, but in shader-land, it's a little more involved. The alignment for a given struct is given by the following equation:
// S is the struct in question
diff --git a/assets/showcase_alignment.md.YdZf41U4.lean.js b/assets/showcase_alignment.md.DLrIByQZ.lean.js
similarity index 97%
rename from assets/showcase_alignment.md.YdZf41U4.lean.js
rename to assets/showcase_alignment.md.DLrIByQZ.lean.js
index 5ddbe6a27..2fe215220 100644
--- a/assets/showcase_alignment.md.YdZf41U4.lean.js
+++ b/assets/showcase_alignment.md.DLrIByQZ.lean.js
@@ -1,4 +1,4 @@
-import{_ as e,c as a,a1 as i,o as n}from"./chunks/framework.DdYVMT1V.js";const u=JSON.parse('{"title":"Memory Layout in WGSL","description":"","frontmatter":{},"headers":[],"relativePath":"showcase/alignment.md","filePath":"showcase/alignment.md","lastUpdated":1730902479000}'),t={name:"showcase/alignment.md"};function l(r,s,p,h,o,d){return n(),a("div",null,s[0]||(s[0]=[i(`
Memory Layout in WGSL ​
This page is currently being reworked. I want to understand the topics a bit better, but as 0.12 is out I want to release what I have for now.
Alignment of vertex and index buffers ​
Vertex buffers require defining a VertexBufferLayout, so the memory alignment is whatever you tell WebGPU it should be. This can be really convenient for keeping down memory usage on the GPU.
The Index Buffer uses the alignment of whatever primitive type you specify via the IndexFormat you pass into RenderEncoder::set_index_buffer().
Alignment of Uniform and Storage buffers ​
GPUs are designed to process thousands of pixels in parallel. In order to achieve this, some sacrifices had to be made. Graphics hardware likes to have all the bytes you intend on processing aligned by powers of 2. The exact specifics of why this is are beyond my level of knowledge, but it's important to know so that you can troubleshoot why your shaders aren't working.
Let's take a look at the following table:
TypeAlignment in BytesSize in Bytes
scalar (i32, u32, f32)44
vec2<T>88
vec3<T>1612
vec4<T>1616
You can see for vec3 the alignment is the next power of 2 from the size, 16. This can catch beginners (and even veterans) off guard as it's not the most intuitive. This becomes especially important when we start laying out structs. Take the light struct from the lighting tutorial:
You can see the full table of the alignments in section 4.3.7.1 of the WGSL spec
rust
struct Light {
+import{_ as e,o as a,c as i,a1 as n}from"./chunks/framework.DyadSNS9.js";const u=JSON.parse('{"title":"Memory Layout in WGSL","description":"","frontmatter":{},"headers":[],"relativePath":"showcase/alignment.md","filePath":"showcase/alignment.md","lastUpdated":1731720800000}'),t={name:"showcase/alignment.md"};function l(r,s,p,h,o,d){return a(),i("div",null,s[0]||(s[0]=[n(`
Memory Layout in WGSL ​
This page is currently being reworked. I want to understand the topics a bit better, but as 0.12 is out I want to release what I have for now.
Alignment of vertex and index buffers ​
Vertex buffers require defining a VertexBufferLayout, so the memory alignment is whatever you tell WebGPU it should be. This can be really convenient for keeping down memory usage on the GPU.
The Index Buffer uses the alignment of whatever primitive type you specify via the IndexFormat you pass into RenderEncoder::set_index_buffer().
Alignment of Uniform and Storage buffers ​
GPUs are designed to process thousands of pixels in parallel. In order to achieve this, some sacrifices had to be made. Graphics hardware likes to have all the bytes you intend on processing aligned by powers of 2. The exact specifics of why this is are beyond my level of knowledge, but it's important to know so that you can troubleshoot why your shaders aren't working.
Let's take a look at the following table:
TypeAlignment in BytesSize in Bytes
scalar (i32, u32, f32)44
vec2<T>88
vec3<T>1612
vec4<T>1616
You can see for vec3 the alignment is the next power of 2 from the size, 16. This can catch beginners (and even veterans) off guard as it's not the most intuitive. This becomes especially important when we start laying out structs. Take the light struct from the lighting tutorial:
You can see the full table of the alignments in section 4.3.7.1 of the WGSL spec
rust
struct Light {
     position: vec3f,
     color: vec3f,
 }
So what's the alignment of this struct? Your first guess would be that it's the sum of the alignments of the individual fields. That might make sense if we were in Rust-land, but in shader-land, it's a little more involved. The alignment for a given struct is given by the following equation:
// S is the struct in question
diff --git a/assets/showcase_compute_index.md.Cyj8qpZI.js b/assets/showcase_compute_index.md.Dt3McrnY.js
similarity index 98%
rename from assets/showcase_compute_index.md.Cyj8qpZI.js
rename to assets/showcase_compute_index.md.Dt3McrnY.js
index 096ad7fd7..0e88d91e9 100644
--- a/assets/showcase_compute_index.md.Cyj8qpZI.js
+++ b/assets/showcase_compute_index.md.Dt3McrnY.js
@@ -1,4 +1,4 @@
-import{_ as a,c as n,a1 as e,G as l,B as t,o as p}from"./chunks/framework.DdYVMT1V.js";const h="/learn-wgpu-zh/assets/corruption.CLjvBSmk.png",k="/learn-wgpu-zh/assets/black_triangles.Cf9X5DzI.png",r="/learn-wgpu-zh/assets/render_doc_output.BqIbsoKI.png",E="/learn-wgpu-zh/assets/results.BfASPxqG.png",F=JSON.parse('{"title":"Compute Example: Tangents and Bitangents","description":"","frontmatter":{},"headers":[],"relativePath":"showcase/compute/index.md","filePath":"showcase/compute/index.md","lastUpdated":1730902479000}'),d={name:"showcase/compute/index.md"};function g(c,s,o,y,u,b){const i=t("AutoGithubLink");return p(),n("div",null,[s[0]||(s[0]=e(`
Compute Example: Tangents and Bitangents ​
This proved more difficult than I anticipated. The first problem I encountered was some vertex data corruption due to the shader reading my vertex data incorrectly. I was using the ModelVertex struct I used in the normal mapping tutorial.
rust
#[repr(C)]
+import{_ as a,C as n,o as e,c as l,a1 as t,G as p}from"./chunks/framework.DyadSNS9.js";const h="/learn-wgpu-zh/assets/corruption.CLjvBSmk.png",k="/learn-wgpu-zh/assets/black_triangles.Cf9X5DzI.png",r="/learn-wgpu-zh/assets/render_doc_output.BqIbsoKI.png",E="/learn-wgpu-zh/assets/results.BfASPxqG.png",F=JSON.parse('{"title":"Compute Example: Tangents and Bitangents","description":"","frontmatter":{},"headers":[],"relativePath":"showcase/compute/index.md","filePath":"showcase/compute/index.md","lastUpdated":1731720800000}'),d={name:"showcase/compute/index.md"};function g(c,s,o,y,u,b){const i=n("AutoGithubLink");return e(),l("div",null,[s[0]||(s[0]=t(`
Compute Example: Tangents and Bitangents ​
This proved more difficult than I anticipated. The first problem I encountered was some vertex data corruption due to the shader reading my vertex data incorrectly. I was using the ModelVertex struct I used in the normal mapping tutorial.
rust
#[repr(C)]
 #[derive(Copy, Clone, Debug, bytemuck::Pod, bytemuck::Zeroable)]
 pub struct ModelVertex {
     position: [f32; 3],
@@ -92,4 +92,4 @@ import{_ as a,c as n,a1 as e,G as l,B as t,o as p}from"./chunks/framework.DdYVMT
         len: t_list.len(),
     });
     flat_triangle_map.extend(t_list);
-}
I ultimately decided against this method as it was more complicated, and I haven't had time to benchmark it to see if it's faster than the simple method.
Results ​
The tangents and bitangents are now getting calculated correctly and on the GPU!
./results.png
',28)),l(i)])}const C=a(d,[["render",g]]);export{F as __pageData,C as default};
+}
I ultimately decided against this method as it was more complicated, and I haven't had time to benchmark it to see if it's faster than the simple method.
Results ​
The tangents and bitangents are now getting calculated correctly and on the GPU!
./results.png
',28)),p(i)])}const C=a(d,[["render",g]]);export{F as __pageData,C as default};
diff --git a/assets/showcase_compute_index.md.Cyj8qpZI.lean.js b/assets/showcase_compute_index.md.Dt3McrnY.lean.js
similarity index 98%
rename from assets/showcase_compute_index.md.Cyj8qpZI.lean.js
rename to assets/showcase_compute_index.md.Dt3McrnY.lean.js
index 096ad7fd7..0e88d91e9 100644
--- a/assets/showcase_compute_index.md.Cyj8qpZI.lean.js
+++ b/assets/showcase_compute_index.md.Dt3McrnY.lean.js
@@ -1,4 +1,4 @@
-import{_ as a,c as n,a1 as e,G as l,B as t,o as p}from"./chunks/framework.DdYVMT1V.js";const h="/learn-wgpu-zh/assets/corruption.CLjvBSmk.png",k="/learn-wgpu-zh/assets/black_triangles.Cf9X5DzI.png",r="/learn-wgpu-zh/assets/render_doc_output.BqIbsoKI.png",E="/learn-wgpu-zh/assets/results.BfASPxqG.png",F=JSON.parse('{"title":"Compute Example: Tangents and Bitangents","description":"","frontmatter":{},"headers":[],"relativePath":"showcase/compute/index.md","filePath":"showcase/compute/index.md","lastUpdated":1730902479000}'),d={name:"showcase/compute/index.md"};function g(c,s,o,y,u,b){const i=t("AutoGithubLink");return p(),n("div",null,[s[0]||(s[0]=e(`
Compute Example: Tangents and Bitangents ​
This proved more difficult than I anticipated. The first problem I encountered was some vertex data corruption due to the shader reading my vertex data incorrectly. I was using the ModelVertex struct I used in the normal mapping tutorial.
rust
#[repr(C)]
+import{_ as a,C as n,o as e,c as l,a1 as t,G as p}from"./chunks/framework.DyadSNS9.js";const h="/learn-wgpu-zh/assets/corruption.CLjvBSmk.png",k="/learn-wgpu-zh/assets/black_triangles.Cf9X5DzI.png",r="/learn-wgpu-zh/assets/render_doc_output.BqIbsoKI.png",E="/learn-wgpu-zh/assets/results.BfASPxqG.png",F=JSON.parse('{"title":"Compute Example: Tangents and Bitangents","description":"","frontmatter":{},"headers":[],"relativePath":"showcase/compute/index.md","filePath":"showcase/compute/index.md","lastUpdated":1731720800000}'),d={name:"showcase/compute/index.md"};function g(c,s,o,y,u,b){const i=n("AutoGithubLink");return e(),l("div",null,[s[0]||(s[0]=t(`
Compute Example: Tangents and Bitangents ​
This proved more difficult than I anticipated. The first problem I encountered was some vertex data corruption due to the shader reading my vertex data incorrectly. I was using the ModelVertex struct I used in the normal mapping tutorial.
rust
#[repr(C)]
 #[derive(Copy, Clone, Debug, bytemuck::Pod, bytemuck::Zeroable)]
 pub struct ModelVertex {
     position: [f32; 3],
@@ -92,4 +92,4 @@ import{_ as a,c as n,a1 as e,G as l,B as t,o as p}from"./chunks/framework.DdYVMT
         len: t_list.len(),
     });
     flat_triangle_map.extend(t_list);
-}
I ultimately decided against this method as it was more complicated, and I haven't had time to benchmark it to see if it's faster than the simple method.
Results ​
The tangents and bitangents are now getting calculated correctly and on the GPU!
./results.png
',28)),l(i)])}const C=a(d,[["render",g]]);export{F as __pageData,C as default};
+}
I ultimately decided against this method as it was more complicated, and I haven't had time to benchmark it to see if it's faster than the simple method.
Results ​
The tangents and bitangents are now getting calculated correctly and on the GPU!
./results.png
',28)),p(i)])}const C=a(d,[["render",g]]);export{F as __pageData,C as default};
diff --git a/assets/showcase_gifs_index.md.BzGCC4s8.js b/assets/showcase_gifs_index.md.DyghaS6s.js
similarity index 99%
rename from assets/showcase_gifs_index.md.BzGCC4s8.js
rename to assets/showcase_gifs_index.md.DyghaS6s.js
index 3b1159948..b84102738 100644
--- a/assets/showcase_gifs_index.md.BzGCC4s8.js
+++ b/assets/showcase_gifs_index.md.DyghaS6s.js
@@ -1,4 +1,4 @@
-import{_ as a,c as n,a1 as p,G as h,B as k,o as l}from"./chunks/framework.DdYVMT1V.js";const t="/learn-wgpu-zh/assets/output.BTYKABDR.gif",b=JSON.parse('{"title":"生成 GIF 动图","description":"","frontmatter":{},"headers":[],"relativePath":"showcase/gifs/index.md","filePath":"showcase/gifs/index.md","lastUpdated":1730902479000}'),e={name:"showcase/gifs/index.md"};function r(E,s,d,g,y,F){const i=k("AutoGithubLink");return l(),n("div",null,[s[0]||(s[0]=p(`
生成 GIF 动图 ​
假如你想要展示一个自己实现的，漂亮的 WebGPU 模拟动画，当然可以录制一个视频，但如果只是想在微博或朋友圈以九宫格来展示呢？
这，就是 GIF 的用武之地。
另外，GIF 的发音是 GHIF，而不是 JIF，因为 JIF 不仅是花生酱，它也是一种不同的图像格式。
如何制作 GIF？ ​
我们使用 gif 包创建一个函数来对渲染的图像进行编码：
rust
fn save_gif(path: &str, frames: &mut Vec<Vec<u8>>, speed: i32, size: u16) -> Result<(), failure::Error> {
+import{_ as a,C as n,o as p,c as h,a1 as k,G as l}from"./chunks/framework.DyadSNS9.js";const t="/learn-wgpu-zh/assets/output.BTYKABDR.gif",b=JSON.parse('{"title":"生成 GIF 动图","description":"","frontmatter":{},"headers":[],"relativePath":"showcase/gifs/index.md","filePath":"showcase/gifs/index.md","lastUpdated":1731720800000}'),e={name:"showcase/gifs/index.md"};function r(E,s,d,g,y,F){const i=n("AutoGithubLink");return p(),h("div",null,[s[0]||(s[0]=k(`
生成 GIF 动图 ​
假如你想要展示一个自己实现的，漂亮的 WebGPU 模拟动画，当然可以录制一个视频，但如果只是想在微博或朋友圈以九宫格来展示呢？
这，就是 GIF 的用武之地。
另外，GIF 的发音是 GHIF，而不是 JIF，因为 JIF 不仅是花生酱，它也是一种不同的图像格式。
如何制作 GIF？ ​
我们使用 gif 包创建一个函数来对渲染的图像进行编码：
rust
fn save_gif(path: &str, frames: &mut Vec<Vec<u8>>, speed: i32, size: u16) -> Result<(), failure::Error> {
     use gif::{Frame, Encoder, Repeat, SetParameter};
 
     let mut image = std::fs::File::create(path)?;
@@ -121,4 +121,4 @@ import{_ as a,c as n,a1 as p,G as h,B as k,o as l}from"./chunks/framework.DdYVMT
         _ => { eprintln!("Something went wrong") }
     }
 
-}
完成后，就可以将我们的帧数据传递给 save_gif() 函数了：
rust
save_gif("output.gif", &mut frames, 1, texture_size as u16).unwrap();
我们还可以使用纹理数组来做优化，并一次发送所有绘制命令。 但上面的简单程序就是生成 GIF 动图的全部要点了，运行示例代码将得到以下 GIF 图：
./output.gif
',17)),h(i)])}const u=a(e,[["render",r]]);export{b as __pageData,u as default};
+}
完成后，就可以将我们的帧数据传递给 save_gif() 函数了：
rust
save_gif("output.gif", &mut frames, 1, texture_size as u16).unwrap();
我们还可以使用纹理数组来做优化，并一次发送所有绘制命令。 但上面的简单程序就是生成 GIF 动图的全部要点了，运行示例代码将得到以下 GIF 图：
./output.gif
',17)),l(i)])}const u=a(e,[["render",r]]);export{b as __pageData,u as default};
diff --git a/assets/showcase_gifs_index.md.BzGCC4s8.lean.js b/assets/showcase_gifs_index.md.DyghaS6s.lean.js
similarity index 99%
rename from assets/showcase_gifs_index.md.BzGCC4s8.lean.js
rename to assets/showcase_gifs_index.md.DyghaS6s.lean.js
index 3b1159948..b84102738 100644
--- a/assets/showcase_gifs_index.md.BzGCC4s8.lean.js
+++ b/assets/showcase_gifs_index.md.DyghaS6s.lean.js
@@ -1,4 +1,4 @@
-import{_ as a,c as n,a1 as p,G as h,B as k,o as l}from"./chunks/framework.DdYVMT1V.js";const t="/learn-wgpu-zh/assets/output.BTYKABDR.gif",b=JSON.parse('{"title":"生成 GIF 动图","description":"","frontmatter":{},"headers":[],"relativePath":"showcase/gifs/index.md","filePath":"showcase/gifs/index.md","lastUpdated":1730902479000}'),e={name:"showcase/gifs/index.md"};function r(E,s,d,g,y,F){const i=k("AutoGithubLink");return l(),n("div",null,[s[0]||(s[0]=p(`
生成 GIF 动图 ​
假如你想要展示一个自己实现的，漂亮的 WebGPU 模拟动画，当然可以录制一个视频，但如果只是想在微博或朋友圈以九宫格来展示呢？
这，就是 GIF 的用武之地。
另外，GIF 的发音是 GHIF，而不是 JIF，因为 JIF 不仅是花生酱，它也是一种不同的图像格式。
如何制作 GIF？ ​
我们使用 gif 包创建一个函数来对渲染的图像进行编码：
rust
fn save_gif(path: &str, frames: &mut Vec<Vec<u8>>, speed: i32, size: u16) -> Result<(), failure::Error> {
+import{_ as a,C as n,o as p,c as h,a1 as k,G as l}from"./chunks/framework.DyadSNS9.js";const t="/learn-wgpu-zh/assets/output.BTYKABDR.gif",b=JSON.parse('{"title":"生成 GIF 动图","description":"","frontmatter":{},"headers":[],"relativePath":"showcase/gifs/index.md","filePath":"showcase/gifs/index.md","lastUpdated":1731720800000}'),e={name:"showcase/gifs/index.md"};function r(E,s,d,g,y,F){const i=n("AutoGithubLink");return p(),h("div",null,[s[0]||(s[0]=k(`
生成 GIF 动图 ​
假如你想要展示一个自己实现的，漂亮的 WebGPU 模拟动画，当然可以录制一个视频，但如果只是想在微博或朋友圈以九宫格来展示呢？
这，就是 GIF 的用武之地。
另外，GIF 的发音是 GHIF，而不是 JIF，因为 JIF 不仅是花生酱，它也是一种不同的图像格式。
如何制作 GIF？ ​
我们使用 gif 包创建一个函数来对渲染的图像进行编码：
rust
fn save_gif(path: &str, frames: &mut Vec<Vec<u8>>, speed: i32, size: u16) -> Result<(), failure::Error> {
     use gif::{Frame, Encoder, Repeat, SetParameter};
 
     let mut image = std::fs::File::create(path)?;
@@ -121,4 +121,4 @@ import{_ as a,c as n,a1 as p,G as h,B as k,o as l}from"./chunks/framework.DdYVMT
         _ => { eprintln!("Something went wrong") }
     }
 
-}
完成后，就可以将我们的帧数据传递给 save_gif() 函数了：
rust
save_gif("output.gif", &mut frames, 1, texture_size as u16).unwrap();
我们还可以使用纹理数组来做优化，并一次发送所有绘制命令。 但上面的简单程序就是生成 GIF 动图的全部要点了，运行示例代码将得到以下 GIF 图：
./output.gif
',17)),h(i)])}const u=a(e,[["render",r]]);export{b as __pageData,u as default};
+}
完成后，就可以将我们的帧数据传递给 save_gif() 函数了：
rust
save_gif("output.gif", &mut frames, 1, texture_size as u16).unwrap();
我们还可以使用纹理数组来做优化，并一次发送所有绘制命令。 但上面的简单程序就是生成 GIF 动图的全部要点了，运行示例代码将得到以下 GIF 图：
./output.gif
',17)),l(i)])}const u=a(e,[["render",r]]);export{b as __pageData,u as default};
diff --git a/assets/showcase_pong_index.md.dLFU-yWv.js b/assets/showcase_pong_index.md.DCVjTk6g.js
similarity index 99%
rename from assets/showcase_pong_index.md.dLFU-yWv.js
rename to assets/showcase_pong_index.md.DCVjTk6g.js
index 7bbc05e31..fe51f60ce 100644
--- a/assets/showcase_pong_index.md.dLFU-yWv.js
+++ b/assets/showcase_pong_index.md.DCVjTk6g.js
@@ -1,4 +1,4 @@
-import{_ as a,c as n,a1 as l,G as h,B as p,o as t}from"./chunks/framework.DdYVMT1V.js";const k="/learn-wgpu-zh/assets/pong.By3rm4gi.png",o=JSON.parse('{"title":"Pong","description":"","frontmatter":{},"headers":[],"relativePath":"showcase/pong/index.md","filePath":"showcase/pong/index.md","lastUpdated":1730902479000}'),e={name:"showcase/pong/index.md"};function r(E,s,d,g,y,F){const i=p("WasmExample");return t(),n("div",null,[s[0]||(s[0]=l('
Pong ​
Practically the "Hello World!" of games. Pong has been remade thousands of times. I know Pong. You know Pong. We all know Pong. That being said, this time I wanted to put in a little more effort than most people do. This showcase has a basic menu system, sounds, and different game states.
The architecture is not the best as I prescribed to the "get things done" mentality. If I were to redo this project, I'd change a lot of things. Regardless, let's get into the postmortem.
The Architecture ​
I was messing around with separating state from the render code. It ended up similar to an Entity Component System model.
I had a State class with all of the objects in the scene. This included the ball and the paddles, as well as the text for the scores and even the menu. State also included a game_state field of type GameState.
rust
#[derive(Debug, Copy, Clone, Eq, PartialEq)]
+import{_ as a,C as n,o as l,c as h,a1 as p,G as t}from"./chunks/framework.DyadSNS9.js";const k="/learn-wgpu-zh/assets/pong.By3rm4gi.png",o=JSON.parse('{"title":"Pong","description":"","frontmatter":{},"headers":[],"relativePath":"showcase/pong/index.md","filePath":"showcase/pong/index.md","lastUpdated":1731720800000}'),e={name:"showcase/pong/index.md"};function r(E,s,d,g,y,F){const i=n("WasmExample");return l(),h("div",null,[s[0]||(s[0]=p('
Pong ​
Practically the "Hello World!" of games. Pong has been remade thousands of times. I know Pong. You know Pong. We all know Pong. That being said, this time I wanted to put in a little more effort than most people do. This showcase has a basic menu system, sounds, and different game states.
The architecture is not the best as I prescribed to the "get things done" mentality. If I were to redo this project, I'd change a lot of things. Regardless, let's get into the postmortem.
The Architecture ​
I was messing around with separating state from the render code. It ended up similar to an Entity Component System model.
I had a State class with all of the objects in the scene. This included the ball and the paddles, as well as the text for the scores and even the menu. State also included a game_state field of type GameState.
rust
#[derive(Debug, Copy, Clone, Eq, PartialEq)]
 pub enum GameState {
     MainMenu,
     Serving,
@@ -257,4 +257,4 @@ import{_ as a,c as n,a1 as l,G as h,B as p,o as t}from"./chunks/framework.DdYVMT
             Some(())
         })
         .expect("Couldn't append canvas to document body.");
-}
Everything else works the same.
Summary ​
A fun project to work on. It was overly architected, and kinda hard to make changes, but a good experience nonetheless.
Try the code down below! (Controls currently require a keyboard.)
`,47)),h(i,{example:"pong"})])}const u=a(e,[["render",r]]);export{o as __pageData,u as default};
+}
Everything else works the same.
Summary ​
A fun project to work on. It was overly architected, and kinda hard to make changes, but a good experience nonetheless.
Try the code down below! (Controls currently require a keyboard.)
`,47)),t(i,{example:"pong"})])}const u=a(e,[["render",r]]);export{o as __pageData,u as default};
diff --git a/assets/showcase_pong_index.md.dLFU-yWv.lean.js b/assets/showcase_pong_index.md.DCVjTk6g.lean.js
similarity index 99%
rename from assets/showcase_pong_index.md.dLFU-yWv.lean.js
rename to assets/showcase_pong_index.md.DCVjTk6g.lean.js
index 7bbc05e31..fe51f60ce 100644
--- a/assets/showcase_pong_index.md.dLFU-yWv.lean.js
+++ b/assets/showcase_pong_index.md.DCVjTk6g.lean.js
@@ -1,4 +1,4 @@
-import{_ as a,c as n,a1 as l,G as h,B as p,o as t}from"./chunks/framework.DdYVMT1V.js";const k="/learn-wgpu-zh/assets/pong.By3rm4gi.png",o=JSON.parse('{"title":"Pong","description":"","frontmatter":{},"headers":[],"relativePath":"showcase/pong/index.md","filePath":"showcase/pong/index.md","lastUpdated":1730902479000}'),e={name:"showcase/pong/index.md"};function r(E,s,d,g,y,F){const i=p("WasmExample");return t(),n("div",null,[s[0]||(s[0]=l('
Pong ​
Practically the "Hello World!" of games. Pong has been remade thousands of times. I know Pong. You know Pong. We all know Pong. That being said, this time I wanted to put in a little more effort than most people do. This showcase has a basic menu system, sounds, and different game states.
The architecture is not the best as I prescribed to the "get things done" mentality. If I were to redo this project, I'd change a lot of things. Regardless, let's get into the postmortem.
The Architecture ​
I was messing around with separating state from the render code. It ended up similar to an Entity Component System model.
I had a State class with all of the objects in the scene. This included the ball and the paddles, as well as the text for the scores and even the menu. State also included a game_state field of type GameState.
rust
#[derive(Debug, Copy, Clone, Eq, PartialEq)]
+import{_ as a,C as n,o as l,c as h,a1 as p,G as t}from"./chunks/framework.DyadSNS9.js";const k="/learn-wgpu-zh/assets/pong.By3rm4gi.png",o=JSON.parse('{"title":"Pong","description":"","frontmatter":{},"headers":[],"relativePath":"showcase/pong/index.md","filePath":"showcase/pong/index.md","lastUpdated":1731720800000}'),e={name:"showcase/pong/index.md"};function r(E,s,d,g,y,F){const i=n("WasmExample");return l(),h("div",null,[s[0]||(s[0]=p('
Pong ​
Practically the "Hello World!" of games. Pong has been remade thousands of times. I know Pong. You know Pong. We all know Pong. That being said, this time I wanted to put in a little more effort than most people do. This showcase has a basic menu system, sounds, and different game states.
The architecture is not the best as I prescribed to the "get things done" mentality. If I were to redo this project, I'd change a lot of things. Regardless, let's get into the postmortem.
The Architecture ​
I was messing around with separating state from the render code. It ended up similar to an Entity Component System model.
I had a State class with all of the objects in the scene. This included the ball and the paddles, as well as the text for the scores and even the menu. State also included a game_state field of type GameState.
rust
#[derive(Debug, Copy, Clone, Eq, PartialEq)]
 pub enum GameState {
     MainMenu,
     Serving,
@@ -257,4 +257,4 @@ import{_ as a,c as n,a1 as l,G as h,B as p,o as t}from"./chunks/framework.DdYVMT
             Some(())
         })
         .expect("Couldn't append canvas to document body.");
-}
Everything else works the same.
Summary ​
A fun project to work on. It was overly architected, and kinda hard to make changes, but a good experience nonetheless.
Try the code down below! (Controls currently require a keyboard.)
`,47)),h(i,{example:"pong"})])}const u=a(e,[["render",r]]);export{o as __pageData,u as default};
+}
Everything else works the same.
Summary ​
A fun project to work on. It was overly architected, and kinda hard to make changes, but a good experience nonetheless.
Try the code down below! (Controls currently require a keyboard.)
`,47)),t(i,{example:"pong"})])}const u=a(e,[["render",r]]);export{o as __pageData,u as default};
diff --git a/assets/showcase_threading.md.2PfQJOkX.js b/assets/showcase_threading.md.DDvFOucT.js
similarity index 99%
rename from assets/showcase_threading.md.2PfQJOkX.js
rename to assets/showcase_threading.md.DDvFOucT.js
index 1ff2c3b77..ec876edbb 100644
--- a/assets/showcase_threading.md.2PfQJOkX.js
+++ b/assets/showcase_threading.md.DDvFOucT.js
@@ -1,4 +1,4 @@
-import{_ as a,c as n,a1 as h,G as l,B as p,o as k}from"./chunks/framework.DdYVMT1V.js";const c=JSON.parse('{"title":"Multi-threading with Wgpu and Rayon","description":"","frontmatter":{},"headers":[],"relativePath":"showcase/threading.md","filePath":"showcase/threading.md","lastUpdated":1730902479000}'),t={name:"showcase/threading.md"};function e(r,s,E,d,g,y){const i=p("AutoGithubLink");return k(),n("div",null,[s[0]||(s[0]=h(`
Multi-threading with Wgpu and Rayon ​
This example has not been tested on WASM. Rayon has support for multi threading on WASM via wasm-bindgen-rayon, though that implementation is only currently working on Chrome-based browsers. Because of this I've elected not to make a WASM version of this tutorial at this time.
The main selling point of Vulkan, DirectX 12, Metal, and by extension Wgpu is that these APIs is that they designed from the ground up to be thread safe. Up to this point, we have been doing everything on a single thread. That's about to change.
This example is based on the code for tutorial12-camera
I won't go into what threads are in this tutorial. That is a full CS course in and of itself. All we'll be covering is using threading to make loading resources faster.
We won't go over multithreading rendering as we don't have enough different types of objects to justify that yet. This will change in a coming tutorial
Parallelizing loading models and textures ​
Currently, we load the materials and meshes of our model one at a time. This is a perfect opportunity for multithreading! All our changes will be in model.rs. Let's first start with the materials. We'll convert the regular for loop into a par_iter().map().
rust
// resources.rs
+import{_ as a,C as n,o as h,c as l,a1 as p,G as k}from"./chunks/framework.DyadSNS9.js";const c=JSON.parse('{"title":"Multi-threading with Wgpu and Rayon","description":"","frontmatter":{},"headers":[],"relativePath":"showcase/threading.md","filePath":"showcase/threading.md","lastUpdated":1731720800000}'),t={name:"showcase/threading.md"};function e(r,s,E,d,g,y){const i=n("AutoGithubLink");return h(),l("div",null,[s[0]||(s[0]=p(`
Multi-threading with Wgpu and Rayon ​
This example has not been tested on WASM. Rayon has support for multi threading on WASM via wasm-bindgen-rayon, though that implementation is only currently working on Chrome-based browsers. Because of this I've elected not to make a WASM version of this tutorial at this time.
The main selling point of Vulkan, DirectX 12, Metal, and by extension Wgpu is that these APIs is that they designed from the ground up to be thread safe. Up to this point, we have been doing everything on a single thread. That's about to change.
This example is based on the code for tutorial12-camera
I won't go into what threads are in this tutorial. That is a full CS course in and of itself. All we'll be covering is using threading to make loading resources faster.
We won't go over multithreading rendering as we don't have enough different types of objects to justify that yet. This will change in a coming tutorial
Parallelizing loading models and textures ​
Currently, we load the materials and meshes of our model one at a time. This is a perfect opportunity for multithreading! All our changes will be in model.rs. Let's first start with the materials. We'll convert the regular for loop into a par_iter().map().
rust
// resources.rs
 
 #[cfg(not(target_arch="wasm32"))]
 use rayon::iter::IntoParallelIterator;
@@ -85,4 +85,4 @@ import{_ as a,c as n,a1 as h,G as l,B as p,o as k}from"./chunks/framework.DdYVMT
     }
     // ...
 }
We've parallelized loading the meshes, and making the vertex array for them. Probably a bit overkill, but rayon should prevent us from using too many threads.
You'll notice that we didn't use rayon for calculating the tangent, and bitangent. I tried to get it to work, but I was having trouble finding a way to do it without multiple mutable references to vertices. I don't feel like introducing a std::sync::Mutex, so I'll leave it for now.
This is honestly a better job for a compute shader, as the model data is going to get loaded into a buffer anyway.
It's that easy! ​
Most of the wgpu types are Send + Sync, so we can use them in threads without much trouble. It was so easy, that I feel like this tutorial is too short! I'll just leave off with a speed comparison between the previous model loading code and the current code.
Elapsed (Original): 309.596382ms
-Elapsed (Threaded): 199.645027ms
We're not loading that many resources, so the speedup is minimal. We'll be doing more stuff with threading, but this is a good introduction.
`,16)),l(i)])}const o=a(t,[["render",e]]);export{c as __pageData,o as default};
+Elapsed (Threaded): 199.645027ms
We're not loading that many resources, so the speedup is minimal. We'll be doing more stuff with threading, but this is a good introduction.
`,16)),k(i)])}const o=a(t,[["render",e]]);export{c as __pageData,o as default};
diff --git a/assets/showcase_threading.md.2PfQJOkX.lean.js b/assets/showcase_threading.md.DDvFOucT.lean.js
similarity index 99%
rename from assets/showcase_threading.md.2PfQJOkX.lean.js
rename to assets/showcase_threading.md.DDvFOucT.lean.js
index 1ff2c3b77..ec876edbb 100644
--- a/assets/showcase_threading.md.2PfQJOkX.lean.js
+++ b/assets/showcase_threading.md.DDvFOucT.lean.js
@@ -1,4 +1,4 @@
-import{_ as a,c as n,a1 as h,G as l,B as p,o as k}from"./chunks/framework.DdYVMT1V.js";const c=JSON.parse('{"title":"Multi-threading with Wgpu and Rayon","description":"","frontmatter":{},"headers":[],"relativePath":"showcase/threading.md","filePath":"showcase/threading.md","lastUpdated":1730902479000}'),t={name:"showcase/threading.md"};function e(r,s,E,d,g,y){const i=p("AutoGithubLink");return k(),n("div",null,[s[0]||(s[0]=h(`
Multi-threading with Wgpu and Rayon ​
This example has not been tested on WASM. Rayon has support for multi threading on WASM via wasm-bindgen-rayon, though that implementation is only currently working on Chrome-based browsers. Because of this I've elected not to make a WASM version of this tutorial at this time.
The main selling point of Vulkan, DirectX 12, Metal, and by extension Wgpu is that these APIs is that they designed from the ground up to be thread safe. Up to this point, we have been doing everything on a single thread. That's about to change.
This example is based on the code for tutorial12-camera
I won't go into what threads are in this tutorial. That is a full CS course in and of itself. All we'll be covering is using threading to make loading resources faster.
We won't go over multithreading rendering as we don't have enough different types of objects to justify that yet. This will change in a coming tutorial
Parallelizing loading models and textures ​
Currently, we load the materials and meshes of our model one at a time. This is a perfect opportunity for multithreading! All our changes will be in model.rs. Let's first start with the materials. We'll convert the regular for loop into a par_iter().map().
rust
// resources.rs
+import{_ as a,C as n,o as h,c as l,a1 as p,G as k}from"./chunks/framework.DyadSNS9.js";const c=JSON.parse('{"title":"Multi-threading with Wgpu and Rayon","description":"","frontmatter":{},"headers":[],"relativePath":"showcase/threading.md","filePath":"showcase/threading.md","lastUpdated":1731720800000}'),t={name:"showcase/threading.md"};function e(r,s,E,d,g,y){const i=n("AutoGithubLink");return h(),l("div",null,[s[0]||(s[0]=p(`
Multi-threading with Wgpu and Rayon ​
This example has not been tested on WASM. Rayon has support for multi threading on WASM via wasm-bindgen-rayon, though that implementation is only currently working on Chrome-based browsers. Because of this I've elected not to make a WASM version of this tutorial at this time.
The main selling point of Vulkan, DirectX 12, Metal, and by extension Wgpu is that these APIs is that they designed from the ground up to be thread safe. Up to this point, we have been doing everything on a single thread. That's about to change.
This example is based on the code for tutorial12-camera
I won't go into what threads are in this tutorial. That is a full CS course in and of itself. All we'll be covering is using threading to make loading resources faster.
We won't go over multithreading rendering as we don't have enough different types of objects to justify that yet. This will change in a coming tutorial
Parallelizing loading models and textures ​
Currently, we load the materials and meshes of our model one at a time. This is a perfect opportunity for multithreading! All our changes will be in model.rs. Let's first start with the materials. We'll convert the regular for loop into a par_iter().map().
rust
// resources.rs
 
 #[cfg(not(target_arch="wasm32"))]
 use rayon::iter::IntoParallelIterator;
@@ -85,4 +85,4 @@ import{_ as a,c as n,a1 as h,G as l,B as p,o as k}from"./chunks/framework.DdYVMT
     }
     // ...
 }
We've parallelized loading the meshes, and making the vertex array for them. Probably a bit overkill, but rayon should prevent us from using too many threads.
You'll notice that we didn't use rayon for calculating the tangent, and bitangent. I tried to get it to work, but I was having trouble finding a way to do it without multiple mutable references to vertices. I don't feel like introducing a std::sync::Mutex, so I'll leave it for now.
This is honestly a better job for a compute shader, as the model data is going to get loaded into a buffer anyway.
It's that easy! ​
Most of the wgpu types are Send + Sync, so we can use them in threads without much trouble. It was so easy, that I feel like this tutorial is too short! I'll just leave off with a speed comparison between the previous model loading code and the current code.
Elapsed (Original): 309.596382ms
-Elapsed (Threaded): 199.645027ms
We're not loading that many resources, so the speedup is minimal. We'll be doing more stuff with threading, but this is a good introduction.
`,16)),l(i)])}const o=a(t,[["render",e]]);export{c as __pageData,o as default};
+Elapsed (Threaded): 199.645027ms
We're not loading that many resources, so the speedup is minimal. We'll be doing more stuff with threading, but this is a good introduction.
`,16)),k(i)])}const o=a(t,[["render",e]]);export{c as __pageData,o as default};
diff --git a/assets/showcase_windowless_index.md.DziIfJjF.js b/assets/showcase_windowless_index.md.JCZbS0yg.js
similarity index 99%
rename from assets/showcase_windowless_index.md.DziIfJjF.js
rename to assets/showcase_windowless_index.md.JCZbS0yg.js
index d68c6fd5c..4055ff19b 100644
--- a/assets/showcase_windowless_index.md.DziIfJjF.js
+++ b/assets/showcase_windowless_index.md.JCZbS0yg.js
@@ -1,4 +1,4 @@
-import{_ as a,c as n,a1 as p,G as l,B as h,o as k}from"./chunks/framework.DdYVMT1V.js";const t="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAYAAABccqhmAAAFq0lEQVR4nO3U2XVcRxBEQcovOiJf5IY8kl8SRLAPAXAweEvvGfFRFlTeP/786+9/vwGRBACCCQAEEwAIJgAQTAAgmABAMAGAYAIAwQQAggkABBMACCYAEEwAIJgAQDABgGACAMEEAIIJAAQTAAgmABBMACCYAEAwAYBgAgDBBACCCQAEEwAIJgAQTAAgmABAMAGAYAIAwQQAggkABBMACCYAEEwAIJgAQDABgGACAMEEAIIJAAQTAAgmABBMACCYAEAwAYBgAgDBBACCCQAEEwAIJgAQTAAgmABAMAGAYAIAwQQAggkABBMACCYAEEwAIJgAQDABgGACAMEEINj3b/+83G8v9/vLJZEABBMABCBUGX8hApkEIJQA8D8BCPRx/IUI5BGAQAJAIQBhPht/IQJZBCCMAPCWAAT5avyFCOQQgCACwEcCEOLo+AsRyCAAIQSARwQgwNnxFyKwPwEIIAB8RgA2d3X8hQjsTQA2JwA8IwAbuzv+QgT2JQAbEwC+IgCbqjX+QgT2JACbEgCOEIAN1R5/IQL7EYANCQBHCcBmWo2/EIG9CMBmBIAzBGAjrcdfiMA+BGAjAsBZArCJXuMvRGAPArAJAeAKAdhA7/EXIrA+AdiAAHCVACxu1PgLEVibACxOALhDABY2evyFCKxLABYmANwlAIuaZfyFCKxJABYlANQgAAuabfyFCKxHABYkANQiAIuZdfyFCKxFABYjANQkAAuZffyFCKxDABYiANQmAItYZfyFCKxBABYhALQgAAtYbfyFCMxPABYgALQiAJNbdfyFCMxNACYnALQkABNbffyFCMxLACYmALQmAJPaZfyFCMxJACYlAPQgABPabfyFCMxHACYkAPQiAJPZdfyFCMxFACYjAPQkABPZffyFCMxDACYiAPQmAJNIGX8hAnMQgEkIACMIwATSxl+IwHgCMAEBYBQBGCx1/IUIjCUAgwmAAIwkAAOlj78QgXEEYCABeCUA4wjAIMb/ngiMIQCDCMB7AjCGAAxg/I+JQH8CMIAAPCYA/QlAZ8b/nAj0JQCdCcBzAtCXAHRk/MeIQD8C0JEAHCMA/QhAJ8Z/jgj0IQCdCMA5AtCHAHRg/NeIQHsC0IEAXCMA7QlAY8Z/jwi0JQCNCcA9AtCWADRk/HWIQDsC0JAA1CEA7QhAI8Zflwi0IQCNCEBdAtCGADRg/G2IQH0C0IAAtCEA9QlAZcbflgjUJQCVCUBbAlCXAFRk/H2IQD0CUJEA9CEA9QhAJcbflwjUIQCVCEBfAlCHAFRg/GOIwH0CUIEAjCEA9wnATcY/lgjcIwA3CcBYAnCPANxg/HMQgesE4AYBmIMAXCcAFxn/XETgGgG4SADmIgDXCMAFxj8nEThPAC4QgDkJwHkCcJLxz00EzhGAkwRgbgJwjgCcYPxrEIHjBOAEAViDABwnAAcZ/1pE4BgBOEgA1iIAxwjAAca/JhH4mgAcIABrEoCvCcAXjH9tIvCcAHxBANYmAM8JwBPGvwcR+JwAPCEAexCAzwnAJ4x/LyLwmAB8QgD2IgCPCcADxr8nEfidADwgAHsSgN8JwAfGvzcReE8APhCAvQnAewLwhvFnEIFfBOANAcggAL8IwE/Gn0UEXgnATwKQRQBeCcAL488kAgLwgwBkEgABeHkB40+WHoH4AEAyAYBgAgDBBACCCQAEEwAIJgAQTAAgmABAMAGAYAIAwQQAggkABBMACCYAEEwAIJgAQDABgGACAMEEAIIJAAQTAAgmABBMACCYAEAwAYBgAgDBBACCCQAEEwAIJgAQTAAgmABAMAGAYAIAwQQAggkABBMACCYAEEwAIJgAQDABgGACAMEEAIIJAAQTAAgmABBMACCYAEAwAYBgAgDBBACCCQAEEwAIJgAQTAAgmABAMAGAYAIAwQQAggkABBMACCYAEEwAINh/p/JoLhfYRNsAAAAASUVORK5CYII=",c=JSON.parse('{"title":"离屏渲染","description":"","frontmatter":{},"headers":[],"relativePath":"showcase/windowless/index.md","filePath":"showcase/windowless/index.md","lastUpdated":1730902479000}'),e={name:"showcase/windowless/index.md"};function r(E,s,d,g,y,F){const i=h("AutoGithubLink");return k(),n("div",null,[s[0]||(s[0]=p(`
离屏渲染 ​
有时我们只是想利用 gpu，也许是要并行地计算一组大的数字; 也许是正在制作一部 3D 电影，并需要用路径追踪来创建一个看起来很真实的场景; 也许正在挖掘一种加密货币。在所有这些情况下，我们可能 不需要 从窗口看到正在发生的事情。
如何使用？ ​
离屏渲染（Off-Screen Rendering, 也叫做 Windowless Rendering）其实很简单：事实上，我们不需要一个窗口（Window）来创建一个GPU 实例，不需要一个窗口来选择适配器，也不需要一个窗口来创建逻辑设备。我们只需要窗口来创建一个展示平面及交换链（SwapChain）。所以，只要有了逻辑设备，就可以开始向 GPU 发送命令。
rust
let adapter = instance
+import{_ as a,C as n,o as p,c as l,a1 as h,G as k}from"./chunks/framework.DyadSNS9.js";const t="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAYAAABccqhmAAAFq0lEQVR4nO3U2XVcRxBEQcovOiJf5IY8kl8SRLAPAXAweEvvGfFRFlTeP/786+9/vwGRBACCCQAEEwAIJgAQTAAgmABAMAGAYAIAwQQAggkABBMACCYAEEwAIJgAQDABgGACAMEEAIIJAAQTAAgmABBMACCYAEAwAYBgAgDBBACCCQAEEwAIJgAQTAAgmABAMAGAYAIAwQQAggkABBMACCYAEEwAIJgAQDABgGACAMEEAIIJAAQTAAgmABBMACCYAEAwAYBgAgDBBACCCQAEEwAIJgAQTAAgmABAMAGAYAIAwQQAggkABBMACCYAEEwAIJgAQDABgGACAMEEINj3b/+83G8v9/vLJZEABBMABCBUGX8hApkEIJQA8D8BCPRx/IUI5BGAQAJAIQBhPht/IQJZBCCMAPCWAAT5avyFCOQQgCACwEcCEOLo+AsRyCAAIQSARwQgwNnxFyKwPwEIIAB8RgA2d3X8hQjsTQA2JwA8IwAbuzv+QgT2JQAbEwC+IgCbqjX+QgT2JACbEgCOEIAN1R5/IQL7EYANCQBHCcBmWo2/EIG9CMBmBIAzBGAjrcdfiMA+BGAjAsBZArCJXuMvRGAPArAJAeAKAdhA7/EXIrA+AdiAAHCVACxu1PgLEVibACxOALhDABY2evyFCKxLABYmANwlAIuaZfyFCKxJABYlANQgAAuabfyFCKxHABYkANQiAIuZdfyFCKxFABYjANQkAAuZffyFCKxDABYiANQmAItYZfyFCKxBABYhALQgAAtYbfyFCMxPABYgALQiAJNbdfyFCMxNACYnALQkABNbffyFCMxLACYmALQmAJPaZfyFCMxJACYlAPQgABPabfyFCMxHACYkAPQiAJPZdfyFCMxFACYjAPQkABPZffyFCMxDACYiAPQmAJNIGX8hAnMQgEkIACMIwATSxl+IwHgCMAEBYBQBGCx1/IUIjCUAgwmAAIwkAAOlj78QgXEEYCABeCUA4wjAIMb/ngiMIQCDCMB7AjCGAAxg/I+JQH8CMIAAPCYA/QlAZ8b/nAj0JQCdCcBzAtCXAHRk/MeIQD8C0JEAHCMA/QhAJ8Z/jgj0IQCdCMA5AtCHAHRg/NeIQHsC0IEAXCMA7QlAY8Z/jwi0JQCNCcA9AtCWADRk/HWIQDsC0JAA1CEA7QhAI8Zflwi0IQCNCEBdAtCGADRg/G2IQH0C0IAAtCEA9QlAZcbflgjUJQCVCUBbAlCXAFRk/H2IQD0CUJEA9CEA9QhAJcbflwjUIQCVCEBfAlCHAFRg/GOIwH0CUIEAjCEA9wnATcY/lgjcIwA3CcBYAnCPANxg/HMQgesE4AYBmIMAXCcAFxn/XETgGgG4SADmIgDXCMAFxj8nEThPAC4QgDkJwHkCcJLxz00EzhGAkwRgbgJwjgCcYPxrEIHjBOAEAViDABwnAAcZ/1pE4BgBOEgA1iIAxwjAAca/JhH4mgAcIABrEoCvCcAXjH9tIvCcAHxBANYmAM8JwBPGvwcR+JwAPCEAexCAzwnAJ4x/LyLwmAB8QgD2IgCPCcADxr8nEfidADwgAHsSgN8JwAfGvzcReE8APhCAvQnAewLwhvFnEIFfBOANAcggAL8IwE/Gn0UEXgnATwKQRQBeCcAL488kAgLwgwBkEgABeHkB40+WHoH4AEAyAYBgAgDBBACCCQAEEwAIJgAQTAAgmABAMAGAYAIAwQQAggkABBMACCYAEEwAIJgAQDABgGACAMEEAIIJAAQTAAgmABBMACCYAEAwAYBgAgDBBACCCQAEEwAIJgAQTAAgmABAMAGAYAIAwQQAggkABBMACCYAEEwAIJgAQDABgGACAMEEAIIJAAQTAAgmABBMACCYAEAwAYBgAgDBBACCCQAEEwAIJgAQTAAgmABAMAGAYAIAwQQAggkABBMACCYAEEwAINh/p/JoLhfYRNsAAAAASUVORK5CYII=",c=JSON.parse('{"title":"离屏渲染","description":"","frontmatter":{},"headers":[],"relativePath":"showcase/windowless/index.md","filePath":"showcase/windowless/index.md","lastUpdated":1731720800000}'),e={name:"showcase/windowless/index.md"};function r(E,s,d,g,y,F){const i=n("AutoGithubLink");return p(),l("div",null,[s[0]||(s[0]=h(`
离屏渲染 ​
有时我们只是想利用 gpu，也许是要并行地计算一组大的数字; 也许是正在制作一部 3D 电影，并需要用路径追踪来创建一个看起来很真实的场景; 也许正在挖掘一种加密货币。在所有这些情况下，我们可能 不需要 从窗口看到正在发生的事情。
如何使用？ ​
离屏渲染（Off-Screen Rendering, 也叫做 Windowless Rendering）其实很简单：事实上，我们不需要一个窗口（Window）来创建一个GPU 实例，不需要一个窗口来选择适配器，也不需要一个窗口来创建逻辑设备。我们只需要窗口来创建一个展示平面及交换链（SwapChain）。所以，只要有了逻辑设备，就可以开始向 GPU 发送命令。
rust
let adapter = instance
     .request_adapter(&wgpu::RequestAdapterOptions {
         compatible_surface: Some(&surface),
         ..Default::default()
@@ -176,4 +176,4 @@ import{_ as a,c as n,a1 as p,G as l,B as h,o as k}from"./chunks/framework.DdYVMT
 
 fn main() {
     pollster::block_on(run());
-}
现在运行代码，就会在项目根目录输出这样一张名为 image.png 的图像：
a brown triangle
',35)),l(i)])}const u=a(e,[["render",r]]);export{c as __pageData,u as default};
+}
现在运行代码，就会在项目根目录输出这样一张名为 image.png 的图像：
a brown triangle
',35)),k(i)])}const u=a(e,[["render",r]]);export{c as __pageData,u as default};
diff --git a/assets/showcase_windowless_index.md.DziIfJjF.lean.js b/assets/showcase_windowless_index.md.JCZbS0yg.lean.js
similarity index 99%
rename from assets/showcase_windowless_index.md.DziIfJjF.lean.js
rename to assets/showcase_windowless_index.md.JCZbS0yg.lean.js
index d68c6fd5c..4055ff19b 100644
--- a/assets/showcase_windowless_index.md.DziIfJjF.lean.js
+++ b/assets/showcase_windowless_index.md.JCZbS0yg.lean.js
@@ -1,4 +1,4 @@
-import{_ as a,c as n,a1 as p,G as l,B as h,o as k}from"./chunks/framework.DdYVMT1V.js";const t="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAYAAABccqhmAAAFq0lEQVR4nO3U2XVcRxBEQcovOiJf5IY8kl8SRLAPAXAweEvvGfFRFlTeP/786+9/vwGRBACCCQAEEwAIJgAQTAAgmABAMAGAYAIAwQQAggkABBMACCYAEEwAIJgAQDABgGACAMEEAIIJAAQTAAgmABBMACCYAEAwAYBgAgDBBACCCQAEEwAIJgAQTAAgmABAMAGAYAIAwQQAggkABBMACCYAEEwAIJgAQDABgGACAMEEAIIJAAQTAAgmABBMACCYAEAwAYBgAgDBBACCCQAEEwAIJgAQTAAgmABAMAGAYAIAwQQAggkABBMACCYAEEwAIJgAQDABgGACAMEEINj3b/+83G8v9/vLJZEABBMABCBUGX8hApkEIJQA8D8BCPRx/IUI5BGAQAJAIQBhPht/IQJZBCCMAPCWAAT5avyFCOQQgCACwEcCEOLo+AsRyCAAIQSARwQgwNnxFyKwPwEIIAB8RgA2d3X8hQjsTQA2JwA8IwAbuzv+QgT2JQAbEwC+IgCbqjX+QgT2JACbEgCOEIAN1R5/IQL7EYANCQBHCcBmWo2/EIG9CMBmBIAzBGAjrcdfiMA+BGAjAsBZArCJXuMvRGAPArAJAeAKAdhA7/EXIrA+AdiAAHCVACxu1PgLEVibACxOALhDABY2evyFCKxLABYmANwlAIuaZfyFCKxJABYlANQgAAuabfyFCKxHABYkANQiAIuZdfyFCKxFABYjANQkAAuZffyFCKxDABYiANQmAItYZfyFCKxBABYhALQgAAtYbfyFCMxPABYgALQiAJNbdfyFCMxNACYnALQkABNbffyFCMxLACYmALQmAJPaZfyFCMxJACYlAPQgABPabfyFCMxHACYkAPQiAJPZdfyFCMxFACYjAPQkABPZffyFCMxDACYiAPQmAJNIGX8hAnMQgEkIACMIwATSxl+IwHgCMAEBYBQBGCx1/IUIjCUAgwmAAIwkAAOlj78QgXEEYCABeCUA4wjAIMb/ngiMIQCDCMB7AjCGAAxg/I+JQH8CMIAAPCYA/QlAZ8b/nAj0JQCdCcBzAtCXAHRk/MeIQD8C0JEAHCMA/QhAJ8Z/jgj0IQCdCMA5AtCHAHRg/NeIQHsC0IEAXCMA7QlAY8Z/jwi0JQCNCcA9AtCWADRk/HWIQDsC0JAA1CEA7QhAI8Zflwi0IQCNCEBdAtCGADRg/G2IQH0C0IAAtCEA9QlAZcbflgjUJQCVCUBbAlCXAFRk/H2IQD0CUJEA9CEA9QhAJcbflwjUIQCVCEBfAlCHAFRg/GOIwH0CUIEAjCEA9wnATcY/lgjcIwA3CcBYAnCPANxg/HMQgesE4AYBmIMAXCcAFxn/XETgGgG4SADmIgDXCMAFxj8nEThPAC4QgDkJwHkCcJLxz00EzhGAkwRgbgJwjgCcYPxrEIHjBOAEAViDABwnAAcZ/1pE4BgBOEgA1iIAxwjAAca/JhH4mgAcIABrEoCvCcAXjH9tIvCcAHxBANYmAM8JwBPGvwcR+JwAPCEAexCAzwnAJ4x/LyLwmAB8QgD2IgCPCcADxr8nEfidADwgAHsSgN8JwAfGvzcReE8APhCAvQnAewLwhvFnEIFfBOANAcggAL8IwE/Gn0UEXgnATwKQRQBeCcAL488kAgLwgwBkEgABeHkB40+WHoH4AEAyAYBgAgDBBACCCQAEEwAIJgAQTAAgmABAMAGAYAIAwQQAggkABBMACCYAEEwAIJgAQDABgGACAMEEAIIJAAQTAAgmABBMACCYAEAwAYBgAgDBBACCCQAEEwAIJgAQTAAgmABAMAGAYAIAwQQAggkABBMACCYAEEwAIJgAQDABgGACAMEEAIIJAAQTAAgmABBMACCYAEAwAYBgAgDBBACCCQAEEwAIJgAQTAAgmABAMAGAYAIAwQQAggkABBMACCYAEEwAINh/p/JoLhfYRNsAAAAASUVORK5CYII=",c=JSON.parse('{"title":"离屏渲染","description":"","frontmatter":{},"headers":[],"relativePath":"showcase/windowless/index.md","filePath":"showcase/windowless/index.md","lastUpdated":1730902479000}'),e={name:"showcase/windowless/index.md"};function r(E,s,d,g,y,F){const i=h("AutoGithubLink");return k(),n("div",null,[s[0]||(s[0]=p(`
离屏渲染 ​
有时我们只是想利用 gpu，也许是要并行地计算一组大的数字; 也许是正在制作一部 3D 电影，并需要用路径追踪来创建一个看起来很真实的场景; 也许正在挖掘一种加密货币。在所有这些情况下，我们可能 不需要 从窗口看到正在发生的事情。
如何使用？ ​
离屏渲染（Off-Screen Rendering, 也叫做 Windowless Rendering）其实很简单：事实上，我们不需要一个窗口（Window）来创建一个GPU 实例，不需要一个窗口来选择适配器，也不需要一个窗口来创建逻辑设备。我们只需要窗口来创建一个展示平面及交换链（SwapChain）。所以，只要有了逻辑设备，就可以开始向 GPU 发送命令。
rust
let adapter = instance
+import{_ as a,C as n,o as p,c as l,a1 as h,G as k}from"./chunks/framework.DyadSNS9.js";const t="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAYAAABccqhmAAAFq0lEQVR4nO3U2XVcRxBEQcovOiJf5IY8kl8SRLAPAXAweEvvGfFRFlTeP/786+9/vwGRBACCCQAEEwAIJgAQTAAgmABAMAGAYAIAwQQAggkABBMACCYAEEwAIJgAQDABgGACAMEEAIIJAAQTAAgmABBMACCYAEAwAYBgAgDBBACCCQAEEwAIJgAQTAAgmABAMAGAYAIAwQQAggkABBMACCYAEEwAIJgAQDABgGACAMEEAIIJAAQTAAgmABBMACCYAEAwAYBgAgDBBACCCQAEEwAIJgAQTAAgmABAMAGAYAIAwQQAggkABBMACCYAEEwAIJgAQDABgGACAMEEINj3b/+83G8v9/vLJZEABBMABCBUGX8hApkEIJQA8D8BCPRx/IUI5BGAQAJAIQBhPht/IQJZBCCMAPCWAAT5avyFCOQQgCACwEcCEOLo+AsRyCAAIQSARwQgwNnxFyKwPwEIIAB8RgA2d3X8hQjsTQA2JwA8IwAbuzv+QgT2JQAbEwC+IgCbqjX+QgT2JACbEgCOEIAN1R5/IQL7EYANCQBHCcBmWo2/EIG9CMBmBIAzBGAjrcdfiMA+BGAjAsBZArCJXuMvRGAPArAJAeAKAdhA7/EXIrA+AdiAAHCVACxu1PgLEVibACxOALhDABY2evyFCKxLABYmANwlAIuaZfyFCKxJABYlANQgAAuabfyFCKxHABYkANQiAIuZdfyFCKxFABYjANQkAAuZffyFCKxDABYiANQmAItYZfyFCKxBABYhALQgAAtYbfyFCMxPABYgALQiAJNbdfyFCMxNACYnALQkABNbffyFCMxLACYmALQmAJPaZfyFCMxJACYlAPQgABPabfyFCMxHACYkAPQiAJPZdfyFCMxFACYjAPQkABPZffyFCMxDACYiAPQmAJNIGX8hAnMQgEkIACMIwATSxl+IwHgCMAEBYBQBGCx1/IUIjCUAgwmAAIwkAAOlj78QgXEEYCABeCUA4wjAIMb/ngiMIQCDCMB7AjCGAAxg/I+JQH8CMIAAPCYA/QlAZ8b/nAj0JQCdCcBzAtCXAHRk/MeIQD8C0JEAHCMA/QhAJ8Z/jgj0IQCdCMA5AtCHAHRg/NeIQHsC0IEAXCMA7QlAY8Z/jwi0JQCNCcA9AtCWADRk/HWIQDsC0JAA1CEA7QhAI8Zflwi0IQCNCEBdAtCGADRg/G2IQH0C0IAAtCEA9QlAZcbflgjUJQCVCUBbAlCXAFRk/H2IQD0CUJEA9CEA9QhAJcbflwjUIQCVCEBfAlCHAFRg/GOIwH0CUIEAjCEA9wnATcY/lgjcIwA3CcBYAnCPANxg/HMQgesE4AYBmIMAXCcAFxn/XETgGgG4SADmIgDXCMAFxj8nEThPAC4QgDkJwHkCcJLxz00EzhGAkwRgbgJwjgCcYPxrEIHjBOAEAViDABwnAAcZ/1pE4BgBOEgA1iIAxwjAAca/JhH4mgAcIABrEoCvCcAXjH9tIvCcAHxBANYmAM8JwBPGvwcR+JwAPCEAexCAzwnAJ4x/LyLwmAB8QgD2IgCPCcADxr8nEfidADwgAHsSgN8JwAfGvzcReE8APhCAvQnAewLwhvFnEIFfBOANAcggAL8IwE/Gn0UEXgnATwKQRQBeCcAL488kAgLwgwBkEgABeHkB40+WHoH4AEAyAYBgAgDBBACCCQAEEwAIJgAQTAAgmABAMAGAYAIAwQQAggkABBMACCYAEEwAIJgAQDABgGACAMEEAIIJAAQTAAgmABBMACCYAEAwAYBgAgDBBACCCQAEEwAIJgAQTAAgmABAMAGAYAIAwQQAggkABBMACCYAEEwAIJgAQDABgGACAMEEAIIJAAQTAAgmABBMACCYAEAwAYBgAgDBBACCCQAEEwAIJgAQTAAgmABAMAGAYAIAwQQAggkABBMACCYAEEwAINh/p/JoLhfYRNsAAAAASUVORK5CYII=",c=JSON.parse('{"title":"离屏渲染","description":"","frontmatter":{},"headers":[],"relativePath":"showcase/windowless/index.md","filePath":"showcase/windowless/index.md","lastUpdated":1731720800000}'),e={name:"showcase/windowless/index.md"};function r(E,s,d,g,y,F){const i=n("AutoGithubLink");return p(),l("div",null,[s[0]||(s[0]=h(`
离屏渲染 ​
有时我们只是想利用 gpu，也许是要并行地计算一组大的数字; 也许是正在制作一部 3D 电影，并需要用路径追踪来创建一个看起来很真实的场景; 也许正在挖掘一种加密货币。在所有这些情况下，我们可能 不需要 从窗口看到正在发生的事情。
如何使用？ ​
离屏渲染（Off-Screen Rendering, 也叫做 Windowless Rendering）其实很简单：事实上，我们不需要一个窗口（Window）来创建一个GPU 实例，不需要一个窗口来选择适配器，也不需要一个窗口来创建逻辑设备。我们只需要窗口来创建一个展示平面及交换链（SwapChain）。所以，只要有了逻辑设备，就可以开始向 GPU 发送命令。
rust
let adapter = instance
     .request_adapter(&wgpu::RequestAdapterOptions {
         compatible_surface: Some(&surface),
         ..Default::default()
@@ -176,4 +176,4 @@ import{_ as a,c as n,a1 as p,G as l,B as h,o as k}from"./chunks/framework.DdYVMT
 
 fn main() {
     pollster::block_on(run());
-}
现在运行代码，就会在项目根目录输出这样一张名为 image.png 的图像：
a brown triangle
',35)),l(i)])}const u=a(e,[["render",r]]);export{c as __pageData,u as default};
+}
现在运行代码，就会在项目根目录输出这样一张名为 image.png 的图像：
a brown triangle
',35)),k(i)])}const u=a(e,[["render",r]]);export{c as __pageData,u as default};
diff --git a/assets/simuverse.md.D__Yc6nX.js b/assets/simuverse.md.D__Yc6nX.js
deleted file mode 100644
index 488ad2437..000000000
--- a/assets/simuverse.md.D__Yc6nX.js
+++ /dev/null
@@ -1 +0,0 @@
-import{_ as s,c as a,G as t,B as r,o}from"./chunks/framework.DdYVMT1V.js";const f=JSON.parse('{"title":"","description":"","frontmatter":{"layout":"page","sidebar":false},"headers":[],"relativePath":"simuverse.md","filePath":"simuverse.md","lastUpdated":1730902479000}'),n={name:"simuverse.md"};function c(m,l,i,p,d,u){const e=r("WasmFullScreen");return o(),a("div",null,[t(e,{"wasm-name":"simuverse"})])}const v=s(n,[["render",c]]);export{f as __pageData,v as default};
diff --git a/assets/simuverse.md.D__Yc6nX.lean.js b/assets/simuverse.md.D__Yc6nX.lean.js
deleted file mode 100644
index 488ad2437..000000000
--- a/assets/simuverse.md.D__Yc6nX.lean.js
+++ /dev/null
@@ -1 +0,0 @@
-import{_ as s,c as a,G as t,B as r,o}from"./chunks/framework.DdYVMT1V.js";const f=JSON.parse('{"title":"","description":"","frontmatter":{"layout":"page","sidebar":false},"headers":[],"relativePath":"simuverse.md","filePath":"simuverse.md","lastUpdated":1730902479000}'),n={name:"simuverse.md"};function c(m,l,i,p,d,u){const e=r("WasmFullScreen");return o(),a("div",null,[t(e,{"wasm-name":"simuverse"})])}const v=s(n,[["render",c]]);export{f as __pageData,v as default};
diff --git a/assets/simuverse.md.k3QP19ox.js b/assets/simuverse.md.k3QP19ox.js
new file mode 100644
index 000000000..9b53ebded
--- /dev/null
+++ b/assets/simuverse.md.k3QP19ox.js
@@ -0,0 +1 @@
+import{_ as s,C as a,o as t,c as r,G as o}from"./chunks/framework.DyadSNS9.js";const f=JSON.parse('{"title":"","description":"","frontmatter":{"layout":"page","sidebar":false},"headers":[],"relativePath":"simuverse.md","filePath":"simuverse.md","lastUpdated":1731720800000}'),n={name:"simuverse.md"};function c(m,l,i,p,d,u){const e=a("WasmFullScreen");return t(),r("div",null,[o(e,{"wasm-name":"simuverse"})])}const v=s(n,[["render",c]]);export{f as __pageData,v as default};
diff --git a/assets/simuverse.md.k3QP19ox.lean.js b/assets/simuverse.md.k3QP19ox.lean.js
new file mode 100644
index 000000000..9b53ebded
--- /dev/null
+++ b/assets/simuverse.md.k3QP19ox.lean.js
@@ -0,0 +1 @@
+import{_ as s,C as a,o as t,c as r,G as o}from"./chunks/framework.DyadSNS9.js";const f=JSON.parse('{"title":"","description":"","frontmatter":{"layout":"page","sidebar":false},"headers":[],"relativePath":"simuverse.md","filePath":"simuverse.md","lastUpdated":1731720800000}'),n={name:"simuverse.md"};function c(m,l,i,p,d,u){const e=a("WasmFullScreen");return t(),r("div",null,[o(e,{"wasm-name":"simuverse"})])}const v=s(n,[["render",c]]);export{f as __pageData,v as default};
diff --git a/assets/style.BVVL-hhm.css b/assets/style.CjegECuQ.css
similarity index 99%
rename from assets/style.BVVL-hhm.css
rename to assets/style.CjegECuQ.css
index 7e04a9558..9b1e52051 100644
--- a/assets/style.BVVL-hhm.css
+++ b/assets/style.CjegECuQ.css
@@ -1 +1 @@
-@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/learn-wgpu-zh/assets/inter-roman-cyrillic-ext.BBPuwvHQ.woff2) format("woff2");unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/learn-wgpu-zh/assets/inter-roman-cyrillic.C5lxZ8CY.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/learn-wgpu-zh/assets/inter-roman-greek-ext.CqjqNYQ-.woff2) format("woff2");unicode-range:U+1F00-1FFF}@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/learn-wgpu-zh/assets/inter-roman-greek.BBVDIX6e.woff2) format("woff2");unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/learn-wgpu-zh/assets/inter-roman-vietnamese.BjW4sHH5.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/learn-wgpu-zh/assets/inter-roman-latin-ext.4ZJIpNVo.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/learn-wgpu-zh/assets/inter-roman-latin.Di8DUHzh.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Inter;font-style:italic;font-weight:100 900;font-display:swap;src:url(/learn-wgpu-zh/assets/inter-italic-cyrillic-ext.r48I6akx.woff2) format("woff2");unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Inter;font-style:italic;font-weight:100 900;font-display:swap;src:url(/learn-wgpu-zh/assets/inter-italic-cyrillic.By2_1cv3.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Inter;font-style:italic;font-weight:100 900;font-display:swap;src:url(/learn-wgpu-zh/assets/inter-italic-greek-ext.1u6EdAuj.woff2) format("woff2");unicode-range:U+1F00-1FFF}@font-face{font-family:Inter;font-style:italic;font-weight:100 900;font-display:swap;src:url(/learn-wgpu-zh/assets/inter-italic-greek.DJ8dCoTZ.woff2) format("woff2");unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:Inter;font-style:italic;font-weight:100 900;font-display:swap;src:url(/learn-wgpu-zh/assets/inter-italic-vietnamese.BSbpV94h.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Inter;font-style:italic;font-weight:100 900;font-display:swap;src:url(/learn-wgpu-zh/assets/inter-italic-latin-ext.CN1xVJS-.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Inter;font-style:italic;font-weight:100 900;font-display:swap;src:url(/learn-wgpu-zh/assets/inter-italic-latin.C2AdPX0b.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Punctuation SC;font-weight:400;src:local("PingFang SC Regular"),local("Noto Sans CJK SC"),local("Microsoft YaHei");unicode-range:U+201C,U+201D,U+2018,U+2019,U+2E3A,U+2014,U+2013,U+2026,U+00B7,U+007E,U+002F}@font-face{font-family:Punctuation SC;font-weight:500;src:local("PingFang SC Medium"),local("Noto Sans CJK SC"),local("Microsoft YaHei");unicode-range:U+201C,U+201D,U+2018,U+2019,U+2E3A,U+2014,U+2013,U+2026,U+00B7,U+007E,U+002F}@font-face{font-family:Punctuation SC;font-weight:600;src:local("PingFang SC Semibold"),local("Noto Sans CJK SC Bold"),local("Microsoft YaHei Bold");unicode-range:U+201C,U+201D,U+2018,U+2019,U+2E3A,U+2014,U+2013,U+2026,U+00B7,U+007E,U+002F}@font-face{font-family:Punctuation SC;font-weight:700;src:local("PingFang SC Semibold"),local("Noto Sans CJK SC Bold"),local("Microsoft YaHei Bold");unicode-range:U+201C,U+201D,U+2018,U+2019,U+2E3A,U+2014,U+2013,U+2026,U+00B7,U+007E,U+002F}:root{--vp-c-white: #ffffff;--vp-c-black: #000000;--vp-c-neutral: var(--vp-c-black);--vp-c-neutral-inverse: var(--vp-c-white)}.dark{--vp-c-neutral: var(--vp-c-white);--vp-c-neutral-inverse: var(--vp-c-black)}:root{--vp-c-gray-1: #dddde3;--vp-c-gray-2: #e4e4e9;--vp-c-gray-3: #ebebef;--vp-c-gray-soft: rgba(142, 150, 170, .14);--vp-c-indigo-1: #3451b2;--vp-c-indigo-2: #3a5ccc;--vp-c-indigo-3: #5672cd;--vp-c-indigo-soft: rgba(100, 108, 255, .14);--vp-c-purple-1: #6f42c1;--vp-c-purple-2: #7e4cc9;--vp-c-purple-3: #8e5cd9;--vp-c-purple-soft: rgba(159, 122, 234, .14);--vp-c-green-1: #18794e;--vp-c-green-2: #299764;--vp-c-green-3: #30a46c;--vp-c-green-soft: rgba(16, 185, 129, .14);--vp-c-yellow-1: #915930;--vp-c-yellow-2: #946300;--vp-c-yellow-3: #9f6a00;--vp-c-yellow-soft: rgba(234, 179, 8, .14);--vp-c-red-1: #b8272c;--vp-c-red-2: #d5393e;--vp-c-red-3: #e0575b;--vp-c-red-soft: rgba(244, 63, 94, .14);--vp-c-sponsor: #db2777}.dark{--vp-c-gray-1: #515c67;--vp-c-gray-2: #414853;--vp-c-gray-3: #32363f;--vp-c-gray-soft: rgba(101, 117, 133, .16);--vp-c-indigo-1: #a8b1ff;--vp-c-indigo-2: #5c73e7;--vp-c-indigo-3: #3e63dd;--vp-c-indigo-soft: rgba(100, 108, 255, .16);--vp-c-purple-1: #c8abfa;--vp-c-purple-2: #a879e6;--vp-c-purple-3: #8e5cd9;--vp-c-purple-soft: rgba(159, 122, 234, .16);--vp-c-green-1: #3dd68c;--vp-c-green-2: #30a46c;--vp-c-green-3: #298459;--vp-c-green-soft: rgba(16, 185, 129, .16);--vp-c-yellow-1: #f9b44e;--vp-c-yellow-2: #da8b17;--vp-c-yellow-3: #a46a0a;--vp-c-yellow-soft: rgba(234, 179, 8, .16);--vp-c-red-1: #f66f81;--vp-c-red-2: #f14158;--vp-c-red-3: #b62a3c;--vp-c-red-soft: rgba(244, 63, 94, .16)}:root{--vp-c-bg: #ffffff;--vp-c-bg-alt: #f6f6f7;--vp-c-bg-elv: #ffffff;--vp-c-bg-soft: #f6f6f7}.dark{--vp-c-bg: #1b1b1f;--vp-c-bg-alt: #161618;--vp-c-bg-elv: #202127;--vp-c-bg-soft: #202127}:root{--vp-c-border: #c2c2c4;--vp-c-divider: #e2e2e3;--vp-c-gutter: #e2e2e3}.dark{--vp-c-border: #3c3f44;--vp-c-divider: #2e2e32;--vp-c-gutter: #000000}:root{--vp-c-text-1: rgba(60, 60, 67);--vp-c-text-2: rgba(60, 60, 67, .78);--vp-c-text-3: rgba(60, 60, 67, .56)}.dark{--vp-c-text-1: rgba(255, 255, 245, .86);--vp-c-text-2: rgba(235, 235, 245, .6);--vp-c-text-3: rgba(235, 235, 245, .38)}:root{--vp-c-default-1: var(--vp-c-gray-1);--vp-c-default-2: var(--vp-c-gray-2);--vp-c-default-3: var(--vp-c-gray-3);--vp-c-default-soft: var(--vp-c-gray-soft);--vp-c-brand-1: var(--vp-c-indigo-1);--vp-c-brand-2: var(--vp-c-indigo-2);--vp-c-brand-3: var(--vp-c-indigo-3);--vp-c-brand-soft: var(--vp-c-indigo-soft);--vp-c-brand: var(--vp-c-brand-1);--vp-c-tip-1: var(--vp-c-brand-1);--vp-c-tip-2: var(--vp-c-brand-2);--vp-c-tip-3: var(--vp-c-brand-3);--vp-c-tip-soft: var(--vp-c-brand-soft);--vp-c-note-1: var(--vp-c-brand-1);--vp-c-note-2: var(--vp-c-brand-2);--vp-c-note-3: var(--vp-c-brand-3);--vp-c-note-soft: var(--vp-c-brand-soft);--vp-c-success-1: var(--vp-c-green-1);--vp-c-success-2: var(--vp-c-green-2);--vp-c-success-3: var(--vp-c-green-3);--vp-c-success-soft: var(--vp-c-green-soft);--vp-c-important-1: var(--vp-c-purple-1);--vp-c-important-2: var(--vp-c-purple-2);--vp-c-important-3: var(--vp-c-purple-3);--vp-c-important-soft: var(--vp-c-purple-soft);--vp-c-warning-1: var(--vp-c-yellow-1);--vp-c-warning-2: var(--vp-c-yellow-2);--vp-c-warning-3: var(--vp-c-yellow-3);--vp-c-warning-soft: var(--vp-c-yellow-soft);--vp-c-danger-1: var(--vp-c-red-1);--vp-c-danger-2: var(--vp-c-red-2);--vp-c-danger-3: var(--vp-c-red-3);--vp-c-danger-soft: var(--vp-c-red-soft);--vp-c-caution-1: var(--vp-c-red-1);--vp-c-caution-2: var(--vp-c-red-2);--vp-c-caution-3: var(--vp-c-red-3);--vp-c-caution-soft: var(--vp-c-red-soft)}:root{--vp-font-family-base: "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--vp-font-family-mono: ui-monospace, "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace;font-optical-sizing:auto}:root:where(:lang(zh)){--vp-font-family-base: "Punctuation SC", "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"}:root{--vp-shadow-1: 0 1px 2px rgba(0, 0, 0, .04), 0 1px 2px rgba(0, 0, 0, .06);--vp-shadow-2: 0 3px 12px rgba(0, 0, 0, .07), 0 1px 4px rgba(0, 0, 0, .07);--vp-shadow-3: 0 12px 32px rgba(0, 0, 0, .1), 0 2px 6px rgba(0, 0, 0, .08);--vp-shadow-4: 0 14px 44px rgba(0, 0, 0, .12), 0 3px 9px rgba(0, 0, 0, .12);--vp-shadow-5: 0 18px 56px rgba(0, 0, 0, .16), 0 4px 12px rgba(0, 0, 0, .16)}:root{--vp-z-index-footer: 10;--vp-z-index-local-nav: 20;--vp-z-index-nav: 30;--vp-z-index-layout-top: 40;--vp-z-index-backdrop: 50;--vp-z-index-sidebar: 60}@media (min-width: 960px){:root{--vp-z-index-sidebar: 25}}:root{--vp-layout-max-width: 1440px}:root{--vp-header-anchor-symbol: "#"}:root{--vp-code-line-height: 1.7;--vp-code-font-size: .875em;--vp-code-color: var(--vp-c-brand-1);--vp-code-link-color: var(--vp-c-brand-1);--vp-code-link-hover-color: var(--vp-c-brand-2);--vp-code-bg: var(--vp-c-default-soft);--vp-code-block-color: var(--vp-c-text-2);--vp-code-block-bg: var(--vp-c-bg-alt);--vp-code-block-divider-color: var(--vp-c-gutter);--vp-code-lang-color: var(--vp-c-text-3);--vp-code-line-highlight-color: var(--vp-c-default-soft);--vp-code-line-number-color: var(--vp-c-text-3);--vp-code-line-diff-add-color: var(--vp-c-success-soft);--vp-code-line-diff-add-symbol-color: var(--vp-c-success-1);--vp-code-line-diff-remove-color: var(--vp-c-danger-soft);--vp-code-line-diff-remove-symbol-color: var(--vp-c-danger-1);--vp-code-line-warning-color: var(--vp-c-warning-soft);--vp-code-line-error-color: var(--vp-c-danger-soft);--vp-code-copy-code-border-color: var(--vp-c-divider);--vp-code-copy-code-bg: var(--vp-c-bg-soft);--vp-code-copy-code-hover-border-color: var(--vp-c-divider);--vp-code-copy-code-hover-bg: var(--vp-c-bg);--vp-code-copy-code-active-text: var(--vp-c-text-2);--vp-code-copy-copied-text-content: "Copied";--vp-code-tab-divider: var(--vp-code-block-divider-color);--vp-code-tab-text-color: var(--vp-c-text-2);--vp-code-tab-bg: var(--vp-code-block-bg);--vp-code-tab-hover-text-color: var(--vp-c-text-1);--vp-code-tab-active-text-color: var(--vp-c-text-1);--vp-code-tab-active-bar-color: var(--vp-c-brand-1)}:root{--vp-button-brand-border: transparent;--vp-button-brand-text: var(--vp-c-white);--vp-button-brand-bg: var(--vp-c-brand-3);--vp-button-brand-hover-border: transparent;--vp-button-brand-hover-text: var(--vp-c-white);--vp-button-brand-hover-bg: var(--vp-c-brand-2);--vp-button-brand-active-border: transparent;--vp-button-brand-active-text: var(--vp-c-white);--vp-button-brand-active-bg: var(--vp-c-brand-1);--vp-button-alt-border: transparent;--vp-button-alt-text: var(--vp-c-text-1);--vp-button-alt-bg: var(--vp-c-default-3);--vp-button-alt-hover-border: transparent;--vp-button-alt-hover-text: var(--vp-c-text-1);--vp-button-alt-hover-bg: var(--vp-c-default-2);--vp-button-alt-active-border: transparent;--vp-button-alt-active-text: var(--vp-c-text-1);--vp-button-alt-active-bg: var(--vp-c-default-1);--vp-button-sponsor-border: var(--vp-c-text-2);--vp-button-sponsor-text: var(--vp-c-text-2);--vp-button-sponsor-bg: transparent;--vp-button-sponsor-hover-border: var(--vp-c-sponsor);--vp-button-sponsor-hover-text: var(--vp-c-sponsor);--vp-button-sponsor-hover-bg: transparent;--vp-button-sponsor-active-border: var(--vp-c-sponsor);--vp-button-sponsor-active-text: var(--vp-c-sponsor);--vp-button-sponsor-active-bg: transparent}:root{--vp-custom-block-font-size: 14px;--vp-custom-block-code-font-size: 13px;--vp-custom-block-info-border: transparent;--vp-custom-block-info-text: var(--vp-c-text-1);--vp-custom-block-info-bg: var(--vp-c-default-soft);--vp-custom-block-info-code-bg: var(--vp-c-default-soft);--vp-custom-block-note-border: transparent;--vp-custom-block-note-text: var(--vp-c-text-1);--vp-custom-block-note-bg: var(--vp-c-default-soft);--vp-custom-block-note-code-bg: var(--vp-c-default-soft);--vp-custom-block-tip-border: transparent;--vp-custom-block-tip-text: var(--vp-c-text-1);--vp-custom-block-tip-bg: var(--vp-c-tip-soft);--vp-custom-block-tip-code-bg: var(--vp-c-tip-soft);--vp-custom-block-important-border: transparent;--vp-custom-block-important-text: var(--vp-c-text-1);--vp-custom-block-important-bg: var(--vp-c-important-soft);--vp-custom-block-important-code-bg: var(--vp-c-important-soft);--vp-custom-block-warning-border: transparent;--vp-custom-block-warning-text: var(--vp-c-text-1);--vp-custom-block-warning-bg: var(--vp-c-warning-soft);--vp-custom-block-warning-code-bg: var(--vp-c-warning-soft);--vp-custom-block-danger-border: transparent;--vp-custom-block-danger-text: var(--vp-c-text-1);--vp-custom-block-danger-bg: var(--vp-c-danger-soft);--vp-custom-block-danger-code-bg: var(--vp-c-danger-soft);--vp-custom-block-caution-border: transparent;--vp-custom-block-caution-text: var(--vp-c-text-1);--vp-custom-block-caution-bg: var(--vp-c-caution-soft);--vp-custom-block-caution-code-bg: var(--vp-c-caution-soft);--vp-custom-block-details-border: var(--vp-custom-block-info-border);--vp-custom-block-details-text: var(--vp-custom-block-info-text);--vp-custom-block-details-bg: var(--vp-custom-block-info-bg);--vp-custom-block-details-code-bg: var(--vp-custom-block-info-code-bg)}:root{--vp-input-border-color: var(--vp-c-border);--vp-input-bg-color: var(--vp-c-bg-alt);--vp-input-switch-bg-color: var(--vp-c-default-soft)}:root{--vp-nav-height: 64px;--vp-nav-bg-color: var(--vp-c-bg);--vp-nav-screen-bg-color: var(--vp-c-bg);--vp-nav-logo-height: 24px}.hide-nav{--vp-nav-height: 0px}.hide-nav .VPSidebar{--vp-nav-height: 22px}:root{--vp-local-nav-bg-color: var(--vp-c-bg)}:root{--vp-sidebar-width: 272px;--vp-sidebar-bg-color: var(--vp-c-bg-alt)}:root{--vp-backdrop-bg-color: rgba(0, 0, 0, .6)}:root{--vp-home-hero-name-color: var(--vp-c-brand-1);--vp-home-hero-name-background: transparent;--vp-home-hero-image-background-image: none;--vp-home-hero-image-filter: none}:root{--vp-badge-info-border: transparent;--vp-badge-info-text: var(--vp-c-text-2);--vp-badge-info-bg: var(--vp-c-default-soft);--vp-badge-tip-border: transparent;--vp-badge-tip-text: var(--vp-c-tip-1);--vp-badge-tip-bg: var(--vp-c-tip-soft);--vp-badge-warning-border: transparent;--vp-badge-warning-text: var(--vp-c-warning-1);--vp-badge-warning-bg: var(--vp-c-warning-soft);--vp-badge-danger-border: transparent;--vp-badge-danger-text: var(--vp-c-danger-1);--vp-badge-danger-bg: var(--vp-c-danger-soft)}:root{--vp-carbon-ads-text-color: var(--vp-c-text-1);--vp-carbon-ads-poweredby-color: var(--vp-c-text-2);--vp-carbon-ads-bg-color: var(--vp-c-bg-soft);--vp-carbon-ads-hover-text-color: var(--vp-c-brand-1);--vp-carbon-ads-hover-poweredby-color: var(--vp-c-text-1)}:root{--vp-local-search-bg: var(--vp-c-bg);--vp-local-search-result-bg: var(--vp-c-bg);--vp-local-search-result-border: var(--vp-c-divider);--vp-local-search-result-selected-bg: var(--vp-c-bg);--vp-local-search-result-selected-border: var(--vp-c-brand-1);--vp-local-search-highlight-bg: var(--vp-c-brand-1);--vp-local-search-highlight-text: var(--vp-c-neutral-inverse)}@media (prefers-reduced-motion: reduce){*,:before,:after{animation-delay:-1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important;background-attachment:initial!important;scroll-behavior:auto!important;transition-duration:0s!important;transition-delay:0s!important}}*,:before,:after{box-sizing:border-box}html{line-height:1.4;font-size:16px;-webkit-text-size-adjust:100%}html.dark{color-scheme:dark}body{margin:0;width:100%;min-width:320px;min-height:100vh;line-height:24px;font-family:var(--vp-font-family-base);font-size:16px;font-weight:400;color:var(--vp-c-text-1);background-color:var(--vp-c-bg);font-synthesis:style;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}main{display:block}h1,h2,h3,h4,h5,h6{margin:0;line-height:24px;font-size:16px;font-weight:400}p{margin:0}strong,b{font-weight:600}a,area,button,[role=button],input,label,select,summary,textarea{touch-action:manipulation}a{color:inherit;text-decoration:inherit}ol,ul{list-style:none;margin:0;padding:0}blockquote{margin:0}pre,code,kbd,samp{font-family:var(--vp-font-family-mono)}img,svg,video,canvas,audio,iframe,embed,object{display:block}figure{margin:0}img,video{max-width:100%;height:auto}button,input,optgroup,select,textarea{border:0;padding:0;line-height:inherit;color:inherit}button{padding:0;font-family:inherit;background-color:transparent;background-image:none}button:enabled,[role=button]:enabled{cursor:pointer}button:focus,button:focus-visible{outline:1px dotted;outline:4px auto -webkit-focus-ring-color}button:focus:not(:focus-visible){outline:none!important}input:focus,textarea:focus,select:focus{outline:none}table{border-collapse:collapse}input{background-color:transparent}input:-ms-input-placeholder,textarea:-ms-input-placeholder{color:var(--vp-c-text-3)}input::-ms-input-placeholder,textarea::-ms-input-placeholder{color:var(--vp-c-text-3)}input::placeholder,textarea::placeholder{color:var(--vp-c-text-3)}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}textarea{resize:vertical}select{-webkit-appearance:none}fieldset{margin:0;padding:0}h1,h2,h3,h4,h5,h6,li,p{overflow-wrap:break-word}vite-error-overlay{z-index:9999}mjx-container{overflow-x:auto}mjx-container>svg{display:inline-block;margin:auto}[class^=vpi-],[class*=" vpi-"],.vp-icon{width:1em;height:1em}[class^=vpi-].bg,[class*=" vpi-"].bg,.vp-icon.bg{background-size:100% 100%;background-color:transparent}[class^=vpi-]:not(.bg),[class*=" vpi-"]:not(.bg),.vp-icon:not(.bg){-webkit-mask:var(--icon) no-repeat;mask:var(--icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit}.vpi-align-left{--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M21 6H3M15 12H3M17 18H3'/%3E%3C/svg%3E")}.vpi-arrow-right,.vpi-arrow-down,.vpi-arrow-left,.vpi-arrow-up{--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E")}.vpi-chevron-right,.vpi-chevron-down,.vpi-chevron-left,.vpi-chevron-up{--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E")}.vpi-chevron-down,.vpi-arrow-down{transform:rotate(90deg)}.vpi-chevron-left,.vpi-arrow-left{transform:rotate(180deg)}.vpi-chevron-up,.vpi-arrow-up{transform:rotate(-90deg)}.vpi-square-pen{--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M18.375 2.625a2.121 2.121 0 1 1 3 3L12 15l-4 1 1-4Z'/%3E%3C/svg%3E")}.vpi-plus{--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M12 5v14'/%3E%3C/svg%3E")}.vpi-sun{--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41'/%3E%3C/svg%3E")}.vpi-moon{--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z'/%3E%3C/svg%3E")}.vpi-more-horizontal{--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3Ccircle cx='19' cy='12' r='1'/%3E%3Ccircle cx='5' cy='12' r='1'/%3E%3C/svg%3E")}.vpi-languages{--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m5 8 6 6M4 14l6-6 2-3M2 5h12M7 2h1M22 22l-5-10-5 10M14 18h6'/%3E%3C/svg%3E")}.vpi-heart{--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/%3E%3C/svg%3E")}.vpi-search{--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E")}.vpi-layout-list{--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Crect width='7' height='7' x='3' y='3' rx='1'/%3E%3Crect width='7' height='7' x='3' y='14' rx='1'/%3E%3Cpath d='M14 4h7M14 9h7M14 15h7M14 20h7'/%3E%3C/svg%3E")}.vpi-delete{--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M20 5H9l-7 7 7 7h11a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2ZM18 9l-6 6M12 9l6 6'/%3E%3C/svg%3E")}.vpi-corner-down-left{--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m9 10-5 5 5 5'/%3E%3Cpath d='M20 4v7a4 4 0 0 1-4 4H4'/%3E%3C/svg%3E")}:root{--vp-icon-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='rgba(128,128,128,1)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3C/svg%3E");--vp-icon-copied: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='rgba(128,128,128,1)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='m9 14 2 2 4-4'/%3E%3C/svg%3E")}.visually-hidden{position:absolute;width:1px;height:1px;white-space:nowrap;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden}.custom-block{border:1px solid transparent;border-radius:8px;padding:16px 16px 8px;line-height:24px;font-size:var(--vp-custom-block-font-size);color:var(--vp-c-text-2)}.custom-block.info{border-color:var(--vp-custom-block-info-border);color:var(--vp-custom-block-info-text);background-color:var(--vp-custom-block-info-bg)}.custom-block.info a,.custom-block.info code{color:var(--vp-c-brand-1)}.custom-block.info a:hover,.custom-block.info a:hover>code{color:var(--vp-c-brand-2)}.custom-block.info code{background-color:var(--vp-custom-block-info-code-bg)}.custom-block.note{border-color:var(--vp-custom-block-note-border);color:var(--vp-custom-block-note-text);background-color:var(--vp-custom-block-note-bg)}.custom-block.note a,.custom-block.note code{color:var(--vp-c-brand-1)}.custom-block.note a:hover,.custom-block.note a:hover>code{color:var(--vp-c-brand-2)}.custom-block.note code{background-color:var(--vp-custom-block-note-code-bg)}.custom-block.tip{border-color:var(--vp-custom-block-tip-border);color:var(--vp-custom-block-tip-text);background-color:var(--vp-custom-block-tip-bg)}.custom-block.tip a,.custom-block.tip code{color:var(--vp-c-tip-1)}.custom-block.tip a:hover,.custom-block.tip a:hover>code{color:var(--vp-c-tip-2)}.custom-block.tip code{background-color:var(--vp-custom-block-tip-code-bg)}.custom-block.important{border-color:var(--vp-custom-block-important-border);color:var(--vp-custom-block-important-text);background-color:var(--vp-custom-block-important-bg)}.custom-block.important a,.custom-block.important code{color:var(--vp-c-important-1)}.custom-block.important a:hover,.custom-block.important a:hover>code{color:var(--vp-c-important-2)}.custom-block.important code{background-color:var(--vp-custom-block-important-code-bg)}.custom-block.warning{border-color:var(--vp-custom-block-warning-border);color:var(--vp-custom-block-warning-text);background-color:var(--vp-custom-block-warning-bg)}.custom-block.warning a,.custom-block.warning code{color:var(--vp-c-warning-1)}.custom-block.warning a:hover,.custom-block.warning a:hover>code{color:var(--vp-c-warning-2)}.custom-block.warning code{background-color:var(--vp-custom-block-warning-code-bg)}.custom-block.danger{border-color:var(--vp-custom-block-danger-border);color:var(--vp-custom-block-danger-text);background-color:var(--vp-custom-block-danger-bg)}.custom-block.danger a,.custom-block.danger code{color:var(--vp-c-danger-1)}.custom-block.danger a:hover,.custom-block.danger a:hover>code{color:var(--vp-c-danger-2)}.custom-block.danger code{background-color:var(--vp-custom-block-danger-code-bg)}.custom-block.caution{border-color:var(--vp-custom-block-caution-border);color:var(--vp-custom-block-caution-text);background-color:var(--vp-custom-block-caution-bg)}.custom-block.caution a,.custom-block.caution code{color:var(--vp-c-caution-1)}.custom-block.caution a:hover,.custom-block.caution a:hover>code{color:var(--vp-c-caution-2)}.custom-block.caution code{background-color:var(--vp-custom-block-caution-code-bg)}.custom-block.details{border-color:var(--vp-custom-block-details-border);color:var(--vp-custom-block-details-text);background-color:var(--vp-custom-block-details-bg)}.custom-block.details a{color:var(--vp-c-brand-1)}.custom-block.details a:hover,.custom-block.details a:hover>code{color:var(--vp-c-brand-2)}.custom-block.details code{background-color:var(--vp-custom-block-details-code-bg)}.custom-block-title{font-weight:600}.custom-block p+p{margin:8px 0}.custom-block.details summary{margin:0 0 8px;font-weight:700;cursor:pointer;-webkit-user-select:none;user-select:none}.custom-block.details summary+p{margin:8px 0}.custom-block a{color:inherit;font-weight:600;text-decoration:underline;text-underline-offset:2px;transition:opacity .25s}.custom-block a:hover{opacity:.75}.custom-block code{font-size:var(--vp-custom-block-code-font-size)}.custom-block.custom-block th,.custom-block.custom-block blockquote>p{font-size:var(--vp-custom-block-font-size);color:inherit}.dark .vp-code span{color:var(--shiki-dark, inherit)}html:not(.dark) .vp-code span{color:var(--shiki-light, inherit)}.vp-code-group{margin-top:16px}.vp-code-group .tabs{position:relative;display:flex;margin-right:-24px;margin-left:-24px;padding:0 12px;background-color:var(--vp-code-tab-bg);overflow-x:auto;overflow-y:hidden;box-shadow:inset 0 -1px var(--vp-code-tab-divider)}@media (min-width: 640px){.vp-code-group .tabs{margin-right:0;margin-left:0;border-radius:8px 8px 0 0}}.vp-code-group .tabs input{position:fixed;opacity:0;pointer-events:none}.vp-code-group .tabs label{position:relative;display:inline-block;border-bottom:1px solid transparent;padding:0 12px;line-height:48px;font-size:14px;font-weight:500;color:var(--vp-code-tab-text-color);white-space:nowrap;cursor:pointer;transition:color .25s}.vp-code-group .tabs label:after{position:absolute;right:8px;bottom:-1px;left:8px;z-index:1;height:2px;border-radius:2px;content:"";background-color:transparent;transition:background-color .25s}.vp-code-group label:hover{color:var(--vp-code-tab-hover-text-color)}.vp-code-group input:checked+label{color:var(--vp-code-tab-active-text-color)}.vp-code-group input:checked+label:after{background-color:var(--vp-code-tab-active-bar-color)}.vp-code-group div[class*=language-],.vp-block{display:none;margin-top:0!important;border-top-left-radius:0!important;border-top-right-radius:0!important}.vp-code-group div[class*=language-].active,.vp-block.active{display:block}.vp-block{padding:20px 24px}.vp-doc h1,.vp-doc h2,.vp-doc h3,.vp-doc h4,.vp-doc h5,.vp-doc h6{position:relative;font-weight:600;outline:none}.vp-doc h1{letter-spacing:-.02em;line-height:40px;font-size:28px}.vp-doc h2{margin:48px 0 16px;border-top:1px solid var(--vp-c-divider);padding-top:24px;letter-spacing:-.02em;line-height:32px;font-size:24px}.vp-doc h3{margin:32px 0 0;letter-spacing:-.01em;line-height:28px;font-size:20px}.vp-doc h4{margin:24px 0 0;letter-spacing:-.01em;line-height:24px;font-size:18px}.vp-doc .header-anchor{position:absolute;top:0;left:0;margin-left:-.87em;font-weight:500;-webkit-user-select:none;user-select:none;opacity:0;text-decoration:none;transition:color .25s,opacity .25s}.vp-doc .header-anchor:before{content:var(--vp-header-anchor-symbol)}.vp-doc h1:hover .header-anchor,.vp-doc h1 .header-anchor:focus,.vp-doc h2:hover .header-anchor,.vp-doc h2 .header-anchor:focus,.vp-doc h3:hover .header-anchor,.vp-doc h3 .header-anchor:focus,.vp-doc h4:hover .header-anchor,.vp-doc h4 .header-anchor:focus,.vp-doc h5:hover .header-anchor,.vp-doc h5 .header-anchor:focus,.vp-doc h6:hover .header-anchor,.vp-doc h6 .header-anchor:focus{opacity:1}@media (min-width: 768px){.vp-doc h1{letter-spacing:-.02em;line-height:40px;font-size:32px}}.vp-doc h2 .header-anchor{top:24px}.vp-doc p,.vp-doc summary{margin:16px 0}.vp-doc p{line-height:28px}.vp-doc blockquote{margin:16px 0;border-left:2px solid var(--vp-c-divider);padding-left:16px;transition:border-color .5s;color:var(--vp-c-text-2)}.vp-doc blockquote>p{margin:0;font-size:16px;transition:color .5s}.vp-doc a{font-weight:500;color:var(--vp-c-brand-1);text-decoration:underline;text-underline-offset:2px;transition:color .25s,opacity .25s}.vp-doc a:hover{color:var(--vp-c-brand-2)}.vp-doc strong{font-weight:600}.vp-doc ul,.vp-doc ol{padding-left:1.25rem;margin:16px 0}.vp-doc ul{list-style:disc}.vp-doc ol{list-style:decimal}.vp-doc li+li{margin-top:8px}.vp-doc li>ol,.vp-doc li>ul{margin:8px 0 0}.vp-doc table{display:block;border-collapse:collapse;margin:20px 0;overflow-x:auto}.vp-doc tr{background-color:var(--vp-c-bg);border-top:1px solid var(--vp-c-divider);transition:background-color .5s}.vp-doc tr:nth-child(2n){background-color:var(--vp-c-bg-soft)}.vp-doc th,.vp-doc td{border:1px solid var(--vp-c-divider);padding:8px 16px}.vp-doc th{text-align:left;font-size:14px;font-weight:600;color:var(--vp-c-text-2);background-color:var(--vp-c-bg-soft)}.vp-doc td{font-size:14px}.vp-doc hr{margin:16px 0;border:none;border-top:1px solid var(--vp-c-divider)}.vp-doc .custom-block{margin:16px 0}.vp-doc .custom-block p{margin:8px 0;line-height:24px}.vp-doc .custom-block p:first-child{margin:0}.vp-doc .custom-block div[class*=language-]{margin:8px 0;border-radius:8px}.vp-doc .custom-block div[class*=language-] code{font-weight:400;background-color:transparent}.vp-doc .custom-block .vp-code-group .tabs{margin:0;border-radius:8px 8px 0 0}.vp-doc :not(pre,h1,h2,h3,h4,h5,h6)>code{font-size:var(--vp-code-font-size);color:var(--vp-code-color)}.vp-doc :not(pre)>code{border-radius:4px;padding:3px 6px;background-color:var(--vp-code-bg);transition:color .25s,background-color .5s}.vp-doc a>code{color:var(--vp-code-link-color)}.vp-doc a:hover>code{color:var(--vp-code-link-hover-color)}.vp-doc h1>code,.vp-doc h2>code,.vp-doc h3>code,.vp-doc h4>code{font-size:.9em}.vp-doc div[class*=language-],.vp-block{position:relative;margin:16px -24px;background-color:var(--vp-code-block-bg);overflow-x:auto;transition:background-color .5s}@media (min-width: 640px){.vp-doc div[class*=language-],.vp-block{border-radius:8px;margin:16px 0}}@media (max-width: 639px){.vp-doc li div[class*=language-]{border-radius:8px 0 0 8px}}.vp-doc div[class*=language-]+div[class*=language-],.vp-doc div[class$=-api]+div[class*=language-],.vp-doc div[class*=language-]+div[class$=-api]>div[class*=language-]{margin-top:-8px}.vp-doc [class*=language-] pre,.vp-doc [class*=language-] code{direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}.vp-doc [class*=language-] pre{position:relative;z-index:1;margin:0;padding:20px 0;background:transparent;overflow-x:auto}.vp-doc [class*=language-] code{display:block;padding:0 24px;width:fit-content;min-width:100%;line-height:var(--vp-code-line-height);font-size:var(--vp-code-font-size);color:var(--vp-code-block-color);transition:color .5s}.vp-doc [class*=language-] code .highlighted{background-color:var(--vp-code-line-highlight-color);transition:background-color .5s;margin:0 -24px;padding:0 24px;width:calc(100% + 48px);display:inline-block}.vp-doc [class*=language-] code .highlighted.error{background-color:var(--vp-code-line-error-color)}.vp-doc [class*=language-] code .highlighted.warning{background-color:var(--vp-code-line-warning-color)}.vp-doc [class*=language-] code .diff{transition:background-color .5s;margin:0 -24px;padding:0 24px;width:calc(100% + 48px);display:inline-block}.vp-doc [class*=language-] code .diff:before{position:absolute;left:10px}.vp-doc [class*=language-] .has-focused-lines .line:not(.has-focus){filter:blur(.095rem);opacity:.4;transition:filter .35s,opacity .35s}.vp-doc [class*=language-] .has-focused-lines .line:not(.has-focus){opacity:.7;transition:filter .35s,opacity .35s}.vp-doc [class*=language-]:hover .has-focused-lines .line:not(.has-focus){filter:blur(0);opacity:1}.vp-doc [class*=language-] code .diff.remove{background-color:var(--vp-code-line-diff-remove-color);opacity:.7}.vp-doc [class*=language-] code .diff.remove:before{content:"-";color:var(--vp-code-line-diff-remove-symbol-color)}.vp-doc [class*=language-] code .diff.add{background-color:var(--vp-code-line-diff-add-color)}.vp-doc [class*=language-] code .diff.add:before{content:"+";color:var(--vp-code-line-diff-add-symbol-color)}.vp-doc div[class*=language-].line-numbers-mode{padding-left:32px}.vp-doc .line-numbers-wrapper{position:absolute;top:0;bottom:0;left:0;z-index:3;border-right:1px solid var(--vp-code-block-divider-color);padding-top:20px;width:32px;text-align:center;font-family:var(--vp-font-family-mono);line-height:var(--vp-code-line-height);font-size:var(--vp-code-font-size);color:var(--vp-code-line-number-color);transition:border-color .5s,color .5s}.vp-doc [class*=language-]>button.copy{direction:ltr;position:absolute;top:12px;right:12px;z-index:3;border:1px solid var(--vp-code-copy-code-border-color);border-radius:4px;width:40px;height:40px;background-color:var(--vp-code-copy-code-bg);opacity:0;cursor:pointer;background-image:var(--vp-icon-copy);background-position:50%;background-size:20px;background-repeat:no-repeat;transition:border-color .25s,background-color .25s,opacity .25s}.vp-doc [class*=language-]:hover>button.copy,.vp-doc [class*=language-]>button.copy:focus{opacity:1}.vp-doc [class*=language-]>button.copy:hover,.vp-doc [class*=language-]>button.copy.copied{border-color:var(--vp-code-copy-code-hover-border-color);background-color:var(--vp-code-copy-code-hover-bg)}.vp-doc [class*=language-]>button.copy.copied,.vp-doc [class*=language-]>button.copy:hover.copied{border-radius:0 4px 4px 0;background-color:var(--vp-code-copy-code-hover-bg);background-image:var(--vp-icon-copied)}.vp-doc [class*=language-]>button.copy.copied:before,.vp-doc [class*=language-]>button.copy:hover.copied:before{position:relative;top:-1px;transform:translate(calc(-100% - 1px));display:flex;justify-content:center;align-items:center;border:1px solid var(--vp-code-copy-code-hover-border-color);border-right:0;border-radius:4px 0 0 4px;padding:0 10px;width:fit-content;height:40px;text-align:center;font-size:12px;font-weight:500;color:var(--vp-code-copy-code-active-text);background-color:var(--vp-code-copy-code-hover-bg);white-space:nowrap;content:var(--vp-code-copy-copied-text-content)}.vp-doc [class*=language-]>span.lang{position:absolute;top:2px;right:8px;z-index:2;font-size:12px;font-weight:500;-webkit-user-select:none;user-select:none;color:var(--vp-code-lang-color);transition:color .4s,opacity .4s}.vp-doc [class*=language-]:hover>button.copy+span.lang,.vp-doc [class*=language-]>button.copy:focus+span.lang{opacity:0}.vp-doc .VPTeamMembers{margin-top:24px}.vp-doc .VPTeamMembers.small.count-1 .container{margin:0!important;max-width:calc((100% - 24px)/2)!important}.vp-doc .VPTeamMembers.small.count-2 .container,.vp-doc .VPTeamMembers.small.count-3 .container{max-width:100%!important}.vp-doc .VPTeamMembers.medium.count-1 .container{margin:0!important;max-width:calc((100% - 24px)/2)!important}:is(.vp-external-link-icon,.vp-doc a[href*="://"],.vp-doc a[target=_blank]):not(.no-icon):after{display:inline-block;margin-top:-1px;margin-left:4px;width:11px;height:11px;background:currentColor;color:var(--vp-c-text-3);flex-shrink:0;--icon: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' %3E%3Cpath d='M0 0h24v24H0V0z' fill='none' /%3E%3Cpath d='M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z' /%3E%3C/svg%3E");-webkit-mask-image:var(--icon);mask-image:var(--icon)}.vp-external-link-icon:after{content:""}.external-link-icon-enabled :is(.vp-doc a[href*="://"],.vp-doc a[target=_blank]):after{content:"";color:currentColor}.vp-sponsor{border-radius:16px;overflow:hidden}.vp-sponsor.aside{border-radius:12px}.vp-sponsor-section+.vp-sponsor-section{margin-top:4px}.vp-sponsor-tier{margin:0 0 4px!important;text-align:center;letter-spacing:1px!important;line-height:24px;width:100%;font-weight:600;color:var(--vp-c-text-2);background-color:var(--vp-c-bg-soft)}.vp-sponsor.normal .vp-sponsor-tier{padding:13px 0 11px;font-size:14px}.vp-sponsor.aside .vp-sponsor-tier{padding:9px 0 7px;font-size:12px}.vp-sponsor-grid+.vp-sponsor-tier{margin-top:4px}.vp-sponsor-grid{display:flex;flex-wrap:wrap;gap:4px}.vp-sponsor-grid.xmini .vp-sponsor-grid-link{height:64px}.vp-sponsor-grid.xmini .vp-sponsor-grid-image{max-width:64px;max-height:22px}.vp-sponsor-grid.mini .vp-sponsor-grid-link{height:72px}.vp-sponsor-grid.mini .vp-sponsor-grid-image{max-width:96px;max-height:24px}.vp-sponsor-grid.small .vp-sponsor-grid-link{height:96px}.vp-sponsor-grid.small .vp-sponsor-grid-image{max-width:96px;max-height:24px}.vp-sponsor-grid.medium .vp-sponsor-grid-link{height:112px}.vp-sponsor-grid.medium .vp-sponsor-grid-image{max-width:120px;max-height:36px}.vp-sponsor-grid.big .vp-sponsor-grid-link{height:184px}.vp-sponsor-grid.big .vp-sponsor-grid-image{max-width:192px;max-height:56px}.vp-sponsor-grid[data-vp-grid="2"] .vp-sponsor-grid-item{width:calc((100% - 4px)/2)}.vp-sponsor-grid[data-vp-grid="3"] .vp-sponsor-grid-item{width:calc((100% - 4px * 2) / 3)}.vp-sponsor-grid[data-vp-grid="4"] .vp-sponsor-grid-item{width:calc((100% - 12px)/4)}.vp-sponsor-grid[data-vp-grid="5"] .vp-sponsor-grid-item{width:calc((100% - 16px)/5)}.vp-sponsor-grid[data-vp-grid="6"] .vp-sponsor-grid-item{width:calc((100% - 4px * 5) / 6)}.vp-sponsor-grid-item{flex-shrink:0;width:100%;background-color:var(--vp-c-bg-soft);transition:background-color .25s}.vp-sponsor-grid-item:hover{background-color:var(--vp-c-default-soft)}.vp-sponsor-grid-item:hover .vp-sponsor-grid-image{filter:grayscale(0) invert(0)}.vp-sponsor-grid-item.empty:hover{background-color:var(--vp-c-bg-soft)}.dark .vp-sponsor-grid-item:hover{background-color:var(--vp-c-white)}.dark .vp-sponsor-grid-item.empty:hover{background-color:var(--vp-c-bg-soft)}.vp-sponsor-grid-link{display:flex}.vp-sponsor-grid-box{display:flex;justify-content:center;align-items:center;width:100%}.vp-sponsor-grid-image{max-width:100%;filter:grayscale(1);transition:filter .25s}.dark .vp-sponsor-grid-image{filter:grayscale(1) invert(1)}.VPBadge{display:inline-block;margin-left:2px;border:1px solid transparent;border-radius:12px;padding:0 10px;line-height:22px;font-size:12px;font-weight:500;transform:translateY(-2px)}.VPBadge.small{padding:0 6px;line-height:18px;font-size:10px;transform:translateY(-8px)}.VPDocFooter .VPBadge{display:none}.vp-doc h1>.VPBadge{margin-top:4px;vertical-align:top}.vp-doc h2>.VPBadge{margin-top:3px;padding:0 8px;vertical-align:top}.vp-doc h3>.VPBadge{vertical-align:middle}.vp-doc h4>.VPBadge,.vp-doc h5>.VPBadge,.vp-doc h6>.VPBadge{vertical-align:middle;line-height:18px}.VPBadge.info{border-color:var(--vp-badge-info-border);color:var(--vp-badge-info-text);background-color:var(--vp-badge-info-bg)}.VPBadge.tip{border-color:var(--vp-badge-tip-border);color:var(--vp-badge-tip-text);background-color:var(--vp-badge-tip-bg)}.VPBadge.warning{border-color:var(--vp-badge-warning-border);color:var(--vp-badge-warning-text);background-color:var(--vp-badge-warning-bg)}.VPBadge.danger{border-color:var(--vp-badge-danger-border);color:var(--vp-badge-danger-text);background-color:var(--vp-badge-danger-bg)}.VPBackdrop[data-v-c79a1216]{position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--vp-z-index-backdrop);background:var(--vp-backdrop-bg-color);transition:opacity .5s}.VPBackdrop.fade-enter-from[data-v-c79a1216],.VPBackdrop.fade-leave-to[data-v-c79a1216]{opacity:0}.VPBackdrop.fade-leave-active[data-v-c79a1216]{transition-duration:.25s}@media (min-width: 1280px){.VPBackdrop[data-v-c79a1216]{display:none}}.NotFound[data-v-d6be1790]{padding:64px 24px 96px;text-align:center}@media (min-width: 768px){.NotFound[data-v-d6be1790]{padding:96px 32px 168px}}.code[data-v-d6be1790]{line-height:64px;font-size:64px;font-weight:600}.title[data-v-d6be1790]{padding-top:12px;letter-spacing:2px;line-height:20px;font-size:20px;font-weight:700}.divider[data-v-d6be1790]{margin:24px auto 18px;width:64px;height:1px;background-color:var(--vp-c-divider)}.quote[data-v-d6be1790]{margin:0 auto;max-width:256px;font-size:14px;font-weight:500;color:var(--vp-c-text-2)}.action[data-v-d6be1790]{padding-top:20px}.link[data-v-d6be1790]{display:inline-block;border:1px solid var(--vp-c-brand-1);border-radius:16px;padding:3px 16px;font-size:14px;font-weight:500;color:var(--vp-c-brand-1);transition:border-color .25s,color .25s}.link[data-v-d6be1790]:hover{border-color:var(--vp-c-brand-2);color:var(--vp-c-brand-2)}.root[data-v-b933a997]{position:relative;z-index:1}.nested[data-v-b933a997]{padding-right:16px;padding-left:16px}.outline-link[data-v-b933a997]{display:block;line-height:32px;font-size:14px;font-weight:400;color:var(--vp-c-text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .5s}.outline-link[data-v-b933a997]:hover,.outline-link.active[data-v-b933a997]{color:var(--vp-c-text-1);transition:color .25s}.outline-link.nested[data-v-b933a997]{padding-left:13px}.VPDocAsideOutline[data-v-a5bbad30]{display:none}.VPDocAsideOutline.has-outline[data-v-a5bbad30]{display:block}.content[data-v-a5bbad30]{position:relative;border-left:1px solid var(--vp-c-divider);padding-left:16px;font-size:13px;font-weight:500}.outline-marker[data-v-a5bbad30]{position:absolute;top:32px;left:-1px;z-index:0;opacity:0;width:2px;border-radius:2px;height:18px;background-color:var(--vp-c-brand-1);transition:top .25s cubic-bezier(0,1,.5,1),background-color .5s,opacity .25s}.outline-title[data-v-a5bbad30]{line-height:32px;font-size:14px;font-weight:600}.VPDocAside[data-v-3f215769]{display:flex;flex-direction:column;flex-grow:1}.spacer[data-v-3f215769]{flex-grow:1}.VPDocAside[data-v-3f215769] .spacer+.VPDocAsideSponsors,.VPDocAside[data-v-3f215769] .spacer+.VPDocAsideCarbonAds{margin-top:24px}.VPDocAside[data-v-3f215769] .VPDocAsideSponsors+.VPDocAsideCarbonAds{margin-top:16px}.VPLastUpdated[data-v-e98dd255]{line-height:24px;font-size:14px;font-weight:500;color:var(--vp-c-text-2)}@media (min-width: 640px){.VPLastUpdated[data-v-e98dd255]{line-height:32px;font-size:14px;font-weight:500}}.VPDocFooter[data-v-e257564d]{margin-top:64px}.edit-info[data-v-e257564d]{padding-bottom:18px}@media (min-width: 640px){.edit-info[data-v-e257564d]{display:flex;justify-content:space-between;align-items:center;padding-bottom:14px}}.edit-link-button[data-v-e257564d]{display:flex;align-items:center;border:0;line-height:32px;font-size:14px;font-weight:500;color:var(--vp-c-brand-1);transition:color .25s}.edit-link-button[data-v-e257564d]:hover{color:var(--vp-c-brand-2)}.edit-link-icon[data-v-e257564d]{margin-right:8px}.prev-next[data-v-e257564d]{border-top:1px solid var(--vp-c-divider);padding-top:24px;display:grid;grid-row-gap:8px}@media (min-width: 640px){.prev-next[data-v-e257564d]{grid-template-columns:repeat(2,1fr);grid-column-gap:16px}}.pager-link[data-v-e257564d]{display:block;border:1px solid var(--vp-c-divider);border-radius:8px;padding:11px 16px 13px;width:100%;height:100%;transition:border-color .25s}.pager-link[data-v-e257564d]:hover{border-color:var(--vp-c-brand-1)}.pager-link.next[data-v-e257564d]{margin-left:auto;text-align:right}.desc[data-v-e257564d]{display:block;line-height:20px;font-size:12px;font-weight:500;color:var(--vp-c-text-2)}.title[data-v-e257564d]{display:block;line-height:20px;font-size:14px;font-weight:500;color:var(--vp-c-brand-1);transition:color .25s}.VPDoc[data-v-39a288b8]{padding:32px 24px 96px;width:100%}@media (min-width: 768px){.VPDoc[data-v-39a288b8]{padding:48px 32px 128px}}@media (min-width: 960px){.VPDoc[data-v-39a288b8]{padding:48px 32px 0}.VPDoc:not(.has-sidebar) .container[data-v-39a288b8]{display:flex;justify-content:center;max-width:992px}.VPDoc:not(.has-sidebar) .content[data-v-39a288b8]{max-width:752px}}@media (min-width: 1280px){.VPDoc .container[data-v-39a288b8]{display:flex;justify-content:center}.VPDoc .aside[data-v-39a288b8]{display:block}}@media (min-width: 1440px){.VPDoc:not(.has-sidebar) .content[data-v-39a288b8]{max-width:784px}.VPDoc:not(.has-sidebar) .container[data-v-39a288b8]{max-width:1104px}}.container[data-v-39a288b8]{margin:0 auto;width:100%}.aside[data-v-39a288b8]{position:relative;display:none;order:2;flex-grow:1;padding-left:32px;width:100%;max-width:256px}.left-aside[data-v-39a288b8]{order:1;padding-left:unset;padding-right:32px}.aside-container[data-v-39a288b8]{position:fixed;top:0;padding-top:calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + var(--vp-doc-top-height, 0px) + 48px);width:224px;height:100vh;overflow-x:hidden;overflow-y:auto;scrollbar-width:none}.aside-container[data-v-39a288b8]::-webkit-scrollbar{display:none}.aside-curtain[data-v-39a288b8]{position:fixed;bottom:0;z-index:10;width:224px;height:32px;background:linear-gradient(transparent,var(--vp-c-bg) 70%)}.aside-content[data-v-39a288b8]{display:flex;flex-direction:column;min-height:calc(100vh - (var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 48px));padding-bottom:32px}.content[data-v-39a288b8]{position:relative;margin:0 auto;width:100%}@media (min-width: 960px){.content[data-v-39a288b8]{padding:0 32px 128px}}@media (min-width: 1280px){.content[data-v-39a288b8]{order:1;margin:0;min-width:640px}}.content-container[data-v-39a288b8]{margin:0 auto}.VPDoc.has-aside .content-container[data-v-39a288b8]{max-width:688px}.VPButton[data-v-fa7799d5]{display:inline-block;border:1px solid transparent;text-align:center;font-weight:600;white-space:nowrap;transition:color .25s,border-color .25s,background-color .25s}.VPButton[data-v-fa7799d5]:active{transition:color .1s,border-color .1s,background-color .1s}.VPButton.medium[data-v-fa7799d5]{border-radius:20px;padding:0 20px;line-height:38px;font-size:14px}.VPButton.big[data-v-fa7799d5]{border-radius:24px;padding:0 24px;line-height:46px;font-size:16px}.VPButton.brand[data-v-fa7799d5]{border-color:var(--vp-button-brand-border);color:var(--vp-button-brand-text);background-color:var(--vp-button-brand-bg)}.VPButton.brand[data-v-fa7799d5]:hover{border-color:var(--vp-button-brand-hover-border);color:var(--vp-button-brand-hover-text);background-color:var(--vp-button-brand-hover-bg)}.VPButton.brand[data-v-fa7799d5]:active{border-color:var(--vp-button-brand-active-border);color:var(--vp-button-brand-active-text);background-color:var(--vp-button-brand-active-bg)}.VPButton.alt[data-v-fa7799d5]{border-color:var(--vp-button-alt-border);color:var(--vp-button-alt-text);background-color:var(--vp-button-alt-bg)}.VPButton.alt[data-v-fa7799d5]:hover{border-color:var(--vp-button-alt-hover-border);color:var(--vp-button-alt-hover-text);background-color:var(--vp-button-alt-hover-bg)}.VPButton.alt[data-v-fa7799d5]:active{border-color:var(--vp-button-alt-active-border);color:var(--vp-button-alt-active-text);background-color:var(--vp-button-alt-active-bg)}.VPButton.sponsor[data-v-fa7799d5]{border-color:var(--vp-button-sponsor-border);color:var(--vp-button-sponsor-text);background-color:var(--vp-button-sponsor-bg)}.VPButton.sponsor[data-v-fa7799d5]:hover{border-color:var(--vp-button-sponsor-hover-border);color:var(--vp-button-sponsor-hover-text);background-color:var(--vp-button-sponsor-hover-bg)}.VPButton.sponsor[data-v-fa7799d5]:active{border-color:var(--vp-button-sponsor-active-border);color:var(--vp-button-sponsor-active-text);background-color:var(--vp-button-sponsor-active-bg)}html:not(.dark) .VPImage.dark[data-v-8426fc1a]{display:none}.dark .VPImage.light[data-v-8426fc1a]{display:none}.VPHero[data-v-303bb580]{margin-top:calc((var(--vp-nav-height) + var(--vp-layout-top-height, 0px)) * -1);padding:calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 48px) 24px 48px}@media (min-width: 640px){.VPHero[data-v-303bb580]{padding:calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 80px) 48px 64px}}@media (min-width: 960px){.VPHero[data-v-303bb580]{padding:calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 80px) 64px 64px}}.container[data-v-303bb580]{display:flex;flex-direction:column;margin:0 auto;max-width:1152px}@media (min-width: 960px){.container[data-v-303bb580]{flex-direction:row}}.main[data-v-303bb580]{position:relative;z-index:10;order:2;flex-grow:1;flex-shrink:0}.VPHero.has-image .container[data-v-303bb580]{text-align:center}@media (min-width: 960px){.VPHero.has-image .container[data-v-303bb580]{text-align:left}}@media (min-width: 960px){.main[data-v-303bb580]{order:1;width:calc((100% / 3) * 2)}.VPHero.has-image .main[data-v-303bb580]{max-width:592px}}.name[data-v-303bb580],.text[data-v-303bb580]{max-width:392px;letter-spacing:-.4px;line-height:40px;font-size:32px;font-weight:700;white-space:pre-wrap}.VPHero.has-image .name[data-v-303bb580],.VPHero.has-image .text[data-v-303bb580]{margin:0 auto}.name[data-v-303bb580]{color:var(--vp-home-hero-name-color)}.clip[data-v-303bb580]{background:var(--vp-home-hero-name-background);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:var(--vp-home-hero-name-color)}@media (min-width: 640px){.name[data-v-303bb580],.text[data-v-303bb580]{max-width:576px;line-height:56px;font-size:48px}}@media (min-width: 960px){.name[data-v-303bb580],.text[data-v-303bb580]{line-height:64px;font-size:56px}.VPHero.has-image .name[data-v-303bb580],.VPHero.has-image .text[data-v-303bb580]{margin:0}}.tagline[data-v-303bb580]{padding-top:8px;max-width:392px;line-height:28px;font-size:18px;font-weight:500;white-space:pre-wrap;color:var(--vp-c-text-2)}.VPHero.has-image .tagline[data-v-303bb580]{margin:0 auto}@media (min-width: 640px){.tagline[data-v-303bb580]{padding-top:12px;max-width:576px;line-height:32px;font-size:20px}}@media (min-width: 960px){.tagline[data-v-303bb580]{line-height:36px;font-size:24px}.VPHero.has-image .tagline[data-v-303bb580]{margin:0}}.actions[data-v-303bb580]{display:flex;flex-wrap:wrap;margin:-6px;padding-top:24px}.VPHero.has-image .actions[data-v-303bb580]{justify-content:center}@media (min-width: 640px){.actions[data-v-303bb580]{padding-top:32px}}@media (min-width: 960px){.VPHero.has-image .actions[data-v-303bb580]{justify-content:flex-start}}.action[data-v-303bb580]{flex-shrink:0;padding:6px}.image[data-v-303bb580]{order:1;margin:-76px -24px -48px}@media (min-width: 640px){.image[data-v-303bb580]{margin:-108px -24px -48px}}@media (min-width: 960px){.image[data-v-303bb580]{flex-grow:1;order:2;margin:0;min-height:100%}}.image-container[data-v-303bb580]{position:relative;margin:0 auto;width:320px;height:320px}@media (min-width: 640px){.image-container[data-v-303bb580]{width:392px;height:392px}}@media (min-width: 960px){.image-container[data-v-303bb580]{display:flex;justify-content:center;align-items:center;width:100%;height:100%;transform:translate(-32px,-32px)}}.image-bg[data-v-303bb580]{position:absolute;top:50%;left:50%;border-radius:50%;width:192px;height:192px;background-image:var(--vp-home-hero-image-background-image);filter:var(--vp-home-hero-image-filter);transform:translate(-50%,-50%)}@media (min-width: 640px){.image-bg[data-v-303bb580]{width:256px;height:256px}}@media (min-width: 960px){.image-bg[data-v-303bb580]{width:320px;height:320px}}[data-v-303bb580] .image-src{position:absolute;top:50%;left:50%;max-width:192px;max-height:192px;transform:translate(-50%,-50%)}@media (min-width: 640px){[data-v-303bb580] .image-src{max-width:256px;max-height:256px}}@media (min-width: 960px){[data-v-303bb580] .image-src{max-width:320px;max-height:320px}}.VPFeature[data-v-a3976bdc]{display:block;border:1px solid var(--vp-c-bg-soft);border-radius:12px;height:100%;background-color:var(--vp-c-bg-soft);transition:border-color .25s,background-color .25s}.VPFeature.link[data-v-a3976bdc]:hover{border-color:var(--vp-c-brand-1)}.box[data-v-a3976bdc]{display:flex;flex-direction:column;padding:24px;height:100%}.box[data-v-a3976bdc]>.VPImage{margin-bottom:20px}.icon[data-v-a3976bdc]{display:flex;justify-content:center;align-items:center;margin-bottom:20px;border-radius:6px;background-color:var(--vp-c-default-soft);width:48px;height:48px;font-size:24px;transition:background-color .25s}.title[data-v-a3976bdc]{line-height:24px;font-size:16px;font-weight:600}.details[data-v-a3976bdc]{flex-grow:1;padding-top:8px;line-height:24px;font-size:14px;font-weight:500;color:var(--vp-c-text-2)}.link-text[data-v-a3976bdc]{padding-top:8px}.link-text-value[data-v-a3976bdc]{display:flex;align-items:center;font-size:14px;font-weight:500;color:var(--vp-c-brand-1)}.link-text-icon[data-v-a3976bdc]{margin-left:6px}.VPFeatures[data-v-a6181336]{position:relative;padding:0 24px}@media (min-width: 640px){.VPFeatures[data-v-a6181336]{padding:0 48px}}@media (min-width: 960px){.VPFeatures[data-v-a6181336]{padding:0 64px}}.container[data-v-a6181336]{margin:0 auto;max-width:1152px}.items[data-v-a6181336]{display:flex;flex-wrap:wrap;margin:-8px}.item[data-v-a6181336]{padding:8px;width:100%}@media (min-width: 640px){.item.grid-2[data-v-a6181336],.item.grid-4[data-v-a6181336],.item.grid-6[data-v-a6181336]{width:50%}}@media (min-width: 768px){.item.grid-2[data-v-a6181336],.item.grid-4[data-v-a6181336]{width:50%}.item.grid-3[data-v-a6181336],.item.grid-6[data-v-a6181336]{width:calc(100% / 3)}}@media (min-width: 960px){.item.grid-4[data-v-a6181336]{width:25%}}.container[data-v-8e2d4988]{margin:auto;width:100%;max-width:1280px;padding:0 24px}@media (min-width: 640px){.container[data-v-8e2d4988]{padding:0 48px}}@media (min-width: 960px){.container[data-v-8e2d4988]{width:100%;padding:0 64px}}.vp-doc[data-v-8e2d4988] .VPHomeSponsors,.vp-doc[data-v-8e2d4988] .VPTeamPage{margin-left:var(--vp-offset, calc(50% - 50vw) );margin-right:var(--vp-offset, calc(50% - 50vw) )}.vp-doc[data-v-8e2d4988] .VPHomeSponsors h2{border-top:none;letter-spacing:normal}.vp-doc[data-v-8e2d4988] .VPHomeSponsors a,.vp-doc[data-v-8e2d4988] .VPTeamPage a{text-decoration:none}.VPHome[data-v-686f80a6]{margin-bottom:96px}@media (min-width: 768px){.VPHome[data-v-686f80a6]{margin-bottom:128px}}.VPContent[data-v-1428d186]{flex-grow:1;flex-shrink:0;margin:var(--vp-layout-top-height, 0px) auto 0;width:100%}.VPContent.is-home[data-v-1428d186]{width:100%;max-width:100%}.VPContent.has-sidebar[data-v-1428d186]{margin:0}@media (min-width: 960px){.VPContent[data-v-1428d186]{padding-top:var(--vp-nav-height)}.VPContent.has-sidebar[data-v-1428d186]{margin:var(--vp-layout-top-height, 0px) 0 0;padding-left:var(--vp-sidebar-width)}}@media (min-width: 1440px){.VPContent.has-sidebar[data-v-1428d186]{padding-right:calc((100vw - var(--vp-layout-max-width)) / 2);padding-left:calc((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width))}}.VPFooter[data-v-e315a0ad]{position:relative;z-index:var(--vp-z-index-footer);border-top:1px solid var(--vp-c-gutter);padding:32px 24px;background-color:var(--vp-c-bg)}.VPFooter.has-sidebar[data-v-e315a0ad]{display:none}.VPFooter[data-v-e315a0ad] a{text-decoration-line:underline;text-underline-offset:2px;transition:color .25s}.VPFooter[data-v-e315a0ad] a:hover{color:var(--vp-c-text-1)}@media (min-width: 768px){.VPFooter[data-v-e315a0ad]{padding:32px}}.container[data-v-e315a0ad]{margin:0 auto;max-width:var(--vp-layout-max-width);text-align:center}.message[data-v-e315a0ad],.copyright[data-v-e315a0ad]{line-height:24px;font-size:14px;font-weight:500;color:var(--vp-c-text-2)}.VPLocalNavOutlineDropdown[data-v-17a5e62e]{padding:12px 20px 11px}@media (min-width: 960px){.VPLocalNavOutlineDropdown[data-v-17a5e62e]{padding:12px 36px 11px}}.VPLocalNavOutlineDropdown button[data-v-17a5e62e]{display:block;font-size:12px;font-weight:500;line-height:24px;color:var(--vp-c-text-2);transition:color .5s;position:relative}.VPLocalNavOutlineDropdown button[data-v-17a5e62e]:hover{color:var(--vp-c-text-1);transition:color .25s}.VPLocalNavOutlineDropdown button.open[data-v-17a5e62e]{color:var(--vp-c-text-1)}.icon[data-v-17a5e62e]{display:inline-block;vertical-align:middle;margin-left:2px;font-size:14px;transform:rotate(0);transition:transform .25s}@media (min-width: 960px){.VPLocalNavOutlineDropdown button[data-v-17a5e62e]{font-size:14px}.icon[data-v-17a5e62e]{font-size:16px}}.open>.icon[data-v-17a5e62e]{transform:rotate(90deg)}.items[data-v-17a5e62e]{position:absolute;top:40px;right:16px;left:16px;display:grid;gap:1px;border:1px solid var(--vp-c-border);border-radius:8px;background-color:var(--vp-c-gutter);max-height:calc(var(--vp-vh, 100vh) - 86px);overflow:hidden auto;box-shadow:var(--vp-shadow-3)}@media (min-width: 960px){.items[data-v-17a5e62e]{right:auto;left:calc(var(--vp-sidebar-width) + 32px);width:320px}}.header[data-v-17a5e62e]{background-color:var(--vp-c-bg-soft)}.top-link[data-v-17a5e62e]{display:block;padding:0 16px;line-height:48px;font-size:14px;font-weight:500;color:var(--vp-c-brand-1)}.outline[data-v-17a5e62e]{padding:8px 0;background-color:var(--vp-c-bg-soft)}.flyout-enter-active[data-v-17a5e62e]{transition:all .2s ease-out}.flyout-leave-active[data-v-17a5e62e]{transition:all .15s ease-in}.flyout-enter-from[data-v-17a5e62e],.flyout-leave-to[data-v-17a5e62e]{opacity:0;transform:translateY(-16px)}.VPLocalNav[data-v-a6f0e41e]{position:sticky;top:0;left:0;z-index:var(--vp-z-index-local-nav);border-bottom:1px solid var(--vp-c-gutter);padding-top:var(--vp-layout-top-height, 0px);width:100%;background-color:var(--vp-local-nav-bg-color)}.VPLocalNav.fixed[data-v-a6f0e41e]{position:fixed}@media (min-width: 960px){.VPLocalNav[data-v-a6f0e41e]{top:var(--vp-nav-height)}.VPLocalNav.has-sidebar[data-v-a6f0e41e]{padding-left:var(--vp-sidebar-width)}.VPLocalNav.empty[data-v-a6f0e41e]{display:none}}@media (min-width: 1280px){.VPLocalNav[data-v-a6f0e41e]{display:none}}@media (min-width: 1440px){.VPLocalNav.has-sidebar[data-v-a6f0e41e]{padding-left:calc((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width))}}.container[data-v-a6f0e41e]{display:flex;justify-content:space-between;align-items:center}.menu[data-v-a6f0e41e]{display:flex;align-items:center;padding:12px 24px 11px;line-height:24px;font-size:12px;font-weight:500;color:var(--vp-c-text-2);transition:color .5s}.menu[data-v-a6f0e41e]:hover{color:var(--vp-c-text-1);transition:color .25s}@media (min-width: 768px){.menu[data-v-a6f0e41e]{padding:0 32px}}@media (min-width: 960px){.menu[data-v-a6f0e41e]{display:none}}.menu-icon[data-v-a6f0e41e]{margin-right:8px;font-size:14px}.VPOutlineDropdown[data-v-a6f0e41e]{padding:12px 24px 11px}@media (min-width: 768px){.VPOutlineDropdown[data-v-a6f0e41e]{padding:12px 32px 11px}}.VPSwitch[data-v-1d5665e3]{position:relative;border-radius:11px;display:block;width:40px;height:22px;flex-shrink:0;border:1px solid var(--vp-input-border-color);background-color:var(--vp-input-switch-bg-color);transition:border-color .25s!important}.VPSwitch[data-v-1d5665e3]:hover{border-color:var(--vp-c-brand-1)}.check[data-v-1d5665e3]{position:absolute;top:1px;left:1px;width:18px;height:18px;border-radius:50%;background-color:var(--vp-c-neutral-inverse);box-shadow:var(--vp-shadow-1);transition:transform .25s!important}.icon[data-v-1d5665e3]{position:relative;display:block;width:18px;height:18px;border-radius:50%;overflow:hidden}.icon[data-v-1d5665e3] [class^=vpi-]{position:absolute;top:3px;left:3px;width:12px;height:12px;color:var(--vp-c-text-2)}.dark .icon[data-v-1d5665e3] [class^=vpi-]{color:var(--vp-c-text-1);transition:opacity .25s!important}.sun[data-v-5337faa4]{opacity:1}.moon[data-v-5337faa4],.dark .sun[data-v-5337faa4]{opacity:0}.dark .moon[data-v-5337faa4]{opacity:1}.dark .VPSwitchAppearance[data-v-5337faa4] .check{transform:translate(18px)}.VPNavBarAppearance[data-v-6c893767]{display:none}@media (min-width: 1280px){.VPNavBarAppearance[data-v-6c893767]{display:flex;align-items:center}}.VPMenuGroup+.VPMenuLink[data-v-35975db6]{margin:12px -12px 0;border-top:1px solid var(--vp-c-divider);padding:12px 12px 0}.link[data-v-35975db6]{display:block;border-radius:6px;padding:0 12px;line-height:32px;font-size:14px;font-weight:500;color:var(--vp-c-text-1);white-space:nowrap;transition:background-color .25s,color .25s}.link[data-v-35975db6]:hover{color:var(--vp-c-brand-1);background-color:var(--vp-c-default-soft)}.link.active[data-v-35975db6]{color:var(--vp-c-brand-1)}.VPMenuGroup[data-v-69e747b5]{margin:12px -12px 0;border-top:1px solid var(--vp-c-divider);padding:12px 12px 0}.VPMenuGroup[data-v-69e747b5]:first-child{margin-top:0;border-top:0;padding-top:0}.VPMenuGroup+.VPMenuGroup[data-v-69e747b5]{margin-top:12px;border-top:1px solid var(--vp-c-divider)}.title[data-v-69e747b5]{padding:0 12px;line-height:32px;font-size:14px;font-weight:600;color:var(--vp-c-text-2);white-space:nowrap;transition:color .25s}.VPMenu[data-v-b98bc113]{border-radius:12px;padding:12px;min-width:128px;border:1px solid var(--vp-c-divider);background-color:var(--vp-c-bg-elv);box-shadow:var(--vp-shadow-3);transition:background-color .5s;max-height:calc(100vh - var(--vp-nav-height));overflow-y:auto}.VPMenu[data-v-b98bc113] .group{margin:0 -12px;padding:0 12px 12px}.VPMenu[data-v-b98bc113] .group+.group{border-top:1px solid var(--vp-c-divider);padding:11px 12px 12px}.VPMenu[data-v-b98bc113] .group:last-child{padding-bottom:0}.VPMenu[data-v-b98bc113] .group+.item{border-top:1px solid var(--vp-c-divider);padding:11px 16px 0}.VPMenu[data-v-b98bc113] .item{padding:0 16px;white-space:nowrap}.VPMenu[data-v-b98bc113] .label{flex-grow:1;line-height:28px;font-size:12px;font-weight:500;color:var(--vp-c-text-2);transition:color .5s}.VPMenu[data-v-b98bc113] .action{padding-left:24px}.VPFlyout[data-v-cf11d7a2]{position:relative}.VPFlyout[data-v-cf11d7a2]:hover{color:var(--vp-c-brand-1);transition:color .25s}.VPFlyout:hover .text[data-v-cf11d7a2]{color:var(--vp-c-text-2)}.VPFlyout:hover .icon[data-v-cf11d7a2]{fill:var(--vp-c-text-2)}.VPFlyout.active .text[data-v-cf11d7a2]{color:var(--vp-c-brand-1)}.VPFlyout.active:hover .text[data-v-cf11d7a2]{color:var(--vp-c-brand-2)}.button[aria-expanded=false]+.menu[data-v-cf11d7a2]{opacity:0;visibility:hidden;transform:translateY(0)}.VPFlyout:hover .menu[data-v-cf11d7a2],.button[aria-expanded=true]+.menu[data-v-cf11d7a2]{opacity:1;visibility:visible;transform:translateY(0)}.button[data-v-cf11d7a2]{display:flex;align-items:center;padding:0 12px;height:var(--vp-nav-height);color:var(--vp-c-text-1);transition:color .5s}.text[data-v-cf11d7a2]{display:flex;align-items:center;line-height:var(--vp-nav-height);font-size:14px;font-weight:500;color:var(--vp-c-text-1);transition:color .25s}.option-icon[data-v-cf11d7a2]{margin-right:0;font-size:16px}.text-icon[data-v-cf11d7a2]{margin-left:4px;font-size:14px}.icon[data-v-cf11d7a2]{font-size:20px;transition:fill .25s}.menu[data-v-cf11d7a2]{position:absolute;top:calc(var(--vp-nav-height) / 2 + 20px);right:0;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s,transform .25s}.VPSocialLink[data-v-bd121fe5]{display:flex;justify-content:center;align-items:center;width:36px;height:36px;color:var(--vp-c-text-2);transition:color .5s}.VPSocialLink[data-v-bd121fe5]:hover{color:var(--vp-c-text-1);transition:color .25s}.VPSocialLink[data-v-bd121fe5]>svg,.VPSocialLink[data-v-bd121fe5]>[class^=vpi-social-]{width:20px;height:20px;fill:currentColor}.VPSocialLinks[data-v-7bc22406]{display:flex;justify-content:center}.VPNavBarExtra[data-v-bb2aa2f0]{display:none;margin-right:-12px}@media (min-width: 768px){.VPNavBarExtra[data-v-bb2aa2f0]{display:block}}@media (min-width: 1280px){.VPNavBarExtra[data-v-bb2aa2f0]{display:none}}.trans-title[data-v-bb2aa2f0]{padding:0 24px 0 12px;line-height:32px;font-size:14px;font-weight:700;color:var(--vp-c-text-1)}.item.appearance[data-v-bb2aa2f0],.item.social-links[data-v-bb2aa2f0]{display:flex;align-items:center;padding:0 12px}.item.appearance[data-v-bb2aa2f0]{min-width:176px}.appearance-action[data-v-bb2aa2f0]{margin-right:-2px}.social-links-list[data-v-bb2aa2f0]{margin:-4px -8px}.VPNavBarHamburger[data-v-e5dd9c1c]{display:flex;justify-content:center;align-items:center;width:48px;height:var(--vp-nav-height)}@media (min-width: 768px){.VPNavBarHamburger[data-v-e5dd9c1c]{display:none}}.container[data-v-e5dd9c1c]{position:relative;width:16px;height:14px;overflow:hidden}.VPNavBarHamburger:hover .top[data-v-e5dd9c1c]{top:0;left:0;transform:translate(4px)}.VPNavBarHamburger:hover .middle[data-v-e5dd9c1c]{top:6px;left:0;transform:translate(0)}.VPNavBarHamburger:hover .bottom[data-v-e5dd9c1c]{top:12px;left:0;transform:translate(8px)}.VPNavBarHamburger.active .top[data-v-e5dd9c1c]{top:6px;transform:translate(0) rotate(225deg)}.VPNavBarHamburger.active .middle[data-v-e5dd9c1c]{top:6px;transform:translate(16px)}.VPNavBarHamburger.active .bottom[data-v-e5dd9c1c]{top:6px;transform:translate(0) rotate(135deg)}.VPNavBarHamburger.active:hover .top[data-v-e5dd9c1c],.VPNavBarHamburger.active:hover .middle[data-v-e5dd9c1c],.VPNavBarHamburger.active:hover .bottom[data-v-e5dd9c1c]{background-color:var(--vp-c-text-2);transition:top .25s,background-color .25s,transform .25s}.top[data-v-e5dd9c1c],.middle[data-v-e5dd9c1c],.bottom[data-v-e5dd9c1c]{position:absolute;width:16px;height:2px;background-color:var(--vp-c-text-1);transition:top .25s,background-color .5s,transform .25s}.top[data-v-e5dd9c1c]{top:0;left:0;transform:translate(0)}.middle[data-v-e5dd9c1c]{top:6px;left:0;transform:translate(8px)}.bottom[data-v-e5dd9c1c]{top:12px;left:0;transform:translate(4px)}.VPNavBarMenuLink[data-v-e56f3d57]{display:flex;align-items:center;padding:0 12px;line-height:var(--vp-nav-height);font-size:14px;font-weight:500;color:var(--vp-c-text-1);transition:color .25s}.VPNavBarMenuLink.active[data-v-e56f3d57],.VPNavBarMenuLink[data-v-e56f3d57]:hover{color:var(--vp-c-brand-1)}.VPNavBarMenu[data-v-dc692963]{display:none}@media (min-width: 768px){.VPNavBarMenu[data-v-dc692963]{display:flex}}/*! @docsearch/css 3.7.0 | MIT License | © Algolia, Inc. and contributors | https://docsearch.algolia.com */:root{--docsearch-primary-color:#5468ff;--docsearch-text-color:#1c1e21;--docsearch-spacing:12px;--docsearch-icon-stroke-width:1.4;--docsearch-highlight-color:var(--docsearch-primary-color);--docsearch-muted-color:#969faf;--docsearch-container-background:rgba(101,108,133,.8);--docsearch-logo-color:#5468ff;--docsearch-modal-width:560px;--docsearch-modal-height:600px;--docsearch-modal-background:#f5f6f7;--docsearch-modal-shadow:inset 1px 1px 0 0 hsla(0,0%,100%,.5),0 3px 8px 0 #555a64;--docsearch-searchbox-height:56px;--docsearch-searchbox-background:#ebedf0;--docsearch-searchbox-focus-background:#fff;--docsearch-searchbox-shadow:inset 0 0 0 2px var(--docsearch-primary-color);--docsearch-hit-height:56px;--docsearch-hit-color:#444950;--docsearch-hit-active-color:#fff;--docsearch-hit-background:#fff;--docsearch-hit-shadow:0 1px 3px 0 #d4d9e1;--docsearch-key-gradient:linear-gradient(-225deg,#d5dbe4,#f8f8f8);--docsearch-key-shadow:inset 0 -2px 0 0 #cdcde6,inset 0 0 1px 1px #fff,0 1px 2px 1px rgba(30,35,90,.4);--docsearch-key-pressed-shadow:inset 0 -2px 0 0 #cdcde6,inset 0 0 1px 1px #fff,0 1px 1px 0 rgba(30,35,90,.4);--docsearch-footer-height:44px;--docsearch-footer-background:#fff;--docsearch-footer-shadow:0 -1px 0 0 #e0e3e8,0 -3px 6px 0 rgba(69,98,155,.12)}html[data-theme=dark]{--docsearch-text-color:#f5f6f7;--docsearch-container-background:rgba(9,10,17,.8);--docsearch-modal-background:#15172a;--docsearch-modal-shadow:inset 1px 1px 0 0 #2c2e40,0 3px 8px 0 #000309;--docsearch-searchbox-background:#090a11;--docsearch-searchbox-focus-background:#000;--docsearch-hit-color:#bec3c9;--docsearch-hit-shadow:none;--docsearch-hit-background:#090a11;--docsearch-key-gradient:linear-gradient(-26.5deg,#565872,#31355b);--docsearch-key-shadow:inset 0 -2px 0 0 #282d55,inset 0 0 1px 1px #51577d,0 2px 2px 0 rgba(3,4,9,.3);--docsearch-key-pressed-shadow:inset 0 -2px 0 0 #282d55,inset 0 0 1px 1px #51577d,0 1px 1px 0 #0304094d;--docsearch-footer-background:#1e2136;--docsearch-footer-shadow:inset 0 1px 0 0 rgba(73,76,106,.5),0 -4px 8px 0 rgba(0,0,0,.2);--docsearch-logo-color:#fff;--docsearch-muted-color:#7f8497}.DocSearch-Button{align-items:center;background:var(--docsearch-searchbox-background);border:0;border-radius:40px;color:var(--docsearch-muted-color);cursor:pointer;display:flex;font-weight:500;height:36px;justify-content:space-between;margin:0 0 0 16px;padding:0 8px;-webkit-user-select:none;user-select:none}.DocSearch-Button:active,.DocSearch-Button:focus,.DocSearch-Button:hover{background:var(--docsearch-searchbox-focus-background);box-shadow:var(--docsearch-searchbox-shadow);color:var(--docsearch-text-color);outline:none}.DocSearch-Button-Container{align-items:center;display:flex}.DocSearch-Search-Icon{stroke-width:1.6}.DocSearch-Button .DocSearch-Search-Icon{color:var(--docsearch-text-color)}.DocSearch-Button-Placeholder{font-size:1rem;padding:0 12px 0 6px}.DocSearch-Button-Keys{display:flex;min-width:calc(40px + .8em)}.DocSearch-Button-Key{align-items:center;background:var(--docsearch-key-gradient);border:0;border-radius:3px;box-shadow:var(--docsearch-key-shadow);color:var(--docsearch-muted-color);display:flex;height:18px;justify-content:center;margin-right:.4em;padding:0 0 2px;position:relative;top:-1px;width:20px}.DocSearch-Button-Key--pressed{box-shadow:var(--docsearch-key-pressed-shadow);transform:translate3d(0,1px,0)}@media (max-width:768px){.DocSearch-Button-Keys,.DocSearch-Button-Placeholder{display:none}}.DocSearch--active{overflow:hidden!important}.DocSearch-Container,.DocSearch-Container *{box-sizing:border-box}.DocSearch-Container{background-color:var(--docsearch-container-background);height:100vh;left:0;position:fixed;top:0;width:100vw;z-index:200}.DocSearch-Container a{text-decoration:none}.DocSearch-Link{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;color:var(--docsearch-highlight-color);cursor:pointer;font:inherit;margin:0;padding:0}.DocSearch-Modal{background:var(--docsearch-modal-background);border-radius:6px;box-shadow:var(--docsearch-modal-shadow);flex-direction:column;margin:60px auto auto;max-width:var(--docsearch-modal-width);position:relative}.DocSearch-SearchBar{display:flex;padding:var(--docsearch-spacing) var(--docsearch-spacing) 0}.DocSearch-Form{align-items:center;background:var(--docsearch-searchbox-focus-background);border-radius:4px;box-shadow:var(--docsearch-searchbox-shadow);display:flex;height:var(--docsearch-searchbox-height);margin:0;padding:0 var(--docsearch-spacing);position:relative;width:100%}.DocSearch-Input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:var(--docsearch-text-color);flex:1;font:inherit;font-size:1.2em;height:100%;outline:none;padding:0 0 0 8px;width:80%}.DocSearch-Input::placeholder{color:var(--docsearch-muted-color);opacity:1}.DocSearch-Input::-webkit-search-cancel-button,.DocSearch-Input::-webkit-search-decoration,.DocSearch-Input::-webkit-search-results-button,.DocSearch-Input::-webkit-search-results-decoration{display:none}.DocSearch-LoadingIndicator,.DocSearch-MagnifierLabel,.DocSearch-Reset{margin:0;padding:0}.DocSearch-MagnifierLabel,.DocSearch-Reset{align-items:center;color:var(--docsearch-highlight-color);display:flex;justify-content:center}.DocSearch-Container--Stalled .DocSearch-MagnifierLabel,.DocSearch-LoadingIndicator{display:none}.DocSearch-Container--Stalled .DocSearch-LoadingIndicator{align-items:center;color:var(--docsearch-highlight-color);display:flex;justify-content:center}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Reset{animation:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;border-radius:50%;color:var(--docsearch-icon-color);cursor:pointer;right:0;stroke-width:var(--docsearch-icon-stroke-width)}}.DocSearch-Reset{animation:fade-in .1s ease-in forwards;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;border-radius:50%;color:var(--docsearch-icon-color);cursor:pointer;padding:2px;right:0;stroke-width:var(--docsearch-icon-stroke-width)}.DocSearch-Reset[hidden]{display:none}.DocSearch-Reset:hover{color:var(--docsearch-highlight-color)}.DocSearch-LoadingIndicator svg,.DocSearch-MagnifierLabel svg{height:24px;width:24px}.DocSearch-Cancel{display:none}.DocSearch-Dropdown{max-height:calc(var(--docsearch-modal-height) - var(--docsearch-searchbox-height) - var(--docsearch-spacing) - var(--docsearch-footer-height));min-height:var(--docsearch-spacing);overflow-y:auto;overflow-y:overlay;padding:0 var(--docsearch-spacing);scrollbar-color:var(--docsearch-muted-color) var(--docsearch-modal-background);scrollbar-width:thin}.DocSearch-Dropdown::-webkit-scrollbar{width:12px}.DocSearch-Dropdown::-webkit-scrollbar-track{background:transparent}.DocSearch-Dropdown::-webkit-scrollbar-thumb{background-color:var(--docsearch-muted-color);border:3px solid var(--docsearch-modal-background);border-radius:20px}.DocSearch-Dropdown ul{list-style:none;margin:0;padding:0}.DocSearch-Label{font-size:.75em;line-height:1.6em}.DocSearch-Help,.DocSearch-Label{color:var(--docsearch-muted-color)}.DocSearch-Help{font-size:.9em;margin:0;-webkit-user-select:none;user-select:none}.DocSearch-Title{font-size:1.2em}.DocSearch-Logo a{display:flex}.DocSearch-Logo svg{color:var(--docsearch-logo-color);margin-left:8px}.DocSearch-Hits:last-of-type{margin-bottom:24px}.DocSearch-Hits mark{background:none;color:var(--docsearch-highlight-color)}.DocSearch-HitsFooter{color:var(--docsearch-muted-color);display:flex;font-size:.85em;justify-content:center;margin-bottom:var(--docsearch-spacing);padding:var(--docsearch-spacing)}.DocSearch-HitsFooter a{border-bottom:1px solid;color:inherit}.DocSearch-Hit{border-radius:4px;display:flex;padding-bottom:4px;position:relative}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit--deleting{transition:none}}.DocSearch-Hit--deleting{opacity:0;transition:all .25s linear}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit--favoriting{transition:none}}.DocSearch-Hit--favoriting{transform:scale(0);transform-origin:top center;transition:all .25s linear;transition-delay:.25s}.DocSearch-Hit a{background:var(--docsearch-hit-background);border-radius:4px;box-shadow:var(--docsearch-hit-shadow);display:block;padding-left:var(--docsearch-spacing);width:100%}.DocSearch-Hit-source{background:var(--docsearch-modal-background);color:var(--docsearch-highlight-color);font-size:.85em;font-weight:600;line-height:32px;margin:0 -4px;padding:8px 4px 0;position:sticky;top:0;z-index:10}.DocSearch-Hit-Tree{color:var(--docsearch-muted-color);height:var(--docsearch-hit-height);opacity:.5;stroke-width:var(--docsearch-icon-stroke-width);width:24px}.DocSearch-Hit[aria-selected=true] a{background-color:var(--docsearch-highlight-color)}.DocSearch-Hit[aria-selected=true] mark{text-decoration:underline}.DocSearch-Hit-Container{align-items:center;color:var(--docsearch-hit-color);display:flex;flex-direction:row;height:var(--docsearch-hit-height);padding:0 var(--docsearch-spacing) 0 0}.DocSearch-Hit-icon{height:20px;width:20px}.DocSearch-Hit-action,.DocSearch-Hit-icon{color:var(--docsearch-muted-color);stroke-width:var(--docsearch-icon-stroke-width)}.DocSearch-Hit-action{align-items:center;display:flex;height:22px;width:22px}.DocSearch-Hit-action svg{display:block;height:18px;width:18px}.DocSearch-Hit-action+.DocSearch-Hit-action{margin-left:6px}.DocSearch-Hit-action-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;border-radius:50%;color:inherit;cursor:pointer;padding:2px}svg.DocSearch-Hit-Select-Icon{display:none}.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-Select-Icon{display:block}.DocSearch-Hit-action-button:focus,.DocSearch-Hit-action-button:hover{background:#0003;transition:background-color .1s ease-in}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit-action-button:focus,.DocSearch-Hit-action-button:hover{transition:none}}.DocSearch-Hit-action-button:focus path,.DocSearch-Hit-action-button:hover path{fill:#fff}.DocSearch-Hit-content-wrapper{display:flex;flex:1 1 auto;flex-direction:column;font-weight:500;justify-content:center;line-height:1.2em;margin:0 8px;overflow-x:hidden;position:relative;text-overflow:ellipsis;white-space:nowrap;width:80%}.DocSearch-Hit-title{font-size:.9em}.DocSearch-Hit-path{color:var(--docsearch-muted-color);font-size:.75em}.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-Tree,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-action,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-icon,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-path,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-text,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-title,.DocSearch-Hit[aria-selected=true] mark{color:var(--docsearch-hit-active-color)!important}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit-action-button:focus,.DocSearch-Hit-action-button:hover{background:#0003;transition:none}}.DocSearch-ErrorScreen,.DocSearch-NoResults,.DocSearch-StartScreen{font-size:.9em;margin:0 auto;padding:36px 0;text-align:center;width:80%}.DocSearch-Screen-Icon{color:var(--docsearch-muted-color);padding-bottom:12px}.DocSearch-NoResults-Prefill-List{display:inline-block;padding-bottom:24px;text-align:left}.DocSearch-NoResults-Prefill-List ul{display:inline-block;padding:8px 0 0}.DocSearch-NoResults-Prefill-List li{list-style-position:inside;list-style-type:"» "}.DocSearch-Prefill{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;border-radius:1em;color:var(--docsearch-highlight-color);cursor:pointer;display:inline-block;font-size:1em;font-weight:700;padding:0}.DocSearch-Prefill:focus,.DocSearch-Prefill:hover{outline:none;text-decoration:underline}.DocSearch-Footer{align-items:center;background:var(--docsearch-footer-background);border-radius:0 0 8px 8px;box-shadow:var(--docsearch-footer-shadow);display:flex;flex-direction:row-reverse;flex-shrink:0;height:var(--docsearch-footer-height);justify-content:space-between;padding:0 var(--docsearch-spacing);position:relative;-webkit-user-select:none;user-select:none;width:100%;z-index:300}.DocSearch-Commands{color:var(--docsearch-muted-color);display:flex;list-style:none;margin:0;padding:0}.DocSearch-Commands li{align-items:center;display:flex}.DocSearch-Commands li:not(:last-of-type){margin-right:.8em}.DocSearch-Commands-Key{align-items:center;background:var(--docsearch-key-gradient);border:0;border-radius:2px;box-shadow:var(--docsearch-key-shadow);color:var(--docsearch-muted-color);display:flex;height:18px;justify-content:center;margin-right:.4em;padding:0 0 1px;width:20px}.DocSearch-VisuallyHiddenForAccessibility{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}@media (max-width:768px){:root{--docsearch-spacing:10px;--docsearch-footer-height:40px}.DocSearch-Dropdown{height:100%}.DocSearch-Container{height:100vh;height:-webkit-fill-available;height:calc(var(--docsearch-vh, 1vh)*100);position:absolute}.DocSearch-Footer{border-radius:0;bottom:0;position:absolute}.DocSearch-Hit-content-wrapper{display:flex;position:relative;width:80%}.DocSearch-Modal{border-radius:0;box-shadow:none;height:100vh;height:-webkit-fill-available;height:calc(var(--docsearch-vh, 1vh)*100);margin:0;max-width:100%;width:100%}.DocSearch-Dropdown{max-height:calc(var(--docsearch-vh, 1vh)*100 - var(--docsearch-searchbox-height) - var(--docsearch-spacing) - var(--docsearch-footer-height))}.DocSearch-Cancel{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;color:var(--docsearch-highlight-color);cursor:pointer;display:inline-block;flex:none;font:inherit;font-size:1em;font-weight:500;margin-left:var(--docsearch-spacing);outline:none;overflow:hidden;padding:0;-webkit-user-select:none;user-select:none;white-space:nowrap}.DocSearch-Commands,.DocSearch-Hit-Tree{display:none}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}[class*=DocSearch]{--docsearch-primary-color: var(--vp-c-brand-1);--docsearch-highlight-color: var(--docsearch-primary-color);--docsearch-text-color: var(--vp-c-text-1);--docsearch-muted-color: var(--vp-c-text-2);--docsearch-searchbox-shadow: none;--docsearch-searchbox-background: transparent;--docsearch-searchbox-focus-background: transparent;--docsearch-key-gradient: transparent;--docsearch-key-shadow: none;--docsearch-modal-background: var(--vp-c-bg-soft);--docsearch-footer-background: var(--vp-c-bg)}.dark [class*=DocSearch]{--docsearch-modal-shadow: none;--docsearch-footer-shadow: none;--docsearch-logo-color: var(--vp-c-text-2);--docsearch-hit-background: var(--vp-c-default-soft);--docsearch-hit-color: var(--vp-c-text-2);--docsearch-hit-shadow: none}.DocSearch-Button{display:flex;justify-content:center;align-items:center;margin:0;padding:0;width:48px;height:55px;background:transparent;transition:border-color .25s}.DocSearch-Button:hover{background:transparent}.DocSearch-Button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}.DocSearch-Button-Key--pressed{transform:none;box-shadow:none}.DocSearch-Button:focus:not(:focus-visible){outline:none!important}@media (min-width: 768px){.DocSearch-Button{justify-content:flex-start;border:1px solid transparent;border-radius:8px;padding:0 10px 0 12px;width:100%;height:40px;background-color:var(--vp-c-bg-alt)}.DocSearch-Button:hover{border-color:var(--vp-c-brand-1);background:var(--vp-c-bg-alt)}}.DocSearch-Button .DocSearch-Button-Container{display:flex;align-items:center}.DocSearch-Button .DocSearch-Search-Icon{position:relative;width:16px;height:16px;color:var(--vp-c-text-1);fill:currentColor;transition:color .5s}.DocSearch-Button:hover .DocSearch-Search-Icon{color:var(--vp-c-text-1)}@media (min-width: 768px){.DocSearch-Button .DocSearch-Search-Icon{top:1px;margin-right:8px;width:14px;height:14px;color:var(--vp-c-text-2)}}.DocSearch-Button .DocSearch-Button-Placeholder{display:none;margin-top:2px;padding:0 16px 0 0;font-size:13px;font-weight:500;color:var(--vp-c-text-2);transition:color .5s}.DocSearch-Button:hover .DocSearch-Button-Placeholder{color:var(--vp-c-text-1)}@media (min-width: 768px){.DocSearch-Button .DocSearch-Button-Placeholder{display:inline-block}}.DocSearch-Button .DocSearch-Button-Keys{direction:ltr;display:none;min-width:auto}@media (min-width: 768px){.DocSearch-Button .DocSearch-Button-Keys{display:flex;align-items:center}}.DocSearch-Button .DocSearch-Button-Key{display:block;margin:2px 0 0;border:1px solid var(--vp-c-divider);border-right:none;border-radius:4px 0 0 4px;padding-left:6px;min-width:0;width:auto;height:22px;line-height:22px;font-family:var(--vp-font-family-base);font-size:12px;font-weight:500;transition:color .5s,border-color .5s}.DocSearch-Button .DocSearch-Button-Key+.DocSearch-Button-Key{border-right:1px solid var(--vp-c-divider);border-left:none;border-radius:0 4px 4px 0;padding-left:2px;padding-right:6px}.DocSearch-Button .DocSearch-Button-Key:first-child{font-size:0!important}.DocSearch-Button .DocSearch-Button-Key:first-child:after{content:"Ctrl";font-size:12px;letter-spacing:normal;color:var(--docsearch-muted-color)}.mac .DocSearch-Button .DocSearch-Button-Key:first-child:after{content:"⌘"}.DocSearch-Button .DocSearch-Button-Key:first-child>*{display:none}.DocSearch-Search-Icon{--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke-width='1.6' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' d='m14.386 14.386 4.088 4.088-4.088-4.088A7.533 7.533 0 1 1 3.733 3.733a7.533 7.533 0 0 1 10.653 10.653z'/%3E%3C/svg%3E")}.VPNavBarSearch{display:flex;align-items:center}@media (min-width: 768px){.VPNavBarSearch{flex-grow:1;padding-left:24px}}@media (min-width: 960px){.VPNavBarSearch{padding-left:32px}}.dark .DocSearch-Footer{border-top:1px solid var(--vp-c-divider)}.DocSearch-Form{border:1px solid var(--vp-c-brand-1);background-color:var(--vp-c-white)}.dark .DocSearch-Form{background-color:var(--vp-c-default-soft)}.DocSearch-Screen-Icon>svg{margin:auto}.VPNavBarSocialLinks[data-v-0394ad82]{display:none}@media (min-width: 1280px){.VPNavBarSocialLinks[data-v-0394ad82]{display:flex;align-items:center}}.title[data-v-1168a8e4]{display:flex;align-items:center;border-bottom:1px solid transparent;width:100%;height:var(--vp-nav-height);font-size:16px;font-weight:600;color:var(--vp-c-text-1);transition:opacity .25s}@media (min-width: 960px){.title[data-v-1168a8e4]{flex-shrink:0}.VPNavBarTitle.has-sidebar .title[data-v-1168a8e4]{border-bottom-color:var(--vp-c-divider)}}[data-v-1168a8e4] .logo{margin-right:8px;height:var(--vp-nav-logo-height)}.VPNavBarTranslations[data-v-88af2de4]{display:none}@media (min-width: 1280px){.VPNavBarTranslations[data-v-88af2de4]{display:flex;align-items:center}}.title[data-v-88af2de4]{padding:0 24px 0 12px;line-height:32px;font-size:14px;font-weight:700;color:var(--vp-c-text-1)}.VPNavBar[data-v-6aa21345]{position:relative;height:var(--vp-nav-height);pointer-events:none;white-space:nowrap;transition:background-color .25s}.VPNavBar.screen-open[data-v-6aa21345]{transition:none;background-color:var(--vp-nav-bg-color);border-bottom:1px solid var(--vp-c-divider)}.VPNavBar[data-v-6aa21345]:not(.home){background-color:var(--vp-nav-bg-color)}@media (min-width: 960px){.VPNavBar[data-v-6aa21345]:not(.home){background-color:transparent}.VPNavBar[data-v-6aa21345]:not(.has-sidebar):not(.home.top){background-color:var(--vp-nav-bg-color)}}.wrapper[data-v-6aa21345]{padding:0 8px 0 24px}@media (min-width: 768px){.wrapper[data-v-6aa21345]{padding:0 32px}}@media (min-width: 960px){.VPNavBar.has-sidebar .wrapper[data-v-6aa21345]{padding:0}}.container[data-v-6aa21345]{display:flex;justify-content:space-between;margin:0 auto;max-width:calc(var(--vp-layout-max-width) - 64px);height:var(--vp-nav-height);pointer-events:none}.container>.title[data-v-6aa21345],.container>.content[data-v-6aa21345]{pointer-events:none}.container[data-v-6aa21345] *{pointer-events:auto}@media (min-width: 960px){.VPNavBar.has-sidebar .container[data-v-6aa21345]{max-width:100%}}.title[data-v-6aa21345]{flex-shrink:0;height:calc(var(--vp-nav-height) - 1px);transition:background-color .5s}@media (min-width: 960px){.VPNavBar.has-sidebar .title[data-v-6aa21345]{position:absolute;top:0;left:0;z-index:2;padding:0 32px;width:var(--vp-sidebar-width);height:var(--vp-nav-height);background-color:transparent}}@media (min-width: 1440px){.VPNavBar.has-sidebar .title[data-v-6aa21345]{padding-left:max(32px,calc((100% - (var(--vp-layout-max-width) - 64px)) / 2));width:calc((100% - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) - 32px)}}.content[data-v-6aa21345]{flex-grow:1}@media (min-width: 960px){.VPNavBar.has-sidebar .content[data-v-6aa21345]{position:relative;z-index:1;padding-right:32px;padding-left:var(--vp-sidebar-width)}}@media (min-width: 1440px){.VPNavBar.has-sidebar .content[data-v-6aa21345]{padding-right:calc((100vw - var(--vp-layout-max-width)) / 2 + 32px);padding-left:calc((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width))}}.content-body[data-v-6aa21345]{display:flex;justify-content:flex-end;align-items:center;height:var(--vp-nav-height);transition:background-color .5s}@media (min-width: 960px){.VPNavBar:not(.home.top) .content-body[data-v-6aa21345]{position:relative;background-color:var(--vp-nav-bg-color)}.VPNavBar:not(.has-sidebar):not(.home.top) .content-body[data-v-6aa21345]{background-color:transparent}}@media (max-width: 767px){.content-body[data-v-6aa21345]{column-gap:.5rem}}.menu+.translations[data-v-6aa21345]:before,.menu+.appearance[data-v-6aa21345]:before,.menu+.social-links[data-v-6aa21345]:before,.translations+.appearance[data-v-6aa21345]:before,.appearance+.social-links[data-v-6aa21345]:before{margin-right:8px;margin-left:8px;width:1px;height:24px;background-color:var(--vp-c-divider);content:""}.menu+.appearance[data-v-6aa21345]:before,.translations+.appearance[data-v-6aa21345]:before{margin-right:16px}.appearance+.social-links[data-v-6aa21345]:before{margin-left:16px}.social-links[data-v-6aa21345]{margin-right:-8px}.divider[data-v-6aa21345]{width:100%;height:1px}@media (min-width: 960px){.VPNavBar.has-sidebar .divider[data-v-6aa21345]{padding-left:var(--vp-sidebar-width)}}@media (min-width: 1440px){.VPNavBar.has-sidebar .divider[data-v-6aa21345]{padding-left:calc((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width))}}.divider-line[data-v-6aa21345]{width:100%;height:1px;transition:background-color .5s}.VPNavBar:not(.home) .divider-line[data-v-6aa21345]{background-color:var(--vp-c-gutter)}@media (min-width: 960px){.VPNavBar:not(.home.top) .divider-line[data-v-6aa21345]{background-color:var(--vp-c-gutter)}.VPNavBar:not(.has-sidebar):not(.home.top) .divider[data-v-6aa21345]{background-color:var(--vp-c-gutter)}}.VPNavScreenAppearance[data-v-b44890b2]{display:flex;justify-content:space-between;align-items:center;border-radius:8px;padding:12px 14px 12px 16px;background-color:var(--vp-c-bg-soft)}.text[data-v-b44890b2]{line-height:24px;font-size:12px;font-weight:500;color:var(--vp-c-text-2)}.VPNavScreenMenuLink[data-v-df37e6dd]{display:block;border-bottom:1px solid var(--vp-c-divider);padding:12px 0 11px;line-height:24px;font-size:14px;font-weight:500;color:var(--vp-c-text-1);transition:border-color .25s,color .25s}.VPNavScreenMenuLink[data-v-df37e6dd]:hover{color:var(--vp-c-brand-1)}.VPNavScreenMenuGroupLink[data-v-3e9c20e4]{display:block;margin-left:12px;line-height:32px;font-size:14px;font-weight:400;color:var(--vp-c-text-1);transition:color .25s}.VPNavScreenMenuGroupLink[data-v-3e9c20e4]:hover{color:var(--vp-c-brand-1)}.VPNavScreenMenuGroupSection[data-v-8133b170]{display:block}.title[data-v-8133b170]{line-height:32px;font-size:13px;font-weight:700;color:var(--vp-c-text-2);transition:color .25s}.VPNavScreenMenuGroup[data-v-b9ab8c58]{border-bottom:1px solid var(--vp-c-divider);height:48px;overflow:hidden;transition:border-color .5s}.VPNavScreenMenuGroup .items[data-v-b9ab8c58]{visibility:hidden}.VPNavScreenMenuGroup.open .items[data-v-b9ab8c58]{visibility:visible}.VPNavScreenMenuGroup.open[data-v-b9ab8c58]{padding-bottom:10px;height:auto}.VPNavScreenMenuGroup.open .button[data-v-b9ab8c58]{padding-bottom:6px;color:var(--vp-c-brand-1)}.VPNavScreenMenuGroup.open .button-icon[data-v-b9ab8c58]{transform:rotate(45deg)}.button[data-v-b9ab8c58]{display:flex;justify-content:space-between;align-items:center;padding:12px 4px 11px 0;width:100%;line-height:24px;font-size:14px;font-weight:500;color:var(--vp-c-text-1);transition:color .25s}.button[data-v-b9ab8c58]:hover{color:var(--vp-c-brand-1)}.button-icon[data-v-b9ab8c58]{transition:transform .25s}.group[data-v-b9ab8c58]:first-child{padding-top:0}.group+.group[data-v-b9ab8c58],.group+.item[data-v-b9ab8c58]{padding-top:4px}.VPNavScreenTranslations[data-v-858fe1a4]{height:24px;overflow:hidden}.VPNavScreenTranslations.open[data-v-858fe1a4]{height:auto}.title[data-v-858fe1a4]{display:flex;align-items:center;font-size:14px;font-weight:500;color:var(--vp-c-text-1)}.icon[data-v-858fe1a4]{font-size:16px}.icon.lang[data-v-858fe1a4]{margin-right:8px}.icon.chevron[data-v-858fe1a4]{margin-left:4px}.list[data-v-858fe1a4]{padding:4px 0 0 24px}.link[data-v-858fe1a4]{line-height:32px;font-size:13px;color:var(--vp-c-text-1)}.VPNavScreen[data-v-f2779853]{position:fixed;top:calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px));right:0;bottom:0;left:0;padding:0 32px;width:100%;background-color:var(--vp-nav-screen-bg-color);overflow-y:auto;transition:background-color .25s;pointer-events:auto}.VPNavScreen.fade-enter-active[data-v-f2779853],.VPNavScreen.fade-leave-active[data-v-f2779853]{transition:opacity .25s}.VPNavScreen.fade-enter-active .container[data-v-f2779853],.VPNavScreen.fade-leave-active .container[data-v-f2779853]{transition:transform .25s ease}.VPNavScreen.fade-enter-from[data-v-f2779853],.VPNavScreen.fade-leave-to[data-v-f2779853]{opacity:0}.VPNavScreen.fade-enter-from .container[data-v-f2779853],.VPNavScreen.fade-leave-to .container[data-v-f2779853]{transform:translateY(-8px)}@media (min-width: 768px){.VPNavScreen[data-v-f2779853]{display:none}}.container[data-v-f2779853]{margin:0 auto;padding:24px 0 96px;max-width:288px}.menu+.translations[data-v-f2779853],.menu+.appearance[data-v-f2779853],.translations+.appearance[data-v-f2779853]{margin-top:24px}.menu+.social-links[data-v-f2779853]{margin-top:16px}.appearance+.social-links[data-v-f2779853]{margin-top:16px}.VPNav[data-v-ae24b3ad]{position:relative;top:var(--vp-layout-top-height, 0px);left:0;z-index:var(--vp-z-index-nav);width:100%;pointer-events:none;transition:background-color .5s}@media (min-width: 960px){.VPNav[data-v-ae24b3ad]{position:fixed}}.VPSidebarItem.level-0[data-v-b7550ba0]{padding-bottom:24px}.VPSidebarItem.collapsed.level-0[data-v-b7550ba0]{padding-bottom:10px}.item[data-v-b7550ba0]{position:relative;display:flex;width:100%}.VPSidebarItem.collapsible>.item[data-v-b7550ba0]{cursor:pointer}.indicator[data-v-b7550ba0]{position:absolute;top:6px;bottom:6px;left:-17px;width:2px;border-radius:2px;transition:background-color .25s}.VPSidebarItem.level-2.is-active>.item>.indicator[data-v-b7550ba0],.VPSidebarItem.level-3.is-active>.item>.indicator[data-v-b7550ba0],.VPSidebarItem.level-4.is-active>.item>.indicator[data-v-b7550ba0],.VPSidebarItem.level-5.is-active>.item>.indicator[data-v-b7550ba0]{background-color:var(--vp-c-brand-1)}.link[data-v-b7550ba0]{display:flex;align-items:center;flex-grow:1}.text[data-v-b7550ba0]{flex-grow:1;padding:4px 0;line-height:24px;font-size:14px;transition:color .25s}.VPSidebarItem.level-0 .text[data-v-b7550ba0]{font-weight:700;color:var(--vp-c-text-1)}.VPSidebarItem.level-1 .text[data-v-b7550ba0],.VPSidebarItem.level-2 .text[data-v-b7550ba0],.VPSidebarItem.level-3 .text[data-v-b7550ba0],.VPSidebarItem.level-4 .text[data-v-b7550ba0],.VPSidebarItem.level-5 .text[data-v-b7550ba0]{font-weight:500;color:var(--vp-c-text-2)}.VPSidebarItem.level-0.is-link>.item>.link:hover .text[data-v-b7550ba0],.VPSidebarItem.level-1.is-link>.item>.link:hover .text[data-v-b7550ba0],.VPSidebarItem.level-2.is-link>.item>.link:hover .text[data-v-b7550ba0],.VPSidebarItem.level-3.is-link>.item>.link:hover .text[data-v-b7550ba0],.VPSidebarItem.level-4.is-link>.item>.link:hover .text[data-v-b7550ba0],.VPSidebarItem.level-5.is-link>.item>.link:hover .text[data-v-b7550ba0]{color:var(--vp-c-brand-1)}.VPSidebarItem.level-0.has-active>.item>.text[data-v-b7550ba0],.VPSidebarItem.level-1.has-active>.item>.text[data-v-b7550ba0],.VPSidebarItem.level-2.has-active>.item>.text[data-v-b7550ba0],.VPSidebarItem.level-3.has-active>.item>.text[data-v-b7550ba0],.VPSidebarItem.level-4.has-active>.item>.text[data-v-b7550ba0],.VPSidebarItem.level-5.has-active>.item>.text[data-v-b7550ba0],.VPSidebarItem.level-0.has-active>.item>.link>.text[data-v-b7550ba0],.VPSidebarItem.level-1.has-active>.item>.link>.text[data-v-b7550ba0],.VPSidebarItem.level-2.has-active>.item>.link>.text[data-v-b7550ba0],.VPSidebarItem.level-3.has-active>.item>.link>.text[data-v-b7550ba0],.VPSidebarItem.level-4.has-active>.item>.link>.text[data-v-b7550ba0],.VPSidebarItem.level-5.has-active>.item>.link>.text[data-v-b7550ba0]{color:var(--vp-c-text-1)}.VPSidebarItem.level-0.is-active>.item .link>.text[data-v-b7550ba0],.VPSidebarItem.level-1.is-active>.item .link>.text[data-v-b7550ba0],.VPSidebarItem.level-2.is-active>.item .link>.text[data-v-b7550ba0],.VPSidebarItem.level-3.is-active>.item .link>.text[data-v-b7550ba0],.VPSidebarItem.level-4.is-active>.item .link>.text[data-v-b7550ba0],.VPSidebarItem.level-5.is-active>.item .link>.text[data-v-b7550ba0]{color:var(--vp-c-brand-1)}.caret[data-v-b7550ba0]{display:flex;justify-content:center;align-items:center;margin-right:-7px;width:32px;height:32px;color:var(--vp-c-text-3);cursor:pointer;transition:color .25s;flex-shrink:0}.item:hover .caret[data-v-b7550ba0]{color:var(--vp-c-text-2)}.item:hover .caret[data-v-b7550ba0]:hover{color:var(--vp-c-text-1)}.caret-icon[data-v-b7550ba0]{font-size:18px;transform:rotate(90deg);transition:transform .25s}.VPSidebarItem.collapsed .caret-icon[data-v-b7550ba0]{transform:rotate(0)}.VPSidebarItem.level-1 .items[data-v-b7550ba0],.VPSidebarItem.level-2 .items[data-v-b7550ba0],.VPSidebarItem.level-3 .items[data-v-b7550ba0],.VPSidebarItem.level-4 .items[data-v-b7550ba0],.VPSidebarItem.level-5 .items[data-v-b7550ba0]{border-left:1px solid var(--vp-c-divider);padding-left:16px}.VPSidebarItem.collapsed .items[data-v-b7550ba0]{display:none}.no-transition[data-v-c40bc020] .caret-icon{transition:none}.group+.group[data-v-c40bc020]{border-top:1px solid var(--vp-c-divider);padding-top:10px}@media (min-width: 960px){.group[data-v-c40bc020]{padding-top:10px;width:calc(var(--vp-sidebar-width) - 64px)}}.VPSidebar[data-v-319d5ca6]{position:fixed;top:var(--vp-layout-top-height, 0px);bottom:0;left:0;z-index:var(--vp-z-index-sidebar);padding:32px 32px 96px;width:calc(100vw - 64px);max-width:320px;background-color:var(--vp-sidebar-bg-color);opacity:0;box-shadow:var(--vp-c-shadow-3);overflow-x:hidden;overflow-y:auto;transform:translate(-100%);transition:opacity .5s,transform .25s ease;overscroll-behavior:contain}.VPSidebar.open[data-v-319d5ca6]{opacity:1;visibility:visible;transform:translate(0);transition:opacity .25s,transform .5s cubic-bezier(.19,1,.22,1)}.dark .VPSidebar[data-v-319d5ca6]{box-shadow:var(--vp-shadow-1)}@media (min-width: 960px){.VPSidebar[data-v-319d5ca6]{padding-top:var(--vp-nav-height);width:var(--vp-sidebar-width);max-width:100%;background-color:var(--vp-sidebar-bg-color);opacity:1;visibility:visible;box-shadow:none;transform:translate(0)}}@media (min-width: 1440px){.VPSidebar[data-v-319d5ca6]{padding-left:max(32px,calc((100% - (var(--vp-layout-max-width) - 64px)) / 2));width:calc((100% - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) - 32px)}}@media (min-width: 960px){.curtain[data-v-319d5ca6]{position:sticky;top:-64px;left:0;z-index:1;margin-top:calc(var(--vp-nav-height) * -1);margin-right:-32px;margin-left:-32px;height:var(--vp-nav-height);background-color:var(--vp-sidebar-bg-color)}}.nav[data-v-319d5ca6]{outline:0}.VPSkipLink[data-v-0f60ec36]{top:8px;left:8px;padding:8px 16px;z-index:999;border-radius:8px;font-size:12px;font-weight:700;text-decoration:none;color:var(--vp-c-brand-1);box-shadow:var(--vp-shadow-3);background-color:var(--vp-c-bg)}.VPSkipLink[data-v-0f60ec36]:focus{height:auto;width:auto;clip:auto;clip-path:none}@media (min-width: 1280px){.VPSkipLink[data-v-0f60ec36]{top:14px;left:16px}}.Layout[data-v-5d98c3a5]{display:flex;flex-direction:column;min-height:100vh}.VPHomeSponsors[data-v-3d121b4a]{border-top:1px solid var(--vp-c-gutter);padding-top:88px!important}.VPHomeSponsors[data-v-3d121b4a]{margin:96px 0}@media (min-width: 768px){.VPHomeSponsors[data-v-3d121b4a]{margin:128px 0}}.VPHomeSponsors[data-v-3d121b4a]{padding:0 24px}@media (min-width: 768px){.VPHomeSponsors[data-v-3d121b4a]{padding:0 48px}}@media (min-width: 960px){.VPHomeSponsors[data-v-3d121b4a]{padding:0 64px}}.container[data-v-3d121b4a]{margin:0 auto;max-width:1152px}.love[data-v-3d121b4a]{margin:0 auto;width:fit-content;font-size:28px;color:var(--vp-c-text-3)}.icon[data-v-3d121b4a]{display:inline-block}.message[data-v-3d121b4a]{margin:0 auto;padding-top:10px;max-width:320px;text-align:center;line-height:24px;font-size:16px;font-weight:500;color:var(--vp-c-text-2)}.sponsors[data-v-3d121b4a]{padding-top:32px}.action[data-v-3d121b4a]{padding-top:40px;text-align:center}.VPTeamPage[data-v-7c57f839]{margin:96px 0}@media (min-width: 768px){.VPTeamPage[data-v-7c57f839]{margin:128px 0}}.VPHome .VPTeamPageTitle[data-v-7c57f839-s]{border-top:1px solid var(--vp-c-gutter);padding-top:88px!important}.VPTeamPageSection+.VPTeamPageSection[data-v-7c57f839-s],.VPTeamMembers+.VPTeamPageSection[data-v-7c57f839-s]{margin-top:64px}.VPTeamMembers+.VPTeamMembers[data-v-7c57f839-s]{margin-top:24px}@media (min-width: 768px){.VPTeamPageTitle+.VPTeamPageSection[data-v-7c57f839-s]{margin-top:16px}.VPTeamPageSection+.VPTeamPageSection[data-v-7c57f839-s],.VPTeamMembers+.VPTeamPageSection[data-v-7c57f839-s]{margin-top:96px}}.VPTeamMembers[data-v-7c57f839-s]{padding:0 24px}@media (min-width: 768px){.VPTeamMembers[data-v-7c57f839-s]{padding:0 48px}}@media (min-width: 960px){.VPTeamMembers[data-v-7c57f839-s]{padding:0 64px}}.VPTeamPageTitle[data-v-bf2cbdac]{padding:48px 32px;text-align:center}@media (min-width: 768px){.VPTeamPageTitle[data-v-bf2cbdac]{padding:64px 48px 48px}}@media (min-width: 960px){.VPTeamPageTitle[data-v-bf2cbdac]{padding:80px 64px 48px}}.title[data-v-bf2cbdac]{letter-spacing:0;line-height:44px;font-size:36px;font-weight:500}@media (min-width: 768px){.title[data-v-bf2cbdac]{letter-spacing:-.5px;line-height:56px;font-size:48px}}.lead[data-v-bf2cbdac]{margin:0 auto;max-width:512px;padding-top:12px;line-height:24px;font-size:16px;font-weight:500;color:var(--vp-c-text-2)}@media (min-width: 768px){.lead[data-v-bf2cbdac]{max-width:592px;letter-spacing:.15px;line-height:28px;font-size:20px}}.VPTeamPageSection[data-v-b1a88750]{padding:0 32px}@media (min-width: 768px){.VPTeamPageSection[data-v-b1a88750]{padding:0 48px}}@media (min-width: 960px){.VPTeamPageSection[data-v-b1a88750]{padding:0 64px}}.title[data-v-b1a88750]{position:relative;margin:0 auto;max-width:1152px;text-align:center;color:var(--vp-c-text-2)}.title-line[data-v-b1a88750]{position:absolute;top:16px;left:0;width:100%;height:1px;background-color:var(--vp-c-divider)}.title-text[data-v-b1a88750]{position:relative;display:inline-block;padding:0 24px;letter-spacing:0;line-height:32px;font-size:20px;font-weight:500;background-color:var(--vp-c-bg)}.lead[data-v-b1a88750]{margin:0 auto;max-width:480px;padding-top:12px;text-align:center;line-height:24px;font-size:16px;font-weight:500;color:var(--vp-c-text-2)}.members[data-v-b1a88750]{padding-top:40px}.VPTeamMembersItem[data-v-f3fa364a]{display:flex;flex-direction:column;gap:2px;border-radius:12px;width:100%;height:100%;overflow:hidden}.VPTeamMembersItem.small .profile[data-v-f3fa364a]{padding:32px}.VPTeamMembersItem.small .data[data-v-f3fa364a]{padding-top:20px}.VPTeamMembersItem.small .avatar[data-v-f3fa364a]{width:64px;height:64px}.VPTeamMembersItem.small .name[data-v-f3fa364a]{line-height:24px;font-size:16px}.VPTeamMembersItem.small .affiliation[data-v-f3fa364a]{padding-top:4px;line-height:20px;font-size:14px}.VPTeamMembersItem.small .desc[data-v-f3fa364a]{padding-top:12px;line-height:20px;font-size:14px}.VPTeamMembersItem.small .links[data-v-f3fa364a]{margin:0 -16px -20px;padding:10px 0 0}.VPTeamMembersItem.medium .profile[data-v-f3fa364a]{padding:48px 32px}.VPTeamMembersItem.medium .data[data-v-f3fa364a]{padding-top:24px;text-align:center}.VPTeamMembersItem.medium .avatar[data-v-f3fa364a]{width:96px;height:96px}.VPTeamMembersItem.medium .name[data-v-f3fa364a]{letter-spacing:.15px;line-height:28px;font-size:20px}.VPTeamMembersItem.medium .affiliation[data-v-f3fa364a]{padding-top:4px;font-size:16px}.VPTeamMembersItem.medium .desc[data-v-f3fa364a]{padding-top:16px;max-width:288px;font-size:16px}.VPTeamMembersItem.medium .links[data-v-f3fa364a]{margin:0 -16px -12px;padding:16px 12px 0}.profile[data-v-f3fa364a]{flex-grow:1;background-color:var(--vp-c-bg-soft)}.data[data-v-f3fa364a]{text-align:center}.avatar[data-v-f3fa364a]{position:relative;flex-shrink:0;margin:0 auto;border-radius:50%;box-shadow:var(--vp-shadow-3)}.avatar-img[data-v-f3fa364a]{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;object-fit:cover}.name[data-v-f3fa364a]{margin:0;font-weight:600}.affiliation[data-v-f3fa364a]{margin:0;font-weight:500;color:var(--vp-c-text-2)}.org.link[data-v-f3fa364a]{color:var(--vp-c-text-2);transition:color .25s}.org.link[data-v-f3fa364a]:hover{color:var(--vp-c-brand-1)}.desc[data-v-f3fa364a]{margin:0 auto}.desc[data-v-f3fa364a] a{font-weight:500;color:var(--vp-c-brand-1);text-decoration-style:dotted;transition:color .25s}.links[data-v-f3fa364a]{display:flex;justify-content:center;height:56px}.sp-link[data-v-f3fa364a]{display:flex;justify-content:center;align-items:center;text-align:center;padding:16px;font-size:14px;font-weight:500;color:var(--vp-c-sponsor);background-color:var(--vp-c-bg-soft);transition:color .25s,background-color .25s}.sp .sp-link.link[data-v-f3fa364a]:hover,.sp .sp-link.link[data-v-f3fa364a]:focus{outline:none;color:var(--vp-c-white);background-color:var(--vp-c-sponsor)}.sp-icon[data-v-f3fa364a]{margin-right:8px;font-size:16px}.VPTeamMembers.small .container[data-v-6cb0dbc4]{grid-template-columns:repeat(auto-fit,minmax(224px,1fr))}.VPTeamMembers.small.count-1 .container[data-v-6cb0dbc4]{max-width:276px}.VPTeamMembers.small.count-2 .container[data-v-6cb0dbc4]{max-width:576px}.VPTeamMembers.small.count-3 .container[data-v-6cb0dbc4]{max-width:876px}.VPTeamMembers.medium .container[data-v-6cb0dbc4]{grid-template-columns:repeat(auto-fit,minmax(256px,1fr))}@media (min-width: 375px){.VPTeamMembers.medium .container[data-v-6cb0dbc4]{grid-template-columns:repeat(auto-fit,minmax(288px,1fr))}}.VPTeamMembers.medium.count-1 .container[data-v-6cb0dbc4]{max-width:368px}.VPTeamMembers.medium.count-2 .container[data-v-6cb0dbc4]{max-width:760px}.container[data-v-6cb0dbc4]{display:grid;gap:24px;margin:0 auto;max-width:1152px}.github-link{margin-top:2rem}.note{background-color:#eaecef66;border-radius:6px;-webkit-border-radius:6px;-moz-border-radius:6px;padding:.5rem 1.5rem;margin:1rem 0rem}.warning,.warn{background-color:#f63;color:#333;border-radius:6px;-webkit-border-radius:6px;-moz-border-radius:6px;padding:.5rem 1.5rem}.loading{color:gray}@media screen and (max-width: 719px){.note{border-radius:0;-webkit-border-radius:0px;-moz-border-radius:0px;padding:.5rem 1.5rem;margin:0rem -1.5rem}}canvas{background-color:#454545;width:100%;height:100%}.webgpu_example_button{height:33px;font-size:14px;padding:0 8px;margin-top:16px;border:1px solid rgba(60,60,60,.15);border-radius:8px}.webgpu_example_button:hover{border-color:#059669}.auto-github-link{margin-top:1rem;line-height:40px}#wgpu-app-container{min-height:60px}#wgpu-app-container button{height:33px;font-size:14px;padding:0 8px;border:1px solid rgba(60,60,60,.15);border-radius:8px}#wgpu-app-container button:hover{border-color:#059669}body{margin:0}.a{color:#5a6}#simuverse_container{position:fixed;top:64px;left:0;right:0;bottom:0;background-color:#353535;min-width:450px;min-height:500px}#alert,#loading{text-align:center;justify-content:center;align-items:center;color:#fff;font-size:20px;margin-top:64px}
+@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/learn-wgpu-zh/assets/inter-roman-cyrillic-ext.BBPuwvHQ.woff2) format("woff2");unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/learn-wgpu-zh/assets/inter-roman-cyrillic.C5lxZ8CY.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/learn-wgpu-zh/assets/inter-roman-greek-ext.CqjqNYQ-.woff2) format("woff2");unicode-range:U+1F00-1FFF}@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/learn-wgpu-zh/assets/inter-roman-greek.BBVDIX6e.woff2) format("woff2");unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/learn-wgpu-zh/assets/inter-roman-vietnamese.BjW4sHH5.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/learn-wgpu-zh/assets/inter-roman-latin-ext.4ZJIpNVo.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/learn-wgpu-zh/assets/inter-roman-latin.Di8DUHzh.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Inter;font-style:italic;font-weight:100 900;font-display:swap;src:url(/learn-wgpu-zh/assets/inter-italic-cyrillic-ext.r48I6akx.woff2) format("woff2");unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Inter;font-style:italic;font-weight:100 900;font-display:swap;src:url(/learn-wgpu-zh/assets/inter-italic-cyrillic.By2_1cv3.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Inter;font-style:italic;font-weight:100 900;font-display:swap;src:url(/learn-wgpu-zh/assets/inter-italic-greek-ext.1u6EdAuj.woff2) format("woff2");unicode-range:U+1F00-1FFF}@font-face{font-family:Inter;font-style:italic;font-weight:100 900;font-display:swap;src:url(/learn-wgpu-zh/assets/inter-italic-greek.DJ8dCoTZ.woff2) format("woff2");unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:Inter;font-style:italic;font-weight:100 900;font-display:swap;src:url(/learn-wgpu-zh/assets/inter-italic-vietnamese.BSbpV94h.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Inter;font-style:italic;font-weight:100 900;font-display:swap;src:url(/learn-wgpu-zh/assets/inter-italic-latin-ext.CN1xVJS-.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Inter;font-style:italic;font-weight:100 900;font-display:swap;src:url(/learn-wgpu-zh/assets/inter-italic-latin.C2AdPX0b.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Punctuation SC;font-weight:400;src:local("PingFang SC Regular"),local("Noto Sans CJK SC"),local("Microsoft YaHei");unicode-range:U+201C,U+201D,U+2018,U+2019,U+2E3A,U+2014,U+2013,U+2026,U+00B7,U+007E,U+002F}@font-face{font-family:Punctuation SC;font-weight:500;src:local("PingFang SC Medium"),local("Noto Sans CJK SC"),local("Microsoft YaHei");unicode-range:U+201C,U+201D,U+2018,U+2019,U+2E3A,U+2014,U+2013,U+2026,U+00B7,U+007E,U+002F}@font-face{font-family:Punctuation SC;font-weight:600;src:local("PingFang SC Semibold"),local("Noto Sans CJK SC Bold"),local("Microsoft YaHei Bold");unicode-range:U+201C,U+201D,U+2018,U+2019,U+2E3A,U+2014,U+2013,U+2026,U+00B7,U+007E,U+002F}@font-face{font-family:Punctuation SC;font-weight:700;src:local("PingFang SC Semibold"),local("Noto Sans CJK SC Bold"),local("Microsoft YaHei Bold");unicode-range:U+201C,U+201D,U+2018,U+2019,U+2E3A,U+2014,U+2013,U+2026,U+00B7,U+007E,U+002F}:root{--vp-c-white: #ffffff;--vp-c-black: #000000;--vp-c-neutral: var(--vp-c-black);--vp-c-neutral-inverse: var(--vp-c-white)}.dark{--vp-c-neutral: var(--vp-c-white);--vp-c-neutral-inverse: var(--vp-c-black)}:root{--vp-c-gray-1: #dddde3;--vp-c-gray-2: #e4e4e9;--vp-c-gray-3: #ebebef;--vp-c-gray-soft: rgba(142, 150, 170, .14);--vp-c-indigo-1: #3451b2;--vp-c-indigo-2: #3a5ccc;--vp-c-indigo-3: #5672cd;--vp-c-indigo-soft: rgba(100, 108, 255, .14);--vp-c-purple-1: #6f42c1;--vp-c-purple-2: #7e4cc9;--vp-c-purple-3: #8e5cd9;--vp-c-purple-soft: rgba(159, 122, 234, .14);--vp-c-green-1: #18794e;--vp-c-green-2: #299764;--vp-c-green-3: #30a46c;--vp-c-green-soft: rgba(16, 185, 129, .14);--vp-c-yellow-1: #915930;--vp-c-yellow-2: #946300;--vp-c-yellow-3: #9f6a00;--vp-c-yellow-soft: rgba(234, 179, 8, .14);--vp-c-red-1: #b8272c;--vp-c-red-2: #d5393e;--vp-c-red-3: #e0575b;--vp-c-red-soft: rgba(244, 63, 94, .14);--vp-c-sponsor: #db2777}.dark{--vp-c-gray-1: #515c67;--vp-c-gray-2: #414853;--vp-c-gray-3: #32363f;--vp-c-gray-soft: rgba(101, 117, 133, .16);--vp-c-indigo-1: #a8b1ff;--vp-c-indigo-2: #5c73e7;--vp-c-indigo-3: #3e63dd;--vp-c-indigo-soft: rgba(100, 108, 255, .16);--vp-c-purple-1: #c8abfa;--vp-c-purple-2: #a879e6;--vp-c-purple-3: #8e5cd9;--vp-c-purple-soft: rgba(159, 122, 234, .16);--vp-c-green-1: #3dd68c;--vp-c-green-2: #30a46c;--vp-c-green-3: #298459;--vp-c-green-soft: rgba(16, 185, 129, .16);--vp-c-yellow-1: #f9b44e;--vp-c-yellow-2: #da8b17;--vp-c-yellow-3: #a46a0a;--vp-c-yellow-soft: rgba(234, 179, 8, .16);--vp-c-red-1: #f66f81;--vp-c-red-2: #f14158;--vp-c-red-3: #b62a3c;--vp-c-red-soft: rgba(244, 63, 94, .16)}:root{--vp-c-bg: #ffffff;--vp-c-bg-alt: #f6f6f7;--vp-c-bg-elv: #ffffff;--vp-c-bg-soft: #f6f6f7}.dark{--vp-c-bg: #1b1b1f;--vp-c-bg-alt: #161618;--vp-c-bg-elv: #202127;--vp-c-bg-soft: #202127}:root{--vp-c-border: #c2c2c4;--vp-c-divider: #e2e2e3;--vp-c-gutter: #e2e2e3}.dark{--vp-c-border: #3c3f44;--vp-c-divider: #2e2e32;--vp-c-gutter: #000000}:root{--vp-c-text-1: rgba(60, 60, 67);--vp-c-text-2: rgba(60, 60, 67, .78);--vp-c-text-3: rgba(60, 60, 67, .56)}.dark{--vp-c-text-1: rgba(255, 255, 245, .86);--vp-c-text-2: rgba(235, 235, 245, .6);--vp-c-text-3: rgba(235, 235, 245, .38)}:root{--vp-c-default-1: var(--vp-c-gray-1);--vp-c-default-2: var(--vp-c-gray-2);--vp-c-default-3: var(--vp-c-gray-3);--vp-c-default-soft: var(--vp-c-gray-soft);--vp-c-brand-1: var(--vp-c-indigo-1);--vp-c-brand-2: var(--vp-c-indigo-2);--vp-c-brand-3: var(--vp-c-indigo-3);--vp-c-brand-soft: var(--vp-c-indigo-soft);--vp-c-brand: var(--vp-c-brand-1);--vp-c-tip-1: var(--vp-c-brand-1);--vp-c-tip-2: var(--vp-c-brand-2);--vp-c-tip-3: var(--vp-c-brand-3);--vp-c-tip-soft: var(--vp-c-brand-soft);--vp-c-note-1: var(--vp-c-brand-1);--vp-c-note-2: var(--vp-c-brand-2);--vp-c-note-3: var(--vp-c-brand-3);--vp-c-note-soft: var(--vp-c-brand-soft);--vp-c-success-1: var(--vp-c-green-1);--vp-c-success-2: var(--vp-c-green-2);--vp-c-success-3: var(--vp-c-green-3);--vp-c-success-soft: var(--vp-c-green-soft);--vp-c-important-1: var(--vp-c-purple-1);--vp-c-important-2: var(--vp-c-purple-2);--vp-c-important-3: var(--vp-c-purple-3);--vp-c-important-soft: var(--vp-c-purple-soft);--vp-c-warning-1: var(--vp-c-yellow-1);--vp-c-warning-2: var(--vp-c-yellow-2);--vp-c-warning-3: var(--vp-c-yellow-3);--vp-c-warning-soft: var(--vp-c-yellow-soft);--vp-c-danger-1: var(--vp-c-red-1);--vp-c-danger-2: var(--vp-c-red-2);--vp-c-danger-3: var(--vp-c-red-3);--vp-c-danger-soft: var(--vp-c-red-soft);--vp-c-caution-1: var(--vp-c-red-1);--vp-c-caution-2: var(--vp-c-red-2);--vp-c-caution-3: var(--vp-c-red-3);--vp-c-caution-soft: var(--vp-c-red-soft)}:root{--vp-font-family-base: "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--vp-font-family-mono: ui-monospace, "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace;font-optical-sizing:auto}:root:where(:lang(zh)){--vp-font-family-base: "Punctuation SC", "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"}:root{--vp-shadow-1: 0 1px 2px rgba(0, 0, 0, .04), 0 1px 2px rgba(0, 0, 0, .06);--vp-shadow-2: 0 3px 12px rgba(0, 0, 0, .07), 0 1px 4px rgba(0, 0, 0, .07);--vp-shadow-3: 0 12px 32px rgba(0, 0, 0, .1), 0 2px 6px rgba(0, 0, 0, .08);--vp-shadow-4: 0 14px 44px rgba(0, 0, 0, .12), 0 3px 9px rgba(0, 0, 0, .12);--vp-shadow-5: 0 18px 56px rgba(0, 0, 0, .16), 0 4px 12px rgba(0, 0, 0, .16)}:root{--vp-z-index-footer: 10;--vp-z-index-local-nav: 20;--vp-z-index-nav: 30;--vp-z-index-layout-top: 40;--vp-z-index-backdrop: 50;--vp-z-index-sidebar: 60}@media (min-width: 960px){:root{--vp-z-index-sidebar: 25}}:root{--vp-layout-max-width: 1440px}:root{--vp-header-anchor-symbol: "#"}:root{--vp-code-line-height: 1.7;--vp-code-font-size: .875em;--vp-code-color: var(--vp-c-brand-1);--vp-code-link-color: var(--vp-c-brand-1);--vp-code-link-hover-color: var(--vp-c-brand-2);--vp-code-bg: var(--vp-c-default-soft);--vp-code-block-color: var(--vp-c-text-2);--vp-code-block-bg: var(--vp-c-bg-alt);--vp-code-block-divider-color: var(--vp-c-gutter);--vp-code-lang-color: var(--vp-c-text-3);--vp-code-line-highlight-color: var(--vp-c-default-soft);--vp-code-line-number-color: var(--vp-c-text-3);--vp-code-line-diff-add-color: var(--vp-c-success-soft);--vp-code-line-diff-add-symbol-color: var(--vp-c-success-1);--vp-code-line-diff-remove-color: var(--vp-c-danger-soft);--vp-code-line-diff-remove-symbol-color: var(--vp-c-danger-1);--vp-code-line-warning-color: var(--vp-c-warning-soft);--vp-code-line-error-color: var(--vp-c-danger-soft);--vp-code-copy-code-border-color: var(--vp-c-divider);--vp-code-copy-code-bg: var(--vp-c-bg-soft);--vp-code-copy-code-hover-border-color: var(--vp-c-divider);--vp-code-copy-code-hover-bg: var(--vp-c-bg);--vp-code-copy-code-active-text: var(--vp-c-text-2);--vp-code-copy-copied-text-content: "Copied";--vp-code-tab-divider: var(--vp-code-block-divider-color);--vp-code-tab-text-color: var(--vp-c-text-2);--vp-code-tab-bg: var(--vp-code-block-bg);--vp-code-tab-hover-text-color: var(--vp-c-text-1);--vp-code-tab-active-text-color: var(--vp-c-text-1);--vp-code-tab-active-bar-color: var(--vp-c-brand-1)}:root{--vp-button-brand-border: transparent;--vp-button-brand-text: var(--vp-c-white);--vp-button-brand-bg: var(--vp-c-brand-3);--vp-button-brand-hover-border: transparent;--vp-button-brand-hover-text: var(--vp-c-white);--vp-button-brand-hover-bg: var(--vp-c-brand-2);--vp-button-brand-active-border: transparent;--vp-button-brand-active-text: var(--vp-c-white);--vp-button-brand-active-bg: var(--vp-c-brand-1);--vp-button-alt-border: transparent;--vp-button-alt-text: var(--vp-c-text-1);--vp-button-alt-bg: var(--vp-c-default-3);--vp-button-alt-hover-border: transparent;--vp-button-alt-hover-text: var(--vp-c-text-1);--vp-button-alt-hover-bg: var(--vp-c-default-2);--vp-button-alt-active-border: transparent;--vp-button-alt-active-text: var(--vp-c-text-1);--vp-button-alt-active-bg: var(--vp-c-default-1);--vp-button-sponsor-border: var(--vp-c-text-2);--vp-button-sponsor-text: var(--vp-c-text-2);--vp-button-sponsor-bg: transparent;--vp-button-sponsor-hover-border: var(--vp-c-sponsor);--vp-button-sponsor-hover-text: var(--vp-c-sponsor);--vp-button-sponsor-hover-bg: transparent;--vp-button-sponsor-active-border: var(--vp-c-sponsor);--vp-button-sponsor-active-text: var(--vp-c-sponsor);--vp-button-sponsor-active-bg: transparent}:root{--vp-custom-block-font-size: 14px;--vp-custom-block-code-font-size: 13px;--vp-custom-block-info-border: transparent;--vp-custom-block-info-text: var(--vp-c-text-1);--vp-custom-block-info-bg: var(--vp-c-default-soft);--vp-custom-block-info-code-bg: var(--vp-c-default-soft);--vp-custom-block-note-border: transparent;--vp-custom-block-note-text: var(--vp-c-text-1);--vp-custom-block-note-bg: var(--vp-c-default-soft);--vp-custom-block-note-code-bg: var(--vp-c-default-soft);--vp-custom-block-tip-border: transparent;--vp-custom-block-tip-text: var(--vp-c-text-1);--vp-custom-block-tip-bg: var(--vp-c-tip-soft);--vp-custom-block-tip-code-bg: var(--vp-c-tip-soft);--vp-custom-block-important-border: transparent;--vp-custom-block-important-text: var(--vp-c-text-1);--vp-custom-block-important-bg: var(--vp-c-important-soft);--vp-custom-block-important-code-bg: var(--vp-c-important-soft);--vp-custom-block-warning-border: transparent;--vp-custom-block-warning-text: var(--vp-c-text-1);--vp-custom-block-warning-bg: var(--vp-c-warning-soft);--vp-custom-block-warning-code-bg: var(--vp-c-warning-soft);--vp-custom-block-danger-border: transparent;--vp-custom-block-danger-text: var(--vp-c-text-1);--vp-custom-block-danger-bg: var(--vp-c-danger-soft);--vp-custom-block-danger-code-bg: var(--vp-c-danger-soft);--vp-custom-block-caution-border: transparent;--vp-custom-block-caution-text: var(--vp-c-text-1);--vp-custom-block-caution-bg: var(--vp-c-caution-soft);--vp-custom-block-caution-code-bg: var(--vp-c-caution-soft);--vp-custom-block-details-border: var(--vp-custom-block-info-border);--vp-custom-block-details-text: var(--vp-custom-block-info-text);--vp-custom-block-details-bg: var(--vp-custom-block-info-bg);--vp-custom-block-details-code-bg: var(--vp-custom-block-info-code-bg)}:root{--vp-input-border-color: var(--vp-c-border);--vp-input-bg-color: var(--vp-c-bg-alt);--vp-input-switch-bg-color: var(--vp-c-default-soft)}:root{--vp-nav-height: 64px;--vp-nav-bg-color: var(--vp-c-bg);--vp-nav-screen-bg-color: var(--vp-c-bg);--vp-nav-logo-height: 24px}.hide-nav{--vp-nav-height: 0px}.hide-nav .VPSidebar{--vp-nav-height: 22px}:root{--vp-local-nav-bg-color: var(--vp-c-bg)}:root{--vp-sidebar-width: 272px;--vp-sidebar-bg-color: var(--vp-c-bg-alt)}:root{--vp-backdrop-bg-color: rgba(0, 0, 0, .6)}:root{--vp-home-hero-name-color: var(--vp-c-brand-1);--vp-home-hero-name-background: transparent;--vp-home-hero-image-background-image: none;--vp-home-hero-image-filter: none}:root{--vp-badge-info-border: transparent;--vp-badge-info-text: var(--vp-c-text-2);--vp-badge-info-bg: var(--vp-c-default-soft);--vp-badge-tip-border: transparent;--vp-badge-tip-text: var(--vp-c-tip-1);--vp-badge-tip-bg: var(--vp-c-tip-soft);--vp-badge-warning-border: transparent;--vp-badge-warning-text: var(--vp-c-warning-1);--vp-badge-warning-bg: var(--vp-c-warning-soft);--vp-badge-danger-border: transparent;--vp-badge-danger-text: var(--vp-c-danger-1);--vp-badge-danger-bg: var(--vp-c-danger-soft)}:root{--vp-carbon-ads-text-color: var(--vp-c-text-1);--vp-carbon-ads-poweredby-color: var(--vp-c-text-2);--vp-carbon-ads-bg-color: var(--vp-c-bg-soft);--vp-carbon-ads-hover-text-color: var(--vp-c-brand-1);--vp-carbon-ads-hover-poweredby-color: var(--vp-c-text-1)}:root{--vp-local-search-bg: var(--vp-c-bg);--vp-local-search-result-bg: var(--vp-c-bg);--vp-local-search-result-border: var(--vp-c-divider);--vp-local-search-result-selected-bg: var(--vp-c-bg);--vp-local-search-result-selected-border: var(--vp-c-brand-1);--vp-local-search-highlight-bg: var(--vp-c-brand-1);--vp-local-search-highlight-text: var(--vp-c-neutral-inverse)}@media (prefers-reduced-motion: reduce){*,:before,:after{animation-delay:-1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important;background-attachment:initial!important;scroll-behavior:auto!important;transition-duration:0s!important;transition-delay:0s!important}}*,:before,:after{box-sizing:border-box}html{line-height:1.4;font-size:16px;-webkit-text-size-adjust:100%}html.dark{color-scheme:dark}body{margin:0;width:100%;min-width:320px;min-height:100vh;line-height:24px;font-family:var(--vp-font-family-base);font-size:16px;font-weight:400;color:var(--vp-c-text-1);background-color:var(--vp-c-bg);font-synthesis:style;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}main{display:block}h1,h2,h3,h4,h5,h6{margin:0;line-height:24px;font-size:16px;font-weight:400}p{margin:0}strong,b{font-weight:600}a,area,button,[role=button],input,label,select,summary,textarea{touch-action:manipulation}a{color:inherit;text-decoration:inherit}ol,ul{list-style:none;margin:0;padding:0}blockquote{margin:0}pre,code,kbd,samp{font-family:var(--vp-font-family-mono)}img,svg,video,canvas,audio,iframe,embed,object{display:block}figure{margin:0}img,video{max-width:100%;height:auto}button,input,optgroup,select,textarea{border:0;padding:0;line-height:inherit;color:inherit}button{padding:0;font-family:inherit;background-color:transparent;background-image:none}button:enabled,[role=button]:enabled{cursor:pointer}button:focus,button:focus-visible{outline:1px dotted;outline:4px auto -webkit-focus-ring-color}button:focus:not(:focus-visible){outline:none!important}input:focus,textarea:focus,select:focus{outline:none}table{border-collapse:collapse}input{background-color:transparent}input:-ms-input-placeholder,textarea:-ms-input-placeholder{color:var(--vp-c-text-3)}input::-ms-input-placeholder,textarea::-ms-input-placeholder{color:var(--vp-c-text-3)}input::placeholder,textarea::placeholder{color:var(--vp-c-text-3)}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}textarea{resize:vertical}select{-webkit-appearance:none}fieldset{margin:0;padding:0}h1,h2,h3,h4,h5,h6,li,p{overflow-wrap:break-word}vite-error-overlay{z-index:9999}mjx-container{overflow-x:auto}mjx-container>svg{display:inline-block;margin:auto}[class^=vpi-],[class*=" vpi-"],.vp-icon{width:1em;height:1em}[class^=vpi-].bg,[class*=" vpi-"].bg,.vp-icon.bg{background-size:100% 100%;background-color:transparent}[class^=vpi-]:not(.bg),[class*=" vpi-"]:not(.bg),.vp-icon:not(.bg){-webkit-mask:var(--icon) no-repeat;mask:var(--icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit}.vpi-align-left{--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M21 6H3M15 12H3M17 18H3'/%3E%3C/svg%3E")}.vpi-arrow-right,.vpi-arrow-down,.vpi-arrow-left,.vpi-arrow-up{--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E")}.vpi-chevron-right,.vpi-chevron-down,.vpi-chevron-left,.vpi-chevron-up{--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E")}.vpi-chevron-down,.vpi-arrow-down{transform:rotate(90deg)}.vpi-chevron-left,.vpi-arrow-left{transform:rotate(180deg)}.vpi-chevron-up,.vpi-arrow-up{transform:rotate(-90deg)}.vpi-square-pen{--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M18.375 2.625a2.121 2.121 0 1 1 3 3L12 15l-4 1 1-4Z'/%3E%3C/svg%3E")}.vpi-plus{--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M12 5v14'/%3E%3C/svg%3E")}.vpi-sun{--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41'/%3E%3C/svg%3E")}.vpi-moon{--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z'/%3E%3C/svg%3E")}.vpi-more-horizontal{--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3Ccircle cx='19' cy='12' r='1'/%3E%3Ccircle cx='5' cy='12' r='1'/%3E%3C/svg%3E")}.vpi-languages{--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m5 8 6 6M4 14l6-6 2-3M2 5h12M7 2h1M22 22l-5-10-5 10M14 18h6'/%3E%3C/svg%3E")}.vpi-heart{--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/%3E%3C/svg%3E")}.vpi-search{--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E")}.vpi-layout-list{--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Crect width='7' height='7' x='3' y='3' rx='1'/%3E%3Crect width='7' height='7' x='3' y='14' rx='1'/%3E%3Cpath d='M14 4h7M14 9h7M14 15h7M14 20h7'/%3E%3C/svg%3E")}.vpi-delete{--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M20 5H9l-7 7 7 7h11a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2ZM18 9l-6 6M12 9l6 6'/%3E%3C/svg%3E")}.vpi-corner-down-left{--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m9 10-5 5 5 5'/%3E%3Cpath d='M20 4v7a4 4 0 0 1-4 4H4'/%3E%3C/svg%3E")}:root{--vp-icon-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='rgba(128,128,128,1)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3C/svg%3E");--vp-icon-copied: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='rgba(128,128,128,1)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='m9 14 2 2 4-4'/%3E%3C/svg%3E")}.visually-hidden{position:absolute;width:1px;height:1px;white-space:nowrap;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden}.custom-block{border:1px solid transparent;border-radius:8px;padding:16px 16px 8px;line-height:24px;font-size:var(--vp-custom-block-font-size);color:var(--vp-c-text-2)}.custom-block.info{border-color:var(--vp-custom-block-info-border);color:var(--vp-custom-block-info-text);background-color:var(--vp-custom-block-info-bg)}.custom-block.info a,.custom-block.info code{color:var(--vp-c-brand-1)}.custom-block.info a:hover,.custom-block.info a:hover>code{color:var(--vp-c-brand-2)}.custom-block.info code{background-color:var(--vp-custom-block-info-code-bg)}.custom-block.note{border-color:var(--vp-custom-block-note-border);color:var(--vp-custom-block-note-text);background-color:var(--vp-custom-block-note-bg)}.custom-block.note a,.custom-block.note code{color:var(--vp-c-brand-1)}.custom-block.note a:hover,.custom-block.note a:hover>code{color:var(--vp-c-brand-2)}.custom-block.note code{background-color:var(--vp-custom-block-note-code-bg)}.custom-block.tip{border-color:var(--vp-custom-block-tip-border);color:var(--vp-custom-block-tip-text);background-color:var(--vp-custom-block-tip-bg)}.custom-block.tip a,.custom-block.tip code{color:var(--vp-c-tip-1)}.custom-block.tip a:hover,.custom-block.tip a:hover>code{color:var(--vp-c-tip-2)}.custom-block.tip code{background-color:var(--vp-custom-block-tip-code-bg)}.custom-block.important{border-color:var(--vp-custom-block-important-border);color:var(--vp-custom-block-important-text);background-color:var(--vp-custom-block-important-bg)}.custom-block.important a,.custom-block.important code{color:var(--vp-c-important-1)}.custom-block.important a:hover,.custom-block.important a:hover>code{color:var(--vp-c-important-2)}.custom-block.important code{background-color:var(--vp-custom-block-important-code-bg)}.custom-block.warning{border-color:var(--vp-custom-block-warning-border);color:var(--vp-custom-block-warning-text);background-color:var(--vp-custom-block-warning-bg)}.custom-block.warning a,.custom-block.warning code{color:var(--vp-c-warning-1)}.custom-block.warning a:hover,.custom-block.warning a:hover>code{color:var(--vp-c-warning-2)}.custom-block.warning code{background-color:var(--vp-custom-block-warning-code-bg)}.custom-block.danger{border-color:var(--vp-custom-block-danger-border);color:var(--vp-custom-block-danger-text);background-color:var(--vp-custom-block-danger-bg)}.custom-block.danger a,.custom-block.danger code{color:var(--vp-c-danger-1)}.custom-block.danger a:hover,.custom-block.danger a:hover>code{color:var(--vp-c-danger-2)}.custom-block.danger code{background-color:var(--vp-custom-block-danger-code-bg)}.custom-block.caution{border-color:var(--vp-custom-block-caution-border);color:var(--vp-custom-block-caution-text);background-color:var(--vp-custom-block-caution-bg)}.custom-block.caution a,.custom-block.caution code{color:var(--vp-c-caution-1)}.custom-block.caution a:hover,.custom-block.caution a:hover>code{color:var(--vp-c-caution-2)}.custom-block.caution code{background-color:var(--vp-custom-block-caution-code-bg)}.custom-block.details{border-color:var(--vp-custom-block-details-border);color:var(--vp-custom-block-details-text);background-color:var(--vp-custom-block-details-bg)}.custom-block.details a{color:var(--vp-c-brand-1)}.custom-block.details a:hover,.custom-block.details a:hover>code{color:var(--vp-c-brand-2)}.custom-block.details code{background-color:var(--vp-custom-block-details-code-bg)}.custom-block-title{font-weight:600}.custom-block p+p{margin:8px 0}.custom-block.details summary{margin:0 0 8px;font-weight:700;cursor:pointer;-webkit-user-select:none;user-select:none}.custom-block.details summary+p{margin:8px 0}.custom-block a{color:inherit;font-weight:600;text-decoration:underline;text-underline-offset:2px;transition:opacity .25s}.custom-block a:hover{opacity:.75}.custom-block code{font-size:var(--vp-custom-block-code-font-size)}.custom-block.custom-block th,.custom-block.custom-block blockquote>p{font-size:var(--vp-custom-block-font-size);color:inherit}.dark .vp-code span{color:var(--shiki-dark, inherit)}html:not(.dark) .vp-code span{color:var(--shiki-light, inherit)}.vp-code-group{margin-top:16px}.vp-code-group .tabs{position:relative;display:flex;margin-right:-24px;margin-left:-24px;padding:0 12px;background-color:var(--vp-code-tab-bg);overflow-x:auto;overflow-y:hidden;box-shadow:inset 0 -1px var(--vp-code-tab-divider)}@media (min-width: 640px){.vp-code-group .tabs{margin-right:0;margin-left:0;border-radius:8px 8px 0 0}}.vp-code-group .tabs input{position:fixed;opacity:0;pointer-events:none}.vp-code-group .tabs label{position:relative;display:inline-block;border-bottom:1px solid transparent;padding:0 12px;line-height:48px;font-size:14px;font-weight:500;color:var(--vp-code-tab-text-color);white-space:nowrap;cursor:pointer;transition:color .25s}.vp-code-group .tabs label:after{position:absolute;right:8px;bottom:-1px;left:8px;z-index:1;height:2px;border-radius:2px;content:"";background-color:transparent;transition:background-color .25s}.vp-code-group label:hover{color:var(--vp-code-tab-hover-text-color)}.vp-code-group input:checked+label{color:var(--vp-code-tab-active-text-color)}.vp-code-group input:checked+label:after{background-color:var(--vp-code-tab-active-bar-color)}.vp-code-group div[class*=language-],.vp-block{display:none;margin-top:0!important;border-top-left-radius:0!important;border-top-right-radius:0!important}.vp-code-group div[class*=language-].active,.vp-block.active{display:block}.vp-block{padding:20px 24px}.vp-doc h1,.vp-doc h2,.vp-doc h3,.vp-doc h4,.vp-doc h5,.vp-doc h6{position:relative;font-weight:600;outline:none}.vp-doc h1{letter-spacing:-.02em;line-height:40px;font-size:28px}.vp-doc h2{margin:48px 0 16px;border-top:1px solid var(--vp-c-divider);padding-top:24px;letter-spacing:-.02em;line-height:32px;font-size:24px}.vp-doc h3{margin:32px 0 0;letter-spacing:-.01em;line-height:28px;font-size:20px}.vp-doc h4{margin:24px 0 0;letter-spacing:-.01em;line-height:24px;font-size:18px}.vp-doc .header-anchor{position:absolute;top:0;left:0;margin-left:-.87em;font-weight:500;-webkit-user-select:none;user-select:none;opacity:0;text-decoration:none;transition:color .25s,opacity .25s}.vp-doc .header-anchor:before{content:var(--vp-header-anchor-symbol)}.vp-doc h1:hover .header-anchor,.vp-doc h1 .header-anchor:focus,.vp-doc h2:hover .header-anchor,.vp-doc h2 .header-anchor:focus,.vp-doc h3:hover .header-anchor,.vp-doc h3 .header-anchor:focus,.vp-doc h4:hover .header-anchor,.vp-doc h4 .header-anchor:focus,.vp-doc h5:hover .header-anchor,.vp-doc h5 .header-anchor:focus,.vp-doc h6:hover .header-anchor,.vp-doc h6 .header-anchor:focus{opacity:1}@media (min-width: 768px){.vp-doc h1{letter-spacing:-.02em;line-height:40px;font-size:32px}}.vp-doc h2 .header-anchor{top:24px}.vp-doc p,.vp-doc summary{margin:16px 0}.vp-doc p{line-height:28px}.vp-doc blockquote{margin:16px 0;border-left:2px solid var(--vp-c-divider);padding-left:16px;transition:border-color .5s;color:var(--vp-c-text-2)}.vp-doc blockquote>p{margin:0;font-size:16px;transition:color .5s}.vp-doc a{font-weight:500;color:var(--vp-c-brand-1);text-decoration:underline;text-underline-offset:2px;transition:color .25s,opacity .25s}.vp-doc a:hover{color:var(--vp-c-brand-2)}.vp-doc strong{font-weight:600}.vp-doc ul,.vp-doc ol{padding-left:1.25rem;margin:16px 0}.vp-doc ul{list-style:disc}.vp-doc ol{list-style:decimal}.vp-doc li+li{margin-top:8px}.vp-doc li>ol,.vp-doc li>ul{margin:8px 0 0}.vp-doc table{display:block;border-collapse:collapse;margin:20px 0;overflow-x:auto}.vp-doc tr{background-color:var(--vp-c-bg);border-top:1px solid var(--vp-c-divider);transition:background-color .5s}.vp-doc tr:nth-child(2n){background-color:var(--vp-c-bg-soft)}.vp-doc th,.vp-doc td{border:1px solid var(--vp-c-divider);padding:8px 16px}.vp-doc th{text-align:left;font-size:14px;font-weight:600;color:var(--vp-c-text-2);background-color:var(--vp-c-bg-soft)}.vp-doc td{font-size:14px}.vp-doc hr{margin:16px 0;border:none;border-top:1px solid var(--vp-c-divider)}.vp-doc .custom-block{margin:16px 0}.vp-doc .custom-block p{margin:8px 0;line-height:24px}.vp-doc .custom-block p:first-child{margin:0}.vp-doc .custom-block div[class*=language-]{margin:8px 0;border-radius:8px}.vp-doc .custom-block div[class*=language-] code{font-weight:400;background-color:transparent}.vp-doc .custom-block .vp-code-group .tabs{margin:0;border-radius:8px 8px 0 0}.vp-doc :not(pre,h1,h2,h3,h4,h5,h6)>code{font-size:var(--vp-code-font-size);color:var(--vp-code-color)}.vp-doc :not(pre)>code{border-radius:4px;padding:3px 6px;background-color:var(--vp-code-bg);transition:color .25s,background-color .5s}.vp-doc a>code{color:var(--vp-code-link-color)}.vp-doc a:hover>code{color:var(--vp-code-link-hover-color)}.vp-doc h1>code,.vp-doc h2>code,.vp-doc h3>code,.vp-doc h4>code{font-size:.9em}.vp-doc div[class*=language-],.vp-block{position:relative;margin:16px -24px;background-color:var(--vp-code-block-bg);overflow-x:auto;transition:background-color .5s}@media (min-width: 640px){.vp-doc div[class*=language-],.vp-block{border-radius:8px;margin:16px 0}}@media (max-width: 639px){.vp-doc li div[class*=language-]{border-radius:8px 0 0 8px}}.vp-doc div[class*=language-]+div[class*=language-],.vp-doc div[class$=-api]+div[class*=language-],.vp-doc div[class*=language-]+div[class$=-api]>div[class*=language-]{margin-top:-8px}.vp-doc [class*=language-] pre,.vp-doc [class*=language-] code{direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}.vp-doc [class*=language-] pre{position:relative;z-index:1;margin:0;padding:20px 0;background:transparent;overflow-x:auto}.vp-doc [class*=language-] code{display:block;padding:0 24px;width:fit-content;min-width:100%;line-height:var(--vp-code-line-height);font-size:var(--vp-code-font-size);color:var(--vp-code-block-color);transition:color .5s}.vp-doc [class*=language-] code .highlighted{background-color:var(--vp-code-line-highlight-color);transition:background-color .5s;margin:0 -24px;padding:0 24px;width:calc(100% + 48px);display:inline-block}.vp-doc [class*=language-] code .highlighted.error{background-color:var(--vp-code-line-error-color)}.vp-doc [class*=language-] code .highlighted.warning{background-color:var(--vp-code-line-warning-color)}.vp-doc [class*=language-] code .diff{transition:background-color .5s;margin:0 -24px;padding:0 24px;width:calc(100% + 48px);display:inline-block}.vp-doc [class*=language-] code .diff:before{position:absolute;left:10px}.vp-doc [class*=language-] .has-focused-lines .line:not(.has-focus){filter:blur(.095rem);opacity:.4;transition:filter .35s,opacity .35s}.vp-doc [class*=language-] .has-focused-lines .line:not(.has-focus){opacity:.7;transition:filter .35s,opacity .35s}.vp-doc [class*=language-]:hover .has-focused-lines .line:not(.has-focus){filter:blur(0);opacity:1}.vp-doc [class*=language-] code .diff.remove{background-color:var(--vp-code-line-diff-remove-color);opacity:.7}.vp-doc [class*=language-] code .diff.remove:before{content:"-";color:var(--vp-code-line-diff-remove-symbol-color)}.vp-doc [class*=language-] code .diff.add{background-color:var(--vp-code-line-diff-add-color)}.vp-doc [class*=language-] code .diff.add:before{content:"+";color:var(--vp-code-line-diff-add-symbol-color)}.vp-doc div[class*=language-].line-numbers-mode{padding-left:32px}.vp-doc .line-numbers-wrapper{position:absolute;top:0;bottom:0;left:0;z-index:3;border-right:1px solid var(--vp-code-block-divider-color);padding-top:20px;width:32px;text-align:center;font-family:var(--vp-font-family-mono);line-height:var(--vp-code-line-height);font-size:var(--vp-code-font-size);color:var(--vp-code-line-number-color);transition:border-color .5s,color .5s}.vp-doc [class*=language-]>button.copy{direction:ltr;position:absolute;top:12px;right:12px;z-index:3;border:1px solid var(--vp-code-copy-code-border-color);border-radius:4px;width:40px;height:40px;background-color:var(--vp-code-copy-code-bg);opacity:0;cursor:pointer;background-image:var(--vp-icon-copy);background-position:50%;background-size:20px;background-repeat:no-repeat;transition:border-color .25s,background-color .25s,opacity .25s}.vp-doc [class*=language-]:hover>button.copy,.vp-doc [class*=language-]>button.copy:focus{opacity:1}.vp-doc [class*=language-]>button.copy:hover,.vp-doc [class*=language-]>button.copy.copied{border-color:var(--vp-code-copy-code-hover-border-color);background-color:var(--vp-code-copy-code-hover-bg)}.vp-doc [class*=language-]>button.copy.copied,.vp-doc [class*=language-]>button.copy:hover.copied{border-radius:0 4px 4px 0;background-color:var(--vp-code-copy-code-hover-bg);background-image:var(--vp-icon-copied)}.vp-doc [class*=language-]>button.copy.copied:before,.vp-doc [class*=language-]>button.copy:hover.copied:before{position:relative;top:-1px;transform:translate(calc(-100% - 1px));display:flex;justify-content:center;align-items:center;border:1px solid var(--vp-code-copy-code-hover-border-color);border-right:0;border-radius:4px 0 0 4px;padding:0 10px;width:fit-content;height:40px;text-align:center;font-size:12px;font-weight:500;color:var(--vp-code-copy-code-active-text);background-color:var(--vp-code-copy-code-hover-bg);white-space:nowrap;content:var(--vp-code-copy-copied-text-content)}.vp-doc [class*=language-]>span.lang{position:absolute;top:2px;right:8px;z-index:2;font-size:12px;font-weight:500;-webkit-user-select:none;user-select:none;color:var(--vp-code-lang-color);transition:color .4s,opacity .4s}.vp-doc [class*=language-]:hover>button.copy+span.lang,.vp-doc [class*=language-]>button.copy:focus+span.lang{opacity:0}.vp-doc .VPTeamMembers{margin-top:24px}.vp-doc .VPTeamMembers.small.count-1 .container{margin:0!important;max-width:calc((100% - 24px)/2)!important}.vp-doc .VPTeamMembers.small.count-2 .container,.vp-doc .VPTeamMembers.small.count-3 .container{max-width:100%!important}.vp-doc .VPTeamMembers.medium.count-1 .container{margin:0!important;max-width:calc((100% - 24px)/2)!important}:is(.vp-external-link-icon,.vp-doc a[href*="://"],.vp-doc a[target=_blank]):not(.no-icon):after{display:inline-block;margin-top:-1px;margin-left:4px;width:11px;height:11px;background:currentColor;color:var(--vp-c-text-3);flex-shrink:0;--icon: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' %3E%3Cpath d='M0 0h24v24H0V0z' fill='none' /%3E%3Cpath d='M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z' /%3E%3C/svg%3E");-webkit-mask-image:var(--icon);mask-image:var(--icon)}.vp-external-link-icon:after{content:""}.external-link-icon-enabled :is(.vp-doc a[href*="://"],.vp-doc a[target=_blank]):after{content:"";color:currentColor}.vp-sponsor{border-radius:16px;overflow:hidden}.vp-sponsor.aside{border-radius:12px}.vp-sponsor-section+.vp-sponsor-section{margin-top:4px}.vp-sponsor-tier{margin:0 0 4px!important;text-align:center;letter-spacing:1px!important;line-height:24px;width:100%;font-weight:600;color:var(--vp-c-text-2);background-color:var(--vp-c-bg-soft)}.vp-sponsor.normal .vp-sponsor-tier{padding:13px 0 11px;font-size:14px}.vp-sponsor.aside .vp-sponsor-tier{padding:9px 0 7px;font-size:12px}.vp-sponsor-grid+.vp-sponsor-tier{margin-top:4px}.vp-sponsor-grid{display:flex;flex-wrap:wrap;gap:4px}.vp-sponsor-grid.xmini .vp-sponsor-grid-link{height:64px}.vp-sponsor-grid.xmini .vp-sponsor-grid-image{max-width:64px;max-height:22px}.vp-sponsor-grid.mini .vp-sponsor-grid-link{height:72px}.vp-sponsor-grid.mini .vp-sponsor-grid-image{max-width:96px;max-height:24px}.vp-sponsor-grid.small .vp-sponsor-grid-link{height:96px}.vp-sponsor-grid.small .vp-sponsor-grid-image{max-width:96px;max-height:24px}.vp-sponsor-grid.medium .vp-sponsor-grid-link{height:112px}.vp-sponsor-grid.medium .vp-sponsor-grid-image{max-width:120px;max-height:36px}.vp-sponsor-grid.big .vp-sponsor-grid-link{height:184px}.vp-sponsor-grid.big .vp-sponsor-grid-image{max-width:192px;max-height:56px}.vp-sponsor-grid[data-vp-grid="2"] .vp-sponsor-grid-item{width:calc((100% - 4px)/2)}.vp-sponsor-grid[data-vp-grid="3"] .vp-sponsor-grid-item{width:calc((100% - 4px * 2) / 3)}.vp-sponsor-grid[data-vp-grid="4"] .vp-sponsor-grid-item{width:calc((100% - 12px)/4)}.vp-sponsor-grid[data-vp-grid="5"] .vp-sponsor-grid-item{width:calc((100% - 16px)/5)}.vp-sponsor-grid[data-vp-grid="6"] .vp-sponsor-grid-item{width:calc((100% - 4px * 5) / 6)}.vp-sponsor-grid-item{flex-shrink:0;width:100%;background-color:var(--vp-c-bg-soft);transition:background-color .25s}.vp-sponsor-grid-item:hover{background-color:var(--vp-c-default-soft)}.vp-sponsor-grid-item:hover .vp-sponsor-grid-image{filter:grayscale(0) invert(0)}.vp-sponsor-grid-item.empty:hover{background-color:var(--vp-c-bg-soft)}.dark .vp-sponsor-grid-item:hover{background-color:var(--vp-c-white)}.dark .vp-sponsor-grid-item.empty:hover{background-color:var(--vp-c-bg-soft)}.vp-sponsor-grid-link{display:flex}.vp-sponsor-grid-box{display:flex;justify-content:center;align-items:center;width:100%}.vp-sponsor-grid-image{max-width:100%;filter:grayscale(1);transition:filter .25s}.dark .vp-sponsor-grid-image{filter:grayscale(1) invert(1)}.VPBadge{display:inline-block;margin-left:2px;border:1px solid transparent;border-radius:12px;padding:0 10px;line-height:22px;font-size:12px;font-weight:500;transform:translateY(-2px)}.VPBadge.small{padding:0 6px;line-height:18px;font-size:10px;transform:translateY(-8px)}.VPDocFooter .VPBadge{display:none}.vp-doc h1>.VPBadge{margin-top:4px;vertical-align:top}.vp-doc h2>.VPBadge{margin-top:3px;padding:0 8px;vertical-align:top}.vp-doc h3>.VPBadge{vertical-align:middle}.vp-doc h4>.VPBadge,.vp-doc h5>.VPBadge,.vp-doc h6>.VPBadge{vertical-align:middle;line-height:18px}.VPBadge.info{border-color:var(--vp-badge-info-border);color:var(--vp-badge-info-text);background-color:var(--vp-badge-info-bg)}.VPBadge.tip{border-color:var(--vp-badge-tip-border);color:var(--vp-badge-tip-text);background-color:var(--vp-badge-tip-bg)}.VPBadge.warning{border-color:var(--vp-badge-warning-border);color:var(--vp-badge-warning-text);background-color:var(--vp-badge-warning-bg)}.VPBadge.danger{border-color:var(--vp-badge-danger-border);color:var(--vp-badge-danger-text);background-color:var(--vp-badge-danger-bg)}.VPBackdrop[data-v-c79a1216]{position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--vp-z-index-backdrop);background:var(--vp-backdrop-bg-color);transition:opacity .5s}.VPBackdrop.fade-enter-from[data-v-c79a1216],.VPBackdrop.fade-leave-to[data-v-c79a1216]{opacity:0}.VPBackdrop.fade-leave-active[data-v-c79a1216]{transition-duration:.25s}@media (min-width: 1280px){.VPBackdrop[data-v-c79a1216]{display:none}}.NotFound[data-v-d6be1790]{padding:64px 24px 96px;text-align:center}@media (min-width: 768px){.NotFound[data-v-d6be1790]{padding:96px 32px 168px}}.code[data-v-d6be1790]{line-height:64px;font-size:64px;font-weight:600}.title[data-v-d6be1790]{padding-top:12px;letter-spacing:2px;line-height:20px;font-size:20px;font-weight:700}.divider[data-v-d6be1790]{margin:24px auto 18px;width:64px;height:1px;background-color:var(--vp-c-divider)}.quote[data-v-d6be1790]{margin:0 auto;max-width:256px;font-size:14px;font-weight:500;color:var(--vp-c-text-2)}.action[data-v-d6be1790]{padding-top:20px}.link[data-v-d6be1790]{display:inline-block;border:1px solid var(--vp-c-brand-1);border-radius:16px;padding:3px 16px;font-size:14px;font-weight:500;color:var(--vp-c-brand-1);transition:border-color .25s,color .25s}.link[data-v-d6be1790]:hover{border-color:var(--vp-c-brand-2);color:var(--vp-c-brand-2)}.root[data-v-b933a997]{position:relative;z-index:1}.nested[data-v-b933a997]{padding-right:16px;padding-left:16px}.outline-link[data-v-b933a997]{display:block;line-height:32px;font-size:14px;font-weight:400;color:var(--vp-c-text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .5s}.outline-link[data-v-b933a997]:hover,.outline-link.active[data-v-b933a997]{color:var(--vp-c-text-1);transition:color .25s}.outline-link.nested[data-v-b933a997]{padding-left:13px}.VPDocAsideOutline[data-v-a5bbad30]{display:none}.VPDocAsideOutline.has-outline[data-v-a5bbad30]{display:block}.content[data-v-a5bbad30]{position:relative;border-left:1px solid var(--vp-c-divider);padding-left:16px;font-size:13px;font-weight:500}.outline-marker[data-v-a5bbad30]{position:absolute;top:32px;left:-1px;z-index:0;opacity:0;width:2px;border-radius:2px;height:18px;background-color:var(--vp-c-brand-1);transition:top .25s cubic-bezier(0,1,.5,1),background-color .5s,opacity .25s}.outline-title[data-v-a5bbad30]{line-height:32px;font-size:14px;font-weight:600}.VPDocAside[data-v-3f215769]{display:flex;flex-direction:column;flex-grow:1}.spacer[data-v-3f215769]{flex-grow:1}.VPDocAside[data-v-3f215769] .spacer+.VPDocAsideSponsors,.VPDocAside[data-v-3f215769] .spacer+.VPDocAsideCarbonAds{margin-top:24px}.VPDocAside[data-v-3f215769] .VPDocAsideSponsors+.VPDocAsideCarbonAds{margin-top:16px}.VPLastUpdated[data-v-e98dd255]{line-height:24px;font-size:14px;font-weight:500;color:var(--vp-c-text-2)}@media (min-width: 640px){.VPLastUpdated[data-v-e98dd255]{line-height:32px;font-size:14px;font-weight:500}}.VPDocFooter[data-v-e257564d]{margin-top:64px}.edit-info[data-v-e257564d]{padding-bottom:18px}@media (min-width: 640px){.edit-info[data-v-e257564d]{display:flex;justify-content:space-between;align-items:center;padding-bottom:14px}}.edit-link-button[data-v-e257564d]{display:flex;align-items:center;border:0;line-height:32px;font-size:14px;font-weight:500;color:var(--vp-c-brand-1);transition:color .25s}.edit-link-button[data-v-e257564d]:hover{color:var(--vp-c-brand-2)}.edit-link-icon[data-v-e257564d]{margin-right:8px}.prev-next[data-v-e257564d]{border-top:1px solid var(--vp-c-divider);padding-top:24px;display:grid;grid-row-gap:8px}@media (min-width: 640px){.prev-next[data-v-e257564d]{grid-template-columns:repeat(2,1fr);grid-column-gap:16px}}.pager-link[data-v-e257564d]{display:block;border:1px solid var(--vp-c-divider);border-radius:8px;padding:11px 16px 13px;width:100%;height:100%;transition:border-color .25s}.pager-link[data-v-e257564d]:hover{border-color:var(--vp-c-brand-1)}.pager-link.next[data-v-e257564d]{margin-left:auto;text-align:right}.desc[data-v-e257564d]{display:block;line-height:20px;font-size:12px;font-weight:500;color:var(--vp-c-text-2)}.title[data-v-e257564d]{display:block;line-height:20px;font-size:14px;font-weight:500;color:var(--vp-c-brand-1);transition:color .25s}.VPDoc[data-v-39a288b8]{padding:32px 24px 96px;width:100%}@media (min-width: 768px){.VPDoc[data-v-39a288b8]{padding:48px 32px 128px}}@media (min-width: 960px){.VPDoc[data-v-39a288b8]{padding:48px 32px 0}.VPDoc:not(.has-sidebar) .container[data-v-39a288b8]{display:flex;justify-content:center;max-width:992px}.VPDoc:not(.has-sidebar) .content[data-v-39a288b8]{max-width:752px}}@media (min-width: 1280px){.VPDoc .container[data-v-39a288b8]{display:flex;justify-content:center}.VPDoc .aside[data-v-39a288b8]{display:block}}@media (min-width: 1440px){.VPDoc:not(.has-sidebar) .content[data-v-39a288b8]{max-width:784px}.VPDoc:not(.has-sidebar) .container[data-v-39a288b8]{max-width:1104px}}.container[data-v-39a288b8]{margin:0 auto;width:100%}.aside[data-v-39a288b8]{position:relative;display:none;order:2;flex-grow:1;padding-left:32px;width:100%;max-width:256px}.left-aside[data-v-39a288b8]{order:1;padding-left:unset;padding-right:32px}.aside-container[data-v-39a288b8]{position:fixed;top:0;padding-top:calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + var(--vp-doc-top-height, 0px) + 48px);width:224px;height:100vh;overflow-x:hidden;overflow-y:auto;scrollbar-width:none}.aside-container[data-v-39a288b8]::-webkit-scrollbar{display:none}.aside-curtain[data-v-39a288b8]{position:fixed;bottom:0;z-index:10;width:224px;height:32px;background:linear-gradient(transparent,var(--vp-c-bg) 70%)}.aside-content[data-v-39a288b8]{display:flex;flex-direction:column;min-height:calc(100vh - (var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 48px));padding-bottom:32px}.content[data-v-39a288b8]{position:relative;margin:0 auto;width:100%}@media (min-width: 960px){.content[data-v-39a288b8]{padding:0 32px 128px}}@media (min-width: 1280px){.content[data-v-39a288b8]{order:1;margin:0;min-width:640px}}.content-container[data-v-39a288b8]{margin:0 auto}.VPDoc.has-aside .content-container[data-v-39a288b8]{max-width:688px}.VPButton[data-v-fa7799d5]{display:inline-block;border:1px solid transparent;text-align:center;font-weight:600;white-space:nowrap;transition:color .25s,border-color .25s,background-color .25s}.VPButton[data-v-fa7799d5]:active{transition:color .1s,border-color .1s,background-color .1s}.VPButton.medium[data-v-fa7799d5]{border-radius:20px;padding:0 20px;line-height:38px;font-size:14px}.VPButton.big[data-v-fa7799d5]{border-radius:24px;padding:0 24px;line-height:46px;font-size:16px}.VPButton.brand[data-v-fa7799d5]{border-color:var(--vp-button-brand-border);color:var(--vp-button-brand-text);background-color:var(--vp-button-brand-bg)}.VPButton.brand[data-v-fa7799d5]:hover{border-color:var(--vp-button-brand-hover-border);color:var(--vp-button-brand-hover-text);background-color:var(--vp-button-brand-hover-bg)}.VPButton.brand[data-v-fa7799d5]:active{border-color:var(--vp-button-brand-active-border);color:var(--vp-button-brand-active-text);background-color:var(--vp-button-brand-active-bg)}.VPButton.alt[data-v-fa7799d5]{border-color:var(--vp-button-alt-border);color:var(--vp-button-alt-text);background-color:var(--vp-button-alt-bg)}.VPButton.alt[data-v-fa7799d5]:hover{border-color:var(--vp-button-alt-hover-border);color:var(--vp-button-alt-hover-text);background-color:var(--vp-button-alt-hover-bg)}.VPButton.alt[data-v-fa7799d5]:active{border-color:var(--vp-button-alt-active-border);color:var(--vp-button-alt-active-text);background-color:var(--vp-button-alt-active-bg)}.VPButton.sponsor[data-v-fa7799d5]{border-color:var(--vp-button-sponsor-border);color:var(--vp-button-sponsor-text);background-color:var(--vp-button-sponsor-bg)}.VPButton.sponsor[data-v-fa7799d5]:hover{border-color:var(--vp-button-sponsor-hover-border);color:var(--vp-button-sponsor-hover-text);background-color:var(--vp-button-sponsor-hover-bg)}.VPButton.sponsor[data-v-fa7799d5]:active{border-color:var(--vp-button-sponsor-active-border);color:var(--vp-button-sponsor-active-text);background-color:var(--vp-button-sponsor-active-bg)}html:not(.dark) .VPImage.dark[data-v-8426fc1a]{display:none}.dark .VPImage.light[data-v-8426fc1a]{display:none}.VPHero[data-v-303bb580]{margin-top:calc((var(--vp-nav-height) + var(--vp-layout-top-height, 0px)) * -1);padding:calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 48px) 24px 48px}@media (min-width: 640px){.VPHero[data-v-303bb580]{padding:calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 80px) 48px 64px}}@media (min-width: 960px){.VPHero[data-v-303bb580]{padding:calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 80px) 64px 64px}}.container[data-v-303bb580]{display:flex;flex-direction:column;margin:0 auto;max-width:1152px}@media (min-width: 960px){.container[data-v-303bb580]{flex-direction:row}}.main[data-v-303bb580]{position:relative;z-index:10;order:2;flex-grow:1;flex-shrink:0}.VPHero.has-image .container[data-v-303bb580]{text-align:center}@media (min-width: 960px){.VPHero.has-image .container[data-v-303bb580]{text-align:left}}@media (min-width: 960px){.main[data-v-303bb580]{order:1;width:calc((100% / 3) * 2)}.VPHero.has-image .main[data-v-303bb580]{max-width:592px}}.name[data-v-303bb580],.text[data-v-303bb580]{max-width:392px;letter-spacing:-.4px;line-height:40px;font-size:32px;font-weight:700;white-space:pre-wrap}.VPHero.has-image .name[data-v-303bb580],.VPHero.has-image .text[data-v-303bb580]{margin:0 auto}.name[data-v-303bb580]{color:var(--vp-home-hero-name-color)}.clip[data-v-303bb580]{background:var(--vp-home-hero-name-background);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:var(--vp-home-hero-name-color)}@media (min-width: 640px){.name[data-v-303bb580],.text[data-v-303bb580]{max-width:576px;line-height:56px;font-size:48px}}@media (min-width: 960px){.name[data-v-303bb580],.text[data-v-303bb580]{line-height:64px;font-size:56px}.VPHero.has-image .name[data-v-303bb580],.VPHero.has-image .text[data-v-303bb580]{margin:0}}.tagline[data-v-303bb580]{padding-top:8px;max-width:392px;line-height:28px;font-size:18px;font-weight:500;white-space:pre-wrap;color:var(--vp-c-text-2)}.VPHero.has-image .tagline[data-v-303bb580]{margin:0 auto}@media (min-width: 640px){.tagline[data-v-303bb580]{padding-top:12px;max-width:576px;line-height:32px;font-size:20px}}@media (min-width: 960px){.tagline[data-v-303bb580]{line-height:36px;font-size:24px}.VPHero.has-image .tagline[data-v-303bb580]{margin:0}}.actions[data-v-303bb580]{display:flex;flex-wrap:wrap;margin:-6px;padding-top:24px}.VPHero.has-image .actions[data-v-303bb580]{justify-content:center}@media (min-width: 640px){.actions[data-v-303bb580]{padding-top:32px}}@media (min-width: 960px){.VPHero.has-image .actions[data-v-303bb580]{justify-content:flex-start}}.action[data-v-303bb580]{flex-shrink:0;padding:6px}.image[data-v-303bb580]{order:1;margin:-76px -24px -48px}@media (min-width: 640px){.image[data-v-303bb580]{margin:-108px -24px -48px}}@media (min-width: 960px){.image[data-v-303bb580]{flex-grow:1;order:2;margin:0;min-height:100%}}.image-container[data-v-303bb580]{position:relative;margin:0 auto;width:320px;height:320px}@media (min-width: 640px){.image-container[data-v-303bb580]{width:392px;height:392px}}@media (min-width: 960px){.image-container[data-v-303bb580]{display:flex;justify-content:center;align-items:center;width:100%;height:100%;transform:translate(-32px,-32px)}}.image-bg[data-v-303bb580]{position:absolute;top:50%;left:50%;border-radius:50%;width:192px;height:192px;background-image:var(--vp-home-hero-image-background-image);filter:var(--vp-home-hero-image-filter);transform:translate(-50%,-50%)}@media (min-width: 640px){.image-bg[data-v-303bb580]{width:256px;height:256px}}@media (min-width: 960px){.image-bg[data-v-303bb580]{width:320px;height:320px}}[data-v-303bb580] .image-src{position:absolute;top:50%;left:50%;max-width:192px;max-height:192px;transform:translate(-50%,-50%)}@media (min-width: 640px){[data-v-303bb580] .image-src{max-width:256px;max-height:256px}}@media (min-width: 960px){[data-v-303bb580] .image-src{max-width:320px;max-height:320px}}.VPFeature[data-v-a3976bdc]{display:block;border:1px solid var(--vp-c-bg-soft);border-radius:12px;height:100%;background-color:var(--vp-c-bg-soft);transition:border-color .25s,background-color .25s}.VPFeature.link[data-v-a3976bdc]:hover{border-color:var(--vp-c-brand-1)}.box[data-v-a3976bdc]{display:flex;flex-direction:column;padding:24px;height:100%}.box[data-v-a3976bdc]>.VPImage{margin-bottom:20px}.icon[data-v-a3976bdc]{display:flex;justify-content:center;align-items:center;margin-bottom:20px;border-radius:6px;background-color:var(--vp-c-default-soft);width:48px;height:48px;font-size:24px;transition:background-color .25s}.title[data-v-a3976bdc]{line-height:24px;font-size:16px;font-weight:600}.details[data-v-a3976bdc]{flex-grow:1;padding-top:8px;line-height:24px;font-size:14px;font-weight:500;color:var(--vp-c-text-2)}.link-text[data-v-a3976bdc]{padding-top:8px}.link-text-value[data-v-a3976bdc]{display:flex;align-items:center;font-size:14px;font-weight:500;color:var(--vp-c-brand-1)}.link-text-icon[data-v-a3976bdc]{margin-left:6px}.VPFeatures[data-v-a6181336]{position:relative;padding:0 24px}@media (min-width: 640px){.VPFeatures[data-v-a6181336]{padding:0 48px}}@media (min-width: 960px){.VPFeatures[data-v-a6181336]{padding:0 64px}}.container[data-v-a6181336]{margin:0 auto;max-width:1152px}.items[data-v-a6181336]{display:flex;flex-wrap:wrap;margin:-8px}.item[data-v-a6181336]{padding:8px;width:100%}@media (min-width: 640px){.item.grid-2[data-v-a6181336],.item.grid-4[data-v-a6181336],.item.grid-6[data-v-a6181336]{width:50%}}@media (min-width: 768px){.item.grid-2[data-v-a6181336],.item.grid-4[data-v-a6181336]{width:50%}.item.grid-3[data-v-a6181336],.item.grid-6[data-v-a6181336]{width:calc(100% / 3)}}@media (min-width: 960px){.item.grid-4[data-v-a6181336]{width:25%}}.container[data-v-8e2d4988]{margin:auto;width:100%;max-width:1280px;padding:0 24px}@media (min-width: 640px){.container[data-v-8e2d4988]{padding:0 48px}}@media (min-width: 960px){.container[data-v-8e2d4988]{width:100%;padding:0 64px}}.vp-doc[data-v-8e2d4988] .VPHomeSponsors,.vp-doc[data-v-8e2d4988] .VPTeamPage{margin-left:var(--vp-offset, calc(50% - 50vw) );margin-right:var(--vp-offset, calc(50% - 50vw) )}.vp-doc[data-v-8e2d4988] .VPHomeSponsors h2{border-top:none;letter-spacing:normal}.vp-doc[data-v-8e2d4988] .VPHomeSponsors a,.vp-doc[data-v-8e2d4988] .VPTeamPage a{text-decoration:none}.VPHome[data-v-686f80a6]{margin-bottom:96px}@media (min-width: 768px){.VPHome[data-v-686f80a6]{margin-bottom:128px}}.VPContent[data-v-1428d186]{flex-grow:1;flex-shrink:0;margin:var(--vp-layout-top-height, 0px) auto 0;width:100%}.VPContent.is-home[data-v-1428d186]{width:100%;max-width:100%}.VPContent.has-sidebar[data-v-1428d186]{margin:0}@media (min-width: 960px){.VPContent[data-v-1428d186]{padding-top:var(--vp-nav-height)}.VPContent.has-sidebar[data-v-1428d186]{margin:var(--vp-layout-top-height, 0px) 0 0;padding-left:var(--vp-sidebar-width)}}@media (min-width: 1440px){.VPContent.has-sidebar[data-v-1428d186]{padding-right:calc((100vw - var(--vp-layout-max-width)) / 2);padding-left:calc((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width))}}.VPFooter[data-v-e315a0ad]{position:relative;z-index:var(--vp-z-index-footer);border-top:1px solid var(--vp-c-gutter);padding:32px 24px;background-color:var(--vp-c-bg)}.VPFooter.has-sidebar[data-v-e315a0ad]{display:none}.VPFooter[data-v-e315a0ad] a{text-decoration-line:underline;text-underline-offset:2px;transition:color .25s}.VPFooter[data-v-e315a0ad] a:hover{color:var(--vp-c-text-1)}@media (min-width: 768px){.VPFooter[data-v-e315a0ad]{padding:32px}}.container[data-v-e315a0ad]{margin:0 auto;max-width:var(--vp-layout-max-width);text-align:center}.message[data-v-e315a0ad],.copyright[data-v-e315a0ad]{line-height:24px;font-size:14px;font-weight:500;color:var(--vp-c-text-2)}.VPLocalNavOutlineDropdown[data-v-17a5e62e]{padding:12px 20px 11px}@media (min-width: 960px){.VPLocalNavOutlineDropdown[data-v-17a5e62e]{padding:12px 36px 11px}}.VPLocalNavOutlineDropdown button[data-v-17a5e62e]{display:block;font-size:12px;font-weight:500;line-height:24px;color:var(--vp-c-text-2);transition:color .5s;position:relative}.VPLocalNavOutlineDropdown button[data-v-17a5e62e]:hover{color:var(--vp-c-text-1);transition:color .25s}.VPLocalNavOutlineDropdown button.open[data-v-17a5e62e]{color:var(--vp-c-text-1)}.icon[data-v-17a5e62e]{display:inline-block;vertical-align:middle;margin-left:2px;font-size:14px;transform:rotate(0);transition:transform .25s}@media (min-width: 960px){.VPLocalNavOutlineDropdown button[data-v-17a5e62e]{font-size:14px}.icon[data-v-17a5e62e]{font-size:16px}}.open>.icon[data-v-17a5e62e]{transform:rotate(90deg)}.items[data-v-17a5e62e]{position:absolute;top:40px;right:16px;left:16px;display:grid;gap:1px;border:1px solid var(--vp-c-border);border-radius:8px;background-color:var(--vp-c-gutter);max-height:calc(var(--vp-vh, 100vh) - 86px);overflow:hidden auto;box-shadow:var(--vp-shadow-3)}@media (min-width: 960px){.items[data-v-17a5e62e]{right:auto;left:calc(var(--vp-sidebar-width) + 32px);width:320px}}.header[data-v-17a5e62e]{background-color:var(--vp-c-bg-soft)}.top-link[data-v-17a5e62e]{display:block;padding:0 16px;line-height:48px;font-size:14px;font-weight:500;color:var(--vp-c-brand-1)}.outline[data-v-17a5e62e]{padding:8px 0;background-color:var(--vp-c-bg-soft)}.flyout-enter-active[data-v-17a5e62e]{transition:all .2s ease-out}.flyout-leave-active[data-v-17a5e62e]{transition:all .15s ease-in}.flyout-enter-from[data-v-17a5e62e],.flyout-leave-to[data-v-17a5e62e]{opacity:0;transform:translateY(-16px)}.VPLocalNav[data-v-a6f0e41e]{position:sticky;top:0;left:0;z-index:var(--vp-z-index-local-nav);border-bottom:1px solid var(--vp-c-gutter);padding-top:var(--vp-layout-top-height, 0px);width:100%;background-color:var(--vp-local-nav-bg-color)}.VPLocalNav.fixed[data-v-a6f0e41e]{position:fixed}@media (min-width: 960px){.VPLocalNav[data-v-a6f0e41e]{top:var(--vp-nav-height)}.VPLocalNav.has-sidebar[data-v-a6f0e41e]{padding-left:var(--vp-sidebar-width)}.VPLocalNav.empty[data-v-a6f0e41e]{display:none}}@media (min-width: 1280px){.VPLocalNav[data-v-a6f0e41e]{display:none}}@media (min-width: 1440px){.VPLocalNav.has-sidebar[data-v-a6f0e41e]{padding-left:calc((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width))}}.container[data-v-a6f0e41e]{display:flex;justify-content:space-between;align-items:center}.menu[data-v-a6f0e41e]{display:flex;align-items:center;padding:12px 24px 11px;line-height:24px;font-size:12px;font-weight:500;color:var(--vp-c-text-2);transition:color .5s}.menu[data-v-a6f0e41e]:hover{color:var(--vp-c-text-1);transition:color .25s}@media (min-width: 768px){.menu[data-v-a6f0e41e]{padding:0 32px}}@media (min-width: 960px){.menu[data-v-a6f0e41e]{display:none}}.menu-icon[data-v-a6f0e41e]{margin-right:8px;font-size:14px}.VPOutlineDropdown[data-v-a6f0e41e]{padding:12px 24px 11px}@media (min-width: 768px){.VPOutlineDropdown[data-v-a6f0e41e]{padding:12px 32px 11px}}.VPSwitch[data-v-1d5665e3]{position:relative;border-radius:11px;display:block;width:40px;height:22px;flex-shrink:0;border:1px solid var(--vp-input-border-color);background-color:var(--vp-input-switch-bg-color);transition:border-color .25s!important}.VPSwitch[data-v-1d5665e3]:hover{border-color:var(--vp-c-brand-1)}.check[data-v-1d5665e3]{position:absolute;top:1px;left:1px;width:18px;height:18px;border-radius:50%;background-color:var(--vp-c-neutral-inverse);box-shadow:var(--vp-shadow-1);transition:transform .25s!important}.icon[data-v-1d5665e3]{position:relative;display:block;width:18px;height:18px;border-radius:50%;overflow:hidden}.icon[data-v-1d5665e3] [class^=vpi-]{position:absolute;top:3px;left:3px;width:12px;height:12px;color:var(--vp-c-text-2)}.dark .icon[data-v-1d5665e3] [class^=vpi-]{color:var(--vp-c-text-1);transition:opacity .25s!important}.sun[data-v-5337faa4]{opacity:1}.moon[data-v-5337faa4],.dark .sun[data-v-5337faa4]{opacity:0}.dark .moon[data-v-5337faa4]{opacity:1}.dark .VPSwitchAppearance[data-v-5337faa4] .check{transform:translate(18px)}.VPNavBarAppearance[data-v-6c893767]{display:none}@media (min-width: 1280px){.VPNavBarAppearance[data-v-6c893767]{display:flex;align-items:center}}.VPMenuGroup+.VPMenuLink[data-v-35975db6]{margin:12px -12px 0;border-top:1px solid var(--vp-c-divider);padding:12px 12px 0}.link[data-v-35975db6]{display:block;border-radius:6px;padding:0 12px;line-height:32px;font-size:14px;font-weight:500;color:var(--vp-c-text-1);white-space:nowrap;transition:background-color .25s,color .25s}.link[data-v-35975db6]:hover{color:var(--vp-c-brand-1);background-color:var(--vp-c-default-soft)}.link.active[data-v-35975db6]{color:var(--vp-c-brand-1)}.VPMenuGroup[data-v-69e747b5]{margin:12px -12px 0;border-top:1px solid var(--vp-c-divider);padding:12px 12px 0}.VPMenuGroup[data-v-69e747b5]:first-child{margin-top:0;border-top:0;padding-top:0}.VPMenuGroup+.VPMenuGroup[data-v-69e747b5]{margin-top:12px;border-top:1px solid var(--vp-c-divider)}.title[data-v-69e747b5]{padding:0 12px;line-height:32px;font-size:14px;font-weight:600;color:var(--vp-c-text-2);white-space:nowrap;transition:color .25s}.VPMenu[data-v-b98bc113]{border-radius:12px;padding:12px;min-width:128px;border:1px solid var(--vp-c-divider);background-color:var(--vp-c-bg-elv);box-shadow:var(--vp-shadow-3);transition:background-color .5s;max-height:calc(100vh - var(--vp-nav-height));overflow-y:auto}.VPMenu[data-v-b98bc113] .group{margin:0 -12px;padding:0 12px 12px}.VPMenu[data-v-b98bc113] .group+.group{border-top:1px solid var(--vp-c-divider);padding:11px 12px 12px}.VPMenu[data-v-b98bc113] .group:last-child{padding-bottom:0}.VPMenu[data-v-b98bc113] .group+.item{border-top:1px solid var(--vp-c-divider);padding:11px 16px 0}.VPMenu[data-v-b98bc113] .item{padding:0 16px;white-space:nowrap}.VPMenu[data-v-b98bc113] .label{flex-grow:1;line-height:28px;font-size:12px;font-weight:500;color:var(--vp-c-text-2);transition:color .5s}.VPMenu[data-v-b98bc113] .action{padding-left:24px}.VPFlyout[data-v-cf11d7a2]{position:relative}.VPFlyout[data-v-cf11d7a2]:hover{color:var(--vp-c-brand-1);transition:color .25s}.VPFlyout:hover .text[data-v-cf11d7a2]{color:var(--vp-c-text-2)}.VPFlyout:hover .icon[data-v-cf11d7a2]{fill:var(--vp-c-text-2)}.VPFlyout.active .text[data-v-cf11d7a2]{color:var(--vp-c-brand-1)}.VPFlyout.active:hover .text[data-v-cf11d7a2]{color:var(--vp-c-brand-2)}.button[aria-expanded=false]+.menu[data-v-cf11d7a2]{opacity:0;visibility:hidden;transform:translateY(0)}.VPFlyout:hover .menu[data-v-cf11d7a2],.button[aria-expanded=true]+.menu[data-v-cf11d7a2]{opacity:1;visibility:visible;transform:translateY(0)}.button[data-v-cf11d7a2]{display:flex;align-items:center;padding:0 12px;height:var(--vp-nav-height);color:var(--vp-c-text-1);transition:color .5s}.text[data-v-cf11d7a2]{display:flex;align-items:center;line-height:var(--vp-nav-height);font-size:14px;font-weight:500;color:var(--vp-c-text-1);transition:color .25s}.option-icon[data-v-cf11d7a2]{margin-right:0;font-size:16px}.text-icon[data-v-cf11d7a2]{margin-left:4px;font-size:14px}.icon[data-v-cf11d7a2]{font-size:20px;transition:fill .25s}.menu[data-v-cf11d7a2]{position:absolute;top:calc(var(--vp-nav-height) / 2 + 20px);right:0;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s,transform .25s}.VPSocialLink[data-v-bd121fe5]{display:flex;justify-content:center;align-items:center;width:36px;height:36px;color:var(--vp-c-text-2);transition:color .5s}.VPSocialLink[data-v-bd121fe5]:hover{color:var(--vp-c-text-1);transition:color .25s}.VPSocialLink[data-v-bd121fe5]>svg,.VPSocialLink[data-v-bd121fe5]>[class^=vpi-social-]{width:20px;height:20px;fill:currentColor}.VPSocialLinks[data-v-7bc22406]{display:flex;justify-content:center}.VPNavBarExtra[data-v-bb2aa2f0]{display:none;margin-right:-12px}@media (min-width: 768px){.VPNavBarExtra[data-v-bb2aa2f0]{display:block}}@media (min-width: 1280px){.VPNavBarExtra[data-v-bb2aa2f0]{display:none}}.trans-title[data-v-bb2aa2f0]{padding:0 24px 0 12px;line-height:32px;font-size:14px;font-weight:700;color:var(--vp-c-text-1)}.item.appearance[data-v-bb2aa2f0],.item.social-links[data-v-bb2aa2f0]{display:flex;align-items:center;padding:0 12px}.item.appearance[data-v-bb2aa2f0]{min-width:176px}.appearance-action[data-v-bb2aa2f0]{margin-right:-2px}.social-links-list[data-v-bb2aa2f0]{margin:-4px -8px}.VPNavBarHamburger[data-v-e5dd9c1c]{display:flex;justify-content:center;align-items:center;width:48px;height:var(--vp-nav-height)}@media (min-width: 768px){.VPNavBarHamburger[data-v-e5dd9c1c]{display:none}}.container[data-v-e5dd9c1c]{position:relative;width:16px;height:14px;overflow:hidden}.VPNavBarHamburger:hover .top[data-v-e5dd9c1c]{top:0;left:0;transform:translate(4px)}.VPNavBarHamburger:hover .middle[data-v-e5dd9c1c]{top:6px;left:0;transform:translate(0)}.VPNavBarHamburger:hover .bottom[data-v-e5dd9c1c]{top:12px;left:0;transform:translate(8px)}.VPNavBarHamburger.active .top[data-v-e5dd9c1c]{top:6px;transform:translate(0) rotate(225deg)}.VPNavBarHamburger.active .middle[data-v-e5dd9c1c]{top:6px;transform:translate(16px)}.VPNavBarHamburger.active .bottom[data-v-e5dd9c1c]{top:6px;transform:translate(0) rotate(135deg)}.VPNavBarHamburger.active:hover .top[data-v-e5dd9c1c],.VPNavBarHamburger.active:hover .middle[data-v-e5dd9c1c],.VPNavBarHamburger.active:hover .bottom[data-v-e5dd9c1c]{background-color:var(--vp-c-text-2);transition:top .25s,background-color .25s,transform .25s}.top[data-v-e5dd9c1c],.middle[data-v-e5dd9c1c],.bottom[data-v-e5dd9c1c]{position:absolute;width:16px;height:2px;background-color:var(--vp-c-text-1);transition:top .25s,background-color .5s,transform .25s}.top[data-v-e5dd9c1c]{top:0;left:0;transform:translate(0)}.middle[data-v-e5dd9c1c]{top:6px;left:0;transform:translate(8px)}.bottom[data-v-e5dd9c1c]{top:12px;left:0;transform:translate(4px)}.VPNavBarMenuLink[data-v-e56f3d57]{display:flex;align-items:center;padding:0 12px;line-height:var(--vp-nav-height);font-size:14px;font-weight:500;color:var(--vp-c-text-1);transition:color .25s}.VPNavBarMenuLink.active[data-v-e56f3d57],.VPNavBarMenuLink[data-v-e56f3d57]:hover{color:var(--vp-c-brand-1)}.VPNavBarMenu[data-v-dc692963]{display:none}@media (min-width: 768px){.VPNavBarMenu[data-v-dc692963]{display:flex}}/*! @docsearch/css 3.8.0 | MIT License | © Algolia, Inc. and contributors | https://docsearch.algolia.com */:root{--docsearch-primary-color:#5468ff;--docsearch-text-color:#1c1e21;--docsearch-spacing:12px;--docsearch-icon-stroke-width:1.4;--docsearch-highlight-color:var(--docsearch-primary-color);--docsearch-muted-color:#969faf;--docsearch-container-background:rgba(101,108,133,.8);--docsearch-logo-color:#5468ff;--docsearch-modal-width:560px;--docsearch-modal-height:600px;--docsearch-modal-background:#f5f6f7;--docsearch-modal-shadow:inset 1px 1px 0 0 hsla(0,0%,100%,.5),0 3px 8px 0 #555a64;--docsearch-searchbox-height:56px;--docsearch-searchbox-background:#ebedf0;--docsearch-searchbox-focus-background:#fff;--docsearch-searchbox-shadow:inset 0 0 0 2px var(--docsearch-primary-color);--docsearch-hit-height:56px;--docsearch-hit-color:#444950;--docsearch-hit-active-color:#fff;--docsearch-hit-background:#fff;--docsearch-hit-shadow:0 1px 3px 0 #d4d9e1;--docsearch-key-gradient:linear-gradient(-225deg,#d5dbe4,#f8f8f8);--docsearch-key-shadow:inset 0 -2px 0 0 #cdcde6,inset 0 0 1px 1px #fff,0 1px 2px 1px rgba(30,35,90,.4);--docsearch-key-pressed-shadow:inset 0 -2px 0 0 #cdcde6,inset 0 0 1px 1px #fff,0 1px 1px 0 rgba(30,35,90,.4);--docsearch-footer-height:44px;--docsearch-footer-background:#fff;--docsearch-footer-shadow:0 -1px 0 0 #e0e3e8,0 -3px 6px 0 rgba(69,98,155,.12)}html[data-theme=dark]{--docsearch-text-color:#f5f6f7;--docsearch-container-background:rgba(9,10,17,.8);--docsearch-modal-background:#15172a;--docsearch-modal-shadow:inset 1px 1px 0 0 #2c2e40,0 3px 8px 0 #000309;--docsearch-searchbox-background:#090a11;--docsearch-searchbox-focus-background:#000;--docsearch-hit-color:#bec3c9;--docsearch-hit-shadow:none;--docsearch-hit-background:#090a11;--docsearch-key-gradient:linear-gradient(-26.5deg,#565872,#31355b);--docsearch-key-shadow:inset 0 -2px 0 0 #282d55,inset 0 0 1px 1px #51577d,0 2px 2px 0 rgba(3,4,9,.3);--docsearch-key-pressed-shadow:inset 0 -2px 0 0 #282d55,inset 0 0 1px 1px #51577d,0 1px 1px 0 #0304094d;--docsearch-footer-background:#1e2136;--docsearch-footer-shadow:inset 0 1px 0 0 rgba(73,76,106,.5),0 -4px 8px 0 rgba(0,0,0,.2);--docsearch-logo-color:#fff;--docsearch-muted-color:#7f8497}.DocSearch-Button{align-items:center;background:var(--docsearch-searchbox-background);border:0;border-radius:40px;color:var(--docsearch-muted-color);cursor:pointer;display:flex;font-weight:500;height:36px;justify-content:space-between;margin:0 0 0 16px;padding:0 8px;-webkit-user-select:none;user-select:none}.DocSearch-Button:active,.DocSearch-Button:focus,.DocSearch-Button:hover{background:var(--docsearch-searchbox-focus-background);box-shadow:var(--docsearch-searchbox-shadow);color:var(--docsearch-text-color);outline:none}.DocSearch-Button-Container{align-items:center;display:flex}.DocSearch-Search-Icon{stroke-width:1.6}.DocSearch-Button .DocSearch-Search-Icon{color:var(--docsearch-text-color)}.DocSearch-Button-Placeholder{font-size:1rem;padding:0 12px 0 6px}.DocSearch-Button-Keys{display:flex;min-width:calc(40px + .8em)}.DocSearch-Button-Key{align-items:center;background:var(--docsearch-key-gradient);border:0;border-radius:3px;box-shadow:var(--docsearch-key-shadow);color:var(--docsearch-muted-color);display:flex;height:18px;justify-content:center;margin-right:.4em;padding:0 0 2px;position:relative;top:-1px;width:20px}.DocSearch-Button-Key--pressed{box-shadow:var(--docsearch-key-pressed-shadow);transform:translate3d(0,1px,0)}@media (max-width:768px){.DocSearch-Button-Keys,.DocSearch-Button-Placeholder{display:none}}.DocSearch--active{overflow:hidden!important}.DocSearch-Container,.DocSearch-Container *{box-sizing:border-box}.DocSearch-Container{background-color:var(--docsearch-container-background);height:100vh;left:0;position:fixed;top:0;width:100vw;z-index:200}.DocSearch-Container a{text-decoration:none}.DocSearch-Link{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;color:var(--docsearch-highlight-color);cursor:pointer;font:inherit;margin:0;padding:0}.DocSearch-Modal{background:var(--docsearch-modal-background);border-radius:6px;box-shadow:var(--docsearch-modal-shadow);flex-direction:column;margin:60px auto auto;max-width:var(--docsearch-modal-width);position:relative}.DocSearch-SearchBar{display:flex;padding:var(--docsearch-spacing) var(--docsearch-spacing) 0}.DocSearch-Form{align-items:center;background:var(--docsearch-searchbox-focus-background);border-radius:4px;box-shadow:var(--docsearch-searchbox-shadow);display:flex;height:var(--docsearch-searchbox-height);margin:0;padding:0 var(--docsearch-spacing);position:relative;width:100%}.DocSearch-Input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:var(--docsearch-text-color);flex:1;font:inherit;font-size:1.2em;height:100%;outline:none;padding:0 0 0 8px;width:80%}.DocSearch-Input::placeholder{color:var(--docsearch-muted-color);opacity:1}.DocSearch-Input::-webkit-search-cancel-button,.DocSearch-Input::-webkit-search-decoration,.DocSearch-Input::-webkit-search-results-button,.DocSearch-Input::-webkit-search-results-decoration{display:none}.DocSearch-LoadingIndicator,.DocSearch-MagnifierLabel,.DocSearch-Reset{margin:0;padding:0}.DocSearch-MagnifierLabel,.DocSearch-Reset{align-items:center;color:var(--docsearch-highlight-color);display:flex;justify-content:center}.DocSearch-Container--Stalled .DocSearch-MagnifierLabel,.DocSearch-LoadingIndicator{display:none}.DocSearch-Container--Stalled .DocSearch-LoadingIndicator{align-items:center;color:var(--docsearch-highlight-color);display:flex;justify-content:center}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Reset{animation:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;border-radius:50%;color:var(--docsearch-icon-color);cursor:pointer;right:0;stroke-width:var(--docsearch-icon-stroke-width)}}.DocSearch-Reset{animation:fade-in .1s ease-in forwards;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;border-radius:50%;color:var(--docsearch-icon-color);cursor:pointer;padding:2px;right:0;stroke-width:var(--docsearch-icon-stroke-width)}.DocSearch-Reset[hidden]{display:none}.DocSearch-Reset:hover{color:var(--docsearch-highlight-color)}.DocSearch-LoadingIndicator svg,.DocSearch-MagnifierLabel svg{height:24px;width:24px}.DocSearch-Cancel{display:none}.DocSearch-Dropdown{max-height:calc(var(--docsearch-modal-height) - var(--docsearch-searchbox-height) - var(--docsearch-spacing) - var(--docsearch-footer-height));min-height:var(--docsearch-spacing);overflow-y:auto;overflow-y:overlay;padding:0 var(--docsearch-spacing);scrollbar-color:var(--docsearch-muted-color) var(--docsearch-modal-background);scrollbar-width:thin}.DocSearch-Dropdown::-webkit-scrollbar{width:12px}.DocSearch-Dropdown::-webkit-scrollbar-track{background:transparent}.DocSearch-Dropdown::-webkit-scrollbar-thumb{background-color:var(--docsearch-muted-color);border:3px solid var(--docsearch-modal-background);border-radius:20px}.DocSearch-Dropdown ul{list-style:none;margin:0;padding:0}.DocSearch-Label{font-size:.75em;line-height:1.6em}.DocSearch-Help,.DocSearch-Label{color:var(--docsearch-muted-color)}.DocSearch-Help{font-size:.9em;margin:0;-webkit-user-select:none;user-select:none}.DocSearch-Title{font-size:1.2em}.DocSearch-Logo a{display:flex}.DocSearch-Logo svg{color:var(--docsearch-logo-color);margin-left:8px}.DocSearch-Hits:last-of-type{margin-bottom:24px}.DocSearch-Hits mark{background:none;color:var(--docsearch-highlight-color)}.DocSearch-HitsFooter{color:var(--docsearch-muted-color);display:flex;font-size:.85em;justify-content:center;margin-bottom:var(--docsearch-spacing);padding:var(--docsearch-spacing)}.DocSearch-HitsFooter a{border-bottom:1px solid;color:inherit}.DocSearch-Hit{border-radius:4px;display:flex;padding-bottom:4px;position:relative}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit--deleting{transition:none}}.DocSearch-Hit--deleting{opacity:0;transition:all .25s linear}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit--favoriting{transition:none}}.DocSearch-Hit--favoriting{transform:scale(0);transform-origin:top center;transition:all .25s linear;transition-delay:.25s}.DocSearch-Hit a{background:var(--docsearch-hit-background);border-radius:4px;box-shadow:var(--docsearch-hit-shadow);display:block;padding-left:var(--docsearch-spacing);width:100%}.DocSearch-Hit-source{background:var(--docsearch-modal-background);color:var(--docsearch-highlight-color);font-size:.85em;font-weight:600;line-height:32px;margin:0 -4px;padding:8px 4px 0;position:sticky;top:0;z-index:10}.DocSearch-Hit-Tree{color:var(--docsearch-muted-color);height:var(--docsearch-hit-height);opacity:.5;stroke-width:var(--docsearch-icon-stroke-width);width:24px}.DocSearch-Hit[aria-selected=true] a{background-color:var(--docsearch-highlight-color)}.DocSearch-Hit[aria-selected=true] mark{text-decoration:underline}.DocSearch-Hit-Container{align-items:center;color:var(--docsearch-hit-color);display:flex;flex-direction:row;height:var(--docsearch-hit-height);padding:0 var(--docsearch-spacing) 0 0}.DocSearch-Hit-icon{height:20px;width:20px}.DocSearch-Hit-action,.DocSearch-Hit-icon{color:var(--docsearch-muted-color);stroke-width:var(--docsearch-icon-stroke-width)}.DocSearch-Hit-action{align-items:center;display:flex;height:22px;width:22px}.DocSearch-Hit-action svg{display:block;height:18px;width:18px}.DocSearch-Hit-action+.DocSearch-Hit-action{margin-left:6px}.DocSearch-Hit-action-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;border-radius:50%;color:inherit;cursor:pointer;padding:2px}svg.DocSearch-Hit-Select-Icon{display:none}.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-Select-Icon{display:block}.DocSearch-Hit-action-button:focus,.DocSearch-Hit-action-button:hover{background:#0003;transition:background-color .1s ease-in}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit-action-button:focus,.DocSearch-Hit-action-button:hover{transition:none}}.DocSearch-Hit-action-button:focus path,.DocSearch-Hit-action-button:hover path{fill:#fff}.DocSearch-Hit-content-wrapper{display:flex;flex:1 1 auto;flex-direction:column;font-weight:500;justify-content:center;line-height:1.2em;margin:0 8px;overflow-x:hidden;position:relative;text-overflow:ellipsis;white-space:nowrap;width:80%}.DocSearch-Hit-title{font-size:.9em}.DocSearch-Hit-path{color:var(--docsearch-muted-color);font-size:.75em}.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-Tree,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-action,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-icon,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-path,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-text,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-title,.DocSearch-Hit[aria-selected=true] mark{color:var(--docsearch-hit-active-color)!important}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit-action-button:focus,.DocSearch-Hit-action-button:hover{background:#0003;transition:none}}.DocSearch-ErrorScreen,.DocSearch-NoResults,.DocSearch-StartScreen{font-size:.9em;margin:0 auto;padding:36px 0;text-align:center;width:80%}.DocSearch-Screen-Icon{color:var(--docsearch-muted-color);padding-bottom:12px}.DocSearch-NoResults-Prefill-List{display:inline-block;padding-bottom:24px;text-align:left}.DocSearch-NoResults-Prefill-List ul{display:inline-block;padding:8px 0 0}.DocSearch-NoResults-Prefill-List li{list-style-position:inside;list-style-type:"» "}.DocSearch-Prefill{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;border-radius:1em;color:var(--docsearch-highlight-color);cursor:pointer;display:inline-block;font-size:1em;font-weight:700;padding:0}.DocSearch-Prefill:focus,.DocSearch-Prefill:hover{outline:none;text-decoration:underline}.DocSearch-Footer{align-items:center;background:var(--docsearch-footer-background);border-radius:0 0 8px 8px;box-shadow:var(--docsearch-footer-shadow);display:flex;flex-direction:row-reverse;flex-shrink:0;height:var(--docsearch-footer-height);justify-content:space-between;padding:0 var(--docsearch-spacing);position:relative;-webkit-user-select:none;user-select:none;width:100%;z-index:300}.DocSearch-Commands{color:var(--docsearch-muted-color);display:flex;list-style:none;margin:0;padding:0}.DocSearch-Commands li{align-items:center;display:flex}.DocSearch-Commands li:not(:last-of-type){margin-right:.8em}.DocSearch-Commands-Key{align-items:center;background:var(--docsearch-key-gradient);border:0;border-radius:2px;box-shadow:var(--docsearch-key-shadow);color:var(--docsearch-muted-color);display:flex;height:18px;justify-content:center;margin-right:.4em;padding:0 0 1px;width:20px}.DocSearch-VisuallyHiddenForAccessibility{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}@media (max-width:768px){:root{--docsearch-spacing:10px;--docsearch-footer-height:40px}.DocSearch-Dropdown{height:100%}.DocSearch-Container{height:100vh;height:-webkit-fill-available;height:calc(var(--docsearch-vh, 1vh)*100);position:absolute}.DocSearch-Footer{border-radius:0;bottom:0;position:absolute}.DocSearch-Hit-content-wrapper{display:flex;position:relative;width:80%}.DocSearch-Modal{border-radius:0;box-shadow:none;height:100vh;height:-webkit-fill-available;height:calc(var(--docsearch-vh, 1vh)*100);margin:0;max-width:100%;width:100%}.DocSearch-Dropdown{max-height:calc(var(--docsearch-vh, 1vh)*100 - var(--docsearch-searchbox-height) - var(--docsearch-spacing) - var(--docsearch-footer-height))}.DocSearch-Cancel{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;color:var(--docsearch-highlight-color);cursor:pointer;display:inline-block;flex:none;font:inherit;font-size:1em;font-weight:500;margin-left:var(--docsearch-spacing);outline:none;overflow:hidden;padding:0;-webkit-user-select:none;user-select:none;white-space:nowrap}.DocSearch-Commands,.DocSearch-Hit-Tree{display:none}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}[class*=DocSearch]{--docsearch-primary-color: var(--vp-c-brand-1);--docsearch-highlight-color: var(--docsearch-primary-color);--docsearch-text-color: var(--vp-c-text-1);--docsearch-muted-color: var(--vp-c-text-2);--docsearch-searchbox-shadow: none;--docsearch-searchbox-background: transparent;--docsearch-searchbox-focus-background: transparent;--docsearch-key-gradient: transparent;--docsearch-key-shadow: none;--docsearch-modal-background: var(--vp-c-bg-soft);--docsearch-footer-background: var(--vp-c-bg)}.dark [class*=DocSearch]{--docsearch-modal-shadow: none;--docsearch-footer-shadow: none;--docsearch-logo-color: var(--vp-c-text-2);--docsearch-hit-background: var(--vp-c-default-soft);--docsearch-hit-color: var(--vp-c-text-2);--docsearch-hit-shadow: none}.DocSearch-Button{display:flex;justify-content:center;align-items:center;margin:0;padding:0;width:48px;height:55px;background:transparent;transition:border-color .25s}.DocSearch-Button:hover{background:transparent}.DocSearch-Button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}.DocSearch-Button-Key--pressed{transform:none;box-shadow:none}.DocSearch-Button:focus:not(:focus-visible){outline:none!important}@media (min-width: 768px){.DocSearch-Button{justify-content:flex-start;border:1px solid transparent;border-radius:8px;padding:0 10px 0 12px;width:100%;height:40px;background-color:var(--vp-c-bg-alt)}.DocSearch-Button:hover{border-color:var(--vp-c-brand-1);background:var(--vp-c-bg-alt)}}.DocSearch-Button .DocSearch-Button-Container{display:flex;align-items:center}.DocSearch-Button .DocSearch-Search-Icon{position:relative;width:16px;height:16px;color:var(--vp-c-text-1);fill:currentColor;transition:color .5s}.DocSearch-Button:hover .DocSearch-Search-Icon{color:var(--vp-c-text-1)}@media (min-width: 768px){.DocSearch-Button .DocSearch-Search-Icon{top:1px;margin-right:8px;width:14px;height:14px;color:var(--vp-c-text-2)}}.DocSearch-Button .DocSearch-Button-Placeholder{display:none;margin-top:2px;padding:0 16px 0 0;font-size:13px;font-weight:500;color:var(--vp-c-text-2);transition:color .5s}.DocSearch-Button:hover .DocSearch-Button-Placeholder{color:var(--vp-c-text-1)}@media (min-width: 768px){.DocSearch-Button .DocSearch-Button-Placeholder{display:inline-block}}.DocSearch-Button .DocSearch-Button-Keys{direction:ltr;display:none;min-width:auto}@media (min-width: 768px){.DocSearch-Button .DocSearch-Button-Keys{display:flex;align-items:center}}.DocSearch-Button .DocSearch-Button-Key{display:block;margin:2px 0 0;border:1px solid var(--vp-c-divider);border-right:none;border-radius:4px 0 0 4px;padding-left:6px;min-width:0;width:auto;height:22px;line-height:22px;font-family:var(--vp-font-family-base);font-size:12px;font-weight:500;transition:color .5s,border-color .5s}.DocSearch-Button .DocSearch-Button-Key+.DocSearch-Button-Key{border-right:1px solid var(--vp-c-divider);border-left:none;border-radius:0 4px 4px 0;padding-left:2px;padding-right:6px}.DocSearch-Button .DocSearch-Button-Key:first-child{font-size:0!important}.DocSearch-Button .DocSearch-Button-Key:first-child:after{content:"Ctrl";font-size:12px;letter-spacing:normal;color:var(--docsearch-muted-color)}.mac .DocSearch-Button .DocSearch-Button-Key:first-child:after{content:"⌘"}.DocSearch-Button .DocSearch-Button-Key:first-child>*{display:none}.DocSearch-Search-Icon{--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke-width='1.6' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' d='m14.386 14.386 4.088 4.088-4.088-4.088A7.533 7.533 0 1 1 3.733 3.733a7.533 7.533 0 0 1 10.653 10.653z'/%3E%3C/svg%3E")}.VPNavBarSearch{display:flex;align-items:center}@media (min-width: 768px){.VPNavBarSearch{flex-grow:1;padding-left:24px}}@media (min-width: 960px){.VPNavBarSearch{padding-left:32px}}.dark .DocSearch-Footer{border-top:1px solid var(--vp-c-divider)}.DocSearch-Form{border:1px solid var(--vp-c-brand-1);background-color:var(--vp-c-white)}.dark .DocSearch-Form{background-color:var(--vp-c-default-soft)}.DocSearch-Screen-Icon>svg{margin:auto}.VPNavBarSocialLinks[data-v-0394ad82]{display:none}@media (min-width: 1280px){.VPNavBarSocialLinks[data-v-0394ad82]{display:flex;align-items:center}}.title[data-v-1168a8e4]{display:flex;align-items:center;border-bottom:1px solid transparent;width:100%;height:var(--vp-nav-height);font-size:16px;font-weight:600;color:var(--vp-c-text-1);transition:opacity .25s}@media (min-width: 960px){.title[data-v-1168a8e4]{flex-shrink:0}.VPNavBarTitle.has-sidebar .title[data-v-1168a8e4]{border-bottom-color:var(--vp-c-divider)}}[data-v-1168a8e4] .logo{margin-right:8px;height:var(--vp-nav-logo-height)}.VPNavBarTranslations[data-v-88af2de4]{display:none}@media (min-width: 1280px){.VPNavBarTranslations[data-v-88af2de4]{display:flex;align-items:center}}.title[data-v-88af2de4]{padding:0 24px 0 12px;line-height:32px;font-size:14px;font-weight:700;color:var(--vp-c-text-1)}.VPNavBar[data-v-6aa21345]{position:relative;height:var(--vp-nav-height);pointer-events:none;white-space:nowrap;transition:background-color .25s}.VPNavBar.screen-open[data-v-6aa21345]{transition:none;background-color:var(--vp-nav-bg-color);border-bottom:1px solid var(--vp-c-divider)}.VPNavBar[data-v-6aa21345]:not(.home){background-color:var(--vp-nav-bg-color)}@media (min-width: 960px){.VPNavBar[data-v-6aa21345]:not(.home){background-color:transparent}.VPNavBar[data-v-6aa21345]:not(.has-sidebar):not(.home.top){background-color:var(--vp-nav-bg-color)}}.wrapper[data-v-6aa21345]{padding:0 8px 0 24px}@media (min-width: 768px){.wrapper[data-v-6aa21345]{padding:0 32px}}@media (min-width: 960px){.VPNavBar.has-sidebar .wrapper[data-v-6aa21345]{padding:0}}.container[data-v-6aa21345]{display:flex;justify-content:space-between;margin:0 auto;max-width:calc(var(--vp-layout-max-width) - 64px);height:var(--vp-nav-height);pointer-events:none}.container>.title[data-v-6aa21345],.container>.content[data-v-6aa21345]{pointer-events:none}.container[data-v-6aa21345] *{pointer-events:auto}@media (min-width: 960px){.VPNavBar.has-sidebar .container[data-v-6aa21345]{max-width:100%}}.title[data-v-6aa21345]{flex-shrink:0;height:calc(var(--vp-nav-height) - 1px);transition:background-color .5s}@media (min-width: 960px){.VPNavBar.has-sidebar .title[data-v-6aa21345]{position:absolute;top:0;left:0;z-index:2;padding:0 32px;width:var(--vp-sidebar-width);height:var(--vp-nav-height);background-color:transparent}}@media (min-width: 1440px){.VPNavBar.has-sidebar .title[data-v-6aa21345]{padding-left:max(32px,calc((100% - (var(--vp-layout-max-width) - 64px)) / 2));width:calc((100% - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) - 32px)}}.content[data-v-6aa21345]{flex-grow:1}@media (min-width: 960px){.VPNavBar.has-sidebar .content[data-v-6aa21345]{position:relative;z-index:1;padding-right:32px;padding-left:var(--vp-sidebar-width)}}@media (min-width: 1440px){.VPNavBar.has-sidebar .content[data-v-6aa21345]{padding-right:calc((100vw - var(--vp-layout-max-width)) / 2 + 32px);padding-left:calc((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width))}}.content-body[data-v-6aa21345]{display:flex;justify-content:flex-end;align-items:center;height:var(--vp-nav-height);transition:background-color .5s}@media (min-width: 960px){.VPNavBar:not(.home.top) .content-body[data-v-6aa21345]{position:relative;background-color:var(--vp-nav-bg-color)}.VPNavBar:not(.has-sidebar):not(.home.top) .content-body[data-v-6aa21345]{background-color:transparent}}@media (max-width: 767px){.content-body[data-v-6aa21345]{column-gap:.5rem}}.menu+.translations[data-v-6aa21345]:before,.menu+.appearance[data-v-6aa21345]:before,.menu+.social-links[data-v-6aa21345]:before,.translations+.appearance[data-v-6aa21345]:before,.appearance+.social-links[data-v-6aa21345]:before{margin-right:8px;margin-left:8px;width:1px;height:24px;background-color:var(--vp-c-divider);content:""}.menu+.appearance[data-v-6aa21345]:before,.translations+.appearance[data-v-6aa21345]:before{margin-right:16px}.appearance+.social-links[data-v-6aa21345]:before{margin-left:16px}.social-links[data-v-6aa21345]{margin-right:-8px}.divider[data-v-6aa21345]{width:100%;height:1px}@media (min-width: 960px){.VPNavBar.has-sidebar .divider[data-v-6aa21345]{padding-left:var(--vp-sidebar-width)}}@media (min-width: 1440px){.VPNavBar.has-sidebar .divider[data-v-6aa21345]{padding-left:calc((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width))}}.divider-line[data-v-6aa21345]{width:100%;height:1px;transition:background-color .5s}.VPNavBar:not(.home) .divider-line[data-v-6aa21345]{background-color:var(--vp-c-gutter)}@media (min-width: 960px){.VPNavBar:not(.home.top) .divider-line[data-v-6aa21345]{background-color:var(--vp-c-gutter)}.VPNavBar:not(.has-sidebar):not(.home.top) .divider[data-v-6aa21345]{background-color:var(--vp-c-gutter)}}.VPNavScreenAppearance[data-v-b44890b2]{display:flex;justify-content:space-between;align-items:center;border-radius:8px;padding:12px 14px 12px 16px;background-color:var(--vp-c-bg-soft)}.text[data-v-b44890b2]{line-height:24px;font-size:12px;font-weight:500;color:var(--vp-c-text-2)}.VPNavScreenMenuLink[data-v-df37e6dd]{display:block;border-bottom:1px solid var(--vp-c-divider);padding:12px 0 11px;line-height:24px;font-size:14px;font-weight:500;color:var(--vp-c-text-1);transition:border-color .25s,color .25s}.VPNavScreenMenuLink[data-v-df37e6dd]:hover{color:var(--vp-c-brand-1)}.VPNavScreenMenuGroupLink[data-v-3e9c20e4]{display:block;margin-left:12px;line-height:32px;font-size:14px;font-weight:400;color:var(--vp-c-text-1);transition:color .25s}.VPNavScreenMenuGroupLink[data-v-3e9c20e4]:hover{color:var(--vp-c-brand-1)}.VPNavScreenMenuGroupSection[data-v-8133b170]{display:block}.title[data-v-8133b170]{line-height:32px;font-size:13px;font-weight:700;color:var(--vp-c-text-2);transition:color .25s}.VPNavScreenMenuGroup[data-v-b9ab8c58]{border-bottom:1px solid var(--vp-c-divider);height:48px;overflow:hidden;transition:border-color .5s}.VPNavScreenMenuGroup .items[data-v-b9ab8c58]{visibility:hidden}.VPNavScreenMenuGroup.open .items[data-v-b9ab8c58]{visibility:visible}.VPNavScreenMenuGroup.open[data-v-b9ab8c58]{padding-bottom:10px;height:auto}.VPNavScreenMenuGroup.open .button[data-v-b9ab8c58]{padding-bottom:6px;color:var(--vp-c-brand-1)}.VPNavScreenMenuGroup.open .button-icon[data-v-b9ab8c58]{transform:rotate(45deg)}.button[data-v-b9ab8c58]{display:flex;justify-content:space-between;align-items:center;padding:12px 4px 11px 0;width:100%;line-height:24px;font-size:14px;font-weight:500;color:var(--vp-c-text-1);transition:color .25s}.button[data-v-b9ab8c58]:hover{color:var(--vp-c-brand-1)}.button-icon[data-v-b9ab8c58]{transition:transform .25s}.group[data-v-b9ab8c58]:first-child{padding-top:0}.group+.group[data-v-b9ab8c58],.group+.item[data-v-b9ab8c58]{padding-top:4px}.VPNavScreenTranslations[data-v-858fe1a4]{height:24px;overflow:hidden}.VPNavScreenTranslations.open[data-v-858fe1a4]{height:auto}.title[data-v-858fe1a4]{display:flex;align-items:center;font-size:14px;font-weight:500;color:var(--vp-c-text-1)}.icon[data-v-858fe1a4]{font-size:16px}.icon.lang[data-v-858fe1a4]{margin-right:8px}.icon.chevron[data-v-858fe1a4]{margin-left:4px}.list[data-v-858fe1a4]{padding:4px 0 0 24px}.link[data-v-858fe1a4]{line-height:32px;font-size:13px;color:var(--vp-c-text-1)}.VPNavScreen[data-v-f2779853]{position:fixed;top:calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px));right:0;bottom:0;left:0;padding:0 32px;width:100%;background-color:var(--vp-nav-screen-bg-color);overflow-y:auto;transition:background-color .25s;pointer-events:auto}.VPNavScreen.fade-enter-active[data-v-f2779853],.VPNavScreen.fade-leave-active[data-v-f2779853]{transition:opacity .25s}.VPNavScreen.fade-enter-active .container[data-v-f2779853],.VPNavScreen.fade-leave-active .container[data-v-f2779853]{transition:transform .25s ease}.VPNavScreen.fade-enter-from[data-v-f2779853],.VPNavScreen.fade-leave-to[data-v-f2779853]{opacity:0}.VPNavScreen.fade-enter-from .container[data-v-f2779853],.VPNavScreen.fade-leave-to .container[data-v-f2779853]{transform:translateY(-8px)}@media (min-width: 768px){.VPNavScreen[data-v-f2779853]{display:none}}.container[data-v-f2779853]{margin:0 auto;padding:24px 0 96px;max-width:288px}.menu+.translations[data-v-f2779853],.menu+.appearance[data-v-f2779853],.translations+.appearance[data-v-f2779853]{margin-top:24px}.menu+.social-links[data-v-f2779853]{margin-top:16px}.appearance+.social-links[data-v-f2779853]{margin-top:16px}.VPNav[data-v-ae24b3ad]{position:relative;top:var(--vp-layout-top-height, 0px);left:0;z-index:var(--vp-z-index-nav);width:100%;pointer-events:none;transition:background-color .5s}@media (min-width: 960px){.VPNav[data-v-ae24b3ad]{position:fixed}}.VPSidebarItem.level-0[data-v-b7550ba0]{padding-bottom:24px}.VPSidebarItem.collapsed.level-0[data-v-b7550ba0]{padding-bottom:10px}.item[data-v-b7550ba0]{position:relative;display:flex;width:100%}.VPSidebarItem.collapsible>.item[data-v-b7550ba0]{cursor:pointer}.indicator[data-v-b7550ba0]{position:absolute;top:6px;bottom:6px;left:-17px;width:2px;border-radius:2px;transition:background-color .25s}.VPSidebarItem.level-2.is-active>.item>.indicator[data-v-b7550ba0],.VPSidebarItem.level-3.is-active>.item>.indicator[data-v-b7550ba0],.VPSidebarItem.level-4.is-active>.item>.indicator[data-v-b7550ba0],.VPSidebarItem.level-5.is-active>.item>.indicator[data-v-b7550ba0]{background-color:var(--vp-c-brand-1)}.link[data-v-b7550ba0]{display:flex;align-items:center;flex-grow:1}.text[data-v-b7550ba0]{flex-grow:1;padding:4px 0;line-height:24px;font-size:14px;transition:color .25s}.VPSidebarItem.level-0 .text[data-v-b7550ba0]{font-weight:700;color:var(--vp-c-text-1)}.VPSidebarItem.level-1 .text[data-v-b7550ba0],.VPSidebarItem.level-2 .text[data-v-b7550ba0],.VPSidebarItem.level-3 .text[data-v-b7550ba0],.VPSidebarItem.level-4 .text[data-v-b7550ba0],.VPSidebarItem.level-5 .text[data-v-b7550ba0]{font-weight:500;color:var(--vp-c-text-2)}.VPSidebarItem.level-0.is-link>.item>.link:hover .text[data-v-b7550ba0],.VPSidebarItem.level-1.is-link>.item>.link:hover .text[data-v-b7550ba0],.VPSidebarItem.level-2.is-link>.item>.link:hover .text[data-v-b7550ba0],.VPSidebarItem.level-3.is-link>.item>.link:hover .text[data-v-b7550ba0],.VPSidebarItem.level-4.is-link>.item>.link:hover .text[data-v-b7550ba0],.VPSidebarItem.level-5.is-link>.item>.link:hover .text[data-v-b7550ba0]{color:var(--vp-c-brand-1)}.VPSidebarItem.level-0.has-active>.item>.text[data-v-b7550ba0],.VPSidebarItem.level-1.has-active>.item>.text[data-v-b7550ba0],.VPSidebarItem.level-2.has-active>.item>.text[data-v-b7550ba0],.VPSidebarItem.level-3.has-active>.item>.text[data-v-b7550ba0],.VPSidebarItem.level-4.has-active>.item>.text[data-v-b7550ba0],.VPSidebarItem.level-5.has-active>.item>.text[data-v-b7550ba0],.VPSidebarItem.level-0.has-active>.item>.link>.text[data-v-b7550ba0],.VPSidebarItem.level-1.has-active>.item>.link>.text[data-v-b7550ba0],.VPSidebarItem.level-2.has-active>.item>.link>.text[data-v-b7550ba0],.VPSidebarItem.level-3.has-active>.item>.link>.text[data-v-b7550ba0],.VPSidebarItem.level-4.has-active>.item>.link>.text[data-v-b7550ba0],.VPSidebarItem.level-5.has-active>.item>.link>.text[data-v-b7550ba0]{color:var(--vp-c-text-1)}.VPSidebarItem.level-0.is-active>.item .link>.text[data-v-b7550ba0],.VPSidebarItem.level-1.is-active>.item .link>.text[data-v-b7550ba0],.VPSidebarItem.level-2.is-active>.item .link>.text[data-v-b7550ba0],.VPSidebarItem.level-3.is-active>.item .link>.text[data-v-b7550ba0],.VPSidebarItem.level-4.is-active>.item .link>.text[data-v-b7550ba0],.VPSidebarItem.level-5.is-active>.item .link>.text[data-v-b7550ba0]{color:var(--vp-c-brand-1)}.caret[data-v-b7550ba0]{display:flex;justify-content:center;align-items:center;margin-right:-7px;width:32px;height:32px;color:var(--vp-c-text-3);cursor:pointer;transition:color .25s;flex-shrink:0}.item:hover .caret[data-v-b7550ba0]{color:var(--vp-c-text-2)}.item:hover .caret[data-v-b7550ba0]:hover{color:var(--vp-c-text-1)}.caret-icon[data-v-b7550ba0]{font-size:18px;transform:rotate(90deg);transition:transform .25s}.VPSidebarItem.collapsed .caret-icon[data-v-b7550ba0]{transform:rotate(0)}.VPSidebarItem.level-1 .items[data-v-b7550ba0],.VPSidebarItem.level-2 .items[data-v-b7550ba0],.VPSidebarItem.level-3 .items[data-v-b7550ba0],.VPSidebarItem.level-4 .items[data-v-b7550ba0],.VPSidebarItem.level-5 .items[data-v-b7550ba0]{border-left:1px solid var(--vp-c-divider);padding-left:16px}.VPSidebarItem.collapsed .items[data-v-b7550ba0]{display:none}.no-transition[data-v-c40bc020] .caret-icon{transition:none}.group+.group[data-v-c40bc020]{border-top:1px solid var(--vp-c-divider);padding-top:10px}@media (min-width: 960px){.group[data-v-c40bc020]{padding-top:10px;width:calc(var(--vp-sidebar-width) - 64px)}}.VPSidebar[data-v-319d5ca6]{position:fixed;top:var(--vp-layout-top-height, 0px);bottom:0;left:0;z-index:var(--vp-z-index-sidebar);padding:32px 32px 96px;width:calc(100vw - 64px);max-width:320px;background-color:var(--vp-sidebar-bg-color);opacity:0;box-shadow:var(--vp-c-shadow-3);overflow-x:hidden;overflow-y:auto;transform:translate(-100%);transition:opacity .5s,transform .25s ease;overscroll-behavior:contain}.VPSidebar.open[data-v-319d5ca6]{opacity:1;visibility:visible;transform:translate(0);transition:opacity .25s,transform .5s cubic-bezier(.19,1,.22,1)}.dark .VPSidebar[data-v-319d5ca6]{box-shadow:var(--vp-shadow-1)}@media (min-width: 960px){.VPSidebar[data-v-319d5ca6]{padding-top:var(--vp-nav-height);width:var(--vp-sidebar-width);max-width:100%;background-color:var(--vp-sidebar-bg-color);opacity:1;visibility:visible;box-shadow:none;transform:translate(0)}}@media (min-width: 1440px){.VPSidebar[data-v-319d5ca6]{padding-left:max(32px,calc((100% - (var(--vp-layout-max-width) - 64px)) / 2));width:calc((100% - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) - 32px)}}@media (min-width: 960px){.curtain[data-v-319d5ca6]{position:sticky;top:-64px;left:0;z-index:1;margin-top:calc(var(--vp-nav-height) * -1);margin-right:-32px;margin-left:-32px;height:var(--vp-nav-height);background-color:var(--vp-sidebar-bg-color)}}.nav[data-v-319d5ca6]{outline:0}.VPSkipLink[data-v-0f60ec36]{top:8px;left:8px;padding:8px 16px;z-index:999;border-radius:8px;font-size:12px;font-weight:700;text-decoration:none;color:var(--vp-c-brand-1);box-shadow:var(--vp-shadow-3);background-color:var(--vp-c-bg)}.VPSkipLink[data-v-0f60ec36]:focus{height:auto;width:auto;clip:auto;clip-path:none}@media (min-width: 1280px){.VPSkipLink[data-v-0f60ec36]{top:14px;left:16px}}.Layout[data-v-5d98c3a5]{display:flex;flex-direction:column;min-height:100vh}.VPHomeSponsors[data-v-3d121b4a]{border-top:1px solid var(--vp-c-gutter);padding-top:88px!important}.VPHomeSponsors[data-v-3d121b4a]{margin:96px 0}@media (min-width: 768px){.VPHomeSponsors[data-v-3d121b4a]{margin:128px 0}}.VPHomeSponsors[data-v-3d121b4a]{padding:0 24px}@media (min-width: 768px){.VPHomeSponsors[data-v-3d121b4a]{padding:0 48px}}@media (min-width: 960px){.VPHomeSponsors[data-v-3d121b4a]{padding:0 64px}}.container[data-v-3d121b4a]{margin:0 auto;max-width:1152px}.love[data-v-3d121b4a]{margin:0 auto;width:fit-content;font-size:28px;color:var(--vp-c-text-3)}.icon[data-v-3d121b4a]{display:inline-block}.message[data-v-3d121b4a]{margin:0 auto;padding-top:10px;max-width:320px;text-align:center;line-height:24px;font-size:16px;font-weight:500;color:var(--vp-c-text-2)}.sponsors[data-v-3d121b4a]{padding-top:32px}.action[data-v-3d121b4a]{padding-top:40px;text-align:center}.VPTeamPage[data-v-7c57f839]{margin:96px 0}@media (min-width: 768px){.VPTeamPage[data-v-7c57f839]{margin:128px 0}}.VPHome .VPTeamPageTitle[data-v-7c57f839-s]{border-top:1px solid var(--vp-c-gutter);padding-top:88px!important}.VPTeamPageSection+.VPTeamPageSection[data-v-7c57f839-s],.VPTeamMembers+.VPTeamPageSection[data-v-7c57f839-s]{margin-top:64px}.VPTeamMembers+.VPTeamMembers[data-v-7c57f839-s]{margin-top:24px}@media (min-width: 768px){.VPTeamPageTitle+.VPTeamPageSection[data-v-7c57f839-s]{margin-top:16px}.VPTeamPageSection+.VPTeamPageSection[data-v-7c57f839-s],.VPTeamMembers+.VPTeamPageSection[data-v-7c57f839-s]{margin-top:96px}}.VPTeamMembers[data-v-7c57f839-s]{padding:0 24px}@media (min-width: 768px){.VPTeamMembers[data-v-7c57f839-s]{padding:0 48px}}@media (min-width: 960px){.VPTeamMembers[data-v-7c57f839-s]{padding:0 64px}}.VPTeamPageTitle[data-v-bf2cbdac]{padding:48px 32px;text-align:center}@media (min-width: 768px){.VPTeamPageTitle[data-v-bf2cbdac]{padding:64px 48px 48px}}@media (min-width: 960px){.VPTeamPageTitle[data-v-bf2cbdac]{padding:80px 64px 48px}}.title[data-v-bf2cbdac]{letter-spacing:0;line-height:44px;font-size:36px;font-weight:500}@media (min-width: 768px){.title[data-v-bf2cbdac]{letter-spacing:-.5px;line-height:56px;font-size:48px}}.lead[data-v-bf2cbdac]{margin:0 auto;max-width:512px;padding-top:12px;line-height:24px;font-size:16px;font-weight:500;color:var(--vp-c-text-2)}@media (min-width: 768px){.lead[data-v-bf2cbdac]{max-width:592px;letter-spacing:.15px;line-height:28px;font-size:20px}}.VPTeamPageSection[data-v-b1a88750]{padding:0 32px}@media (min-width: 768px){.VPTeamPageSection[data-v-b1a88750]{padding:0 48px}}@media (min-width: 960px){.VPTeamPageSection[data-v-b1a88750]{padding:0 64px}}.title[data-v-b1a88750]{position:relative;margin:0 auto;max-width:1152px;text-align:center;color:var(--vp-c-text-2)}.title-line[data-v-b1a88750]{position:absolute;top:16px;left:0;width:100%;height:1px;background-color:var(--vp-c-divider)}.title-text[data-v-b1a88750]{position:relative;display:inline-block;padding:0 24px;letter-spacing:0;line-height:32px;font-size:20px;font-weight:500;background-color:var(--vp-c-bg)}.lead[data-v-b1a88750]{margin:0 auto;max-width:480px;padding-top:12px;text-align:center;line-height:24px;font-size:16px;font-weight:500;color:var(--vp-c-text-2)}.members[data-v-b1a88750]{padding-top:40px}.VPTeamMembersItem[data-v-f3fa364a]{display:flex;flex-direction:column;gap:2px;border-radius:12px;width:100%;height:100%;overflow:hidden}.VPTeamMembersItem.small .profile[data-v-f3fa364a]{padding:32px}.VPTeamMembersItem.small .data[data-v-f3fa364a]{padding-top:20px}.VPTeamMembersItem.small .avatar[data-v-f3fa364a]{width:64px;height:64px}.VPTeamMembersItem.small .name[data-v-f3fa364a]{line-height:24px;font-size:16px}.VPTeamMembersItem.small .affiliation[data-v-f3fa364a]{padding-top:4px;line-height:20px;font-size:14px}.VPTeamMembersItem.small .desc[data-v-f3fa364a]{padding-top:12px;line-height:20px;font-size:14px}.VPTeamMembersItem.small .links[data-v-f3fa364a]{margin:0 -16px -20px;padding:10px 0 0}.VPTeamMembersItem.medium .profile[data-v-f3fa364a]{padding:48px 32px}.VPTeamMembersItem.medium .data[data-v-f3fa364a]{padding-top:24px;text-align:center}.VPTeamMembersItem.medium .avatar[data-v-f3fa364a]{width:96px;height:96px}.VPTeamMembersItem.medium .name[data-v-f3fa364a]{letter-spacing:.15px;line-height:28px;font-size:20px}.VPTeamMembersItem.medium .affiliation[data-v-f3fa364a]{padding-top:4px;font-size:16px}.VPTeamMembersItem.medium .desc[data-v-f3fa364a]{padding-top:16px;max-width:288px;font-size:16px}.VPTeamMembersItem.medium .links[data-v-f3fa364a]{margin:0 -16px -12px;padding:16px 12px 0}.profile[data-v-f3fa364a]{flex-grow:1;background-color:var(--vp-c-bg-soft)}.data[data-v-f3fa364a]{text-align:center}.avatar[data-v-f3fa364a]{position:relative;flex-shrink:0;margin:0 auto;border-radius:50%;box-shadow:var(--vp-shadow-3)}.avatar-img[data-v-f3fa364a]{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;object-fit:cover}.name[data-v-f3fa364a]{margin:0;font-weight:600}.affiliation[data-v-f3fa364a]{margin:0;font-weight:500;color:var(--vp-c-text-2)}.org.link[data-v-f3fa364a]{color:var(--vp-c-text-2);transition:color .25s}.org.link[data-v-f3fa364a]:hover{color:var(--vp-c-brand-1)}.desc[data-v-f3fa364a]{margin:0 auto}.desc[data-v-f3fa364a] a{font-weight:500;color:var(--vp-c-brand-1);text-decoration-style:dotted;transition:color .25s}.links[data-v-f3fa364a]{display:flex;justify-content:center;height:56px}.sp-link[data-v-f3fa364a]{display:flex;justify-content:center;align-items:center;text-align:center;padding:16px;font-size:14px;font-weight:500;color:var(--vp-c-sponsor);background-color:var(--vp-c-bg-soft);transition:color .25s,background-color .25s}.sp .sp-link.link[data-v-f3fa364a]:hover,.sp .sp-link.link[data-v-f3fa364a]:focus{outline:none;color:var(--vp-c-white);background-color:var(--vp-c-sponsor)}.sp-icon[data-v-f3fa364a]{margin-right:8px;font-size:16px}.VPTeamMembers.small .container[data-v-6cb0dbc4]{grid-template-columns:repeat(auto-fit,minmax(224px,1fr))}.VPTeamMembers.small.count-1 .container[data-v-6cb0dbc4]{max-width:276px}.VPTeamMembers.small.count-2 .container[data-v-6cb0dbc4]{max-width:576px}.VPTeamMembers.small.count-3 .container[data-v-6cb0dbc4]{max-width:876px}.VPTeamMembers.medium .container[data-v-6cb0dbc4]{grid-template-columns:repeat(auto-fit,minmax(256px,1fr))}@media (min-width: 375px){.VPTeamMembers.medium .container[data-v-6cb0dbc4]{grid-template-columns:repeat(auto-fit,minmax(288px,1fr))}}.VPTeamMembers.medium.count-1 .container[data-v-6cb0dbc4]{max-width:368px}.VPTeamMembers.medium.count-2 .container[data-v-6cb0dbc4]{max-width:760px}.container[data-v-6cb0dbc4]{display:grid;gap:24px;margin:0 auto;max-width:1152px}.github-link{margin-top:2rem}.note{background-color:#eaecef66;border-radius:6px;-webkit-border-radius:6px;-moz-border-radius:6px;padding:.5rem 1.5rem;margin:1rem 0rem}.warning,.warn{background-color:#f63;color:#333;border-radius:6px;-webkit-border-radius:6px;-moz-border-radius:6px;padding:.5rem 1.5rem}.loading{color:gray}@media screen and (max-width: 719px){.note{border-radius:0;-webkit-border-radius:0px;-moz-border-radius:0px;padding:.5rem 1.5rem;margin:0rem -1.5rem}}canvas{background-color:#454545;width:100%;height:100%}.webgpu_example_button{height:33px;font-size:14px;padding:0 8px;margin-top:16px;border:1px solid rgba(60,60,60,.15);border-radius:8px}.webgpu_example_button:hover{border-color:#059669}.auto-github-link{margin-top:1rem;line-height:40px}#wgpu-app-container{min-height:60px}#wgpu-app-container button{height:33px;font-size:14px;padding:0 8px;border:1px solid rgba(60,60,60,.15);border-radius:8px}#wgpu-app-container button:hover{border-color:#059669}body{margin:0}.a{color:#5a6}#simuverse_container{position:fixed;top:64px;left:0;right:0;bottom:0;background-color:#353535;min-width:450px;min-height:500px}#alert,#loading{text-align:center;justify-content:center;align-items:center;color:#fff;font-size:20px;margin-top:64px}
diff --git a/beginner/tutorial1-window.html b/beginner/tutorial1-window.html
index 845965383..974b507da 100644
--- a/beginner/tutorial1-window.html
+++ b/beginner/tutorial1-window.html
@@ -6,14 +6,14 @@
     依赖与窗口 | 学习 wgpu
     
     
-    
+    
     
     
-    
+    
     
-    
-    
-    
+    
+    
+    
     
     
     
@@ -192,8 +192,8 @@
       }
     </style>
   </body>
-</html>
点击下面的按钮查看示例代码运行!
 查看源码！ 

-    
+</html>
点击下面的按钮查看示例代码运行!
 查看源码！ 

+    
     
   
 
\ No newline at end of file
diff --git a/beginner/tutorial2-surface/index.html b/beginner/tutorial2-surface/index.html
index 8c42d4504..71cf9ae0d 100644
--- a/beginner/tutorial2-surface/index.html
+++ b/beginner/tutorial2-surface/index.html
@@ -6,14 +6,14 @@
     展示平面 (Surface) | 学习 wgpu
     
     
-    
+    
     
     
-    
+    
     
-    
-    
-    
+    
+    
+    
     
     
     
@@ -268,8 +268,8 @@
         }),
         store: wgpu::StoreOp::Store
     },
-})
RenderPassColorAttachment 有一个 view 字段，用于通知 wgpu 将颜色保存到什么纹理。这里我们指定使用 surface.get_current_texture() 创建的 view，这意味着向此附件（Attachment）上绘制的任何颜色都会被绘制到屏幕上。
resolve_target 是接收多重采样解析输出的纹理。除非启用了多重采样, 否则不需要设置它，保留为 None 即可。
ops 字段需要一个 wpgu::Operations 对象。它告诉 wgpu 如何处理屏幕上的颜色（由 view 指定）。load 字段告诉 wgpu 如何处理存储在前一帧的颜色。目前，我们正在用蓝色清屏。store 字段告诉 wgpu 是否要将渲染的结果存储到纹理视图后面的纹理上（在这个例子中是 SurfaceTexture ）。我们希望存储渲染结果，所以设置为 true。
当屏幕被场景对象完全遮挡，那么不清屏是很常见的。但如果你的场景没有覆盖整个屏幕，就会出现类似下边的情况：
./no-clear.png
验证错误? ​
如果你的机器上运行的是 Vulkan SDK 的旧版本， wgpu 在你的机器上使用 Vulkan 后端时可能会遇到验证错误。至少需要使用 1.2.182 及以上版本，因为旧版本可能会产生一些误报。如果错误持续存在，那可能是遇到了 wgpu 的错误。你可以在 https://github.com/gfx-rs/wgpu 上提交此问题。
挑战 ​
修改 input() 函数以捕获鼠标事件，并使用该函数来更新清屏的颜色。提示：你可能需要用到 WindowEvent::CursorMoved。
 查看源码！ 
加入 wgpu 微信学习交流群 ​

-    
+})
RenderPassColorAttachment 有一个 view 字段，用于通知 wgpu 将颜色保存到什么纹理。这里我们指定使用 surface.get_current_texture() 创建的 view，这意味着向此附件（Attachment）上绘制的任何颜色都会被绘制到屏幕上。
resolve_target 是接收多重采样解析输出的纹理。除非启用了多重采样, 否则不需要设置它，保留为 None 即可。
ops 字段需要一个 wpgu::Operations 对象。它告诉 wgpu 如何处理屏幕上的颜色（由 view 指定）。load 字段告诉 wgpu 如何处理存储在前一帧的颜色。目前，我们正在用蓝色清屏。store 字段告诉 wgpu 是否要将渲染的结果存储到纹理视图后面的纹理上（在这个例子中是 SurfaceTexture ）。我们希望存储渲染结果，所以设置为 true。
当屏幕被场景对象完全遮挡，那么不清屏是很常见的。但如果你的场景没有覆盖整个屏幕，就会出现类似下边的情况：
./no-clear.png
验证错误? ​
如果你的机器上运行的是 Vulkan SDK 的旧版本， wgpu 在你的机器上使用 Vulkan 后端时可能会遇到验证错误。至少需要使用 1.2.182 及以上版本，因为旧版本可能会产生一些误报。如果错误持续存在，那可能是遇到了 wgpu 的错误。你可以在 https://github.com/gfx-rs/wgpu 上提交此问题。
挑战 ​
修改 input() 函数以捕获鼠标事件，并使用该函数来更新清屏的颜色。提示：你可能需要用到 WindowEvent::CursorMoved。
 查看源码！ 
加入 wgpu 微信学习交流群 ​
+ \ No newline at end of file diff --git a/beginner/tutorial3-pipeline/index.html b/beginner/tutorial3-pipeline/index.html index be1ec8ea8..aa8e8111d 100644 --- a/beginner/tutorial3-pipeline/index.html +++ b/beginner/tutorial3-pipeline/index.html @@ -6,14 +6,14 @@ 管线 (Pipeline) | 学习 wgpu - + - + - - - + + + @@ -141,8 +141,8 @@ render_pass.set_pipeline(&self.render_pipeline); // 2. render_pass.draw(0..3, 0..1); // 3. } -// ...

上面代码所做的少量修改：

  1. 把 _render_pass 声明为可变变量并重命名为 render_pass。
  2. 在 render_pass 上设置刚刚创建的管线。
  3. 告诉 wgpu 用 3 个顶点和 1 个实例（实例的索引就是 @builtin(vertex_index) 的由来）来进行绘制。

修改完代码后，运行程序应该就能看到一个可爱的棕色三角形：

可爱的棕色三角形

挑战 ​

创建第二个管线，使用三角形顶点的位置数据来创建一个颜色并发送给片元着色器。当你按下空格键时让应用程序交替使用两个管线。提示：你需要修改 VertexOutput。

查看源码！
- +// ...

上面代码所做的少量修改：

  1. 把 _render_pass 声明为可变变量并重命名为 render_pass。
  2. 在 render_pass 上设置刚刚创建的管线。
  3. 告诉 wgpu 用 3 个顶点和 1 个实例（实例的索引就是 @builtin(vertex_index) 的由来）来进行绘制。

修改完代码后，运行程序应该就能看到一个可爱的棕色三角形：

可爱的棕色三角形

挑战 ​

创建第二个管线，使用三角形顶点的位置数据来创建一个颜色并发送给片元着色器。当你按下空格键时让应用程序交替使用两个管线。提示：你需要修改 VertexOutput。

查看源码！
+ \ No newline at end of file diff --git a/beginner/tutorial4-buffer/index.html b/beginner/tutorial4-buffer/index.html index 82033b68e..fea7e4b4f 100644 --- a/beginner/tutorial4-buffer/index.html +++ b/beginner/tutorial4-buffer/index.html @@ -6,14 +6,14 @@ 缓冲区与索引 | 学习 wgpu - + - + - - - + + + @@ -243,8 +243,8 @@ render_pass.set_pipeline(&self.render_pipeline); render_pass.set_vertex_buffer(0, self.vertex_buffer.slice(..)); render_pass.set_index_buffer(self.index_buffer.slice(..), wgpu::IndexFormat::Uint16); // 1. -render_pass.draw_indexed(0..self.num_indices, 0, 0..1); // 2.

有几点需要注意：

  1. 命令名称是 set_index_buffer 而不是 set_index_buffers, 一次绘制（draw_XXX()）只能设置一个索引缓冲区。但是，你可以在一个渲染通道内调用多次绘制，每次都设置不同的索引缓冲区。
  2. 当使用索引缓冲区时，需使用 draw_indexed 来绘制，draw 命令会忽略索引缓冲区。还需确保你使用的是索引数（num_indices）而非顶点数，否则你的模型要么画错，要么因为没有足够的索引数而导致程序恐慌（panic）。

完成这些后，运行程序应该就能看到窗口里有一个洋红色的五边形了：

Magenta pentagon in window

颜色校正 ​

如果在洋红色五角星上使用取色器，你会得到一个 #BC00BC 的十六进制值。如果把它转换成 RGB 值会得到（188, 0, 188），将这些值除以 255 使其映射进 [0，1] 范围，大致会得到（0.737254902，0，0.737254902）。这与我们赋给顶点颜色的值不同，后者是（0.5, 0.0, 0.5）。其原因与色彩空间（Color Space）有关。

大多数显示器使用的色彩空间被称为 sRGB（事实上，目前市面上的中高端显示器已经支持 DisplayP3 甚至是 BT.2100 等广色域色彩空间，macOS 与 iOS 设备默认使用的就是 DisplayP3 色彩空间）。我们的展示平面（完全取决于从 surface.get_capabilities(&adapter).formats 返回的格式）默认支持 sRGB 纹理格式。sRGB 格式是根据颜色的相对亮度而不是实际亮度来存储的。其原因是人眼对光线的感知不是线性的。我们注意到较深的颜色比较浅的颜色有更多差异。

可以用下面的公式得到一个正确颜色的近似值。srgb_color = (rgb_color / 255) ^ 2.2。在 RGB 值为 (188, 0, 188) 的情况下，我们将得到 (0.511397819, 0.0, 0.511397819)。与我们的（0.5, 0.0, 0.5）有点偏差。虽然你可以通过调整公式来获得所需的数值，但使用纹理可能会节省很多时间，因为它们默认是以 sRGB 方式存储的，所以不会像顶点颜色那样出现颜色不准确的情况。我们会在下一课中介绍纹理。

假如你的显示设备使用的是 DisplayP3 或 BT.2100 等广色域色彩空间，那么当你使用取色器检查屏幕上的渲染结果时，拾取到的色值将与着色器内的返回值不一致。

这是因为目前 WebGPU 仅支持较小色域的 sRGB 色彩空间，而硬件会执行色彩空间转换（color space conversion）将 sRGB 色值映射到更广的色域来显示到屏幕上，因此，使用取色器拾取到的色值是经过转换后的值。

挑战 ​

使用顶点缓冲区和索引缓冲区创建一个比教程里做的更复杂的形状（也就是三个以上的三角形），并用空格键在两者之间切换。

查看源码！
- +render_pass.draw_indexed(0..self.num_indices, 0, 0..1); // 2.

有几点需要注意：

  1. 命令名称是 set_index_buffer 而不是 set_index_buffers, 一次绘制（draw_XXX()）只能设置一个索引缓冲区。但是，你可以在一个渲染通道内调用多次绘制，每次都设置不同的索引缓冲区。
  2. 当使用索引缓冲区时，需使用 draw_indexed 来绘制，draw 命令会忽略索引缓冲区。还需确保你使用的是索引数（num_indices）而非顶点数，否则你的模型要么画错，要么因为没有足够的索引数而导致程序恐慌（panic）。

完成这些后，运行程序应该就能看到窗口里有一个洋红色的五边形了：

Magenta pentagon in window

颜色校正 ​

如果在洋红色五角星上使用取色器，你会得到一个 #BC00BC 的十六进制值。如果把它转换成 RGB 值会得到（188, 0, 188），将这些值除以 255 使其映射进 [0，1] 范围，大致会得到（0.737254902，0，0.737254902）。这与我们赋给顶点颜色的值不同，后者是（0.5, 0.0, 0.5）。其原因与色彩空间（Color Space）有关。

大多数显示器使用的色彩空间被称为 sRGB（事实上，目前市面上的中高端显示器已经支持 DisplayP3 甚至是 BT.2100 等广色域色彩空间，macOS 与 iOS 设备默认使用的就是 DisplayP3 色彩空间）。我们的展示平面（完全取决于从 surface.get_capabilities(&adapter).formats 返回的格式）默认支持 sRGB 纹理格式。sRGB 格式是根据颜色的相对亮度而不是实际亮度来存储的。其原因是人眼对光线的感知不是线性的。我们注意到较深的颜色比较浅的颜色有更多差异。

可以用下面的公式得到一个正确颜色的近似值。srgb_color = (rgb_color / 255) ^ 2.2。在 RGB 值为 (188, 0, 188) 的情况下，我们将得到 (0.511397819, 0.0, 0.511397819)。与我们的（0.5, 0.0, 0.5）有点偏差。虽然你可以通过调整公式来获得所需的数值，但使用纹理可能会节省很多时间，因为它们默认是以 sRGB 方式存储的，所以不会像顶点颜色那样出现颜色不准确的情况。我们会在下一课中介绍纹理。

假如你的显示设备使用的是 DisplayP3 或 BT.2100 等广色域色彩空间，那么当你使用取色器检查屏幕上的渲染结果时，拾取到的色值将与着色器内的返回值不一致。

这是因为目前 WebGPU 仅支持较小色域的 sRGB 色彩空间，而硬件会执行色彩空间转换（color space conversion）将 sRGB 色值映射到更广的色域来显示到屏幕上，因此，使用取色器拾取到的色值是经过转换后的值。

挑战 ​

使用顶点缓冲区和索引缓冲区创建一个比教程里做的更复杂的形状（也就是三个以上的三角形），并用空格键在两者之间切换。

查看源码！
+ \ No newline at end of file diff --git a/beginner/tutorial5-textures/index.html b/beginner/tutorial5-textures/index.html index 35d62a702..f2fece8ba 100644 --- a/beginner/tutorial5-textures/index.html +++ b/beginner/tutorial5-textures/index.html @@ -6,14 +6,14 @@ 纹理和绑定组 | 学习 wgpu - + - + - - - + + + @@ -369,8 +369,8 @@ diffuse_texture, // NEW } } -}

经过上边的整理，代码的工作方式还和以前一样，但我们现在有了一个更便利的方式来创建纹理。

挑战 ​

另创建一个纹理，并在你按下空格键时交替使用。

查看源码！
- +}

经过上边的整理，代码的工作方式还和以前一样，但我们现在有了一个更便利的方式来创建纹理。

挑战 ​

另创建一个纹理，并在你按下空格键时交替使用。

查看源码！
+ \ No newline at end of file diff --git a/beginner/tutorial6-uniforms/index.html b/beginner/tutorial6-uniforms/index.html index a12bf621e..7f134732c 100644 --- a/beginner/tutorial6-uniforms/index.html +++ b/beginner/tutorial6-uniforms/index.html @@ -6,14 +6,14 @@ Uniform 缓冲区与 3D 虚拟摄像机 | 学习 wgpu - + - + - - - + + + @@ -302,8 +302,8 @@ self.camera_controller.update_camera(&mut self.camera); self.camera_uniform.update_view_proj(&self.camera); self.queue.write_buffer(&self.camera_buffer, 0, bytemuck::cast_slice(&[self.camera_uniform])); -}

这就是要做的全部工作了。现在运行代码，将能看到一个带有树木纹理的五边形，并可以用 wasd/arrow 键来旋转和缩放。

挑战 ​

让上面的五边形独立于摄像机进行旋转。提示：你需要另一个矩阵来实现这一点。

查看源码！
- +}

这就是要做的全部工作了。现在运行代码，将能看到一个带有树木纹理的五边形，并可以用 wasd/arrow 键来旋转和缩放。

挑战 ​

让上面的五边形独立于摄像机进行旋转。提示：你需要另一个矩阵来实现这一点。

查看源码！
+ \ No newline at end of file diff --git a/beginner/tutorial7-instancing/index.html b/beginner/tutorial7-instancing/index.html index 22845e93b..a634c6455 100644 --- a/beginner/tutorial7-instancing/index.html +++ b/beginner/tutorial7-instancing/index.html @@ -6,14 +6,14 @@ 实例化绘制 | 学习 wgpu - + - + - - - + + + @@ -161,8 +161,8 @@ out.tex_coords = model.tex_coords; out.clip_position = camera.view_proj * model_matrix * vec4f(model.position, 1.0); return out; -}

完成后，应该就能看到一片树林了！

./forest.png

挑战 ​

逐帧变更实例的位置 和/或 旋转弧度。

查看源码！
- +}

完成后，应该就能看到一片树林了！

./forest.png

挑战 ​

逐帧变更实例的位置 和/或 旋转弧度。

查看源码！
+ \ No newline at end of file diff --git a/beginner/tutorial8-depth/index.html b/beginner/tutorial8-depth/index.html index b4004dcbd..e0db637df 100644 --- a/beginner/tutorial8-depth/index.html +++ b/beginner/tutorial8-depth/index.html @@ -6,14 +6,14 @@ 深度缓冲区 | 学习 wgpu - + - + - - - + + + @@ -100,8 +100,8 @@ stencil_ops: None, }), ..Default::default() -});

这就是我们所要做的！不涉及着色器代码！现在运行该应用程序，将看到深度问题已不复存在：

forest_fixed.png

挑战 ​

深度缓冲区是一张纹理，所以我们可以在着色器中对其采样。请为深度纹理创建一个绑定组（或重用现有的），并将其渲染到屏幕上。

查看源码！
- +});

这就是我们所要做的！不涉及着色器代码！现在运行该应用程序，将看到深度问题已不复存在：

forest_fixed.png

挑战 ​

深度缓冲区是一张纹理，所以我们可以在着色器中对其采样。请为深度纹理创建一个绑定组（或重用现有的），并将其渲染到屏幕上。

查看源码！
+ \ No newline at end of file diff --git a/beginner/tutorial9-models/index.html b/beginner/tutorial9-models/index.html index 8baa2b1e2..ddbe0900d 100644 --- a/beginner/tutorial9-models/index.html +++ b/beginner/tutorial9-models/index.html @@ -6,14 +6,14 @@ 模型加载 | 学习 wgpu - + - + - - - + + + @@ -395,8 +395,8 @@ } }

lib.rs 中的代码也相应地修改一下以调用新的 draw_model_instanced 函数：

rust
render_pass.set_vertex_buffer(1, self.instance_buffer.slice(..));
 render_pass.set_pipeline(&self.render_pipeline);
-render_pass.draw_model_instanced(&self.obj_model, 0..self.instances.len() as u32, &self.camera_bind_group);
查看源码！
- +render_pass.draw_model_instanced(&self.obj_model, 0..self.instances.len() as u32, &self.camera_bind_group);
查看源码！
+ \ No newline at end of file diff --git a/beginner/wgsl.html b/beginner/wgsl.html index da0802899..b86240711 100644 --- a/beginner/wgsl.html +++ b/beginner/wgsl.html @@ -6,14 +6,14 @@ WGSL 着色器语言 | 学习 wgpu - + - + - - - + + + @@ -273,8 +273,8 @@ Err(e) => panic!("无法读取 {:?}: {:?}", path, e), }; Some(shader) -}

上面的几十行代码就是一套完整的预处理逻辑，它在每次程序编译时自动检查 wgsl/ 目录下的待处理着色器有没有发生变化，如果有变化，就重新处理并在 wgsl_preprocessed/ 目录下写入一个同名的处理后的着色器。

- +}

上面的几十行代码就是一套完整的预处理逻辑，它在每次程序编译时自动检查 wgsl/ 目录下的待处理着色器有没有发生变化，如果有变化，就重新处理并在 wgsl_preprocessed/ 目录下写入一个同名的处理后的着色器。

+ \ No newline at end of file diff --git a/hashmap.json b/hashmap.json index 99ed96eed..22a693394 100644 --- a/hashmap.json +++ b/hashmap.json @@ -1 +1 @@ -{"beginner_tutorial1-window.md":"Bbz9ciJb","beginner_tutorial2-surface_index.md":"B0LLDve_","beginner_tutorial3-pipeline_index.md":"RyuYhpMP","beginner_tutorial4-buffer_index.md":"CXGa3RfS","beginner_tutorial5-textures_index.md":"DGv0fitl","beginner_tutorial6-uniforms_index.md":"twC0nven","beginner_tutorial7-instancing_index.md":"BZiOSmrj","beginner_tutorial8-depth_index.md":"vgD-onnx","beginner_tutorial9-models_index.md":"B2cA33FN","beginner_wgsl.md":"Bn2NdD9D","glossary_of_terms.md":"CP9uI_8g","index.md":"DIgl1ov4","integration-and-debugging_android_index.md":"DqRfaVoJ","integration-and-debugging_bevy_index.md":"LFcp1Mue","integration-and-debugging_index.md":"DBgEh4wO","integration-and-debugging_ios_index.md":"CdCnoMwo","integration-and-debugging_snapdragon-profiler_index.md":"aFfEe2ri","integration-and-debugging_xcode_index.md":"CchvP_wB","intermediate_compute-pipeline_index.md":"BZ_cyLQo","intermediate_hdr_index.md":"Dm4mXg81","intermediate_pbr-notes.md":"Dc4G-JN7","intermediate_tutorial10-lighting_index.md":"DFm71_AX","intermediate_tutorial11-normals_index.md":"BX26UKPm","intermediate_tutorial12-camera_index.md":"DzEfrSPE","intermediate_tutorial13-terrain_index.md":"UcGoe3Gi","intermediate_vertex-animation_index.md":"DliElYT0","intermediate_vertex-animation_universal-animation-formula.md":"BWO0w12h","showcase_alignment.md":"YdZf41U4","showcase_compute_index.md":"Cyj8qpZI","showcase_gifs_index.md":"BzGCC4s8","showcase_pong_index.md":"dLFU-yWv","showcase_threading.md":"2PfQJOkX","showcase_windowless_index.md":"DziIfJjF","simuverse.md":"D__Yc6nX"} +{"beginner_tutorial1-window.md":"ByC2IG_l","beginner_tutorial2-surface_index.md":"VbtTnFiz","beginner_tutorial3-pipeline_index.md":"CjsoUGLf","beginner_tutorial4-buffer_index.md":"DUPN0C2v","beginner_tutorial5-textures_index.md":"C3WANDzX","beginner_tutorial6-uniforms_index.md":"CPpJaMj2","beginner_tutorial7-instancing_index.md":"5gxEY54W","beginner_tutorial8-depth_index.md":"Dqr68Jvg","beginner_tutorial9-models_index.md":"CRpkWFZH","beginner_wgsl.md":"DBDMW7p4","glossary_of_terms.md":"xT_8t-H3","index.md":"BxEXWWEG","integration-and-debugging_android_index.md":"Dflin0CP","integration-and-debugging_bevy_index.md":"Cbw3FKE-","integration-and-debugging_index.md":"Cp5TIMSu","integration-and-debugging_ios_index.md":"uDYXVw51","integration-and-debugging_snapdragon-profiler_index.md":"BVGOZubA","integration-and-debugging_xcode_index.md":"BxTvmEOJ","intermediate_compute-pipeline_index.md":"CG8IX7Ek","intermediate_hdr_index.md":"CiUucJH7","intermediate_pbr-notes.md":"B17WIYua","intermediate_tutorial10-lighting_index.md":"BW0w6Uav","intermediate_tutorial11-normals_index.md":"BgIYXHLp","intermediate_tutorial12-camera_index.md":"CC3go-tG","intermediate_tutorial13-terrain_index.md":"DVMgIRqh","intermediate_vertex-animation_index.md":"BZU0cHsD","intermediate_vertex-animation_universal-animation-formula.md":"DBsHQKtB","showcase_alignment.md":"DLrIByQZ","showcase_compute_index.md":"Dt3McrnY","showcase_gifs_index.md":"DyghaS6s","showcase_pong_index.md":"DCVjTk6g","showcase_threading.md":"DDvFOucT","showcase_windowless_index.md":"JCZbS0yg","simuverse.md":"k3QP19ox"} diff --git a/index.html b/index.html index 67b302dab..de8c7c8f9 100644 --- a/index.html +++ b/index.html @@ -6,14 +6,14 @@ 介绍 | 学习 wgpu - + - + - - - + + + @@ -29,8 +29,8 @@ # compute-pipeline, vertex-animation 及 hilbert-curve 示例只能在桌面端与浏览器端 WebGPU 环境运行 cargo run-wasm --bin vertex-animation # 使用 WebGL 2.0 -cargo run-wasm --bin tutorial2-surface --features webgl

调试与集成 部分的代码是 2 个独立的项目： wgpu-in-app 和 bevy-in-app

simuverse 是基于 wgpu + egui 的扩展示例，提供了粒子矢量场，流体场及 GPU 程序化纹理的实现。

如何开启浏览器 WebGPU 功能支持 ​

Chrome ​

Chrome 113+、Microsoft Edge 113+ 及 Arc 浏览器均已默认支持 WebGPU 功能。

Safari ​

Safari 18 (macOS 15) 已经默认开启了 WebGPU 功能。

macOS 14- 系统上，需安装 Safari Technology Preview 185+，从顶部菜单栏选择 开发 -> 功能标志 , 搜索并勾选 WebGPU: Safari Technology Preview

Firefox ​

安装 Nightly 版本，在地址栏中输入 about:config , 将 dom.webgpu.enabled 设置为 true: Firefox Nightly

关于译者 ​

我是一名移动端架构师，有多年使用 OpenGL / WebGL, Metal 的实践经验。2018 年开始接触 WebGPU，目前正积极地参与到 wgpu 开源项目的开发与完善之中，并且已于两年前在 AppStore 上架了基于 wgpu 实现的毛笔书法模拟 App 字习 Pro。

加入 wgpu 微信学习交流群 ​

- +cargo run-wasm --bin tutorial2-surface --features webgl

调试与集成 部分的代码是 2 个独立的项目： wgpu-in-app 和 bevy-in-app

simuverse 是基于 wgpu + egui 的扩展示例，提供了粒子矢量场，流体场及 GPU 程序化纹理的实现。

如何开启浏览器 WebGPU 功能支持 ​

Chrome ​

Chrome 113+、Microsoft Edge 113+ 及 Arc 浏览器均已默认支持 WebGPU 功能。

Safari ​

Safari 18 (macOS 15) 已经默认开启了 WebGPU 功能。

macOS 14- 系统上，需安装 Safari Technology Preview 185+，从顶部菜单栏选择 开发 -> 功能标志 , 搜索并勾选 WebGPU: Safari Technology Preview

Firefox ​

安装 Nightly 版本，在地址栏中输入 about:config , 将 dom.webgpu.enabled 设置为 true: Firefox Nightly

关于译者 ​

我是一名移动端架构师，有多年使用 OpenGL / WebGL, Metal 的实践经验。2018 年开始接触 WebGPU，目前正积极地参与到 wgpu 开源项目的开发与完善之中，并且已于两年前在 AppStore 上架了基于 wgpu 实现的毛笔书法模拟 App 字习 Pro。

加入 wgpu 微信学习交流群 ​

+ \ No newline at end of file diff --git a/integration-and-debugging/android/index.html b/integration-and-debugging/android/index.html index f812fd674..bb159ff00 100644 --- a/integration-and-debugging/android/index.html +++ b/integration-and-debugging/android/index.html @@ -6,14 +6,14 @@ 与 Android App 集成 | 学习 wgpu - + - + - - - + + + @@ -227,8 +227,8 @@ .height(screenWidth), ) } -}

基于以上代码，我写了一个叫 wgpu-in-app 的示例程序，效果如下：

查看 wgpu-in-app 完整项目源码！
- +}

基于以上代码，我写了一个叫 wgpu-in-app 的示例程序，效果如下：

查看 wgpu-in-app 完整项目源码！
+ \ No newline at end of file diff --git a/integration-and-debugging/bevy/index.html b/integration-and-debugging/bevy/index.html index 312def20e..7f8bf9e50 100644 --- a/integration-and-debugging/bevy/index.html +++ b/integration-and-debugging/bevy/index.html @@ -6,14 +6,14 @@ 在 iOS Android App 中集成 Bevy 游戏引擎 | 学习 wgpu - + - + - - - + + + @@ -280,8 +280,8 @@ windows_state.apply(&mut app.world); // 由于我们没有使用 Bevy App 的 runner 函数，需要手动 update app.update(); -}

运行 ​

Bevy in Android App
Bevy in iOS App
查看 bevy-in-app 完整项目源码！
- +}

运行 ​

Bevy in Android App
Bevy in iOS App
查看 bevy-in-app 完整项目源码！
+ \ No newline at end of file diff --git a/integration-and-debugging/index.html b/integration-and-debugging/index.html index 11648082e..d578c6d8c 100644 --- a/integration-and-debugging/index.html +++ b/integration-and-debugging/index.html @@ -6,21 +6,21 @@ 楔子 | 学习 wgpu - + - + - - - + + + -
学习 wgpu

中文

English

中文

English

Appearance

楔子 ​

调试工具集

教程的开篇我们就已提到：wgpu 是基于 WebGPU 规范的跨平台图形 API。也就是说，wgpu 不光能运行在 Web 及桌面环境里，更是能运行在 iOS、Android 两大移动操作系统上。

wgpu 的运行并不依赖于任何窗口程序，所以也不提供窗口的创建及管理功能，只有在创建基于窗口的绘制表面（Surface）时，才可能需要一个实现了 raw-window-handle 抽象接口的实参（之所以说是可能需要，是因为在 iOS/macOS 上，使用 CAMetalLayer 也能创建绘制表面的实例）。 winit 是一个实现了 raw-window-handle 抽象接口的、跨平台的窗口创建及管理包（crate）。 在桌面端（macOS、Windows、Linux）及移动端（iOS、Android），winit 会接管整个 App （应用程序）的窗口管理（包括事件循环（Events loop））。

毫无疑问，对于游戏类 App, 使用 wgpu + winit 的组合是非常合适的。但是，大量非游戏类 App 也经常有使用图形 API 的需求（比如，图表、图片滤镜等），这些 App 需要用到大量的系统 UI 组件及交互，winit 这种接管整个 App 窗口的方式是不合适的。所以，将 wgpu 集成到现有的 iOS、Android App 且不使用 winit 将非常有用。

我们都知道，调试和分析是优化程序性能的必备技能。

虽然 wgpu 会在运行时验证 API 调用及参数设置来保证只有有效的工作负载才能提交给 GPU 执行，但是，这并不能保证渲染或计算着色（Compute Shading）的正确性。本章中我们还会学习到如何利用调试工具来分析 wgpu 程序的性能及查找难以发现的错误！

加入 wgpu 微信学习交流群 ​

- +
学习 wgpu

中文

English

中文

English

Appearance

楔子 ​

调试工具集

教程的开篇我们就已提到：wgpu 是基于 WebGPU 规范的跨平台图形 API。也就是说，wgpu 不光能运行在 Web 及桌面环境里，更是能运行在 iOS、Android 两大移动操作系统上。

wgpu 的运行并不依赖于任何窗口程序，所以也不提供窗口的创建及管理功能，只有在创建基于窗口的绘制表面（Surface）时，才可能需要一个实现了 raw-window-handle 抽象接口的实参（之所以说是可能需要，是因为在 iOS/macOS 上，使用 CAMetalLayer 也能创建绘制表面的实例）。 winit 是一个实现了 raw-window-handle 抽象接口的、跨平台的窗口创建及管理包（crate）。 在桌面端（macOS、Windows、Linux）及移动端（iOS、Android），winit 会接管整个 App （应用程序）的窗口管理（包括事件循环（Events loop））。

毫无疑问，对于游戏类 App, 使用 wgpu + winit 的组合是非常合适的。但是，大量非游戏类 App 也经常有使用图形 API 的需求（比如，图表、图片滤镜等），这些 App 需要用到大量的系统 UI 组件及交互，winit 这种接管整个 App 窗口的方式是不合适的。所以，将 wgpu 集成到现有的 iOS、Android App 且不使用 winit 将非常有用。

我们都知道，调试和分析是优化程序性能的必备技能。

虽然 wgpu 会在运行时验证 API 调用及参数设置来保证只有有效的工作负载才能提交给 GPU 执行，但是，这并不能保证渲染或计算着色（Compute Shading）的正确性。本章中我们还会学习到如何利用调试工具来分析 wgpu 程序的性能及查找难以发现的错误！

加入 wgpu 微信学习交流群 ​

+ \ No newline at end of file diff --git a/integration-and-debugging/ios/index.html b/integration-and-debugging/ios/index.html index c8771e0aa..18b55000c 100644 --- a/integration-and-debugging/ios/index.html +++ b/integration-and-debugging/ios/index.html @@ -6,14 +6,14 @@ 与 iOS App 集成 | 学习 wgpu - + - + - - - + + + @@ -163,8 +163,8 @@ cargo build --target x86_64-apple-ios # 编译成功后需复制文件libwgpu_in_app.a至项目目录下 -# cp target/${TARGET}/${LIB_FOLDER}/libwgpu_in_app.a Apple/libs/${LIB_FOLDER}/libwgpu_in_app.a

打开 iOS 项目，在项目的 General 选项卡下找到 Frameworks, Libraries, and Embedded Content 栏, 导入系统的 libresolv.tbd 及我们刚编译的 .a 库，此导入只需要操作一次：

然后在 Build Settings 选项卡下找到 Search Paths -> Library Search Paths 栏， 将 .a 库的 debug 和 release 路径填到对应的字段中:

最后，还是在 Build Settings 选项卡下，找到 Linking -> Other Linker Flags 栏，添加 -ObjC、-lc++ 两个链接标记：

当 Xcode 版本 >= 13 且 iOS Deployment Target >= 12.0 时，Other Linker Flags 栏的设置可以省略。

以上就是所有的关键代码和步骤了，我写了一个叫 wgpu-in-app 的示例程序，效果如下：

查看 wgpu-in-app 完整项目源码！
- +# cp target/${TARGET}/${LIB_FOLDER}/libwgpu_in_app.a Apple/libs/${LIB_FOLDER}/libwgpu_in_app.a

打开 iOS 项目，在项目的 General 选项卡下找到 Frameworks, Libraries, and Embedded Content 栏, 导入系统的 libresolv.tbd 及我们刚编译的 .a 库，此导入只需要操作一次：

然后在 Build Settings 选项卡下找到 Search Paths -> Library Search Paths 栏， 将 .a 库的 debug 和 release 路径填到对应的字段中:

最后，还是在 Build Settings 选项卡下，找到 Linking -> Other Linker Flags 栏，添加 -ObjC、-lc++ 两个链接标记：

当 Xcode 版本 >= 13 且 iOS Deployment Target >= 12.0 时，Other Linker Flags 栏的设置可以省略。

以上就是所有的关键代码和步骤了，我写了一个叫 wgpu-in-app 的示例程序，效果如下：

查看 wgpu-in-app 完整项目源码！
+ \ No newline at end of file diff --git a/integration-and-debugging/snapdragon-profiler/index.html b/integration-and-debugging/snapdragon-profiler/index.html index 48a6d3aeb..67fb0a968 100644 --- a/integration-and-debugging/snapdragon-profiler/index.html +++ b/integration-and-debugging/snapdragon-profiler/index.html @@ -6,14 +6,14 @@ 使用 Snapdragon Profiler 调试 wgpu 程序 | 学习 wgpu - + - + - - - + + + @@ -23,8 +23,8 @@ // load: wgpu::LoadOp::Clear(wgpu::Color::BLACK), load: wgpu::LoadOp::Load, store: wgpu::StoreOp::Store -},

但此处实际上没有装载之前的帧缓冲区数据的必要，我们改为使用 Clear() 改善性能之后，就回收了之前片上内存装载消耗的性能，下图可以看到 GMEM Load 统计项消失了（没有发生片上内存装载时就不会显示）：

帧捕获模式 ​

帧捕获模式允许捕获 GPU 应用程序的单一帧, 可以详细显示一个场景在 GPU 上的渲染情况。

启用帧捕获模式的操作与追踪模式几乎一样，唯一不同之处就是帧捕获模式在点击 Take Snapshot 捕获一帧数据后会自动结束捕获：

左侧红框区域是当前帧的着色器代码，它们是由 WGSL 自动转换而来的 SPIR-V 代码（当然，此处的着色器代码还取决于 GPU 应用所使用的图形后端，我使用的是 Vulkan 后端，如果使用 OpenGL 后端，此处就会显示 GLSL 代码）。红框下方的区域可以显示着色器的错误信息。说到这里就不得不提 WebGPU 的 WGSL 着色器语言的优势了：WGSL 在编译阶段时就得到了很好的验证，运行时的验证更是能方便地指出着色器与管线不一致的地方。所以，我们不需要依赖 Snapdragon Profiler 的着色器调试功能。

中间绿框区域是命令队列（Queue）提交给当前帧的所有 Vulkan 命令。选中某一条命令，右侧资源面板将展示出此命令涉及的所有资源：图形|计算管线，纹理，着色器等等。

右侧蓝框区域是资源面板。选中某一项资源，下方的面板将能展示出资源详情。
比如，选择纹理资源后，下方的 Image Preview 选项卡会展示可缩放的大图预览，鼠标在纹理图片上滑动可显示对应像素的 RGB 色值，Inspector 选项卡会展示纹理的格式及层次细节参数等（左图）; 选择布局描述符资源后，Inspector 选项卡会展示出绑定组布局描述符（BindGroupLayoutDescriptor）详情（右图）：

- +},

但此处实际上没有装载之前的帧缓冲区数据的必要，我们改为使用 Clear() 改善性能之后，就回收了之前片上内存装载消耗的性能，下图可以看到 GMEM Load 统计项消失了（没有发生片上内存装载时就不会显示）：

帧捕获模式 ​

帧捕获模式允许捕获 GPU 应用程序的单一帧, 可以详细显示一个场景在 GPU 上的渲染情况。

启用帧捕获模式的操作与追踪模式几乎一样，唯一不同之处就是帧捕获模式在点击 Take Snapshot 捕获一帧数据后会自动结束捕获：

左侧红框区域是当前帧的着色器代码，它们是由 WGSL 自动转换而来的 SPIR-V 代码（当然，此处的着色器代码还取决于 GPU 应用所使用的图形后端，我使用的是 Vulkan 后端，如果使用 OpenGL 后端，此处就会显示 GLSL 代码）。红框下方的区域可以显示着色器的错误信息。说到这里就不得不提 WebGPU 的 WGSL 着色器语言的优势了：WGSL 在编译阶段时就得到了很好的验证，运行时的验证更是能方便地指出着色器与管线不一致的地方。所以，我们不需要依赖 Snapdragon Profiler 的着色器调试功能。

中间绿框区域是命令队列（Queue）提交给当前帧的所有 Vulkan 命令。选中某一条命令，右侧资源面板将展示出此命令涉及的所有资源：图形|计算管线，纹理，着色器等等。

右侧蓝框区域是资源面板。选中某一项资源，下方的面板将能展示出资源详情。
比如，选择纹理资源后，下方的 Image Preview 选项卡会展示可缩放的大图预览，鼠标在纹理图片上滑动可显示对应像素的 RGB 色值，Inspector 选项卡会展示纹理的格式及层次细节参数等（左图）; 选择布局描述符资源后，Inspector 选项卡会展示出绑定组布局描述符（BindGroupLayoutDescriptor）详情（右图）：

+ \ No newline at end of file diff --git a/integration-and-debugging/xcode/index.html b/integration-and-debugging/xcode/index.html index 0cc31ce36..b8eac586b 100644 --- a/integration-and-debugging/xcode/index.html +++ b/integration-and-debugging/xcode/index.html @@ -6,14 +6,14 @@ 使用 Xcode 调试 wgpu 程序 | 学习 wgpu - + - + - - - + + + @@ -27,8 +27,8 @@ let camera_buffer = device.create_buffer_init(&wgpu::util::BufferInitDescriptor { label: Some("Camera Buffer"), // ... -}); - +}); + \ No newline at end of file diff --git a/intermediate/compute-pipeline/index.html b/intermediate/compute-pipeline/index.html index ed9dd4770..3bde7a1e4 100644 --- a/intermediate/compute-pipeline/index.html +++ b/intermediate/compute-pipeline/index.html @@ -6,14 +6,14 @@ 计算管线 | 学习 wgpu - + - + - - - + + + @@ -84,8 +84,8 @@ var texel = textureLoad(from_tex, uv, 0) // ... }

使用计算着色器需要注意避免坐标越界问题，因为通常纹理图像的分辨率与我们的工作组大小不是整除关系。

确定工作组大小与数量 ​

工作组的最佳大小（指 x, y, z 三个维度的大小）并没有固定的值，需要结合实际使用场景来确定，而且能支持的最大值还与目标硬件有关。

我们从 adapter.limits() 里，能获取到当前设备支持的最大工作组大小 (maxComputeWorkgroupSizeX，maxComputeWorkgroupSizeY，maxComputeWorkgroupSizeZ)，它们的默认值分别为 (256, 256, 64)。

这三个维度的最大值容易让人误解，以为可以在计算着色器中设置 @workgroup_size(256, 256, 64)。

事实上 WebGPU spec 的验证规则是：x * y * z <= max(x, max(y, z)), 也就是说，设置的 @workgroup_size 三个维度的乘积不能大于 maxComputeWorkgroupSizeX，Y，Z 三个维度中的最大值。

通常，当只需要在计算着色器中操作存储缓冲区时，使用一维工作组 @workgroup_size(x) 是合适的, y、z 维度保持默认值 1; 当需要操作纹理，使用二维或三维工作组 @workgroup_size(x，y) 会更便利。

现在我们可以来回答开头的问题了：

rust
cpass.dispatch_workgroups(workgroup_count.0, workgroup_count.1, workgroup_count.2);

上面计算通道的调度命令接收的参数具体是什么意思呢？

它们就是工作组网格的 3 个维度量。
以 1000 * 768 个线程组成的网格为例，假设工作组大小为@workgroup_size(32，16)，那么:

rust
// 计算维度值并向上取整
-workgroup_count = ((1000 + (32 -1)) / 32, (768 + (16 -1)) / 16, 1);

CPU 端读取计算管线输出 ​

在案例展示/离屏渲染章节已讲解过如何从缓冲区中读取数据，存储纹理的读取也是一样的，这里不再赘述。

实战：实现高斯模糊 ​

要掌握 WebGPU 计算管线，核心内容就是上边讲解的 “使用存储缓冲区与存储纹理” 及 “工作组”，某个具体实现的着色器逻辑代码并不重要，因为它们与顶点及片元着色器代码没有太大的区别。

点击下方的查看源码就能看到所有实现代码。如对图片模糊算法的细节感兴趣，可以查看这里

运行示例代码 ​

此示例可在桌面端及 Chrome / Edge 113+、Arc、Safari 18、Firefox Nightly、Safari Technology Preview 浏览器中运行（如何开启浏览器 WebGPU 功能支持)

查看源码！
- +workgroup_count = ((1000 + (32 -1)) / 32, (768 + (16 -1)) / 16, 1);

CPU 端读取计算管线输出 ​

在案例展示/离屏渲染章节已讲解过如何从缓冲区中读取数据，存储纹理的读取也是一样的，这里不再赘述。

实战：实现高斯模糊 ​

要掌握 WebGPU 计算管线，核心内容就是上边讲解的 “使用存储缓冲区与存储纹理” 及 “工作组”，某个具体实现的着色器逻辑代码并不重要，因为它们与顶点及片元着色器代码没有太大的区别。

点击下方的查看源码就能看到所有实现代码。如对图片模糊算法的细节感兴趣，可以查看这里

运行示例代码 ​

此示例可在桌面端及 Chrome / Edge 113+、Arc、Safari 18、Firefox Nightly、Safari Technology Preview 浏览器中运行（如何开启浏览器 WebGPU 功能支持)

查看源码！
+ \ No newline at end of file diff --git a/intermediate/hdr/index.html b/intermediate/hdr/index.html index de52ba205..3fea2ea7b 100644 --- a/intermediate/hdr/index.html +++ b/intermediate/hdr/index.html @@ -6,14 +6,14 @@ 渲染高动态范围场景 (High Dynamic Range Rendering) | 学习 wgpu - + - + - - - + + + @@ -918,8 +918,8 @@ let result = (diffuse_color + specular_color) * object_color.xyz + reflection * shininess; return vec4<f32>(result, object_color.a); -}

A little note on the reflection math. The view_dir gives us the direction to the camera from the surface. The reflection math needs the direction from the camera to the surface, so we negate view_dir. We then use wgsl's built-in reflect function to reflect the inverted view_dir about the world_normal. This gives us a direction that we can use to sample the environment map and get the color of the sky in that direction. Just looking at the reflection component gives us the following:

关于反射计算的一点说明：view_dir 给出了从屏幕到相机的方向。反射计算需要从相机到屏幕的方向，因此需要对 view_dir 取反。然后，使用 wgsl 内置的 reflect 函数将取反的 view_dir 关于 world_normal 进行反射，得到一个反射方向，我们使用它来采样环境贴图并获取该方向上的天空颜色。

仅查看反射分量的效果：

just-reflections

最终场景效果:

with-reflections

示例 ​

查看源码！
- +}

A little note on the reflection math. The view_dir gives us the direction to the camera from the surface. The reflection math needs the direction from the camera to the surface, so we negate view_dir. We then use wgsl's built-in reflect function to reflect the inverted view_dir about the world_normal. This gives us a direction that we can use to sample the environment map and get the color of the sky in that direction. Just looking at the reflection component gives us the following:

关于反射计算的一点说明：view_dir 给出了从屏幕到相机的方向。反射计算需要从相机到屏幕的方向，因此需要对 view_dir 取反。然后，使用 wgsl 内置的 reflect 函数将取反的 view_dir 关于 world_normal 进行反射，得到一个反射方向，我们使用它来采样环境贴图并获取该方向上的天空颜色。

仅查看反射分量的效果：

just-reflections

最终场景效果:

with-reflections

示例 ​

查看源码！
+ \ No newline at end of file diff --git a/intermediate/pbr-notes.html b/intermediate/pbr-notes.html index a38cabbfc..beb030997 100644 --- a/intermediate/pbr-notes.html +++ b/intermediate/pbr-notes.html @@ -6,21 +6,21 @@ Sources | 学习 wgpu - + - + - - - + + + -
学习 wgpu

中文

English

中文

English

Appearance

- +
学习 wgpu

中文

English

中文

English

Appearance

+ \ No newline at end of file diff --git a/intermediate/tutorial10-lighting/index.html b/intermediate/tutorial10-lighting/index.html index 2fc4ba314..f0b0a4f2f 100644 --- a/intermediate/tutorial10-lighting/index.html +++ b/intermediate/tutorial10-lighting/index.html @@ -6,14 +6,14 @@ 光照 | 学习 wgpu - + - + - - - + + + @@ -595,8 +595,8 @@ let specular_color = specular_strength * light.color;

最后，将高光颜色合成到片元输出结果中：

rust
let result = (ambient_color + diffuse_color + specular_color) * object_color.xyz;

完成全部代码之后，就能得到如下渲染效果：

./ambient_diffuse_specular_lighting.png

假如只查看镜面反射得到的高光颜色 specular_color 本身，渲染效果如下：

./specular_lighting.png

半程向量 ​

所谓的半程向量（Halfway Vector）也是一个单位向量，它正好在视图方向和光源方向的中间。

到目前为止，我们实际上只实现了 Blinn-Phong 的 Phong 部分。Phong 反射模型很好用，但在某些情况下会产生 bug。 Blinn-Phong 的 Blinn 部分来自于这样的事实：如果把 view_dir 和 light_dir 加在一起，对结果进行归一化处理后得到一个半程向量，然后再与法向量 normal 求点积，就会得到大致相同的渲染结果，且不会有使用反射方向 reflect_dir 可能产生的问题。

rust
let view_dir = normalize(camera.view_pos.xyz - in.world_position);
 let half_dir = normalize(view_dir + light_dir);
 
-let specular_strength = pow(max(dot(in.world_normal, half_dir), 0.0), 32.0);

在我们这个场景下很难看出有何不同，但以下就是改进了光照计算后的渲染效果：

./half_dir.png

查看源码！
- +let specular_strength = pow(max(dot(in.world_normal, half_dir), 0.0), 32.0);

在我们这个场景下很难看出有何不同，但以下就是改进了光照计算后的渲染效果：

./half_dir.png

查看源码！
+ \ No newline at end of file diff --git a/intermediate/tutorial11-normals/index.html b/intermediate/tutorial11-normals/index.html index ce8ccb41e..871298401 100644 --- a/intermediate/tutorial11-normals/index.html +++ b/intermediate/tutorial11-normals/index.html @@ -6,14 +6,14 @@ 法线映射 | 学习 wgpu - + - + - - - + + + @@ -450,8 +450,8 @@ 0..self.instances.len() as u32, &self.camera_bind_group, &self.light_bind_group, -);

得到的渲染效果如下：

上面使用的纹理可以在 Github 源码库中找到。

查看源码！
- +);

得到的渲染效果如下：

上面使用的纹理可以在 Github 源码库中找到。

查看源码！
+ \ No newline at end of file diff --git a/intermediate/tutorial12-camera/index.html b/intermediate/tutorial12-camera/index.html index 30cb0f252..25282f3e1 100644 --- a/intermediate/tutorial12-camera/index.html +++ b/intermediate/tutorial12-camera/index.html @@ -6,14 +6,14 @@ 更好的摄像机 | 学习 wgpu - + - + - - - + + + @@ -342,8 +342,8 @@ _ => {} } }); -}

现在，我们应该可以自由控制摄像机了：

./screenshot.png

查看源码！
- +}

现在，我们应该可以自由控制摄像机了：

./screenshot.png

查看源码！
+ \ No newline at end of file diff --git a/intermediate/tutorial13-terrain/index.html b/intermediate/tutorial13-terrain/index.html index a42259fc5..311ea6a15 100644 --- a/intermediate/tutorial13-terrain/index.html +++ b/intermediate/tutorial13-terrain/index.html @@ -6,14 +6,14 @@ 程序地形 | 学习 wgpu - + - + - - - + + + @@ -121,8 +121,8 @@ for y in workgroup_size.x: for z in workgroup_size.x: var global_invocation_id = local_invocation_id * workgroup_size + (x, y, z); - gen_terrain(global_invocation_id)

如果想了解更多关于工作组的信息请查看 WGSL 文档。

TODO:

- + gen_terrain(global_invocation_id)

如果想了解更多关于工作组的信息请查看 WGSL 文档。

TODO:

+ \ No newline at end of file diff --git a/intermediate/vertex-animation/index.html b/intermediate/vertex-animation/index.html index 1da3402f3..d03517e05 100644 --- a/intermediate/vertex-animation/index.html +++ b/intermediate/vertex-animation/index.html @@ -6,21 +6,21 @@ 顶点动画 | 学习 wgpu - + - + - - - + + + -
学习 wgpu

中文

English

中文

English

Appearance

顶点动画 ​

示例：顶点网格模拟翻页动画 ​

查看源码！
- +
学习 wgpu

中文

English

中文

English

Appearance

顶点动画 ​

示例：顶点网格模拟翻页动画 ​

查看源码！
+ \ No newline at end of file diff --git a/intermediate/vertex-animation/universal-animation-formula.html b/intermediate/vertex-animation/universal-animation-formula.html index dbb9a0db5..f47601a77 100644 --- a/intermediate/vertex-animation/universal-animation-formula.html +++ b/intermediate/vertex-animation/universal-animation-formula.html @@ -6,14 +6,14 @@ 万能动画公式 | 学习 wgpu - + - + - - - + + + @@ -69,8 +69,8 @@ fn vs_main(@location(0) pos: vec3f, @location(1) target_pos: vec3f) -> @builtin(position) vec4f { let new_pos = pos + (target_pos - pos) * hilbert.near_target_ratio; return mvp_mat.mvp * vec4<f32>(new_pos, 1.0); -}

查看完整源码 ​

查看源码！
- +}

查看完整源码 ​

查看源码！
+ \ No newline at end of file diff --git a/showcase/alignment.html b/showcase/alignment.html index dbedd167e..713fd3069 100644 --- a/showcase/alignment.html +++ b/showcase/alignment.html @@ -6,14 +6,14 @@ Memory Layout in WGSL | 学习 wgpu - + - + - - - + + + @@ -39,8 +39,8 @@ | ^^^^^^^^^^^^ | = note: source type: `LightUniform` (256 bits) - = note: target type: `_::{closure#0}::TypeWithoutPadding` (192 bits)

Additional resources ​

If you're looking for more information check out the write-up by @teoxoy.

- + = note: target type: `_::{closure#0}::TypeWithoutPadding` (192 bits)

Additional resources ​

If you're looking for more information check out the write-up by @teoxoy.

+ \ No newline at end of file diff --git a/showcase/compute/index.html b/showcase/compute/index.html index 2a2a21151..beb0dc248 100644 --- a/showcase/compute/index.html +++ b/showcase/compute/index.html @@ -6,14 +6,14 @@ Compute Example: Tangents and Bitangents | 学习 wgpu - + - + - - - + + + @@ -113,8 +113,8 @@ len: t_list.len(), }); flat_triangle_map.extend(t_list); -}

I ultimately decided against this method as it was more complicated, and I haven't had time to benchmark it to see if it's faster than the simple method.

Results ​

The tangents and bitangents are now getting calculated correctly and on the GPU!

./results.png

查看源码！
- +}

I ultimately decided against this method as it was more complicated, and I haven't had time to benchmark it to see if it's faster than the simple method.

Results ​

The tangents and bitangents are now getting calculated correctly and on the GPU!

./results.png

查看源码！
+ \ No newline at end of file diff --git a/showcase/gifs/index.html b/showcase/gifs/index.html index 4a4403459..dea2c6a29 100644 --- a/showcase/gifs/index.html +++ b/showcase/gifs/index.html @@ -6,14 +6,14 @@ 生成 GIF 动图 | 学习 wgpu - + - + - - - + + + @@ -142,8 +142,8 @@ _ => { eprintln!("Something went wrong") } } -}

完成后，就可以将我们的帧数据传递给 save_gif() 函数了：

rust
save_gif("output.gif", &mut frames, 1, texture_size as u16).unwrap();

我们还可以使用纹理数组来做优化，并一次发送所有绘制命令。 但上面的简单程序就是生成 GIF 动图的全部要点了，运行示例代码将得到以下 GIF 图：

./output.gif

查看源码！
- +}

完成后，就可以将我们的帧数据传递给 save_gif() 函数了：

rust
save_gif("output.gif", &mut frames, 1, texture_size as u16).unwrap();

我们还可以使用纹理数组来做优化，并一次发送所有绘制命令。 但上面的简单程序就是生成 GIF 动图的全部要点了，运行示例代码将得到以下 GIF 图：

./output.gif

查看源码！
+ \ No newline at end of file diff --git a/showcase/pong/index.html b/showcase/pong/index.html index bb632a632..5d30b3f7e 100644 --- a/showcase/pong/index.html +++ b/showcase/pong/index.html @@ -6,14 +6,14 @@ Pong | 学习 wgpu - + - + - - - + + + @@ -278,8 +278,8 @@ Some(()) }) .expect("Couldn't append canvas to document body."); -}

Everything else works the same.

Summary ​

A fun project to work on. It was overly architected, and kinda hard to make changes, but a good experience nonetheless.

Try the code down below! (Controls currently require a keyboard.)

- +}

Everything else works the same.

Summary ​

A fun project to work on. It was overly architected, and kinda hard to make changes, but a good experience nonetheless.

Try the code down below! (Controls currently require a keyboard.)

+ \ No newline at end of file diff --git a/showcase/threading.html b/showcase/threading.html index 75855263c..b7603f907 100644 --- a/showcase/threading.html +++ b/showcase/threading.html @@ -6,14 +6,14 @@ Multi-threading with Wgpu and Rayon | 学习 wgpu - + - + - - - + + + @@ -106,8 +106,8 @@ } // ... }

We've parallelized loading the meshes, and making the vertex array for them. Probably a bit overkill, but rayon should prevent us from using too many threads.

You'll notice that we didn't use rayon for calculating the tangent, and bitangent. I tried to get it to work, but I was having trouble finding a way to do it without multiple mutable references to vertices. I don't feel like introducing a std::sync::Mutex, so I'll leave it for now.

This is honestly a better job for a compute shader, as the model data is going to get loaded into a buffer anyway.

It's that easy! ​

Most of the wgpu types are Send + Sync, so we can use them in threads without much trouble. It was so easy, that I feel like this tutorial is too short! I'll just leave off with a speed comparison between the previous model loading code and the current code.

Elapsed (Original): 309.596382ms
-Elapsed (Threaded): 199.645027ms

We're not loading that many resources, so the speedup is minimal. We'll be doing more stuff with threading, but this is a good introduction.

查看源码！
- +Elapsed (Threaded): 199.645027ms

We're not loading that many resources, so the speedup is minimal. We'll be doing more stuff with threading, but this is a good introduction.

查看源码！
+ \ No newline at end of file diff --git a/showcase/windowless/index.html b/showcase/windowless/index.html index b7b19aff5..d628e0855 100644 --- a/showcase/windowless/index.html +++ b/showcase/windowless/index.html @@ -6,14 +6,14 @@ 离屏渲染 | 学习 wgpu - + - + - - - + + + @@ -197,8 +197,8 @@ fn main() { pollster::block_on(run()); -}

现在运行代码，就会在项目根目录输出这样一张名为 image.png 的图像：

a brown triangle

查看源码！
- +}

现在运行代码，就会在项目根目录输出这样一张名为 image.png 的图像：

a brown triangle

查看源码！
+ \ No newline at end of file diff --git a/simuverse.html b/simuverse.html index fb90d148c..46c014fc2 100644 --- a/simuverse.html +++ b/simuverse.html @@ -6,21 +6,21 @@ 学习 wgpu - + - + - - - + + +
学习 wgpu

中文

English

中文

English

Appearance

WASM 加载中...
- + \ No newline at end of file diff --git a/wasm/compute-pipeline.js b/wasm/compute-pipeline.js index 1cbc6df52..5853eacd9 100644 --- a/wasm/compute-pipeline.js +++ b/wasm/compute-pipeline.js @@ -1606,55 +1606,55 @@ function __wbg_get_imports() { const ret = arg0.repeat; return ret; }; - imports.wbg.__wbindgen_closure_wrapper1346 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper1341 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 102, __wbg_adapter_30); return ret; }; - imports.wbg.__wbindgen_closure_wrapper2728 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper2724 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 102, __wbg_adapter_30); return ret; }; - imports.wbg.__wbindgen_closure_wrapper2734 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper2730 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 102, __wbg_adapter_30); return ret; }; - imports.wbg.__wbindgen_closure_wrapper3219 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper3214 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 102, __wbg_adapter_37); return ret; }; - imports.wbg.__wbindgen_closure_wrapper3264 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper3259 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 102, __wbg_adapter_30); return ret; }; - imports.wbg.__wbindgen_closure_wrapper3283 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper3278 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 102, __wbg_adapter_30); return ret; }; - imports.wbg.__wbindgen_closure_wrapper3284 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper3279 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 102, __wbg_adapter_30); return ret; }; - imports.wbg.__wbindgen_closure_wrapper3285 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper3280 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 102, __wbg_adapter_30); return ret; }; - imports.wbg.__wbindgen_closure_wrapper3286 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper3281 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 102, __wbg_adapter_30); return ret; }; - imports.wbg.__wbindgen_closure_wrapper3287 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper3282 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 102, __wbg_adapter_30); return ret; }; - imports.wbg.__wbindgen_closure_wrapper3331 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper3326 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 102, __wbg_adapter_30); return ret; }; - imports.wbg.__wbindgen_closure_wrapper3332 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper3327 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 102, __wbg_adapter_54); return ret; }; - imports.wbg.__wbindgen_closure_wrapper3333 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper3328 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 102, __wbg_adapter_30); return ret; }; diff --git a/wasm/compute-pipeline_bg.wasm b/wasm/compute-pipeline_bg.wasm index a290a6f5c..ccddae4ed 100644 Binary files a/wasm/compute-pipeline_bg.wasm and b/wasm/compute-pipeline_bg.wasm differ diff --git a/wasm/hdr.js b/wasm/hdr.js index 7ba6de67b..d877571dd 100644 --- a/wasm/hdr.js +++ b/wasm/hdr.js @@ -1754,55 +1754,55 @@ function __wbg_get_imports() { const ret = arg0.repeat; return ret; }; - imports.wbg.__wbindgen_closure_wrapper2564 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper2557 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 285, __wbg_adapter_32); return ret; }; - imports.wbg.__wbindgen_closure_wrapper3960 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper3954 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 285, __wbg_adapter_32); return ret; }; - imports.wbg.__wbindgen_closure_wrapper3966 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper3960 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 285, __wbg_adapter_32); return ret; }; - imports.wbg.__wbindgen_closure_wrapper4445 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper4439 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 285, __wbg_adapter_39); return ret; }; - imports.wbg.__wbindgen_closure_wrapper4490 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper4484 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 285, __wbg_adapter_32); return ret; }; - imports.wbg.__wbindgen_closure_wrapper4508 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper4502 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 285, __wbg_adapter_32); return ret; }; - imports.wbg.__wbindgen_closure_wrapper4509 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper4503 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 285, __wbg_adapter_32); return ret; }; - imports.wbg.__wbindgen_closure_wrapper4510 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper4504 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 285, __wbg_adapter_32); return ret; }; - imports.wbg.__wbindgen_closure_wrapper4511 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper4505 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 285, __wbg_adapter_32); return ret; }; - imports.wbg.__wbindgen_closure_wrapper4512 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper4506 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 285, __wbg_adapter_32); return ret; }; - imports.wbg.__wbindgen_closure_wrapper4554 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper4548 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 285, __wbg_adapter_32); return ret; }; - imports.wbg.__wbindgen_closure_wrapper4555 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper4549 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 285, __wbg_adapter_56); return ret; }; - imports.wbg.__wbindgen_closure_wrapper4556 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper4550 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 285, __wbg_adapter_32); return ret; }; diff --git a/wasm/hdr_bg.wasm b/wasm/hdr_bg.wasm index d517877c6..bca93ddc2 100644 Binary files a/wasm/hdr_bg.wasm and b/wasm/hdr_bg.wasm differ diff --git a/wasm/hilbert-curve.js b/wasm/hilbert-curve.js index 166a204a9..b1740cae5 100644 --- a/wasm/hilbert-curve.js +++ b/wasm/hilbert-curve.js @@ -1606,55 +1606,55 @@ function __wbg_get_imports() { const ret = arg0.repeat; return ret; }; - imports.wbg.__wbindgen_closure_wrapper1246 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper1240 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 69, __wbg_adapter_30); return ret; }; - imports.wbg.__wbindgen_closure_wrapper2628 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper2623 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 69, __wbg_adapter_30); return ret; }; - imports.wbg.__wbindgen_closure_wrapper2634 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper2629 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 69, __wbg_adapter_30); return ret; }; - imports.wbg.__wbindgen_closure_wrapper3119 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper3114 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 69, __wbg_adapter_37); return ret; }; - imports.wbg.__wbindgen_closure_wrapper3164 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper3159 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 69, __wbg_adapter_30); return ret; }; - imports.wbg.__wbindgen_closure_wrapper3183 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper3178 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 69, __wbg_adapter_30); return ret; }; - imports.wbg.__wbindgen_closure_wrapper3184 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper3179 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 69, __wbg_adapter_30); return ret; }; - imports.wbg.__wbindgen_closure_wrapper3185 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper3180 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 69, __wbg_adapter_30); return ret; }; - imports.wbg.__wbindgen_closure_wrapper3186 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper3181 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 69, __wbg_adapter_30); return ret; }; - imports.wbg.__wbindgen_closure_wrapper3187 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper3182 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 69, __wbg_adapter_30); return ret; }; - imports.wbg.__wbindgen_closure_wrapper3231 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper3226 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 69, __wbg_adapter_30); return ret; }; - imports.wbg.__wbindgen_closure_wrapper3232 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper3227 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 69, __wbg_adapter_54); return ret; }; - imports.wbg.__wbindgen_closure_wrapper3233 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper3228 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 69, __wbg_adapter_30); return ret; }; diff --git a/wasm/hilbert-curve_bg.wasm b/wasm/hilbert-curve_bg.wasm index d40e9c426..b2e8fc268 100644 Binary files a/wasm/hilbert-curve_bg.wasm and b/wasm/hilbert-curve_bg.wasm differ diff --git a/wasm/tutorial1-window.js b/wasm/tutorial1-window.js index 8d6092bc5..ab6e23c46 100644 --- a/wasm/tutorial1-window.js +++ b/wasm/tutorial1-window.js @@ -940,7 +940,7 @@ function __wbg_get_imports() { const ret = arg0.repeat; return ret; }; - imports.wbg.__wbindgen_closure_wrapper990 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper989 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 55, __wbg_adapter_22); return ret; }; diff --git a/wasm/tutorial1-window_bg.wasm b/wasm/tutorial1-window_bg.wasm index 7b6db2e0e..ba2d94a0d 100644 Binary files a/wasm/tutorial1-window_bg.wasm and b/wasm/tutorial1-window_bg.wasm differ diff --git a/wasm/tutorial10-lighting.js b/wasm/tutorial10-lighting.js index cb48c9e03..9e1bdc784 100644 --- a/wasm/tutorial10-lighting.js +++ b/wasm/tutorial10-lighting.js @@ -183,7 +183,7 @@ function makeMutClosure(arg0, arg1, dtor, f) { return real; } function __wbg_adapter_36(arg0, arg1, arg2) { - wasm.closure460_externref_shim(arg0, arg1, arg2); + wasm.closure458_externref_shim(arg0, arg1, arg2); } function __wbg_adapter_43(arg0, arg1) { @@ -2673,56 +2673,56 @@ function __wbg_get_imports() { const ret = arg0.repeat; return ret; }; - imports.wbg.__wbindgen_closure_wrapper3653 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 461, __wbg_adapter_36); + imports.wbg.__wbindgen_closure_wrapper3646 = function(arg0, arg1, arg2) { + const ret = makeMutClosure(arg0, arg1, 459, __wbg_adapter_36); return ret; }; - imports.wbg.__wbindgen_closure_wrapper5920 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 461, __wbg_adapter_36); + imports.wbg.__wbindgen_closure_wrapper5914 = function(arg0, arg1, arg2) { + const ret = makeMutClosure(arg0, arg1, 459, __wbg_adapter_36); return ret; }; - imports.wbg.__wbindgen_closure_wrapper5926 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 461, __wbg_adapter_36); + imports.wbg.__wbindgen_closure_wrapper5920 = function(arg0, arg1, arg2) { + const ret = makeMutClosure(arg0, arg1, 459, __wbg_adapter_36); return ret; }; - imports.wbg.__wbindgen_closure_wrapper7335 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 461, __wbg_adapter_43); + imports.wbg.__wbindgen_closure_wrapper7329 = function(arg0, arg1, arg2) { + const ret = makeMutClosure(arg0, arg1, 459, __wbg_adapter_43); return ret; }; - imports.wbg.__wbindgen_closure_wrapper7380 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 461, __wbg_adapter_36); + imports.wbg.__wbindgen_closure_wrapper7374 = function(arg0, arg1, arg2) { + const ret = makeMutClosure(arg0, arg1, 459, __wbg_adapter_36); return ret; }; - imports.wbg.__wbindgen_closure_wrapper7397 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 461, __wbg_adapter_36); + imports.wbg.__wbindgen_closure_wrapper7391 = function(arg0, arg1, arg2) { + const ret = makeMutClosure(arg0, arg1, 459, __wbg_adapter_36); return ret; }; - imports.wbg.__wbindgen_closure_wrapper7398 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 461, __wbg_adapter_36); + imports.wbg.__wbindgen_closure_wrapper7392 = function(arg0, arg1, arg2) { + const ret = makeMutClosure(arg0, arg1, 459, __wbg_adapter_36); return ret; }; - imports.wbg.__wbindgen_closure_wrapper7399 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 461, __wbg_adapter_36); + imports.wbg.__wbindgen_closure_wrapper7393 = function(arg0, arg1, arg2) { + const ret = makeMutClosure(arg0, arg1, 459, __wbg_adapter_36); return ret; }; - imports.wbg.__wbindgen_closure_wrapper7400 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 461, __wbg_adapter_36); + imports.wbg.__wbindgen_closure_wrapper7394 = function(arg0, arg1, arg2) { + const ret = makeMutClosure(arg0, arg1, 459, __wbg_adapter_36); return ret; }; - imports.wbg.__wbindgen_closure_wrapper7401 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 461, __wbg_adapter_36); + imports.wbg.__wbindgen_closure_wrapper7395 = function(arg0, arg1, arg2) { + const ret = makeMutClosure(arg0, arg1, 459, __wbg_adapter_36); return ret; }; - imports.wbg.__wbindgen_closure_wrapper7443 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 461, __wbg_adapter_36); + imports.wbg.__wbindgen_closure_wrapper7437 = function(arg0, arg1, arg2) { + const ret = makeMutClosure(arg0, arg1, 459, __wbg_adapter_36); return ret; }; - imports.wbg.__wbindgen_closure_wrapper7444 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 461, __wbg_adapter_60); + imports.wbg.__wbindgen_closure_wrapper7438 = function(arg0, arg1, arg2) { + const ret = makeMutClosure(arg0, arg1, 459, __wbg_adapter_60); return ret; }; - imports.wbg.__wbindgen_closure_wrapper7445 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 461, __wbg_adapter_36); + imports.wbg.__wbindgen_closure_wrapper7439 = function(arg0, arg1, arg2) { + const ret = makeMutClosure(arg0, arg1, 459, __wbg_adapter_36); return ret; }; imports.wbg.__wbindgen_init_externref_table = function() { diff --git a/wasm/tutorial10-lighting_bg.wasm b/wasm/tutorial10-lighting_bg.wasm index 3d23009ae..190c20219 100644 Binary files a/wasm/tutorial10-lighting_bg.wasm and b/wasm/tutorial10-lighting_bg.wasm differ diff --git a/wasm/tutorial11-normals.js b/wasm/tutorial11-normals.js index 90bb36786..9395defc0 100644 --- a/wasm/tutorial11-normals.js +++ b/wasm/tutorial11-normals.js @@ -183,7 +183,7 @@ function makeMutClosure(arg0, arg1, dtor, f) { return real; } function __wbg_adapter_36(arg0, arg1, arg2) { - wasm.closure460_externref_shim(arg0, arg1, arg2); + wasm.closure458_externref_shim(arg0, arg1, arg2); } function __wbg_adapter_43(arg0, arg1) { @@ -2673,56 +2673,56 @@ function __wbg_get_imports() { const ret = arg0.repeat; return ret; }; - imports.wbg.__wbindgen_closure_wrapper3659 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 461, __wbg_adapter_36); + imports.wbg.__wbindgen_closure_wrapper3648 = function(arg0, arg1, arg2) { + const ret = makeMutClosure(arg0, arg1, 459, __wbg_adapter_36); return ret; }; - imports.wbg.__wbindgen_closure_wrapper5926 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 461, __wbg_adapter_36); + imports.wbg.__wbindgen_closure_wrapper5918 = function(arg0, arg1, arg2) { + const ret = makeMutClosure(arg0, arg1, 459, __wbg_adapter_36); return ret; }; - imports.wbg.__wbindgen_closure_wrapper5932 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 461, __wbg_adapter_36); + imports.wbg.__wbindgen_closure_wrapper5924 = function(arg0, arg1, arg2) { + const ret = makeMutClosure(arg0, arg1, 459, __wbg_adapter_36); return ret; }; - imports.wbg.__wbindgen_closure_wrapper7341 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 461, __wbg_adapter_43); + imports.wbg.__wbindgen_closure_wrapper7335 = function(arg0, arg1, arg2) { + const ret = makeMutClosure(arg0, arg1, 459, __wbg_adapter_43); return ret; }; - imports.wbg.__wbindgen_closure_wrapper7386 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 461, __wbg_adapter_36); + imports.wbg.__wbindgen_closure_wrapper7380 = function(arg0, arg1, arg2) { + const ret = makeMutClosure(arg0, arg1, 459, __wbg_adapter_36); return ret; }; - imports.wbg.__wbindgen_closure_wrapper7403 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 461, __wbg_adapter_36); + imports.wbg.__wbindgen_closure_wrapper7397 = function(arg0, arg1, arg2) { + const ret = makeMutClosure(arg0, arg1, 459, __wbg_adapter_36); return ret; }; - imports.wbg.__wbindgen_closure_wrapper7404 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 461, __wbg_adapter_36); + imports.wbg.__wbindgen_closure_wrapper7398 = function(arg0, arg1, arg2) { + const ret = makeMutClosure(arg0, arg1, 459, __wbg_adapter_36); return ret; }; - imports.wbg.__wbindgen_closure_wrapper7405 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 461, __wbg_adapter_36); + imports.wbg.__wbindgen_closure_wrapper7399 = function(arg0, arg1, arg2) { + const ret = makeMutClosure(arg0, arg1, 459, __wbg_adapter_36); return ret; }; - imports.wbg.__wbindgen_closure_wrapper7406 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 461, __wbg_adapter_36); + imports.wbg.__wbindgen_closure_wrapper7400 = function(arg0, arg1, arg2) { + const ret = makeMutClosure(arg0, arg1, 459, __wbg_adapter_36); return ret; }; - imports.wbg.__wbindgen_closure_wrapper7407 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 461, __wbg_adapter_36); + imports.wbg.__wbindgen_closure_wrapper7401 = function(arg0, arg1, arg2) { + const ret = makeMutClosure(arg0, arg1, 459, __wbg_adapter_36); return ret; }; - imports.wbg.__wbindgen_closure_wrapper7449 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 461, __wbg_adapter_36); + imports.wbg.__wbindgen_closure_wrapper7443 = function(arg0, arg1, arg2) { + const ret = makeMutClosure(arg0, arg1, 459, __wbg_adapter_36); return ret; }; - imports.wbg.__wbindgen_closure_wrapper7450 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 461, __wbg_adapter_60); + imports.wbg.__wbindgen_closure_wrapper7444 = function(arg0, arg1, arg2) { + const ret = makeMutClosure(arg0, arg1, 459, __wbg_adapter_60); return ret; }; - imports.wbg.__wbindgen_closure_wrapper7451 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 461, __wbg_adapter_36); + imports.wbg.__wbindgen_closure_wrapper7445 = function(arg0, arg1, arg2) { + const ret = makeMutClosure(arg0, arg1, 459, __wbg_adapter_36); return ret; }; imports.wbg.__wbindgen_init_externref_table = function() { diff --git a/wasm/tutorial11-normals_bg.wasm b/wasm/tutorial11-normals_bg.wasm index e268a6ecc..09e3ca6d0 100644 Binary files a/wasm/tutorial11-normals_bg.wasm and b/wasm/tutorial11-normals_bg.wasm differ diff --git a/wasm/tutorial12-camera.js b/wasm/tutorial12-camera.js index 76bf55773..2e518bd66 100644 --- a/wasm/tutorial12-camera.js +++ b/wasm/tutorial12-camera.js @@ -2673,55 +2673,55 @@ function __wbg_get_imports() { const ret = arg0.repeat; return ret; }; - imports.wbg.__wbindgen_closure_wrapper3663 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper3654 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 464, __wbg_adapter_36); return ret; }; - imports.wbg.__wbindgen_closure_wrapper5930 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper5921 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 464, __wbg_adapter_36); return ret; }; - imports.wbg.__wbindgen_closure_wrapper5936 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper5927 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 464, __wbg_adapter_36); return ret; }; - imports.wbg.__wbindgen_closure_wrapper7344 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper7338 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 464, __wbg_adapter_43); return ret; }; - imports.wbg.__wbindgen_closure_wrapper7389 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper7383 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 464, __wbg_adapter_36); return ret; }; - imports.wbg.__wbindgen_closure_wrapper7406 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper7400 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 464, __wbg_adapter_36); return ret; }; - imports.wbg.__wbindgen_closure_wrapper7407 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper7401 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 464, __wbg_adapter_36); return ret; }; - imports.wbg.__wbindgen_closure_wrapper7408 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper7402 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 464, __wbg_adapter_36); return ret; }; - imports.wbg.__wbindgen_closure_wrapper7409 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper7403 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 464, __wbg_adapter_36); return ret; }; - imports.wbg.__wbindgen_closure_wrapper7410 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper7404 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 464, __wbg_adapter_36); return ret; }; - imports.wbg.__wbindgen_closure_wrapper7452 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper7446 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 464, __wbg_adapter_36); return ret; }; - imports.wbg.__wbindgen_closure_wrapper7453 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper7447 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 464, __wbg_adapter_60); return ret; }; - imports.wbg.__wbindgen_closure_wrapper7454 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper7448 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 464, __wbg_adapter_36); return ret; }; diff --git a/wasm/tutorial12-camera_bg.wasm b/wasm/tutorial12-camera_bg.wasm index 3dfb083d7..6a86a5f96 100644 Binary files a/wasm/tutorial12-camera_bg.wasm and b/wasm/tutorial12-camera_bg.wasm differ diff --git a/wasm/tutorial2-surface.js b/wasm/tutorial2-surface.js index 7aa556506..3e271ac59 100644 --- a/wasm/tutorial2-surface.js +++ b/wasm/tutorial2-surface.js @@ -183,7 +183,7 @@ function makeMutClosure(arg0, arg1, dtor, f) { return real; } function __wbg_adapter_34(arg0, arg1, arg2) { - wasm.closure266_externref_shim(arg0, arg1, arg2); + wasm.closure268_externref_shim(arg0, arg1, arg2); } function __wbg_adapter_41(arg0, arg1) { @@ -2517,56 +2517,56 @@ function __wbg_get_imports() { const ret = arg0.repeat; return ret; }; - imports.wbg.__wbindgen_closure_wrapper2400 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 267, __wbg_adapter_34); + imports.wbg.__wbindgen_closure_wrapper2401 = function(arg0, arg1, arg2) { + const ret = makeMutClosure(arg0, arg1, 269, __wbg_adapter_34); return ret; }; imports.wbg.__wbindgen_closure_wrapper4665 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 267, __wbg_adapter_34); + const ret = makeMutClosure(arg0, arg1, 269, __wbg_adapter_34); return ret; }; imports.wbg.__wbindgen_closure_wrapper4671 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 267, __wbg_adapter_34); + const ret = makeMutClosure(arg0, arg1, 269, __wbg_adapter_34); return ret; }; imports.wbg.__wbindgen_closure_wrapper6088 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 267, __wbg_adapter_41); + const ret = makeMutClosure(arg0, arg1, 269, __wbg_adapter_41); return ret; }; imports.wbg.__wbindgen_closure_wrapper6133 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 267, __wbg_adapter_34); + const ret = makeMutClosure(arg0, arg1, 269, __wbg_adapter_34); return ret; }; imports.wbg.__wbindgen_closure_wrapper6151 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 267, __wbg_adapter_34); + const ret = makeMutClosure(arg0, arg1, 269, __wbg_adapter_34); return ret; }; imports.wbg.__wbindgen_closure_wrapper6152 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 267, __wbg_adapter_34); + const ret = makeMutClosure(arg0, arg1, 269, __wbg_adapter_34); return ret; }; imports.wbg.__wbindgen_closure_wrapper6153 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 267, __wbg_adapter_34); + const ret = makeMutClosure(arg0, arg1, 269, __wbg_adapter_34); return ret; }; imports.wbg.__wbindgen_closure_wrapper6154 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 267, __wbg_adapter_34); + const ret = makeMutClosure(arg0, arg1, 269, __wbg_adapter_34); return ret; }; imports.wbg.__wbindgen_closure_wrapper6155 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 267, __wbg_adapter_34); + const ret = makeMutClosure(arg0, arg1, 269, __wbg_adapter_34); return ret; }; imports.wbg.__wbindgen_closure_wrapper6198 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 267, __wbg_adapter_34); + const ret = makeMutClosure(arg0, arg1, 269, __wbg_adapter_34); return ret; }; imports.wbg.__wbindgen_closure_wrapper6199 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 267, __wbg_adapter_58); + const ret = makeMutClosure(arg0, arg1, 269, __wbg_adapter_58); return ret; }; imports.wbg.__wbindgen_closure_wrapper6200 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 267, __wbg_adapter_34); + const ret = makeMutClosure(arg0, arg1, 269, __wbg_adapter_34); return ret; }; imports.wbg.__wbindgen_init_externref_table = function() { diff --git a/wasm/tutorial2-surface_bg.wasm b/wasm/tutorial2-surface_bg.wasm index 896fc1027..c9035cef4 100644 Binary files a/wasm/tutorial2-surface_bg.wasm and b/wasm/tutorial2-surface_bg.wasm differ diff --git a/wasm/tutorial3-pipeline.js b/wasm/tutorial3-pipeline.js index 2caeb5f19..2d9d6d550 100644 --- a/wasm/tutorial3-pipeline.js +++ b/wasm/tutorial3-pipeline.js @@ -183,7 +183,7 @@ function makeMutClosure(arg0, arg1, dtor, f) { return real; } function __wbg_adapter_34(arg0, arg1, arg2) { - wasm.closure270_externref_shim(arg0, arg1, arg2); + wasm.closure272_externref_shim(arg0, arg1, arg2); } function __wbg_adapter_41(arg0, arg1) { @@ -2525,56 +2525,56 @@ function __wbg_get_imports() { const ret = arg0.repeat; return ret; }; - imports.wbg.__wbindgen_closure_wrapper2431 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 271, __wbg_adapter_34); + imports.wbg.__wbindgen_closure_wrapper2424 = function(arg0, arg1, arg2) { + const ret = makeMutClosure(arg0, arg1, 273, __wbg_adapter_34); return ret; }; - imports.wbg.__wbindgen_closure_wrapper4696 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 271, __wbg_adapter_34); + imports.wbg.__wbindgen_closure_wrapper4689 = function(arg0, arg1, arg2) { + const ret = makeMutClosure(arg0, arg1, 273, __wbg_adapter_34); return ret; }; - imports.wbg.__wbindgen_closure_wrapper4702 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 271, __wbg_adapter_34); + imports.wbg.__wbindgen_closure_wrapper4695 = function(arg0, arg1, arg2) { + const ret = makeMutClosure(arg0, arg1, 273, __wbg_adapter_34); return ret; }; - imports.wbg.__wbindgen_closure_wrapper6119 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 271, __wbg_adapter_41); + imports.wbg.__wbindgen_closure_wrapper6114 = function(arg0, arg1, arg2) { + const ret = makeMutClosure(arg0, arg1, 273, __wbg_adapter_41); return ret; }; - imports.wbg.__wbindgen_closure_wrapper6164 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 271, __wbg_adapter_34); + imports.wbg.__wbindgen_closure_wrapper6159 = function(arg0, arg1, arg2) { + const ret = makeMutClosure(arg0, arg1, 273, __wbg_adapter_34); return ret; }; - imports.wbg.__wbindgen_closure_wrapper6182 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 271, __wbg_adapter_34); + imports.wbg.__wbindgen_closure_wrapper6177 = function(arg0, arg1, arg2) { + const ret = makeMutClosure(arg0, arg1, 273, __wbg_adapter_34); return ret; }; - imports.wbg.__wbindgen_closure_wrapper6183 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 271, __wbg_adapter_34); + imports.wbg.__wbindgen_closure_wrapper6178 = function(arg0, arg1, arg2) { + const ret = makeMutClosure(arg0, arg1, 273, __wbg_adapter_34); return ret; }; - imports.wbg.__wbindgen_closure_wrapper6184 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 271, __wbg_adapter_34); + imports.wbg.__wbindgen_closure_wrapper6179 = function(arg0, arg1, arg2) { + const ret = makeMutClosure(arg0, arg1, 273, __wbg_adapter_34); return ret; }; - imports.wbg.__wbindgen_closure_wrapper6185 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 271, __wbg_adapter_34); + imports.wbg.__wbindgen_closure_wrapper6180 = function(arg0, arg1, arg2) { + const ret = makeMutClosure(arg0, arg1, 273, __wbg_adapter_34); return ret; }; - imports.wbg.__wbindgen_closure_wrapper6186 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 271, __wbg_adapter_34); + imports.wbg.__wbindgen_closure_wrapper6181 = function(arg0, arg1, arg2) { + const ret = makeMutClosure(arg0, arg1, 273, __wbg_adapter_34); return ret; }; - imports.wbg.__wbindgen_closure_wrapper6229 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 271, __wbg_adapter_34); + imports.wbg.__wbindgen_closure_wrapper6224 = function(arg0, arg1, arg2) { + const ret = makeMutClosure(arg0, arg1, 273, __wbg_adapter_34); return ret; }; - imports.wbg.__wbindgen_closure_wrapper6230 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 271, __wbg_adapter_58); + imports.wbg.__wbindgen_closure_wrapper6225 = function(arg0, arg1, arg2) { + const ret = makeMutClosure(arg0, arg1, 273, __wbg_adapter_58); return ret; }; - imports.wbg.__wbindgen_closure_wrapper6231 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 271, __wbg_adapter_34); + imports.wbg.__wbindgen_closure_wrapper6226 = function(arg0, arg1, arg2) { + const ret = makeMutClosure(arg0, arg1, 273, __wbg_adapter_34); return ret; }; imports.wbg.__wbindgen_init_externref_table = function() { diff --git a/wasm/tutorial3-pipeline_bg.wasm b/wasm/tutorial3-pipeline_bg.wasm index 2471d0e37..2f284bd50 100644 Binary files a/wasm/tutorial3-pipeline_bg.wasm and b/wasm/tutorial3-pipeline_bg.wasm differ diff --git a/wasm/tutorial4-buffer.js b/wasm/tutorial4-buffer.js index d2f4fadd3..e461a57cc 100644 --- a/wasm/tutorial4-buffer.js +++ b/wasm/tutorial4-buffer.js @@ -183,7 +183,7 @@ function makeMutClosure(arg0, arg1, dtor, f) { return real; } function __wbg_adapter_34(arg0, arg1, arg2) { - wasm.closure272_externref_shim(arg0, arg1, arg2); + wasm.closure274_externref_shim(arg0, arg1, arg2); } function __wbg_adapter_41(arg0, arg1) { @@ -2525,56 +2525,56 @@ function __wbg_get_imports() { const ret = arg0.repeat; return ret; }; - imports.wbg.__wbindgen_closure_wrapper2431 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 273, __wbg_adapter_34); + imports.wbg.__wbindgen_closure_wrapper2429 = function(arg0, arg1, arg2) { + const ret = makeMutClosure(arg0, arg1, 275, __wbg_adapter_34); return ret; }; - imports.wbg.__wbindgen_closure_wrapper4700 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 273, __wbg_adapter_34); + imports.wbg.__wbindgen_closure_wrapper4695 = function(arg0, arg1, arg2) { + const ret = makeMutClosure(arg0, arg1, 275, __wbg_adapter_34); return ret; }; - imports.wbg.__wbindgen_closure_wrapper4706 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 273, __wbg_adapter_34); + imports.wbg.__wbindgen_closure_wrapper4701 = function(arg0, arg1, arg2) { + const ret = makeMutClosure(arg0, arg1, 275, __wbg_adapter_34); return ret; }; - imports.wbg.__wbindgen_closure_wrapper6123 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 273, __wbg_adapter_41); + imports.wbg.__wbindgen_closure_wrapper6118 = function(arg0, arg1, arg2) { + const ret = makeMutClosure(arg0, arg1, 275, __wbg_adapter_41); return ret; }; - imports.wbg.__wbindgen_closure_wrapper6168 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 273, __wbg_adapter_34); + imports.wbg.__wbindgen_closure_wrapper6163 = function(arg0, arg1, arg2) { + const ret = makeMutClosure(arg0, arg1, 275, __wbg_adapter_34); return ret; }; - imports.wbg.__wbindgen_closure_wrapper6186 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 273, __wbg_adapter_34); + imports.wbg.__wbindgen_closure_wrapper6181 = function(arg0, arg1, arg2) { + const ret = makeMutClosure(arg0, arg1, 275, __wbg_adapter_34); return ret; }; - imports.wbg.__wbindgen_closure_wrapper6187 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 273, __wbg_adapter_34); + imports.wbg.__wbindgen_closure_wrapper6182 = function(arg0, arg1, arg2) { + const ret = makeMutClosure(arg0, arg1, 275, __wbg_adapter_34); return ret; }; - imports.wbg.__wbindgen_closure_wrapper6188 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 273, __wbg_adapter_34); + imports.wbg.__wbindgen_closure_wrapper6183 = function(arg0, arg1, arg2) { + const ret = makeMutClosure(arg0, arg1, 275, __wbg_adapter_34); return ret; }; - imports.wbg.__wbindgen_closure_wrapper6189 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 273, __wbg_adapter_34); + imports.wbg.__wbindgen_closure_wrapper6184 = function(arg0, arg1, arg2) { + const ret = makeMutClosure(arg0, arg1, 275, __wbg_adapter_34); return ret; }; - imports.wbg.__wbindgen_closure_wrapper6190 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 273, __wbg_adapter_34); + imports.wbg.__wbindgen_closure_wrapper6185 = function(arg0, arg1, arg2) { + const ret = makeMutClosure(arg0, arg1, 275, __wbg_adapter_34); return ret; }; - imports.wbg.__wbindgen_closure_wrapper6233 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 273, __wbg_adapter_34); + imports.wbg.__wbindgen_closure_wrapper6228 = function(arg0, arg1, arg2) { + const ret = makeMutClosure(arg0, arg1, 275, __wbg_adapter_34); return ret; }; - imports.wbg.__wbindgen_closure_wrapper6234 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 273, __wbg_adapter_58); + imports.wbg.__wbindgen_closure_wrapper6229 = function(arg0, arg1, arg2) { + const ret = makeMutClosure(arg0, arg1, 275, __wbg_adapter_58); return ret; }; - imports.wbg.__wbindgen_closure_wrapper6235 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 273, __wbg_adapter_34); + imports.wbg.__wbindgen_closure_wrapper6230 = function(arg0, arg1, arg2) { + const ret = makeMutClosure(arg0, arg1, 275, __wbg_adapter_34); return ret; }; imports.wbg.__wbindgen_init_externref_table = function() { diff --git a/wasm/tutorial4-buffer_bg.wasm b/wasm/tutorial4-buffer_bg.wasm index 88c8da23c..ae5c5a680 100644 Binary files a/wasm/tutorial4-buffer_bg.wasm and b/wasm/tutorial4-buffer_bg.wasm differ diff --git a/wasm/tutorial5-textures.js b/wasm/tutorial5-textures.js index 1728b6449..1a5fbcca1 100644 --- a/wasm/tutorial5-textures.js +++ b/wasm/tutorial5-textures.js @@ -2525,55 +2525,55 @@ function __wbg_get_imports() { const ret = arg0.repeat; return ret; }; - imports.wbg.__wbindgen_closure_wrapper3333 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper3327 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 434, __wbg_adapter_34); return ret; }; - imports.wbg.__wbindgen_closure_wrapper5604 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper5598 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 434, __wbg_adapter_34); return ret; }; - imports.wbg.__wbindgen_closure_wrapper5610 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper5604 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 434, __wbg_adapter_34); return ret; }; - imports.wbg.__wbindgen_closure_wrapper7020 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper7015 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 434, __wbg_adapter_41); return ret; }; - imports.wbg.__wbindgen_closure_wrapper7065 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper7060 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 434, __wbg_adapter_34); return ret; }; - imports.wbg.__wbindgen_closure_wrapper7082 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper7077 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 434, __wbg_adapter_34); return ret; }; - imports.wbg.__wbindgen_closure_wrapper7083 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper7078 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 434, __wbg_adapter_34); return ret; }; - imports.wbg.__wbindgen_closure_wrapper7084 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper7079 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 434, __wbg_adapter_34); return ret; }; - imports.wbg.__wbindgen_closure_wrapper7085 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper7080 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 434, __wbg_adapter_34); return ret; }; - imports.wbg.__wbindgen_closure_wrapper7086 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper7081 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 434, __wbg_adapter_34); return ret; }; - imports.wbg.__wbindgen_closure_wrapper7128 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper7123 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 434, __wbg_adapter_34); return ret; }; - imports.wbg.__wbindgen_closure_wrapper7129 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper7124 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 434, __wbg_adapter_58); return ret; }; - imports.wbg.__wbindgen_closure_wrapper7130 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper7125 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 434, __wbg_adapter_34); return ret; }; diff --git a/wasm/tutorial5-textures_bg.wasm b/wasm/tutorial5-textures_bg.wasm index 468a23676..fb012be11 100644 Binary files a/wasm/tutorial5-textures_bg.wasm and b/wasm/tutorial5-textures_bg.wasm differ diff --git a/wasm/tutorial6-uniforms.js b/wasm/tutorial6-uniforms.js index fd9a20e4c..15a8516d0 100644 --- a/wasm/tutorial6-uniforms.js +++ b/wasm/tutorial6-uniforms.js @@ -2525,55 +2525,55 @@ function __wbg_get_imports() { const ret = arg0.repeat; return ret; }; - imports.wbg.__wbindgen_closure_wrapper3337 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper3330 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 434, __wbg_adapter_34); return ret; }; - imports.wbg.__wbindgen_closure_wrapper5606 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper5601 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 434, __wbg_adapter_34); return ret; }; - imports.wbg.__wbindgen_closure_wrapper5612 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper5607 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 434, __wbg_adapter_34); return ret; }; - imports.wbg.__wbindgen_closure_wrapper7022 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper7017 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 434, __wbg_adapter_41); return ret; }; - imports.wbg.__wbindgen_closure_wrapper7067 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper7062 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 434, __wbg_adapter_34); return ret; }; - imports.wbg.__wbindgen_closure_wrapper7084 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper7079 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 434, __wbg_adapter_34); return ret; }; - imports.wbg.__wbindgen_closure_wrapper7085 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper7080 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 434, __wbg_adapter_34); return ret; }; - imports.wbg.__wbindgen_closure_wrapper7086 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper7081 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 434, __wbg_adapter_34); return ret; }; - imports.wbg.__wbindgen_closure_wrapper7087 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper7082 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 434, __wbg_adapter_34); return ret; }; - imports.wbg.__wbindgen_closure_wrapper7088 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper7083 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 434, __wbg_adapter_34); return ret; }; - imports.wbg.__wbindgen_closure_wrapper7130 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper7125 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 434, __wbg_adapter_34); return ret; }; - imports.wbg.__wbindgen_closure_wrapper7131 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper7126 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 434, __wbg_adapter_58); return ret; }; - imports.wbg.__wbindgen_closure_wrapper7132 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper7127 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 434, __wbg_adapter_34); return ret; }; diff --git a/wasm/tutorial6-uniforms_bg.wasm b/wasm/tutorial6-uniforms_bg.wasm index c225098e5..a51f88706 100644 Binary files a/wasm/tutorial6-uniforms_bg.wasm and b/wasm/tutorial6-uniforms_bg.wasm differ diff --git a/wasm/tutorial7-instancing.js b/wasm/tutorial7-instancing.js index 05f85b1e6..cce1edd4d 100644 --- a/wasm/tutorial7-instancing.js +++ b/wasm/tutorial7-instancing.js @@ -2525,55 +2525,55 @@ function __wbg_get_imports() { const ret = arg0.repeat; return ret; }; - imports.wbg.__wbindgen_closure_wrapper3337 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper3332 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 434, __wbg_adapter_34); return ret; }; - imports.wbg.__wbindgen_closure_wrapper5608 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper5602 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 434, __wbg_adapter_34); return ret; }; - imports.wbg.__wbindgen_closure_wrapper5614 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper5608 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 434, __wbg_adapter_34); return ret; }; - imports.wbg.__wbindgen_closure_wrapper7024 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper7019 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 434, __wbg_adapter_41); return ret; }; - imports.wbg.__wbindgen_closure_wrapper7069 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper7064 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 434, __wbg_adapter_34); return ret; }; - imports.wbg.__wbindgen_closure_wrapper7086 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper7081 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 434, __wbg_adapter_34); return ret; }; - imports.wbg.__wbindgen_closure_wrapper7087 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper7082 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 434, __wbg_adapter_34); return ret; }; - imports.wbg.__wbindgen_closure_wrapper7088 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper7083 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 434, __wbg_adapter_34); return ret; }; - imports.wbg.__wbindgen_closure_wrapper7089 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper7084 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 434, __wbg_adapter_34); return ret; }; - imports.wbg.__wbindgen_closure_wrapper7090 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper7085 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 434, __wbg_adapter_34); return ret; }; - imports.wbg.__wbindgen_closure_wrapper7132 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper7127 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 434, __wbg_adapter_34); return ret; }; - imports.wbg.__wbindgen_closure_wrapper7133 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper7128 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 434, __wbg_adapter_58); return ret; }; - imports.wbg.__wbindgen_closure_wrapper7134 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper7129 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 434, __wbg_adapter_34); return ret; }; diff --git a/wasm/tutorial7-instancing_bg.wasm b/wasm/tutorial7-instancing_bg.wasm index 7e1dfe571..1f0802e16 100644 Binary files a/wasm/tutorial7-instancing_bg.wasm and b/wasm/tutorial7-instancing_bg.wasm differ diff --git a/wasm/tutorial8-depth.js b/wasm/tutorial8-depth.js index e480678eb..243bdb80e 100644 --- a/wasm/tutorial8-depth.js +++ b/wasm/tutorial8-depth.js @@ -183,7 +183,7 @@ function makeMutClosure(arg0, arg1, dtor, f) { return real; } function __wbg_adapter_34(arg0, arg1, arg2) { - wasm.closure433_externref_shim(arg0, arg1, arg2); + wasm.closure431_externref_shim(arg0, arg1, arg2); } function __wbg_adapter_41(arg0, arg1) { @@ -2525,56 +2525,56 @@ function __wbg_get_imports() { const ret = arg0.repeat; return ret; }; - imports.wbg.__wbindgen_closure_wrapper3340 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 434, __wbg_adapter_34); + imports.wbg.__wbindgen_closure_wrapper3332 = function(arg0, arg1, arg2) { + const ret = makeMutClosure(arg0, arg1, 432, __wbg_adapter_34); return ret; }; - imports.wbg.__wbindgen_closure_wrapper5611 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 434, __wbg_adapter_34); + imports.wbg.__wbindgen_closure_wrapper5605 = function(arg0, arg1, arg2) { + const ret = makeMutClosure(arg0, arg1, 432, __wbg_adapter_34); return ret; }; - imports.wbg.__wbindgen_closure_wrapper5617 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 434, __wbg_adapter_34); + imports.wbg.__wbindgen_closure_wrapper5611 = function(arg0, arg1, arg2) { + const ret = makeMutClosure(arg0, arg1, 432, __wbg_adapter_34); return ret; }; - imports.wbg.__wbindgen_closure_wrapper7027 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 434, __wbg_adapter_41); + imports.wbg.__wbindgen_closure_wrapper7022 = function(arg0, arg1, arg2) { + const ret = makeMutClosure(arg0, arg1, 432, __wbg_adapter_41); return ret; }; - imports.wbg.__wbindgen_closure_wrapper7072 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 434, __wbg_adapter_34); + imports.wbg.__wbindgen_closure_wrapper7067 = function(arg0, arg1, arg2) { + const ret = makeMutClosure(arg0, arg1, 432, __wbg_adapter_34); return ret; }; - imports.wbg.__wbindgen_closure_wrapper7089 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 434, __wbg_adapter_34); + imports.wbg.__wbindgen_closure_wrapper7084 = function(arg0, arg1, arg2) { + const ret = makeMutClosure(arg0, arg1, 432, __wbg_adapter_34); return ret; }; - imports.wbg.__wbindgen_closure_wrapper7090 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 434, __wbg_adapter_34); + imports.wbg.__wbindgen_closure_wrapper7085 = function(arg0, arg1, arg2) { + const ret = makeMutClosure(arg0, arg1, 432, __wbg_adapter_34); return ret; }; - imports.wbg.__wbindgen_closure_wrapper7091 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 434, __wbg_adapter_34); + imports.wbg.__wbindgen_closure_wrapper7086 = function(arg0, arg1, arg2) { + const ret = makeMutClosure(arg0, arg1, 432, __wbg_adapter_34); return ret; }; - imports.wbg.__wbindgen_closure_wrapper7092 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 434, __wbg_adapter_34); + imports.wbg.__wbindgen_closure_wrapper7087 = function(arg0, arg1, arg2) { + const ret = makeMutClosure(arg0, arg1, 432, __wbg_adapter_34); return ret; }; - imports.wbg.__wbindgen_closure_wrapper7093 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 434, __wbg_adapter_34); + imports.wbg.__wbindgen_closure_wrapper7088 = function(arg0, arg1, arg2) { + const ret = makeMutClosure(arg0, arg1, 432, __wbg_adapter_34); return ret; }; - imports.wbg.__wbindgen_closure_wrapper7135 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 434, __wbg_adapter_34); + imports.wbg.__wbindgen_closure_wrapper7130 = function(arg0, arg1, arg2) { + const ret = makeMutClosure(arg0, arg1, 432, __wbg_adapter_34); return ret; }; - imports.wbg.__wbindgen_closure_wrapper7136 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 434, __wbg_adapter_58); + imports.wbg.__wbindgen_closure_wrapper7131 = function(arg0, arg1, arg2) { + const ret = makeMutClosure(arg0, arg1, 432, __wbg_adapter_58); return ret; }; - imports.wbg.__wbindgen_closure_wrapper7137 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 434, __wbg_adapter_34); + imports.wbg.__wbindgen_closure_wrapper7132 = function(arg0, arg1, arg2) { + const ret = makeMutClosure(arg0, arg1, 432, __wbg_adapter_34); return ret; }; imports.wbg.__wbindgen_init_externref_table = function() { diff --git a/wasm/tutorial8-depth_bg.wasm b/wasm/tutorial8-depth_bg.wasm index e327364fe..08287ba90 100644 Binary files a/wasm/tutorial8-depth_bg.wasm and b/wasm/tutorial8-depth_bg.wasm differ diff --git a/wasm/tutorial9-models.js b/wasm/tutorial9-models.js index 33fe5fb42..35242e5c4 100644 --- a/wasm/tutorial9-models.js +++ b/wasm/tutorial9-models.js @@ -183,7 +183,7 @@ function makeMutClosure(arg0, arg1, dtor, f) { return real; } function __wbg_adapter_36(arg0, arg1, arg2) { - wasm.closure462_externref_shim(arg0, arg1, arg2); + wasm.closure460_externref_shim(arg0, arg1, arg2); } function __wbg_adapter_43(arg0, arg1) { @@ -2673,56 +2673,56 @@ function __wbg_get_imports() { const ret = arg0.repeat; return ret; }; - imports.wbg.__wbindgen_closure_wrapper3653 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 463, __wbg_adapter_36); + imports.wbg.__wbindgen_closure_wrapper3645 = function(arg0, arg1, arg2) { + const ret = makeMutClosure(arg0, arg1, 461, __wbg_adapter_36); return ret; }; - imports.wbg.__wbindgen_closure_wrapper5918 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 463, __wbg_adapter_36); + imports.wbg.__wbindgen_closure_wrapper5912 = function(arg0, arg1, arg2) { + const ret = makeMutClosure(arg0, arg1, 461, __wbg_adapter_36); return ret; }; - imports.wbg.__wbindgen_closure_wrapper5924 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 463, __wbg_adapter_36); + imports.wbg.__wbindgen_closure_wrapper5918 = function(arg0, arg1, arg2) { + const ret = makeMutClosure(arg0, arg1, 461, __wbg_adapter_36); return ret; }; - imports.wbg.__wbindgen_closure_wrapper7334 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 463, __wbg_adapter_43); + imports.wbg.__wbindgen_closure_wrapper7328 = function(arg0, arg1, arg2) { + const ret = makeMutClosure(arg0, arg1, 461, __wbg_adapter_43); return ret; }; - imports.wbg.__wbindgen_closure_wrapper7379 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 463, __wbg_adapter_36); + imports.wbg.__wbindgen_closure_wrapper7373 = function(arg0, arg1, arg2) { + const ret = makeMutClosure(arg0, arg1, 461, __wbg_adapter_36); return ret; }; - imports.wbg.__wbindgen_closure_wrapper7396 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 463, __wbg_adapter_36); + imports.wbg.__wbindgen_closure_wrapper7390 = function(arg0, arg1, arg2) { + const ret = makeMutClosure(arg0, arg1, 461, __wbg_adapter_36); return ret; }; - imports.wbg.__wbindgen_closure_wrapper7397 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 463, __wbg_adapter_36); + imports.wbg.__wbindgen_closure_wrapper7391 = function(arg0, arg1, arg2) { + const ret = makeMutClosure(arg0, arg1, 461, __wbg_adapter_36); return ret; }; - imports.wbg.__wbindgen_closure_wrapper7398 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 463, __wbg_adapter_36); + imports.wbg.__wbindgen_closure_wrapper7392 = function(arg0, arg1, arg2) { + const ret = makeMutClosure(arg0, arg1, 461, __wbg_adapter_36); return ret; }; - imports.wbg.__wbindgen_closure_wrapper7399 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 463, __wbg_adapter_36); + imports.wbg.__wbindgen_closure_wrapper7393 = function(arg0, arg1, arg2) { + const ret = makeMutClosure(arg0, arg1, 461, __wbg_adapter_36); return ret; }; - imports.wbg.__wbindgen_closure_wrapper7400 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 463, __wbg_adapter_36); + imports.wbg.__wbindgen_closure_wrapper7394 = function(arg0, arg1, arg2) { + const ret = makeMutClosure(arg0, arg1, 461, __wbg_adapter_36); return ret; }; - imports.wbg.__wbindgen_closure_wrapper7442 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 463, __wbg_adapter_36); + imports.wbg.__wbindgen_closure_wrapper7436 = function(arg0, arg1, arg2) { + const ret = makeMutClosure(arg0, arg1, 461, __wbg_adapter_36); return ret; }; - imports.wbg.__wbindgen_closure_wrapper7443 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 463, __wbg_adapter_60); + imports.wbg.__wbindgen_closure_wrapper7437 = function(arg0, arg1, arg2) { + const ret = makeMutClosure(arg0, arg1, 461, __wbg_adapter_60); return ret; }; - imports.wbg.__wbindgen_closure_wrapper7444 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 463, __wbg_adapter_36); + imports.wbg.__wbindgen_closure_wrapper7438 = function(arg0, arg1, arg2) { + const ret = makeMutClosure(arg0, arg1, 461, __wbg_adapter_36); return ret; }; imports.wbg.__wbindgen_init_externref_table = function() { diff --git a/wasm/tutorial9-models_bg.wasm b/wasm/tutorial9-models_bg.wasm index b68cd47f6..96db738d1 100644 Binary files a/wasm/tutorial9-models_bg.wasm and b/wasm/tutorial9-models_bg.wasm differ diff --git a/wasm/vertex-animation.js b/wasm/vertex-animation.js index 87a88a2d5..d3b6f49e9 100644 --- a/wasm/vertex-animation.js +++ b/wasm/vertex-animation.js @@ -1652,55 +1652,55 @@ function __wbg_get_imports() { const ret = arg0.repeat; return ret; }; - imports.wbg.__wbindgen_closure_wrapper1383 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper1377 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 108, __wbg_adapter_32); return ret; }; - imports.wbg.__wbindgen_closure_wrapper2767 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper2762 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 108, __wbg_adapter_32); return ret; }; - imports.wbg.__wbindgen_closure_wrapper2773 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper2768 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 108, __wbg_adapter_32); return ret; }; - imports.wbg.__wbindgen_closure_wrapper3257 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper3251 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 108, __wbg_adapter_39); return ret; }; - imports.wbg.__wbindgen_closure_wrapper3302 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper3296 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 108, __wbg_adapter_32); return ret; }; - imports.wbg.__wbindgen_closure_wrapper3321 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper3315 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 108, __wbg_adapter_32); return ret; }; - imports.wbg.__wbindgen_closure_wrapper3322 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper3316 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 108, __wbg_adapter_32); return ret; }; - imports.wbg.__wbindgen_closure_wrapper3323 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper3317 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 108, __wbg_adapter_32); return ret; }; - imports.wbg.__wbindgen_closure_wrapper3324 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper3318 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 108, __wbg_adapter_32); return ret; }; - imports.wbg.__wbindgen_closure_wrapper3325 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper3319 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 108, __wbg_adapter_32); return ret; }; - imports.wbg.__wbindgen_closure_wrapper3369 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper3363 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 108, __wbg_adapter_32); return ret; }; - imports.wbg.__wbindgen_closure_wrapper3370 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper3364 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 108, __wbg_adapter_56); return ret; }; - imports.wbg.__wbindgen_closure_wrapper3371 = function(arg0, arg1, arg2) { + imports.wbg.__wbindgen_closure_wrapper3365 = function(arg0, arg1, arg2) { const ret = makeMutClosure(arg0, arg1, 108, __wbg_adapter_32); return ret; }; diff --git a/wasm/vertex-animation_bg.wasm b/wasm/vertex-animation_bg.wasm index 4fe42fa9a..8c16ec696 100644 Binary files a/wasm/vertex-animation_bg.wasm and b/wasm/vertex-animation_bg.wasm differ