Vite Plugin GLSL

Import shader file chunks

Inspired by threejs-glsl-loader and vite-plugin-string.

Installation

npm i vite-plugin-glsl --save-dev
# or
yarn add vite-plugin-glsl --dev

Usage

// vite.config.js
import glsl from 'vite-plugin-glsl';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [glsl()]
});

Default Options

glsl(
  exclude = undefined,                    // RegExp | RegExp[] of file paths/extentions to ignore
  include = /\.(vs|fs|vert|frag|glsl)$/i, // RegExp | RegExp[] of file paths/extentions to import
  defaultExtension = 'glsl'               // Shader import suffix when no extension is specified
)

What it does

Recursively imports and inlines shader chunks within GLSL files relative to their directory.

Example

project-root
├── src/
│   ├── glsl/
│   │   ├── chunk0.frag
│   │   ├── chunk3.frag
│   │   ├── main.frag
│   │   ├── main.vert
│   │   └── utils/
│   │       ├── chunk1.glsl
│   │       └── chunk2.frag
│   └── main.ts
├── vite.config.js
└── package.json

// main.ts
import fragment from './glsl/main.frag';

// main.frag
precision highp float;

#include chunk0.frag;

out highp vec4 fragColor;

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

// chunk0.frag

// ".glsl" extension will be added automatically:
#include utils/chunk1;

highp vec4 chunkFn () {
  return vec4(chunkRGB(), 1.0);
}

// utils/chunk1.glsl

#include chunk2.frag;
#include ../chunk3.frag;

highp vec3 chunkRGB () {
  return vec3(chunkRed(), chunkGreen(), 0.0);
}

// utils/chunk2.frag

highp float chunkRed () {
  return 0.0;
}

// chunk3.frag

highp float chunkGreen () {
  return 0.8;
}

Will result in:

// main.frag
precision highp float;

highp float chunkRed () {
  return 0.0;
}

highp float chunkGreen () {
  return 0.8;
}

highp vec3 chunkRGB () {
  return vec3(chunkRed(), chunkGreen(), 0.0);
}

highp vec4 chunkFn () {
  return vec4(chunkRGB(), 1.0);
}

out highp vec4 fragColor;

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

Release Updates

• Starting from v0.0.7 this plugin supports optional single and double quotation marks around file names.

• Starting from v0.0.9 this plugin supports optional semicolons at the end of #include statements.

Example

// main.frag
precision highp float;

#include 'chunk3.frag'
#include "utils/chunk2.frag"

out highp vec4 fragColor;

void main (void) {
  fragColor = vec4(chunkRed(), chunkGreen(), 0.0, 1.0);
}

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:

precision highp float;

#include <common>

vec3 randomVec3 (const in vec2 uv) {
  return vec3(
    rand(uv * 0.1), rand(uv * 2.5), rand(uv)
  );
}