Shader code minifier for material plugin

Demos and projects
1

When using the Material Plugin, we typically write shader code using javascript template string literals.

It usually looks something like this

class MyMaterialPlugin extends MaterialPluginBase {
    // ...
    getCustomCode(shaderType, shaderLanguage) {
        if (shaderType === "fragment") { 
            return {
                CUSTOM_FRAGMENT_MAIN_END: `
                            var luma = fragmentOutputs.color.r*0.299 + fragmentOutputs.color.g*0.587 + fragmentOutputs.color.b*0.114;
                            fragmentOutputs.color = vec4f(luma, luma, luma, 1.0);
                        `,
            };
        }
    }
    return null;
  }
}

We put a lot of indentation in our shader code for readability. However, this can lead to unnecessarily large bundle sizes.

The typescript-glslminify-transformer allows you to minify this template string literal by applying the same minify algorithm that babylon js applies to .fx shader files.

const glslTemplateString = /* glsl */ `
    #define PI 3.141592653589793
    precision mediump float;
    varying vec2 vUv;
    void main () {
        #ifdef SOME_DEFINE
        someFunction();
        #endif
        gl_FragColor = vec4(vUv, 0.0, 1.0);
    }
`;

For example, the code above would be converted to this after compilation

const glslTemplateString = /* glsl */ "#define PI 3.141592653589793\nprecision mediump float;varying vec2 vUv;void main () {\n#ifdef SOME_DEFINE\nsomeFunction();\n#endif\ngl_FragColor=vec4(vUv,0.0,1.0);}\n";

The details of how to apply it are described in the readme. Despite the name, it can also be used for WGSL.

I think this would be really helpful for people who work with shader and are careful about bundle size. (I think it would also reduce the size of RSM code if it applied to Babylon.js).

3 Likes