@w8r/esbuild-plugin-glsl

An esbuild plugin that adds support for .frag, .vert, .glsl and .wgsl file imports with optional shader minification.

Installation

npm install esbuild-plugin-glsl

Usage

import { build } from "esbuild";
import { glsl } from "esbuild-plugin-glsl-minify";

build({
	entryPoints: ["input.js"],
	outfile: "output.js",
	bundle: true,
	plugins: [glsl({
		minify: true
	})]
}).catch(() => process.exit(1));

To mangle and rename variables, you can use mangle option. It is a primitive mangler that only renames variables and does not perform any optimizations. It respect the list of reserved words and attribute naming conventions. It is useful for obfuscating shaders. It only works together with minify option.

import { build } from "esbuild";
import { glsl } from "esbuild-plugin-glsl-minify";

build({
	entryPoints: ["input.js"],
	outfile: "output.js",
	bundle: true,
	plugins: [glsl({
		minify: true,
		mangle: true
	})]
}).catch(() => process.exit(1));

TypeScript

To make the TypeScript compiler know how to handle shader sources, add a shaders.d.ts file to your project:

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

declare module "*.glsl" {
	const value: string;
	export default value;
}

declare module "*.frag" {
	const value: string;
	export default value;
}

declare module "*.vert" {
	const value: string;
	export default value;
}

Contributing

Use the issue tracker to propose and discuss changes. Maintain the existing coding style. Lint and test your code.