A glsl shader loader for webpack, includes support for nested imports, allowing for smart code reuse among more complex shader implementations. The shader is returned as a string.

I had a problem using other webpack shader loaders with typescript. While i was investigating what is the problem, i forked and tried to make my version work with typescript. Other than support with typescript, it has no other benefits.

npm install --save-dev ts-shader-loader

{
    module: {
        rules: [
            {
                test: /\.(glsl|vs|fs)$/,
                loader: 'ts-shader-loader'
            }
        ]
    }
}

Create glsl.d.ts file in your project and add the following in to it:

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

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

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

import myShader from './myShader.glsl';

console.log(myShader);

This loader supports #include "path/to/shader.glsl" syntax, which you can use inside your shaders.

Example project structure:

src/
---- ts/
---- ---- main.ts
---- shaders/
---- ---- includes/
---- ---- ---- perlin-noise.glsl
---- ---- fragment.glsl

If we import fragment.glsl shader inside main.ts:

import shader from '../shaders/fragment.glsl';

We can have that shader include other .glsl files inline, like so:

#include "./includes/perlin-noise.glsl";

N.B. all includes within .glsl are relative to the file doing the importing.

Imported files are parsed for #include statements as well, so you can nest imports as deep as you'd like.

Imported files are inserted directly into the source file in place of the #include statement and no special handling or error checking is provided. So, if you get syntax errors, please first check that shader works as one contiguous file before raising an issue.

• Deduplicate imports, to prevent code clobbering and conflicts at runtime