TSL port of Cellular Noise

This is a TSL (Three.js Shading Language) implementation of Cellular Noise, ported from the original GLSL source.

Special thanks to Stefan Gustavson for the original implementation.
https://github.com/stegu/webgl-noise/

MIT License:
Copyright (C) 2021 Stefan Gustavson (Original GLSL)
Copyright (C) 2026 Yuichiroh Arai (TSL port of GLSL)

Demo

https://y11i-3d.github.io/tsl-cellular-noise/

Installation

npm install @y11i-3d/tsl-cellular-noise

Usage

Nearest distance only

import { uv, timerLocal, vec3 } from "three/tsl";
import { cellularNoise3_3x3x3 } from "@y11i-3d/tsl-cellular-noise";

const p = vec3(uv(), timerLocal());
material.colorNode = cellularNoise3_3x3x3(p);

Nearest and second nearest distances

Functions suffixed with _2 return a vec2 containing both the nearest (x) and second nearest (y) feature point distances.

import { uv, timerLocal, vec3 } from "three/tsl";
import { cellularNoise3_3x3x3_2 } from "@y11i-3d/tsl-cellular-noise";

const p = vec3(uv(), timerLocal());
const f = cellularNoise3_3x3x3_2(p);
// f.y - f.x is near zero at cell boundaries, producing a line pattern
material.colorNode = f.y.sub(f.x);

API

All functions take a point P and return noise value(s) in >= 0.

Nearest distance

Returns the nearest distance only.

| Function | Input | Returns | Quality | | ------------------------- | ------ | ------- | ------- | | cellularNoise2_2x2(P) | vec2 | float | Low | | cellularNoise2_3x3(P) | vec2 | float | High | | cellularNoise3_2x2x2(P) | vec3 | float | Low | | cellularNoise3_3x3x3(P) | vec3 | float | High |

Nearest and second nearest distances

Returns the nearest (x) and second nearest (y) distances. Requires additional computation.

| Function | Input | Returns | Quality | | --------------------------- | ------ | ------- | ------- | | cellularNoise2_2x2_2(P) | vec2 | vec2 | Low | | cellularNoise2_3x3_2(P) | vec2 | vec2 | High | | cellularNoise3_2x2x2_2(P) | vec3 | vec2 | Low | | cellularNoise3_3x3x3_2(P) | vec3 | vec2 | High |