glslify / glslify-loader

:floppy_disk: glslify loader module for webpack

glslify-loader

glslify loader module for webpack.

Installation

npm install glslify-loader

Generally, you'll want to use this alongside webpack's raw-loader module:

npm install raw-loader

Usage

Documentation: Using Loaders in Webpack

Configuration file

module.exports = {
  rules: [
    {
      test: /\.(glsl|vs|fs|vert|frag)$/,
      exclude: /node_modules/,
      use: [
        'raw-loader',
        'glslify-loader'
      ]
    }
  ]
}

Inline

// Using require
const source = require('raw-loader!glslify-loader!./my-shader.glsl')

// Using ES6 import statement
import source from 'raw-loader!glslify-loader!./my-shader.glsl'

Speficy source transforms

See Glslify Source Transforms for details.

module.exports = {
  rules: [
    {
      test: /\.(glsl|frag|vert)$/,
      exclude: /node_modules/,
      use: [
        'raw-loader',
        {
          loader: 'glslify-loader'
          options: {
            transform: [
              ['glslify-hex', { 'option-1': true, 'option-2': 42 }]
            ]
          }
        }
      ]
    }
  ]
}

Contributing

See stackgl/contributing for details.

License

MIT. See LICENSE.md for details.

glslify-loader's Issues

Would be a great feature to allow for includes/imports within the shader files.

We have a number of helper functions, libs that we manually paste into our shaders each time. Would be great to be able to include them instead and have the loader merge them in.

[bug?] Doesn't work when chained in a single module.loaders config, but works with multiple.

If I have this webpack config:

module.exports = {
    resolve: {
        extensions: [ "", ".js", ".jsx", ".glsl" ]
    },
    module: {
        loaders: [
            { test: /\.jsx?$/,  loader: 'babel', exclude: /node_modules/ },
            { test: /\.glsl$/, loader: 'glslify!raw' },
        ],
    },
}

compiling a project with .glsl files has error like this:

> webpack --progress --colors src/index.js react-famous.js

Hash: a7cef25085d319d4b4ad
Version: webpack 1.12.1
Time: 2166ms
          Asset     Size  Chunks             Chunk Names
react-famous.js  1.42 MB       0  [emitted]  main
    + 319 hidden modules

ERROR in ./~/famous/webgl-shaders/FragmentShader.glsl
Module build failed: Error: Final loader didn't return a Buffer or String
    at DependenciesBlock.onModuleBuild (/home/trusktr/src/pilwon+react-famous/node_modules/webpack-core/lib/NormalModuleMixin.js:299:42)
    at nextLoader (/home/trusktr/src/pilwon+react-famous/node_modules/webpack-core/lib/NormalModuleMixin.js:275:25)
    at /home/trusktr/src/pilwon+react-famous/node_modules/webpack-core/lib/NormalModuleMixin.js:292:15
    at runSyncOrAsync (/home/trusktr/src/pilwon+react-famous/node_modules/webpack-core/lib/NormalModuleMixin.js:160:12)
    at nextLoader (/home/trusktr/src/pilwon+react-famous/node_modules/webpack-core/lib/NormalModuleMixin.js:290:3)
    at /home/trusktr/src/pilwon+react-famous/node_modules/webpack-core/lib/NormalModuleMixin.js:292:15
    at runSyncOrAsync (/home/trusktr/src/pilwon+react-famous/node_modules/webpack-core/lib/NormalModuleMixin.js:160:12)
    at nextLoader (/home/trusktr/src/pilwon+react-famous/node_modules/webpack-core/lib/NormalModuleMixin.js:290:3)
    at /home/trusktr/src/pilwon+react-famous/node_modules/webpack-core/lib/NormalModuleMixin.js:259:5
    at Storage.finished (/home/trusktr/src/pilwon+react-famous/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:38:16)
    at evalmachine.<anonymous>:334:14
    at /home/trusktr/src/pilwon+react-famous/node_modules/graceful-fs/graceful-fs.js:102:5
    at FSReqWrap.oncomplete (evalmachine.<anonymous>:95:15)
 @ ./~/famous/webgl-shaders/index.js 28:21-53

