• 版块
  • 最新
  • 标签
皮肤
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • 默认(不使用皮肤)
  • 不使用皮肤
折叠

Orillusion

2

在线

550

用户

171

主题

456

帖子

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

已定时 已固定 已锁定 已移动 中文社区
wgsl
3 帖子 3 发布者 591 浏览
    • 从旧到新
    • 从新到旧
    • 最多赞同
回复
  • 在新帖中回复
登录后回复
此主题已被删除。只有拥有主题管理权限的用户可以查看。
  • 寻风觅迹寻 离线
    寻风觅迹寻 离线
    寻风觅迹
    写于 最后由 shuangliu 编辑
    #1

    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 离线
    H 离线
    hk
    写于 最后由 编辑
    #2

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

    1 条回复 最后回复
    0
  • P 离线
    P 离线
    puxiao
    写于 最后由 编辑
    #3

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

    1 条回复 最后回复
    1

Copyright © 2023 Orillusion | Contact US

  • 登录

  • 没有帐号? 注册

  • 登录或注册以进行搜索。
  • 第一个帖子
    最后一个帖子
0
  • 版块
  • 最新
  • 标签
  • 登录

  • 没有帐号? 注册

  • 登录或注册以进行搜索。