# threejs-glsl-loader

> A Webpack Loader that allows to load threejs inlined GLSL chunks.

Latest version **1.0.4** (published 2018-06-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install threejs-glsl-loader
pnpm add threejs-glsl-loader
yarn add threejs-glsl-loader
bun add threejs-glsl-loader
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2018-06-19 |
| First published | 2018-04-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 10.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Maintainers | daniele-pelagatti |
| Keywords | glsl webpack loader, include directive, threejs, three, three.js, glsl, #include, webpack, loader |

## Links

- npm: https://www.npmjs.com/package/threejs-glsl-loader
- Repository: https://github.com/MONOGRID/threejs-glsl-loader
- Homepage: https://github.com/MONOGRID/threejs-glsl-loader.git
- Issues: https://github.com/MONOGRID/threejs-glsl-loader/issues
- npm.io page: https://npm.io/package/threejs-glsl-loader

## Dependencies (2)

- [loader-utils](https://npm.io/package/loader-utils.md) ^1.1.0
- [string-replace-async](https://npm.io/package/string-replace-async.md) ^1.2.1

## Alternatives

- [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads
- [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads
- [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads
- [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads
- [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads

## Recent versions

- 1.0.4 (latest) — 2018-06-19
- 1.0.3 — 2018-06-04
- 1.0.2 — 2018-04-30
- 1.0.1 — 2018-04-30
- 1.0.0 — 2018-04-30

## README

# threejs-glsl-loader
A Webpack Loader that allows to load threejs inlined GLSL chunks.

ALPHA VERSION, Tested with Threejs r92 

## Webpack Configuration

``` js
module: {
  rules: [{
    test: /\.(glsl|vert|frag)$/,
    loader: 'threejs-glsl-loader',
    // Default values (can be omitted)
    options: {
      chunksPath: '../ShaderChunk', // if chunk fails to load with provided path (relative), the loader will retry with this one before giving up
      chunksExt: 'glsl', // Chunks extension, used when #import statement omits extension
    }
  }]
}
```

## How it behaves

``` glsl
// The content of chunks/a-chunk.glsl file will be inlined here as string
// the loader will first try to load from the specified path (relative to the current glsl file)
// Please, do not specify `./` if the additional file you're going to load resides in the same directory,
// this will give an error. However, adding `../` will let you move to upper level folder to search required file in there.
#include chunks/a-chunk.glsl;

// This is how Three.js specifies its chunks in its .glsl files
// the loader will ignore <> characters and append chunksExt
// the loader will then try to load the chunk from the same folder as the current glsl file
// if this fails it will try to load the chunk from the specified chunksPath config argument
// the default '../ShaderChunk' value for chunksPath currently (three.js r92) maps to where chunks are located in three.js
#include <a-chunk>;

```

---
_Source: https://npm.io/package/threejs-glsl-loader · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._