WGSL 還在積極討論中，雖然各位大佬不是很滿意這個新生兒。

不過，社群已經有了基礎的實驗性工具（VSCode 外掛），並支援了較新的語法。

① WGSL 外掛

這個外掛支援對副檔名為 .wgsl 的原始碼檔案進行高亮顯示。

② 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);
  }
`;
 

遺憾的是，截至 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...
  }
`;