Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/YunYouJun/unplugin-glsl
🔌 Import, inline (and compress) GLSL shader files
https://github.com/YunYouJun/unplugin-glsl
glsl shaders unplugin vite webgl
Last synced: 17 days ago
JSON representation
🔌 Import, inline (and compress) GLSL shader files
- Host: GitHub
- URL: https://github.com/YunYouJun/unplugin-glsl
- Owner: YunYouJun
- License: mit
- Created: 2023-10-14T09:58:18.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2023-12-15T08:15:15.000Z (11 months ago)
- Last Synced: 2024-05-22T21:32:06.243Z (6 months ago)
- Topics: glsl, shaders, unplugin, vite, webgl
- Language: TypeScript
- Homepage: https://unplugin-glsl.pages.dev
- Size: 515 KB
- Stars: 7
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome - YunYouJun/unplugin-glsl - 🔌 Import, inline (and compress) GLSL shader files (TypeScript)
- awesome - YunYouJun/unplugin-glsl - 🔌 Import, inline (and compress) GLSL shader files (TypeScript)
README
# unplugin-glsl
[](https://www.npmjs.com/package/unplugin-glsl)
Import, inline (and compress) `GLSL` shader files, compatible with [Vite](https://vitejs.dev/), [Rollup](
https://rollupjs.org/guide/en/), [Webpack](https://webpack.js.org/), [esbuild](https://esbuild.github.io/) and [Rspack](https://www.rspack.dev/) by [unplugin](https://github.com/unjs/unplugin).
> `@import` will be converted to `#include`.
## Example
[Demo](https://unplugin-glsl.pages.dev/)
```glsl
precision highp float;
#include /glsl/chunk0.frag;
out highp vec4 fragColor;
void main (void) {
fragColor = chunkFn();
}
@import ./import/imported.glsl;
```
## Usage
```bash
pnpm add unplugin-glsl
```
### With TypeScript
Add extension declarations to your [`types`](https://www.typescriptlang.org/tsconfig#types) in `tsconfig.json`:
```json
{
"compilerOptions": {
"types": [
"vite-plugin-glsl/ext"
]
}
}
```
or as a [package dependency directive](https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html#-reference-types-) to your global types:
```ts
///
```
### Default Options
```ts
glsl({
include: [ // Glob pattern, or array of glob patterns to import
'**/*.glsl',
'**/*.wgsl',
'**/*.vert',
'**/*.frag',
'**/*.vs',
'**/*.fs'
],
exclude: undefined, // Glob pattern, or array of glob patterns to ignore
warnDuplicatedImports: true, // Warn if the same chunk was imported multiple times
defaultExtension: 'glsl', // Shader suffix when no extension is specified
compress: false, // Compress output shader code
watch: true, // Recompile shader on change
root: '/' // Directory for root imports
})
```
Vite
```ts
// vite.config.ts
import GLSL from 'unplugin-glsl/vite'
export default defineConfig({
plugins: [
GLSL({ /* options */ }),
],
})
```
Example: [`playground/`](./playground/)
Rollup
```ts
// rollup.config.js
import GLSL from 'unplugin-glsl/rollup'
export default {
plugins: [
GLSL({ /* options */ }),
],
}
```
Webpack
```ts
// webpack.config.js
const glsl = require('unplugin-glsl/webpack').default
module.exports = {
/* ... */
plugins: [
glsl({ /* options */ })
]
}
```
Nuxt
```ts
// nuxt.config.js
export default defineNuxtConfig({
modules: [
['unplugin-glsl/nuxt', { /* options */ }],
],
})
```
> This module works for both Nuxt 2 and [Nuxt Vite](https://github.com/nuxt/vite)
esbuild
```ts
// esbuild.config.js
import { build } from 'esbuild'
import GLSL from 'unplugin-glsl/esbuild'
build({
plugins: [GLSL()],
})
```
## Why unplugin-glsl?
We need `@import` in [webpack-glsl-loader](https://www.npmjs.com/package/webpack-glsl-loader#imports), which is not supported in [vite-plugin-glsl](https://github.com/UstymUkhman/vite-plugin-glsl).
And uniform performance across different build tools.
- See [Closed | feat: Added support for @import](https://github.com/UstymUkhman/vite-plugin-glsl/pull/45)
## Dev
- Install: `pnpm i`
- Dev: `pnpm run dev`
- Release: `pnpm run release`
## Ref
- [vite-plugin-glsl](https://github.com/UstymUkhman/vite-plugin-glsl)
- [webpack-glsl-loader](https://www.npmjs.com/package/webpack-glsl-loader)
- [glslify](https://github.com/glslify/glslify)