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

Question

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

米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

你想要像 esbuild-plugin-glsl 这样的东西（它是 esbuild 的 GLSL 导入插件，而 ts-shader-loader 是 的导入插件webpack).

Answer 2

我们使用 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 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';

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

A way to load .wglsl files in Typescript files using esbuild?

shader

typescript

esbuild

webgpu