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:
cellSizeAbecameprimarySpacing,lineWidthAbecameprimaryThickness,colorAbecameprimaryColor,bgColorbecamebackgroundColor, 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.