个人中心
gpt4 book ai didi

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

转载 作者：知者 更新时间：2024-03-13 03:34:02 25 4
gpt4 key购买 nike

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...
  }
`;

25 4 0
文章推荐： Resilience4j Retrofit介绍
文章推荐： Java-Controller引起的Ambiguous mapping问题解决
文章推荐： MySQL 的 Buffer Pool，终于被我搞懂了
文章推荐： 判断一个对象是不是Array对象的总结?
知者
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com