WebGPU Shader Compiler

更新记录

• 2023/7/25 增加该文档

• 2023/7/25 增加 源码说明 文档

• 2023/7/25 增加 发布 0.1 文档

• 2023/7/26 增加 发布 0.2 文档

• 2023/7/26 将跳转链接更改成卡片样式

• 2023/7/27 增加 发布 0.3 文档

• 2023/7/28 增加 发布 0.4 文档

• 2023/7/29 增加 发布 0.5 文档

• 2023/7/31 增加 发布 0.6 文档

在线着色器编译器

您可以点击该卡片跳转至 Shader Compiler

编译示意图

图示说明

• 表示编译器支持的着色器语言

• 表示编译器支持的编译路径

• 表示编译器不支持的编译路径

• 表示源码中对应调用的函数

源码说明

该项目的源码位于 Turbo 的 PureCCppWebShaderCompiler 中。

该项目是一个工具项目，并没有打算做的多精美，所以这个工具代码写的就像 依托答辩 ，请谨慎阅览。

发布 0.6

WebShader Compiler

July 31, 2023 发布

更新记录

• 修正将 Miss ， Callable ， Task 和 Mesh 着色器识别成 Vertex 着色器的 Bug

• 修正成功编译 HLSL ， MSL ， C++ ， Reflection 时输出的文字提示错误

存在的问题

• Tessellation Control ， Tessellation Evaluation ， Geometry ， Compute 着色器转成 HLSL 时会导致异常。

• 对于光线追踪着色器转成 HLSL 或 MSL 时会导致异常。

发布 0.5

WebShader Compiler

July 29, 2023 发布

重要功能

• 提供编译到 GLSL 功能。

• 提供编译到 HLSL 功能。

• 提供编译到 MSL 功能。

• 提供编译到 C++ 功能。

• 提供编译到 Reflection 功能。

更新记录

• Convert 菜单选项中增加 GLSL 子菜单。

• Convert 菜单选项中增加 HLSL 子菜单。

• Convert 菜单选项中增加 MSL 子菜单。

• Convert 菜单选项中增加 C++ 子菜单。

• Convert 菜单选项中增加 Reflection 子菜单。

发布 0.4

WebShader Compiler

July 28, 2023 发布

重要功能

• 提供 SPIR-V 代码的编译功能。

更新记录

• Language 窗口选项中增加 SPIR-V Binary 和 SPIR-V Disassemble 选项。

存在的问题

• SPIR-V Binary 与 SPIR-V Disassemble 之间转换时没有做完整性检查（有基本错误检查）。这是应为该编译器底层使用的 SPIRV-Tools 进行的 SPIR-V 序列化和反序列化，该库中对于 SPIR-V 的验证功能还在建设中。

发布 0.3

WebShader Compiler

July 27, 2023 发布

重要功能

• 提供着色器代码到 SPIR-V 二进制的反编译代码（可阅读格式）的功能。

更新记录

• 优化输出的 SPIR-V 十六进制数组格式。

• 修正当更改 Target Language 所对应的 SPIR-V 版本后编译器错误识别的 Bug 。

• 增加对于 Ctrl+C 快捷键的支持。现可以通过该快捷键直接复制编辑器中的代码。

• 增加 Code Viewer 窗口。用于展示和获取编译结果。

• 修改 Shader Code Editor 窗口的 Convert 菜单。

• Convert 菜单，增加 SPIR-V 子菜单。

• SPIR-V 子菜单，增加 To SPIR-V Disassemble 按钮。

使用教程

1. 首先将要编译的着色器代码选中后 Ctrl+V 粘贴至剪贴板。

2. 进入 在线着色器编译器 页面。如果是第一次进入会弹出 允许访问剪贴板 的弹窗，点击 允许 。

   允许访问剪贴板

   需要通过访问剪贴板将着色器代码粘贴至编译器。

   

