vite-plugin-glsl weekly downloads statistics

Vite Plugin GLSL

Import, inline (and minify) GLSL/WGSL/Slang shader files

Inspired by threejs-glsl-loader and vite-plugin-string, compatible with Babylon.js, three.js and lygia.

Installation

Usage

With TypeScript

Add extension declarations to your types in tsconfig.json:

or as a package dependency directive to your global types:

With Slang Shaders

Slang shaders are not supported out of the box; however, starting from version 1.6.0, it's quite easy to use them with this plugin. You'll need some minimal setup you can find here to copy-paste in your vite.config file. The idea is to use multiple importKeywords to include Slang shader chunks and convert the output shader to a web-friendly format (like WGSL) by using the onComplete option and the Slang compiler.

Default Options

Example

Will result in:

Change Log

• Starting from v1.6.0 this plugin supports onComplete callback function to customize output shaders. • Starting from v1.5.2 this plugin uses vite.transformWithOxc function when available. • Starting from v1.5.1 this plugin is fully compatible with vite^7.0.0. • Starting from v1.5.0 this plugin supports a custom importKeyword to include shader chunks. • Starting from v1.4.0 compress option was renamed to minify and now it allows a promise callback. • Starting from v1.3.2 this plugin allows to automatically remove already imported chunks with the removeDuplicatedImports option set to true. • Starting from v1.3.1 this plugin is fully compatible with vite^6.0.0. • Starting from v1.3.0 this plugin will not remove comments starting with ///, unless compress option is set to true. • Starting from v1.2.0 this plugin is fully compatible with vite^5.0.0. • Starting from v1.1.1 this plugin has a complete TypeScript support. Check "Usage" > "With TypeScript" for more info. • Starting from v1.0.0 this plugin is fully compatible with vite^4.0.0. • Starting from v0.5.4 this plugin supports custom compress callback function to optimize output shader length after all shader chunks have been included. • Starting from v0.5.0 this plugin supports shaders hot reloading when watch option is set to true. • Starting from v0.4.0 this plugin supports chunk imports from project root and root option to override the default root directory. • Starting from v0.3.0 this plugin is pure ESM. Consider updating your project to an ESM module by adding "type": "module" in your package.json or consult this issue for possible workarounds. • Starting from v0.2.2 this plugin supports compress option to optimize output shader length. You might consider setting this to true in production environment. • Starting from v0.2.0 this plugin uses a config object as a single argument to glsl function and allows to disable import warnings with the warnDuplicatedImports param set to false. • Starting from v0.1.5 this plugin warns about duplicated chunks imports and throws an error when a recursive loop occurres. • Starting from v0.1.2 this plugin generates sourcemaps using vite esbuild when the sourcemap option is set to true. • Starting from v0.1.0 this plugin supports WebGPU shaders with .wgsl extension. • Starting from v0.0.9 this plugin supports optional semicolons at the end of #include statements. • Starting from v0.0.7 this plugin supports optional single and double quotation marks around file names.

Note:

When used with three.js r0.99 and higher, it's possible to include shader chunks as specified in the documentation, those imports will be ignored by vite-plugin-glsl since they are handled internally by the library itself: