NotesGrid TSL

Grid TSL v2: what I removed and what got better

A rewrite from scratch: fewer variants and presets, and a grid with no moiré in any of its layers.

Version 2 of Grid TSL is a rewrite from scratch. Version 1 is still available under the v1.0.0 tag.

What I removed:

  • The triplanar and UV variants. There is now a single floor material, GridMaterial, projected onto the horizontal plane.
  • The fixed presets and fromPreset. In version 1 you could only switch presets from the panel; changing a value meant editing the code.
  • lil-gui as a dependency (in 2.1): the debug panel now lives in the Inspector that ships with three.js.
  • The old parameter names: cellSizeA became primarySpacing, lineWidthA became primaryThickness, colorA became primaryColor, bgColor became backgroundColor, and so on.

What got better:

  • No moiré on the crosses. In version 1 the crosses had no distance filtering; now every layer converges to an even tone once its details get smaller than a pixel.
  • Anisotropic filtering: each axis is filtered separately, so the grid also looks clean at grazing angles.
  • Every parameter is editable live, and a panel in the three.js Inspector copies the setup as JS or JSON to paste into the code.
  • Optional circular fade, so the floor blends into its surroundings.
  • Reusable package: it installs with npm and is imported as grid-tsl, with the debug panel and the TSL functions in separate modules.
  • A cheaper shader: derivatives are computed once, derived values are precomputed on the CPU and the fade is only compiled in when enabled.

Try the demo