@pizca/esbuild-webgl

An esbuild plugin that imports shader files (.vert, .frag, .glsl) as strings, ready to use with WebGL.

Installation

npm i -D @pizca/esbuild-webgl

Usage

Import the plugin and add it to your esbuild build configuration:

import esbuild from 'esbuild';
import webglPlugin from '@pizca/esbuild-webgl';

esbuild.build({
  entryPoints: ['src/index.ts'],
  bundle: true,
  outdir: 'dist',
  plugins: [
    webglPlugin({
      stripComments: true // Removes comments
    })
  ],
}).catch(() => process.exit(1));

Example in a TypeScript file:

import vertexShader from './shaders/basic.vert';
import fragmentShader from './shaders/basic.frag';

const program = createProgram(gl, vertexShader, fragmentShader);

To avoid TypeScript type errors, create a shader.d.ts file or another file with a .d.ts extension in your root directory (src/) with the following declarations:

declare module '*.glsl' {
  const content: string;
  export default content;
}

declare module '*.vert' {
  const content: string;
  export default content;
}

declare module '*.frag' {
  const content: string;
  export default content;
}

What it does

• Reads .vert, .frag, and .glsl files as plain text and exports them as strings at build time.
• Allows you to import shaders directly in your code without manual loading or fetching.
• Simplifies development with WebGL by keeping shaders separate and clean.

This plugin lets you integrate shaders easily and directly into your esbuild workflow.