rollup-plugin-glsl-loader
import your shader file using ES modules.
Do what
import your glsl file using ES modules, like this.
import vert from './shader.vert';
console.log(vert);Supported file types
*.glsl-
*.vert/*.frag -
*.vs/*.fs
How to use
Install
yarn add rollup-plugin-glsl-loader -Dor
npm i rollup-plugin-glsl-loader -DUse in Rollup config file
const glslLoader = require("rollup-plugin-glsl-loader");
// or use ES modules
// import glslLoader from "rollup-plugin-glsl-loader";
export default {
// [...],
plugins: [
glslLoader(),
]
}#include
You can use include directive.
Example:
// defaultAttribute.glsl
attribute vec3 pos;// vert.glsl
#include "defaultAttribute.glsl"
void main(){
gl_Position = vec4(pos, 1.0);
}equivalent to
attribute vec3 pos;
void main(){
gl_Position = vec4(pos, 1.0);
}glslify
process glsl file with glslify.
And install glslify in your devDependencies with
npm i glslify -Dyarn add glslify -Dthen
const glslLoader = require("rollup-plugin-glsl-loader");
// or use ES modules
// import glslLoader from "rollup-plugin-glsl-loader";
export default {
// [...],
plugins: [
glslLoader({
glslify: true,
}),
]
}in your glsl file
#pragma glslify: noise = require('glsl-noise/simplex/3d')
attribute vec3 pos;
void main(){
gl_Position = vec4(pos, 1.0);
}