@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.