[FR]: 使用.wgsl 代替现有字符串模板的shader模块

[jiangheng90]

Is your feature request related to a problem? Please describe

目前的着色器代码改用.wgsl文件的方式导出以方便后续vscode webgpu生态发展起来以更好的支持wgsl语法的提示、高亮、格式化等功能

Describe the solution you'd like

• 着色器代码改用.wgsl文件的形式重写
• 带有参数的模板需要做一些处理
• 其中glsl着色器可能维持现状 也可能全部换用wgsl语法
• 在vite内增加处理.wgsl的插件 目前看来可以用和glsl相同的插件vite-plugin-glsl插件官方已经很好的支持了wgsl
• 重写wgsl文件的导入与注册

如果你们有这方面的需求我会在近期提交一个pr。

[lslzl3000]

我们很早以前试过 wgsl 单文件插件，vite 虽然能很好的处理导入的问题，但这种形式有一个缺陷，ts 无法在 editor 中直接跳转（比如 go to definition）到源文件，它只能跳转到定义 wgsl 的 .d.ts 文件

这会在实际工作中带来很多不便，尤其是需要频繁的切换查找 wgsl 的场景下，无法 go to definition 直接到源文件是很不友好的体验。我们对此做过一段时间的解决方案，基本上来说需要开发比较复杂的 tsservice 插件或者 vscode 插件 才能满足这个需求

所以，综合考虑，我们觉得牺牲一部分结构化的优势，先以开发便捷为主，主要的 wgsl 还是以内嵌在 ts 里的形式进行，配合 https://marketplace.visualstudio.com/items?itemName=ggsimm.wgsl-literal 能满足基本的 wgsl 提示和高亮需求

如果您有tsservice 或者 vscode 插件方面的开发经验，可以考虑尝试开发一下跳转的需求，我想整个社区都会非常需要一个 wgsl 跳转插件。并且可以在此基础上，提供一些更高级的 wgsl 自动补全，自定义function 等功能，目前都是欠缺的

[jiangheng90]

@lslzl3000 请问你指的go to definition 是通过点击import的wgsl文件引用代码 跳转到对应的wgsl文件吗？

[lslzl3000]

是的，ts 并不能直接跳转到 glsl/wgsl 源文件，只能跳转到定义的 .d.ts 文件

https://user-images.githubusercontent.com/3398981/224932316-1988baa3-8649-4049-98c4-0a99a3dc29dc.mov

[jiangheng90]

这方面我去了解一下，我主要是做图形开发的，所以这一块我也不太了解。

[lslzl3000]

这个 issue 保持 open 吧，看看社区里有没有人能提供更好的解决方案

[jiangheng90]

👌

[jiangheng90]

@lslzl3000 目前其实还有个差一些的方案，cesium的那种方式 着色器还是使用wgsl编写，然后再做一个构建工具构建成ts模块，这些ts模块全部会被git-ignore掉，这种方案能够满足你跳转查看的需求，但是即时更改需要打开源文件。

当然这种方案如果更进一步，应该也做成保存构建后模块，同时更改源文件。但是总之 这种方案就是一个妥协的方案。您可以权衡看看。

但是我认为相比目前的方案，还是会好一点，会更方便以后出现了适配vscode lsp的插件。而不会像现在这样还需要把所有的shader再改一遍。