3. 直接 Ctrl+V 或依次点击 Edit ‣ Paste 将代码粘贴至编译器页面中

   

4. 配置着色器语言 Language 选项（ GLSL 或 HLSL ），配置 Shader Type 选项（ 顶点着色器 还是 片元着色器 等）

   

5. 依次点击 Convert ‣ SPIR-V 进行输出配置。包括 Target Client 目标端和 Target Language 目标语言标准（如果没有特定需求保持默认即可）。

   

6. 如上配置完成后依次点击 Convert‣ SPIR-V ‣ To SPIR-V 将代码编译成 SPIR-V 二进制代码。或依次点击 Convert‣ SPIR-V ‣ To SPIR-V Disassemble 将 SPIR-V 二进制代码反编译成可阅读的 SPIR-V 代码。

   

7. 如果编译失败，说明代码有错误，相关错误会在 Console 中进行显示。

   

8. 如果编译成功，相关的 SPIR-V 将会写入剪贴板中，并在 Console 中给出 成功 提示。并弹出 Code Viewer 窗口用于显示编译结果。用户直接 Ctrl+V 将编译的结果粘贴即可。

   • SPIR-V Binary 输出结果为 C/C++ 格式的 SPIR-V 的十六进制数组，可以直接用于 Vulkan 等 API 。

   • SPIR-V Disassemble 输出结果为 SPIR-V 二进制的反编译结果，为 SPIR-V 的可阅读格式。

   

   成功编译成 SPIR-V Binary 格式

   

   成功编译成 SPIR-V Disassemble 格式

开发计划

1. 提供 HLSL ， GLSL 和 SPIR-V 的相互转换功能

2. 提供 SPIR-V 输出为文件的功能

3. 提供 WGSL 着色器支持

4. 提供对于 #include 着色器头文件的支持

5. 控制台输出考虑是否输出时间信息

发布 0.2

WebShader Compiler

July 26, 2023 发布

更新记录

• 增大可视大小，之前的太小了。

• 增加对于 Ctrl+V 快捷键的支持。现可以通过该快捷键将 Shader 代码直接粘贴进代码编辑器中。

发布 0.1

WebShader Compiler

July 25, 2023 发布

使用教程

1. 首先将着色器代码选中后 Ctrl+V 粘贴至剪贴板。

2. 进入 在线着色器编译器 页面。如果是第一次进入会弹出 允许访问剪贴板 的弹窗，点击 允许 。

   

3. 依次点击 Edit ‣ Paste 将代码粘贴至编译器页面中

   

   存在的问题

   • 必须进行 Edit ‣ Paste 操作才能将代码粘贴至编译器中，直接在编译器中 Ctrl+V 没有反应。

   • 考虑如何设置引用着色器的 include 头文件。

4. 配置着色器语言 Language 选项（ GLSL 或 HLSL ），配置 Shader Type 选项（ 顶点着色器 还是 片元着色器 等）

   

5. 依次点击 Convert 进行输出配置。包括 Target Client 目标端和 Target Language 目标语言标准（如果没有特定需求保持默认即可）。

   

6. 如上配置完成后依次点击 Convert ‣ To SPIR-V 将代码编译成 SPIR-V

   

7. 如果编译失败，说明代码有错误，相关错误会在 Console 中进行显示。

   

8. 如果编译成功，相关的 SPIR-V 将会写入剪贴板中，并在 Console 中给出 成功 提示。用户直接 Ctrl+C 将编译的 SPIR-V 代码进行粘贴即可（输出结果为 C/C++ 格式的 SPIR-V 的十六进制数组，可以直接用于 Vulkan 等 API ）

   

开发计划

1. 提供 HLSL ， GLSL 和 SPIR-V 的相互转换功能

2. 提供 SPIR-V 输出为文件的功能

3. 提供 SPIR-V 输出为可阅读的文本格式

4. 提供 WGSL 着色器支持

5. 提供对于头文件的支持