Example 17 — WEBGL · 3D

3D Wave Volume

16×16 grid with three independent createSampler() calls — one per axis, each with shift: true on its own cycle. Y drives the surface height, X and Z warp the grid sideways and in depth. Points near the surface glow; the rest stay hidden. Drag to rotate.

Core snippet

samplerY = Waves.createSampler({
  shift: true,
  shiftInterval: 3,
  range: [-6, 6],
  frequency: 0.4,
  seed: 0
});
samplerX = Waves.createSampler({
  shift: true,
  shiftInterval: 4,
  range: [-3, 3],
  frequency: 0.3,
  seed: 42
});
samplerZ = Waves.createSampler({
  shift: true,
  shiftInterval: 5,
  range: [-3, 3],
  frequency: 0.35,
  seed: 77
});

const dy = samplerY.sample(xi * 0.9 + zi * 0.6, t);
const dx = samplerX.sample(zi * 0.8 + xi * 0.3, t * 0.85);
const dz = samplerZ.sample(xi * 0.7 + zi * 0.5, t * 0.7);

const surfaceRow = N / 2 + dy;
for (let yi = 0; yi < N; yi++) {
  const gap = Math.abs(yi - surfaceRow);
  if (gap < 2.5) {
    const glow = 1 - gap / 2.5;
    const bright = Math.round(80 + (yi / (N - 1)) * 175);
    stroke(bright, bright, 255, 255 * glow);
    vertex(
      -half + xi * SPACING + dx * SPACING * 0.4,
      -half + yi * SPACING,
      -half + zi * SPACING + dz * SPACING * 0.4
    );
  }
}