Skip to content

haiyoucuv/rollup-plugin-glsl-loader

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

36 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

}

About

rollup-plugin-glsl-loader

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published