unplugin-glsl
Import, inline (and compress) GLSL shader files, compatible with Vite, Rollup, Webpack, esbuild and Rspack by unplugin.
@importwill be converted to#include.
Example
precision highp float;
#include /glsl/chunk0.frag;
out highp vec4 fragColor;
void main (void) {
fragColor = chunkFn();
}
@import ./import/imported.glsl;Usage
pnpm add unplugin-glslWith TypeScript
Add extension declarations to your types in tsconfig.json:
{
"compilerOptions": {
"types": [
"vite-plugin-glsl/ext"
]
}
}or as a package dependency directive to your global types:
/// <reference types="vite-plugin-glsl/ext" />Default Options
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
// vite.config.ts
import GLSL from 'unplugin-glsl/vite'
export default defineConfig({
plugins: [
GLSL({ /* options */ }),
],
})Example: playground/
Rollup
// rollup.config.js
import GLSL from 'unplugin-glsl/rollup'
export default {
plugins: [
GLSL({ /* options */ }),
],
}Webpack
// webpack.config.js
const glsl = require('unplugin-glsl/webpack').default
module.exports = {
/* ... */
plugins: [
glsl({ /* options */ })
]
}Nuxt
// nuxt.config.js
export default defineNuxtConfig({
modules: [
['unplugin-glsl/nuxt', { /* options */ }],
],
})This module works for both Nuxt 2 and Nuxt Vite
esbuild
// 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, which is not supported in vite-plugin-glsl.
And uniform performance across different build tools.
Dev
- Install:
pnpm i - Dev:
pnpm run dev - Release:
pnpm run release
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent