Orillusion

    • 注册
    • 登录
    • 搜索
    • 版块
    • 最新
    • 标签

    WebGPU 工具分享 - WGSL 代码高亮插件(VSCode)与预处理工具

    中文社区
    wgsl
    3
    3
    449
    正在加载更多帖子
    • 从旧到新
    • 从新到旧
    • 最多赞同
    回复
    • 在新帖中回复
    登录后回复
    此主题已被删除。只有拥有主题管理权限的用户可以查看。
    • 寻风觅迹
      寻风觅迹 最后由 shuangliu 编辑

      WGSL 还在积极讨论中,虽然各位大佬不是很满意这个新生儿。

      不过,社区已经有了基础的实验性工具(VSCode 插件),并支持了较新的语法。

      ① WGSL 插件

      这个插件支持对文件扩展名为 .wgsl 的源代码文件进行高亮显示。

      inwgsl.png

      ② WGSL Literal 插件

      这个插件允许你在 JavaScript / TypeScript 的模板字符串中进行 wgsl 代码高亮,需要加上模板字符串前置块注释:

      const code = /* wgsl */`
        struct FragmentInput {
          @location(0) Color: vec3<f32>;
        };
      
        @stage(fragment)
        fn main(input: FragmentInput) -> @location(0) vec4<f32> {
          return vec4<f32>(input.Color, 1.0);
        }
      `;
      

      injs.png


      遗憾的是,截至 2022年3月25日,这两个插件并没有代码格式化功能(几乎没有),也没有代码智能提示功能。


      ③ WGSL Preprocessor

      这是一个 JavaScript / TypeScript 模板字符串 wgsl 预处理函数包,模板字符串除了可插值外,还可以使用前置函数进行预处理。

      这个函数包目前只是一个 esm 模块文件,以后不排除会变成更大的 npm 包,由 toji(Brandon Jones)维护。

      github.com/toji/wgsl-preprocessor​github.com

      这个使得 wgsl 拥有了 glsl 类似的宏定义等语法:

      目前支持:

      • #if
      • #elif
      • #else
      • #endif

      简单用法:

      import { wgsl } from './wgsl-preprocessor.js';
      
      function getDebugShader(sRGB = false) {
        return wgsl`
        @stage(fragment)
        fn main() -> @location(0) vec4<f32> {
          let color = vec4(1.0, 0.0, 0.0, 1.0);
        #if ${sRGB}
          let rgb = pow(color.rgb, vec3(1.0 / 2.2));
          return vec4(rgb, color.a);
        #else
          return color;
        #endif
        }`;
      }
      `
      

      为什么没有 #define 宏?

      因为模板字符串的插值功能已经可以当 #define 宏使用了,你甚至都不需要使用这个字符串预处理函数。

      const ambientFactor = 1.0;
      const sampleCount = 2;
      
      const source = `
        let ambientFactor = f32(${ambientFactor});
      
        for (var i = 0u; i < ${sampleCount}u; i = i + 1u) {
          // Etc...
        }
      `;
      
      1 条回复 最后回复 回复 引用 2
      • H
        hk 最后由 编辑

        其实目前本来也就没几个WGSL插件。。。

        1 条回复 最后回复 回复 引用 0
        • P
          puxiao 最后由 编辑

          在 VSCode 中安装名为 wgsl-analyzer 的插件,目前已支持:语法高亮、类型检查、基础的代码格式化 功能。

          1 条回复 最后回复 回复 引用 1
          • First post
            Last post

          Recent Post

          • 目前可以预览demo了

            • 阅读更多
          • A

            这demo太卡了,我机器性能不算差,运行个demo cpu就将近100%

            • 阅读更多
          • A

            没有贴出app.vue的代码

            • 阅读更多
          • @aichangqing 可能是之前版本的cdn缓存没更新,可以清理本地缓存刷新再试一次

            • 阅读更多
          • 36e6af78-b023-4031-9b56-bd8713b44393-image.png

            已经是版本 113.0.5656.0(正式版本)canary (64 位)并且开启chrome://flags/#enable-unsafe-webgpu 为enable,为啥还不能预览demo

            • 阅读更多

          Copyright © 2022 Orillusion | Contact US