unplugin-glsl

Import, inline (and compress) GLSL shader files, compatible with Vite, Rollup, Webpack, esbuild and Rspack by unplugin.

@import will be converted to #include.

Example

Demo

precision highp float;

#include /glsl/chunk0.frag;

out highp vec4 fragColor;

void main (void) {
  fragColor = chunkFn();
}

@import ./import/imported.glsl;

Usage

pnpm add unplugin-glsl

With 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.config.ts
import GLSL from 'unplugin-glsl/vite'

export default defineConfig({
  plugins: [
    GLSL({ /* options */ }),
  ],
})

Example: playground/

// rollup.config.js
import GLSL from 'unplugin-glsl/rollup'

export default {
  plugins: [
    GLSL({ /* options */ }),
  ],
}

// webpack.config.js
const glsl = require('unplugin-glsl/webpack').default

module.exports = {
  /* ... */
  plugins: [
    glsl({ /* options */ })
  ]
}

// nuxt.config.js
export default defineNuxtConfig({
  modules: [
    ['unplugin-glsl/nuxt', { /* options */ }],
  ],
})

This module works for both Nuxt 2 and Nuxt Vite

// 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.

• See Closed | feat: Added support for @import

Dev

• Install: pnpm i
• Dev: pnpm run dev
• Release: pnpm run release

Ref

• vite-plugin-glsl
• webpack-glsl-loader
• glslify