GLSL Imports

Import GLSL functions from NPM packages, your files, or URLs using #include — no copy-pasting shader code between nodes.

How It Works

The #include directive inlines GLSL source code at the include site before shader compilation. It works like the C preprocessor: resolve the path, fetch the source, paste it in.

#include <lygia/generative/snoise>

void mainImage(out vec4 fragColor, in vec2 fragCoord) {
  vec2 uv = fragCoord / iResolution.xy;
  float n = snoise(vec3(uv * 4.0, iTime));
  fragColor = vec4(vec3(n), 1.0);
}

This fetches the snoise function from the lygia shader library and makes it available in your code. No setup needed — includes are resolved automatically.

Import Sources

There are three ways to import GLSL code:

NPM Packages

Use angle brackets to import from shader libraries like lygia:

#include <lygia/generative/snoise>
#include <lygia/lighting/pbr>
#include <lygia/color/space/hsv2rgb>

The .glsl extension is optional — <lygia/generative/snoise> and <lygia/generative/snoise.glsl> are equivalent.

Your Files

Use double quotes with a user:// path to import from your Virtual Filesystem files:

#include "user://my-shaders/utils.glsl"
#include "user://sdf-functions.glsl"

Upload .glsl files through the sidebar (Ctrl/Cmd + B > Files), then include them in any shader node.

URLs

Use double quotes with a full URL to import from anywhere on the web:

#include "https://raw.githubusercontent.com/stegu/psrdnoise/main/src/psrdnoise2.glsl"

URL imports are cached in memory for the session, so they only fetch once.

Supported Objects

#include works automatically in these visual objects:

Object	How it works
glsl	Auto-preprocessed before shader compilation
swgl	Auto-preprocessed in `FP`, `VP`, and `Inc` fields
regl	Auto-preprocessed in `frag` and `vert` fields
three	Use `await glsl` tagged template or `processIncludes()`

Three.js Usage

Three.js nodes can't auto-preprocess because Patchies doesn't control THREE.ShaderMaterial. Use the glsl tagged template instead:

const material = new THREE.ShaderMaterial({
  fragmentShader: await glsl`
    #include <lygia/generative/snoise>

    void main() {
      float n = snoise(vec3(vUv * 4.0, time));
      gl_FragColor = vec4(vec3(n), 1.0);
    }
  `,
})

The glsl tag and processIncludes() function are available in all JavaScript-based visual objects.

Try It

Exercise — Use lygia noise in a GLSL shader

Create a glsl object (Enter > type glsl)
Paste this code:

#include <lygia/generative/snoise>

void mainImage(out vec4 fragColor, in vec2 fragCoord) {
  vec2 uv = fragCoord / iResolution.xy;
  float n = snoise(vec3(uv * 5.0, iTime * 0.5));
  fragColor = vec4(vec3(n * 0.5 + 0.5), 1.0);
}

Connect to bg.out — you should see animated simplex noise

Exercise — Share a utility across nodes

Open the sidebar (Ctrl/Cmd + B > Files) and create a file called utils.glsl
Add a helper function:

vec3 palette(float t) {
  return 0.5 + 0.5 * cos(6.28318 * (t + vec3(0.0, 0.33, 0.67)));
}

In a glsl object, include and use it:

#include "user://utils.glsl"

void mainImage(out vec4 fragColor, in vec2 fragCoord) {
  vec2 uv = fragCoord / iResolution.xy;
  fragColor = vec4(palette(uv.x + iTime * 0.2), 1.0);
}

Create a second glsl object and include the same file — both nodes share the function

Nested Includes

Included files can contain their own #include directives. Resolution is recursive up to 32 levels deep. Circular includes are detected and produce an error.

Caching

NPM packages are fetched from a CDN and cached for the session
VFS files are re-read when changed, so edits are reflected immediately
URLs are cached for the session (reload the page to re-fetch)

Licensing: Lygia Shader Library

Lygia is dual licensed under the Prosperity License and the Lygia Patron License.

This means that Lygia is free for non-commercial use, i.e. for personal use and usage in non-commercial organizations. For commercial use, please purchase a license from the creator, Patricio Gonzalez Vivo on GitHub Sponsors.

This does NOT apply to you if you do not import the Lygia package by using #include <lygia/...> in your shaders. You can still use Patchies and all its features without importing Lygia.