Three.js Blocks

Home
Documentation
Examples
Tools

GridPristine

@three-blocks/coreWebGPUWebGL
new GridPristine()
Extends
THREE.Mesh

Infinite grid mesh with anti-aliased lines and dual-layer composition.

Features

  • Two independent grid layers (A and B) with configurable cell size, width, color, and opacity
  • Analytic derivative-based rendering keeps line thickness stable across all zoom levels
  • World-space positioning using positionWorld (grid doesn't move with camera)
  • Smooth anti-aliasing at any distance or angle
  • Full TSL/NodeMaterial implementation for WebGPU compatibility

Rendering

  • Uses fragment shader derivatives (dFdx/dFdy) to compute pixel-space line width
  • Lines automatically adapt thickness based on screen-space density
  • Composite blend: background → layer B → layer A
  • No texture lookups or geometry subdivision required

Use Cases

  • Scene reference grids with major/minor divisions
  • CAD/3D editor floor grids
  • Architectural visualization ground planes
  • Debug visualizations requiring stable grid lines
Example
import { GridPristine } from '@three-blocks/core';
import * as THREE from 'three/webgpu';

// Basic grid with default settings
const grid = new GridPristine();
scene.add(grid);

Methods

attachGUI#

attachGUI(gui : *) : GridPristine

Attach a GUI folder with common controls. Compatible with lil-gui, dat.gui, and Three.js Inspector.

Parameters
gui*
GUI instance (e.g., lil-gui/dat.gui or renderer.inspector.createParameters()).
Returns
GridPristine

dispose#

dispose() : void

Dispose GPU resources and detach GUI.

Returns
void