ERROR in ./~/famous/webgl-shaders/VertexShader.glsl
Module build failed: Error: Final loader didn't return a Buffer or String
    at DependenciesBlock.onModuleBuild (/home/trusktr/src/pilwon+react-famous/node_modules/webpack-core/lib/NormalModuleMixin.js:299:42)
    at nextLoader (/home/trusktr/src/pilwon+react-famous/node_modules/webpack-core/lib/NormalModuleMixin.js:275:25)
    at /home/trusktr/src/pilwon+react-famous/node_modules/webpack-core/lib/NormalModuleMixin.js:292:15
    at runSyncOrAsync (/home/trusktr/src/pilwon+react-famous/node_modules/webpack-core/lib/NormalModuleMixin.js:160:12)
    at nextLoader (/home/trusktr/src/pilwon+react-famous/node_modules/webpack-core/lib/NormalModuleMixin.js:290:3)
    at /home/trusktr/src/pilwon+react-famous/node_modules/webpack-core/lib/NormalModuleMixin.js:292:15
    at runSyncOrAsync (/home/trusktr/src/pilwon+react-famous/node_modules/webpack-core/lib/NormalModuleMixin.js:160:12)
    at nextLoader (/home/trusktr/src/pilwon+react-famous/node_modules/webpack-core/lib/NormalModuleMixin.js:290:3)
    at /home/trusktr/src/pilwon+react-famous/node_modules/webpack-core/lib/NormalModuleMixin.js:259:5
    at Storage.finished (/home/trusktr/src/pilwon+react-famous/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:38:16)
    at evalmachine.<anonymous>:334:14
    at /home/trusktr/src/pilwon+react-famous/node_modules/graceful-fs/graceful-fs.js:102:5
    at FSReqWrap.oncomplete (evalmachine.<anonymous>:95:15)
 @ ./~/famous/webgl-shaders/index.js 27:19-49

but if I instead have this config:

module.exports = {
    resolve: {
        extensions: [ "", ".js", ".jsx", ".glsl" ]
    },
    module: {
        loaders: [
            { test: /\.jsx?$/,  loader: 'babel', exclude: /node_modules/ },
            { test: /\.(glsl|frag|vert)$/, loader: 'raw' },
            { test: /\.(glsl|frag|vert)$/, loader: 'glslify' },
        ],
    },
}

then it works as expected. Any idea why that might be?

Seems not to work with webpack 2

I am using webpack 2, however the loader seems not to work.
I always get a Shader couldn't compile error.

glslify.bundle is not a function

The loader works with earlier version of glslify, but glslify.bundle is no longer a method for the glslify package. Do you have suggestions for a work-around?

webpack4?

Is this package still maintained?
Are there any new informations for webpack4?

Would be great to update the Readme.
Thank you!

Do you need help maintaining this?

Hey I'm one of the webpack core team maintainers. I was wondering if you would like our @webpack/contrib-team to help you maintain this if interested.

Thanks for your work.

Webiste "http://stack.gl/glslify-loader/" Not Work [404]

Hello good afternoon

I would like to inform you that the website is not working according to the image

transform does not work!

webpack.js

{
                test: /\.(glsl|frag|vert)$/,
                use: ['raw-loader',
                     {
                        loader: 'glslify-loader', options: {
                            transform: [
                                ['glslify-hex', { post: true }],
                            ]
                        },
                    }],
                exclude: /node_modules/
            },

glsl

void main() {

 gl_FragColor = #ff0000ff;

}

js

console.log(require("../glsl/post/test2.glsl"));

in console is also like that

void main() {

 gl_FragColor = #ff0000ff;

}

The tansform does not work!
ps. I already installed npm depend package.

Using glslify transformations with loader

Hi!
I want to use glslify transformations like this one: https://www.npmjs.com/package/glslify-fancy-imports
Is it any way to tell the loader to pass "additional argument" when invoking the glslify command to use it?

Can't use glslify loader to load shader files in webpack

Now I'm working on a react component for rendering a graph visualization with stack.gl. I forked this boilerplate from here: github.com/survivejs/react-component-boilerplate

It has react, jsx, ES6, webpack. I'd like to load shaders using glslify-loader: github.com/stackgl/glslify-loader

But I've tried several way to load the shader,but I got a lot of error messages in the console, ex: should use browserify to transform ... no available loader .. compile error: 0:1...

Here's the repo I've created for debugging: https://github.com/javidhsueh/react-test

Please help me to figure how to use glslify with webpack.

