shader-loader

Webpack loader for loading shader files.
Support "#include <filename.filetype>" to import exteral shader file.

Overview

Three.js support #include syntax to import exteral shader file listed in ShaderChunk file but not support custom shader file.
Shader-loader aims to share custom shader code between different shader files. If external shader file can not be found in the specificed file path, it won't do anything and let it handled by other library, like Three.js.

Usage

Assume your file structure like below.

src/
└── shaderchunk/

install npm package

npm i @youyouzone/shader-loader

set up webpack config

// webpack.config.js

const path = require('path');

module.exports = {
  //...
  module: {
    rules: [
      {
        test: /\.(frag|vert|fragment|vertex|shader|glsl)$/,
        use:[{
          loader: '@youyouzone/shader-loader',
          options:{
            publicPath:'./src/shaderchunk', // folder of shader files, defautl is './'
          }
        }]
      },
    ],
  },
};

//also support multiple publicPath
module.exports = {
  //...
  module: {
    rules: [
      {
        test: /\.(frag|vert|fragment|vertex|shader|glsl)$/,
        use:[{
          loader: '@youyouzone/shader-loader',
          options:{
            publicPath: [
              '@youyouzone/shader-chunk', // from node_modules
              './src/shaderchunk'
            ],
          }
        }]
      },
    ],
  },
};

// vertexShader.vert

#include <myshader.glsl>;

License

This project is licensed under

Contact

• Email:[email protected]
• Twitter:https://twitter.com/nikoniko600
• Repo:https://github.com/Eric-Schecter/shader-loader