https://github.com/steel1990/glslify-import-loader

glslify import loader
https://github.com/steel1990/glslify-import-loader

Last synced: about 1 month ago
JSON representation

glslify import loader

• Host: GitHub
• URL: https://github.com/steel1990/glslify-import-loader
• Owner: steel1990
• Created: 2017-06-07T10:57:42.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2018-02-22T08:34:03.000Z (almost 7 years ago)
• Last Synced: 2024-04-27T05:05:12.394Z (9 months ago)
• Language: JavaScript
• Size: 1.95 KB
• Stars: 8
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# glslify-import-loader

A [webpack] loader for [glslify]

that adds an `import` directive to your shaders.

## Usage

### Configuration

Alternatively, you may apply these loaders automatically to all .glsl, .frag and .vert files by adding some additional configuration:

``` js

const webpack = require('webpack');

module.exports = {

    module: {

        rules: [{

            test: /\.(glsl|frag|vert)$/,

            exclude: /node_modules/,

            loader: 'glslify-import-loader'

        }, {

            test: /\.(glsl|frag|vert)$/,

            exclude: /node_modules/,

            loader: 'raw-loader'

        }, {

            test: /\.(glsl|frag|vert)$/,

            exclude: /node_modules/,

            loader: 'glslify-loader'

        }]

    }

}

```

### glsl code

Given a common shader(common.glsl):

``` glsl

varying vec3 color;

```

You can import `./common.glsl`:

``` glsl

#pragma glslify: import('./common.glsl')

void main() {

  gl_FragColor = vec4(color, 1.0);

}

```

### Result

``` js

/***/

/* 10 */

/***/ (function(module, exports) {

        module.exports = "varying vec3 color;\n"

/***/ }),

/* 11 */

/***/ (function(module, exports) {

        module.exports = "" + __webpack_require__(10) + "void main() {\n  \ngl_FragColor = vec4(color, 1.0);\n}"

/***/ }),

```

## See also

[glslify-import] will import all glsl to a single module, the result of above example will be:

``` js

/* 11 */

/***/ (function(module, exports) {

        module.exports = "varying vec3 color;\nvoid main() {\n  \ngl_FragColor = vec4(color, 1.0);\n}"

/***/ }),

```

[webpack]: https://webpack.github.io/

[glslify]: http://github.com/stackgl/glslify

[glslify-import]: https://www.npmjs.com/package/glslify-import