Please see my question on stackoverflow
http://stackoverflow.com/questions/35314177/cant-use-glslify-loader-to-load-shader-files-in-webpack

Undocumented raw-loader bug

I noticed what appears to be a bug when using this syntax:

import vertexShade from 'raw-loader!glslify-loader!./VertexShader.vert'
console.log(vertexShader)

would print

#define GLSLIFY 1
export default "#define GLSLIFY 1\nvarying vec2 vUv;\nvoid main() {\n  vUv = uv;\n  gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n}";

Notice that it includes #define GLSLIFY 1 twice, and export default which makes it invalid GLSL. This would cause the shader compilation to fail.

Here is my webpack config:

rules: [
  {
    test: /\.(glsl|vs|fs|vert|frag)$/,
    exclude: /node_modules/,
    use: [
      'raw-loader',
      'glslify-loader'
    ]
  },
]

The Solution

I came across this in the documentation for raw-loader:

Beware, if you already define loader(s) for extension(s) in webpack.config.js you should use:

import css from '!!raw-loader!./file.txt'; // Adding `!!` to a request will disable all loaders specified in the configuration

When I added it to my code, it worked properly.

import vertexShader from '!!raw-loader!glslify-loader!./VertexShader.vert'
console.log(vertexShader)

now prints:

#define GLSLIFY 1
varying vec2 vUv;
void main() {
  vUv = uv;
  gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}

Now the shader compiles successfully. Not sure if this was an issue in my configuration somehow, and I'm not sure what to title this issue, but hope it helps someone.

ERROR: Missing main()

Hi.

I'm getting an error:

app.js:44688 THREE.WebGLProgram: shader error:  0 35715 false gl.getProgramInfoLog invalid shaders� THREE.WebGLShader: gl.getShaderInfoLog() vertex
ERROR: Missing main()

Webpack rules:

        webpack({
          mode: "development",
          output: {
            filename: "app.js"
          },
          devtool: "source-map",
          module: {
            rules: [
              {
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                  loader: "babel-loader",
                  options: {
                    presets: ["@babel/preset-env"]
                  }
                }
              },
              {
                test: /\.(glsl|vs|fs|vert|frag)$/,
                exclude: /node_modules/,
                use: [
                  'raw-loader',
                  'glslify-loader'
                ]
              }
            ]
          }
        })

Shader files (.frag & .vert) are valid, because when I use them inline they work as expected. And they definitely have main functions.

Any ideas what am I doing wrong ?

Match syntax with glslify.

As per glslify/glslify#57, making the glslify-loader work with the same API as the browserify transform will be nice so that code can run in both places. :)

For example, with Webpack we can write code like this:

var VertexShader = require('./VertexShader.glsl')
var FragmentShader = require('./FragmentShader.glsl')

var shaders = {
    vertex: VertexShader,
    fragment: FragmentShader
};

module.exports = shaders;

but we currently can't do

var glslify = require('glslify');

var shaders = {
    vertex: glslify('./VertexShader.glsl'),
    fragment: glslify('./FragmentShader.glsl')
};

module.exports = shaders;

This change will allow the latter (would the first method still work? Maybe that can default to something similar to the latter but simply no options are passed to glslify).

usage with glslify-optimize?

Any idea how this would work? If it's out of the scope, lmk and I'll write a diff loader and publish it.

can't use glsify when using loader

I can't figure out how to use glsify and glsify-loader. I don't understand why i have to transform the entire library to use it. How the heck do i use this with webpack?

my webpack config has this:

  module: {
    loaders: [

      { 
        test: /\.(glsl|frag|vert)$/, 
        loader: 'raw', exclude: /node_modules/
      },
      { 
        test: /\.(glsl|frag|vert)$/, 
        loader: 'glslify', exclude: /node_modules/
      }
]}

my main.js file looks like this:

var canvas   = document.body.appendChild(document.createElement('canvas'))
var gl       = require('gl-context')(canvas, function(){})

import glslify from 'glslify'
//both files are in the same directory as main.js
var shader = glslify({
  vert: './index.vert',
  frag: './index.frag'
})(gl)

but i am getting this error:

Uncaught Error: It appears that you're using glslify in browserify without its transform applied. Make sure that you've set up glslify as a source transform: https://github.com/substack/node-browserify#browserifytransform