shader - En måte å laste .wglsl-filer i Typescript-filer ved å bruke esbuild?

Jeg bruker esbuild som et verktøy for å pakke sammen TypeScript-koden min, men jeg finner ikke en måte å konfigurere en loader for ".wgsl"-filer.

Min app.ts-fil :

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

Min shader.d.ts :

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

Min esbuild-fil (som du kan se kan jeg ikke bruke 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));

Svar #1

Vi bruker Vite for å importere WGSL og andre ressurser.
f.eks. ved å legge til '?raw' i banen, vil Vite gjøre jobben for deg.

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

Vite kan også importere wasm, worker, url på en enkel måte, du kan sjekke: https://vitejs.dev/guide/assets.html#importing-asset-as-url

Vi satte også opp et prosjekt basert på Vite for å dele grunnleggende eksempler for nykommere til WebGPU https://github.com/Orillusion/orillusion-webgpu-samples
Flere demoer er velkomne

Svar #2

Du vil ha noe som esbuild-plugin-glsl (som er en GLSL import-plugin for esbuild, mens ts-shader-loader er en import-plugin for webpack).

Relaterte artikler