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
