使用 esbuild 在 Typescript 文件中加载 .wglsl 文件的方法？

Question

我使用 esbuild 作为捆绑 Typescript 代码的工具，但我找不到为“.wgsl”文件配置加载器的方法。

Mi app.ts 文件：

import shader from './shader.wgsl';
//webgpu logic

我的shader.d.ts：

declare module '*.wgsl'{
  const value: string;
  export default value;
}

我的 esbuild 文件（如您所见，我无法使用 ts-shader-loader）：

import { build } from "esbuild";
import * as ShaderLoader from "ts-shader-loader";

build({
    entryPoints: ['./src/app.ts'],
    bundle: true,
    sourcemap : true,
    target : 'es2015',
    format:'esm',
    minify : true,
    outfile: './dist/js/app.js',
    tsconfig: './tsconfig.json'
    plugins: [ShaderLoader]
}).catch(() => process.exit(1));

Answer 1

我们使用 Vite 导入 WGSL 和其他资产。
例如，通过在路径中添加“？raw”，Vite 将为您完成这项工作。

import shader from './shaders/xxx.wgsl?raw'

Vite 还可以通过简单的方式导入 wasm、worker、url，您可以查看： https://vitejs.dev/guide/assets.html#importing-asset-as-url

我们还基于Vite建立了一个项目，为WebGPU的新人分享基础示例
https://github.com/Orillusion/orillusion-webgpu-samples
欢迎更多演示

Answer 2

你想要像 esbuild-plugin-glsl （这是一个 GLSL 导入插件 < em>esbuild，而 ts-shader-loader 是 webpack 的导入插件）。

Answer 3

我必须向 esbuild-plugin-glsl 做出贡献，以允许其他用户加载 . .wgsl 文件。这是我的 esbuild 文件。使用版本 1.1.0^

import { build } from "esbuild";
import { glsl } from "esbuild-plugin-glsl";

build({
    entryPoints: ['./src/app.ts'],
    bundle: true,
    sourcemap : true,
    target : 'es2015',
    format:'esm',
    minify : true,
    outfile: './dist/js/app.js',
    tsconfig: './tsconfig.json',
    plugins: [
        glsl({
            minify: true,
        })
    ]
  }).catch(() => process.exit(1));

d.ts 文件应该有这样的：

declare module '*.wgsl'{
    const value: string;
    export default value;
}

导入着色器的方法是：

//This file has the Fragment and Vertex Shader Code.
import shader from './shader.wgsl';