Minify shaders before embedding into js bundle

[maksnester]

Hello, I can't find any example of minifying glsl shaders before injecting them into js bundle when using webpack. Could you please suggest any related repositories?

[Qix-]

Not sure there are any. It would require a C-like parser, of which I'm not sure there are (m)any available on npm.

If someone knows of a good one, let me know and I can take a whack at an implementation.

[austintheriot]

Would also love to see something along these lines!

[Qix-]

Hey you're in luck. I needed it recently and after what seemed like ages of searching finally found something.

You'll have to incorporate it into your build somehow (I usually write my build scripts custom) but shouldn't be too difficult to figure out. The plugin works with esbuild typically but in my case I had a niche usecase (I wanted to transform glsl tagged template literals, so I wrote my own acorn parser). If you use esbuild and separate files then it might work out of the box for you. Otherwise, use the code below to manually invoke the minifier, even if you don't use esbuild.

{
    "dependencies": {
        "@befunky/esbuild-plugin-glslify-minify": "1.2.0"
    }
}

import GlslMinifier from '@befunky/esbuild-plugin-glslify-minify/lib/minify.js';

async function minifyGLSL(text) {
	const minifier = new GlslMinifier({
		output: 'sourceOnly',
		stripVersion: false,
		nomangle: ['BL_NUM_STEPS'], // List of identifiers not to mangle; set as empty array if you don't care
		preserveUniforms: true,
		preserveDefines: false,
		preserveVariables: false
	});

	const result = await minifier.execute(text);
	return result.sourceCode;
}

Works quite well for me.