@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));

Here's an example of importing and using shaders 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 *.d.ts file in your project. You can name it env.d.ts or something similar, and include the following line to ensure TypeScript can find the plugin's type declarations:

/// <reference types="@pizca/esbuild-webgl/types" />

What it does

• Read .vert, .frag, and .glsl files as plain text and export them as strings at build time.
• Allow importing shaders directly in your code without manual loading or fetching.
• Simplify development with WebGL by keeping shaders separate and clean.

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