API
API|
@babylonjs/materials|
GridMaterial

Class GridMaterial

The grid materials allows you to wrap any shape with a grid. Colors are customizable.

Hierarchy (View Summary)

Index
constructor
antialias gridOctaves gridOffset gridRatio gridThicknessModifier lineColor mainColor majorUnitFrequency minGridSpacing minorUnitVisibility opacity preMultiplyAlpha useHorizonFade useMaxLine useMultiScale useOriginMarker
belowLineColor linesOnly opacityTexture
bindForSubMesh clone dispose getClassName isReadyForSubMesh needAlphaBlending needAlphaBlendingForMesh serialize Parse

  • constructor

    Parameters

    • name: string

      The name given to the material in order to identify it afterwards.

    • Optionalscene: any

      The scene the material is used in.

    • forceGLSL: boolean = false

      Use the GLSL code generation for the shader (even on WebGPU). Default is false

    Returns GridMaterial

antialias: boolean = true

Whether to antialias the grid

gridOctaves: number = 4

Number of logarithmic octaves rendered (1–8). Default 4.

gridOffset: any = ...

Allows setting an offset for the grid lines.

gridRatio: number = 1.0

The scale of the grid compared to unit.

gridThicknessModifier: number = 1.0

Scales grid line width. Values > 1 produce thicker lines. Default 1.0.

lineColor: any = ...

Color of the grid lines.

mainColor: any = ...

Main color of the grid (e.g. between lines)

majorUnitFrequency: number = 10

The frequency of thicker lines.

minGridSpacing: number = 0.001

World-unit spacing of the finest octave. Default 0.001.

minorUnitVisibility: number = 0.33

The visibility of minor units in the grid.

opacity: number = 1.0

Overall mesh opacity. In linesOnly mode this also scales the maximum line alpha.

preMultiplyAlpha: boolean = false

Determine RBG output is premultiplied by alpha value.

useHorizonFade: boolean = false

Enable camera-distance-aware horizon (grazing-angle) fade.

useMaxLine: boolean = false

Determines if the max line value will be used instead of the sum wherever grid lines intersect.

useMultiScale: boolean = false

Enable multi-scale logarithmic grid LOD. Number of octaves is controlled by gridOctaves.

useOriginMarker: boolean = false

Render an ultra-fine crosshair at the world origin.

  • get linesOnly(): boolean

    When true, only grid lines are visible — non-grid pixels are discarded. Puts the material in the alpha-blend queue and enables a depth pre-pass so grid lines correctly occlude translucent objects (e.g. Gaussian splats). Set mesh.alphaIndex to a value lower than other transparent objects so the depth pre-pass fires first.

    Returns boolean

  • set linesOnly(value: boolean): void

    Parameters

    • value: boolean

    Returns void

opacityTexture: BaseTexture

Texture to define opacity of the grid

  • Dispose the material and its associated resources.

    Parameters

    • OptionalforceDisposeEffect: boolean

      will also dispose the used effect when true

    Returns void

  • Parameters

    • mesh: AbstractMesh
    • subMesh: SubMesh
    • OptionaluseInstances: boolean

    Returns boolean

  • Parse a JSON input to create back a grid material.

    Parameters

    • source: any

      the JSON data to parse

    • scene: Scene

      defines the hosting scene

    • rootUrl: string

      defines the root URL to use to load textures and relative dependencies

    Returns GridMaterial

    a new grid material