HX tsl-hex-tiling
Three.js r186 · WebGPU ready

Break the
repeat.

Stochastic hex tiling for Three.js TSL. Hide obvious texture repetition across large surfaces while keeping your existing PBR workflow.

Get started Launch PBR demo ↗
3×
gradient samples
2
render backends
0
global patches
Live WebGPU demo · drag to orbit

Install

One graph.
Two backends.

Pure TSL compiles to WGSL for WebGPU and GLSL for the WebGL 2 fallback. No ShaderChunk replacement, prototypes, or global state.

$ pnpm add tsl-hex-tiling three
01

Node native

Composes with Standard and Physical node materials.

02

PBR aware

Color, normal, roughness, metalness, and AO maps.

03

Live controls

Tune scale and blending without recompiling materials.

Minimal API

import { applyHexTiling } from 'tsl-hex-tiling'

const { uniforms } = applyHexTiling(material, {
  map: colorMap,
  normalMap,
  roughnessMap,
  aoMap
})

uniforms.patchScale.value = 3.5

Designed for terrain

Keep the detail.
Lose the grid.

Randomized triangular neighborhoods break long-range repetition while explicit texture gradients preserve stable mip selection across patch boundaries.

Explore PBR Read the docs →