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

Question

I'm using esbuild as a tool to bundle my Typescript code but i can't find a way to configure a loader for ".wgsl" files.

Mi app.ts file :

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

My shader.d.ts :

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

My esbuild file (as you can see i can't use 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

I had to contribute to esbuild-plugin-glsl to allow other users to load a .wgsl file. Here's my esbuild file. Use the version 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));

the d.ts file should have this :

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

the way to import a shader is :

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

Answer 2

You want something like esbuild-plugin-glsl (which is a GLSL import plugin for esbuild, whereas ts-shader-loader is an import plugin for webpack).

Answer 3

We use Vite to import WGSL and other assets.
e.g. by adding '?raw' in the path, Vite will do the job for you.

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

Vite could also import wasm, worker, url in a simple way, you can check: https://vitejs.dev/guide/assets.html#importing-asset-as-url

We also set up a project based on Vite to share basic samples for new comers of WebGPU https://github.com/Orillusion/orillusion-webgpu-samples
More demos are welcome