shaderity-loader is a static GLSL shader loader for Webpack.
With this shaderity-loader, you can do the following things:
- Provide
#includelike statement for GLSL shader files. (similar syntax to glslify) - Embed GLSL shader files into TypeScript/JavaScript as a WebPack Loader.
- Can be used in conjunction with glslify.
With shaderity, you can do the following things:
- Variables fill-in to GLSL code in runtime.
- Transpile between GLSL ES 1.0 and GLSL ES 3.0 .
Write webpack.config.js like this.
// webpack.config.js
const path = require('path');
module.exports = {
entry: './test/fixture_loaders/index.js',
mode: 'development',
module: {
rules: [
{
test: /\.(glsl|vs|fs|vert|frag)$/i,
exclude: /node_modules/,
use: [{
loader: path.resolve('index.js')
}]
}
]
},
resolve: {
extensions: [
'.ts'
]
},
output: {
path: path.resolve(__dirname, './fixture_loader_dist'),
filename: 'index.js',
},
optimization: {
namedChunks: true
}
};These are shader codes for importing to TypeScript/JavaScript code.
// output.frag
#ifdef GLSL_ES_1
gl_FragColor = rt0;
#endif// output_test.frag
precision mediump float;
in vec4 vColor;
in vec4 vTexcoord;
void main() {
rt0 = vColor;
#pragma shaderity: require(./output.frag)
}You can import them like this.
import shaderObj from '../fixtures/output_test.frag';
console.out(convertedObj.shaderStage);
// 'fragment'
console.out(convertedObj.isFragmentShader);
// 'true'
console.out(convertedObj.code);
/*
precision mediump float;
in vec4 vColor;
in vec4 vTexcoord;
void main() {
rt0 = vColor;
#ifdef GLSL_ES_1
gl_FragColor = rt0;
#endif
*/Build this JavaScript code using Webpack.
$ webpack
When developing this library, please make sure to merge it into the develop branch. In order to be able to work closely with shaderity-node, the develop branch is also a submodule of shaderity-node and is included in the dependencies.
The only difference between the master branch and the develop branch is whether 'shaderity-node' is included as a submodule or not.
When you publish this library, merge the code from the develop branch into the master branch. Make sure that the master branch does not have shaderity-node as a submodule, and that the version of the shaderity-node package in package.json is the version you intend.
MIT License