https://github.com/marcofugaro/esbuild-plugin-glslify-inline
A plugin for esbuild to transform strings with glslify
https://github.com/marcofugaro/esbuild-plugin-glslify-inline
esbuild esbuild-plugin glsl glslify
Last synced: 3 months ago
JSON representation
A plugin for esbuild to transform strings with glslify
- Host: GitHub
- URL: https://github.com/marcofugaro/esbuild-plugin-glslify-inline
- Owner: marcofugaro
- License: mit
- Created: 2021-10-05T17:03:04.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2021-10-14T23:47:03.000Z (over 4 years ago)
- Last Synced: 2025-10-20T00:29:00.132Z (8 months ago)
- Topics: esbuild, esbuild-plugin, glsl, glslify
- Language: JavaScript
- Homepage:
- Size: 146 KB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: license
Awesome Lists containing this project
README
# esbuild-plugin-glslify-inline
> An [esbuild](https://github.com/evanw/esbuild) plugin to transform inline GLSL strings with [glslify](https://github.com/glslify/glslify).
## Install
```
npm install --save-dev esbuild-plugin-glslify-inline
```
or
```
yarn add --dev esbuild-plugin-glslify-inline
```
## Usage
You can use into any `esbuild.mjs` script like this:
```js
import { build } from 'esbuild'
import { glslifyInline } from 'esbuild-plugin-glslify-inline'
build({
entryPoints: ['input.js'],
outfile: 'output.js',
bundle: true,
plugins: [glslifyInline()],
}).catch(() => process.exit(1))
```
You can also minify the imported shaders with `glslifyInline({ minify: true })`.
After that, you can use glslify normally with esbuild:
```js
import glsl from 'glslify'
// ...
const material = new THREE.MeshStandardMaterial()
customizeVertexShader(material, {
head: glsl`
uniform float time;
uniform float speed;
// you can import glsl packages like this
#pragma glslify: noise = require(glsl-noise/simplex/3d)
`,
main: glsl`
// and use them in other parts of the shader
vec3 displacement = normal * noise(vec3(uv, time * speed));
`,
// hook that lets you modify the position
transformed: glsl`
transformed += displacement;
`,
})
```