<br /> <p align="center"> <a href=""> <img src="./Assets/logo.png" alt="Logo" width="300" height="300"> </a>

Usage no npm install needed!

<script type="module">
  import glnoise from '';




A collection of GLSL noise functions for use with WebGL with an easy to use API.
View Demo ยท Report Bug ยท API Docs

Table of Contents
  1. Why This?
  2. Installation
  3. Importing
  4. Usage - JavaScript
  5. Usage - GLSL
  6. Credits

Why this?

There already exist excellent resources that compile a list of algorithms such as:

And many more. But they all either require another library like Glslify or require you to manually copy and paste them into your shader code.

So this library addresses both those issues. It does not require any third-party libraries and you can include and use these noise functions without even having to give it a second thought.

Examples can be found in the examples directory.


Make sure to have ThreeJS installed.

$ npm i three

Install gl-Noise

$ npm i gl-noise


$ yarn add gl-noise

gl-Noise uses ES Modules, in the browser, simply declare your script as a module and then import it as you would in node.

<script src="./main.js" type="module"></script>
<!--                         ๐Ÿ‘† This lets you use ES Module import syntax-->


If you are on Node, you can import like so:

import {
    // Loaders

    // Individual Shader Chunks
} from "gl-noise"

In browsers, if you'd like to use NPM and the Node syntax then you will have to add an import-map to your HTML. Simply place this code above your script.

<script type="importmap">
    "imports": {
        "gl-noise": "/node_modules/gl-noise/build/glNoise.m.js",

Then you can use Node-like imports:

import {} from "gl-noise"
//                 ๐Ÿ‘† Notice, we don't have to specify the
//                    whole path (node_modules/.../...).
//                    If you don't use the import-map, then
//                    you will have to specify the path.

You can download build/glNoise.m.js and import it from wherever you want to save it. Alternatively, you can also download the IIFE type module from build/glNoise.js and include it in a script tag like people have been doing forever.

<script src="lib/glNoise.js"></script>
<script src="./main.js"></script>

Usage - JavaScript

Shader Chunks

A Shader Chunk is a self-contained piece of shader code that can be injected and used in a shader program. gl-Noise provides various Shader Chunks.

import {
    Perlin,     // ๐Ÿ‘ˆ 2D Perlin Noise
    Simplex,    // ๐Ÿ‘ˆ 2D Simplex Noise
    Voronoi     // ๐Ÿ‘ˆ 2D Voronoi Noise
} from "gl-noise"

It also has a bunch of utility functions. See the API Reference for more info on all available functions.

You can load these chunks along with shaders as you will see in the next section.


gl-Noise provides three types of loaders. You can read about them in the API Reference but here is a summary.

const paths = ["./s1.glsl", "./s2.glsl", "./s3.glsl"];
const chunks = [
    [Perlin],           // ๐Ÿ‘ˆ Chunks to include with s1
    [Perlin, Simplex],  // ๐Ÿ‘ˆ Chunks to include with s2
    []                  // ๐Ÿ‘ˆ Chunks to include with s3

// Loads shaders and appends chunks to them.
loadShaders(paths, chunks).then(([s1, s2, s3]) => {
    // whatever

const CSMpaths = {
  defines: "./shaders/defines.glsl",
  header: "./shaders/header.glsl",
  main: "./shaders/main.glsl",

const CSMchunks = [Perlin, Simplex]

// Loads shaders with CSM Friendly format
loadShadersCSM(CSMpaths, CSMchunks).then(({defines, header, main}) => {
    // whatever

// Note: Leaving out the "chunks" parameter results in all available chunks being added.

// Loads shaders without any post processing.
loadShadersRaw(paths).then(([s1, s2, s3]) => {
    // whatever

Usage - GLSL

Once the chunks are imported properly, using gl-Noise Within GLSL is a breeze. All you have to do is call the function you want with the right arguments.

float p = gln_perlin(uv);
float n = gln_normalize(p);

See the full list of available functions in the API Reference.

Note: CSM = My CustomShaderMaterial


I have not come up with these noise functions. Here's attribution to the creators of them.

Noise Maker Reference License
Perlin Noise Hugh Kennedy GitHub MIT
Simplex Noise Ian McEwan GitHub MIT
Voronoi Noise Patricio Gonzalez Vivo WebSite ???

If you see your function being used in this library, please open an issue or contact me at so I can credit you or remove the function ASAP.