tri-noise-3d

Triangle-wave 3D noise. Produces organic, rippling patterns that look different from Perlin or Simplex noise — more fluid and wave-like.

This module is a WGSL function you embed in your own shader, plus a matching CPU/TypeScript implementation for cases where you need the same values on both sides.

Quick Start

In a shader

Import the WGSL source and prepend it to your shader code:

import { triNoise3DWGSL } from './gpu-modules/tri-noise-3d/tri-noise-3d';

const shaderCode = `
${triNoise3DWGSL}

@fragment
fn main(@location(0) uv: vec2f) -> @location(0) vec4f {
    let value = triNoise3D(vec3f(uv * 4.0, 0.0), 0.5, time);
    return vec4f(vec3f(value), 1.0);
}
`;

On the CPU

import { triNoise3D } from './gpu-modules/tri-noise-3d/tri-noise-3d';

const value = triNoise3D([x, y, z], 0.5, elapsed);

The CPU implementation produces identical output to the WGSL version.

API

triNoise3DWGSL: string

Raw WGSL source defining three functions: tri, tri3, and triNoise3D. Paste or concatenate this into your shader module.

triNoise3D(position, speed, time): number

CPU implementation. Returns a noise value roughly in [0, 1].

• position — [x, y, z] sample point
• speed — Animation rate. Try 0.1–1.0.
• time — Current time in seconds

How to Modify

• Change the number of octaves: The for loop runs 4 iterations (i <= 3). Fewer iterations = smoother/cheaper, more = finer detail.
• Adjust the frequency scaling: p = p * 1.2 and bp = bp * 1.8 control how quickly detail increases per octave. Higher values = more high-frequency detail.
• Use as a displacement: Sample triNoise3D at vertex positions to displace geometry along normals.
• Animate differently: The speed parameter scales a time offset added uniformly to all axes. For directional animation, modify the vec3f(t * 0.1 * speed) line to weight axes differently.