Package Exports

rollup-plugin-glsl-loader
rollup-plugin-glsl-loader/dist/index.js
rollup-plugin-glsl-loader/dist/index.module.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (rollup-plugin-glsl-loader) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

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

}