rollup-plugin-glsl-loader

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 -D

or

npm i rollup-plugin-glsl-loader -D

Use 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 -D

yarn add glslify -D

then

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);

}