import * as THREE from 'three/webgpu'; import type { GUIController, GUIFolder } from '../Utils/guiUtils.js'; import type { TSLFloatNode, TSLFunction, TSLUniformNode, TSLUintNode, TSLVec2Input, TSLVec4Node } from '../types/tsl.js'; /** Scalar inputs accepted by Three r185's proxied `Fn` call surface. */ export type GridPristineFloatInput = TSLFloatNode | TSLUintNode | number; /** Construction options for {@link GridPristine}. */ export interface GridPristineOptions { width?: number; height?: number; cellSizeA?: number; lineWidthA?: number; colorA?: THREE.ColorRepresentation; opacityA?: number; cellSizeB?: number; lineWidthB?: number; colorB?: THREE.ColorRepresentation; opacityB?: number; bgColor?: THREE.ColorRepresentation; } /** Chainable controller surface used by lil-gui and Three.js Inspector. */ export interface GridPristineGUIController extends GUIController { name(label: string): this; } /** Folder operations used by {@link GridPristine.attachGUI}. */ export interface GridPristineGUIFolder extends GUIFolder { add(target: TTarget, property: TKey, min?: number, max?: number, step?: number): GridPristineGUIController; addColor(target: TTarget, property: TKey): GridPristineGUIController; addFolder(name: string): GridPristineGUIFolder; close(): unknown; } /** Root GUI surface accepted by {@link GridPristine.attachGUI}. */ export interface GridPristineGUI { addFolder(name: string): GridPristineGUIFolder; } /** Inputs accepted by the exposed grid-line mask TSL function. */ export interface GridPristineMaskInputs { readonly [key: string]: unknown; uv: TSLVec2Input; lineWidth: GridPristineFloatInput; cellSize: GridPristineFloatInput; uvDeriv: TSLVec2Input; } /** Inputs accepted by the exposed intersection mask TSL function. */ export interface GridPristinePlusMaskInputs extends GridPristineMaskInputs { segmentLen: GridPristineFloatInput; } /** * 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 * * ```js * import { GridPristine } from 'three-blocks/grid-pristine'; * import * as THREE from 'three/webgpu'; * * // Basic grid with default settings * const grid = new GridPristine(); * scene.add(grid); * * @demo docs/demos/grid-pristine.html * @class GridPristine * @tags WebGPU, WebGL * @extends THREE.Mesh * @short Infinite anti-aliased grid mesh with two configurable layers rendered analytically in world space. * @category Meshes */ declare class GridPristine extends THREE.Mesh { /** World-space cell size of the major grid layer. */ cellSizeA: TSLUniformNode<'float', number>; /** World-space line width of the major grid layer. */ lineWidthA: TSLUniformNode<'float', number>; /** Line colour of the major grid layer. */ colorA: TSLUniformNode<'color', THREE.Color>; /** Opacity of the major grid layer. */ opacityA: TSLUniformNode<'float', number>; /** World-space cell size of the minor grid layer. */ cellSizeB: TSLUniformNode<'float', number>; /** World-space line width of the minor grid layer. */ lineWidthB: TSLUniformNode<'float', number>; /** Line colour of the minor grid layer. */ colorB: TSLUniformNode<'color', THREE.Color>; /** Opacity of the minor grid layer. */ opacityB: TSLUniformNode<'float', number>; /** Background colour drawn beneath both grid layers. */ bgColor: TSLUniformNode<'color', THREE.Color>; /** Reusable TSL function that evaluates one anti-aliased grid layer. */ computeMask: TSLFunction<[GridPristineMaskInputs], TSLFloatNode>; /** Reusable TSL function that evaluates intersection-only plus marks. */ computePlusMask: TSLFunction<[GridPristinePlusMaskInputs], TSLFloatNode>; /** TSL fragment function assigned to the grid material. */ fragmentMain: TSLFunction<[], TSLVec4Node>; _debug: GridPristineGUIFolder | null | undefined; /** * Create an infinite grid mesh. * * @param {Object} [params] - Grid configuration options. * @param {number} [params.width=9999] Plane width in world units. * @param {number} [params.height=9999] Plane height in world units. * @param {number} [params.cellSizeA=10.0] Cell size for layer A (world units). * @param {number} [params.lineWidthA=0.03] Line width for layer A (world units). * @param {number|string|THREE.Color} [params.colorA=0xffffff] Line color for layer A. * @param {number} [params.opacityA=1.0] Opacity for layer A in [0,1]. * @param {number} [params.cellSizeB=1.0] Cell size for layer B (world units). * @param {number} [params.lineWidthB=0.02] Line width for layer B (world units). * @param {number|string|THREE.Color} [params.colorB=0xcccccc] Line color for layer B. * @param {number} [params.opacityB=0.45] Opacity for layer B in [0,1]. * @param {number|string|THREE.Color} [params.bgColor=0x000000] Background color. */ constructor(params?: GridPristineOptions); /** * Attach a GUI folder with common controls. * Compatible with lil-gui, dat.gui, and Three.js Inspector. * @param {*} gui - A lil-gui instance or folder. * @returns {GridPristine} */ attachGUI(gui: GridPristineGUI | null | undefined): this; /** * Detach and destroy the GUI folder. * @returns {GridPristine} */ disposeGUI(): this; /** * Dispose GPU resources and detach GUI. * @returns {void} */ dispose(): void; } export { GridPristine };