Engine API Reference - v2.24.0-beta.18
    Preparing search index...

    Class Grid

    Draws an anti-aliased reference grid using the "pristine grid" technique. The levels of lines follow the zoom, as in Blender: each level's cells are Grid#spacing times a power of Grid#subdivisions, the finest fades in as its cells grow on screen and the coarser ones turn major, so the grid keeps the same density at any distance. The lines through the origin are drawn in the color of their axis, and lines keep their thickness in pixels. By default the grid has no edge: the plane follows each camera that renders it and fades out with the distance from that camera. Clear Grid#infinite for a grid the size of its node's scale.

    The grid lies at the position and rotation of the node of its mesh instances. The node's scale sizes a grid that isn't infinite, but never its cells, so use Grid#spacing for those.

    const grid = new Grid(app.graphicsDevice);
    entity.addComponent('render', {
    meshInstances: grid.meshInstances,
    castShadows: false
    });

    Relevant Engine API examples:

    Index
    • get axisLineThickness(): number

      Gets the thickness of the lines through the origin in CSS pixels.

      Returns number

    • set axisLineThickness(value: number): void

      Sets the thickness of the lines through the origin in CSS pixels. Defaults to 2.

      Parameters

      • value: number

      Returns void

    • get contrast(): boolean

      Gets whether the lines take a contrasting color from the scene behind them.

      Returns boolean

    • set contrast(value: boolean): void

      Sets whether the lines take a contrasting color from the scene behind them instead of their theme color: black over a light part of the scene and white over a dark one, so they read against anything. The lines through the origin keep their axis colors, and the theme alpha still sets the opacity. The camera must capture the scene color, see CameraComponent#requestSceneColorMap. Defaults to false.

      Parameters

      • value: boolean

      Returns void

    • get depthDither(): boolean

      Gets whether the depth the grid writes is dithered.

      Returns boolean

    • set depthDither(value: boolean): void

      Sets whether the depth the grid writes is dithered by how much of each pixel its lines cover, so faint and distant lines hide a share of what is behind them instead of none of it. Suits gaussian splats, which blend with no depth of their own. When false, only lines covering most of a pixel write depth, which keeps the lines clean over meshes. Applies when Grid#depthWrite is set. Defaults to false.

      Parameters

      • value: boolean

      Returns void

    • get depthOffset(): number

      Gets the fraction of the distance to the camera the grid's depth is moved toward it by.

      Returns number

    • set depthOffset(value: number): void

      Sets the fraction of the distance to the camera the grid's depth is moved toward it by. The grid stays where it is on screen, but a surface on the grid's plane, such as a floor, no longer hides it, while what stands on that surface still does. Defaults to 0.001, which moves the grid 1 cm toward a camera 10 m away.

      Parameters

      • value: number

      Returns void

    • get depthTest(): boolean

      Gets whether the scene hides the grid where it is in front of it.

      Returns boolean

    • set depthTest(value: boolean): void

      Sets whether the scene hides the grid where it is in front of it. Defaults to true.

      Parameters

      • value: boolean

      Returns void

    • get depthWrite(): boolean

      Gets whether the grid writes its depth.

      Returns boolean

    • set depthWrite(value: boolean): void

      Sets whether the grid writes its depth, so it hides what draws after it, such as transparent meshes and gaussian splats behind it. The grid draws first of the transparent meshes of a layer sorted back to front. Only lines covering most of a pixel write depth, so faint and distant lines hide nothing. Defaults to false.

      Parameters

      • value: boolean

      Returns void

    • get fadeRange(): Vec2

      Gets the distances from the camera where the grid starts to fade out and has faded out.

      Returns Vec2

    • set fadeRange(value: Vec2): void

      Sets the distances from the camera, in world units, where the grid starts to fade out and where it has faded out completely. A larger gap between them fades the grid more softly; with no gap the grid stops with a hard edge. An infinite grid ends at the far distance, which is held inside 90% of the camera's far clip, so the far clip never cuts the grid. Defaults to [400, 1000].

      Parameters

      Returns void

    • get infinite(): boolean

      Gets whether the grid has no edge.

      Returns boolean

    • set infinite(value: boolean): void

      Sets whether the grid has no edge, following the camera. When false, the grid is as large as its node's scale along the two axes of its plane (x and z on the 'xz' plane), centered on the node. Defaults to true.

      Parameters

      • value: boolean

      Returns void

    • get majorLineThickness(): number

      Gets the thickness of the major lines in CSS pixels.

      Returns number

    • set majorLineThickness(value: number): void

      Sets the thickness of the major lines in CSS pixels. Defaults to 1.5.

      Parameters

      • value: number

      Returns void

    • get meshInstances(): MeshInstance[]

      Gets the mesh instances of the grid: the lines, and the pass that writes their depth when Grid#depthWrite is set. Add both to a render component or a layer. They have no node, so a render component gives them its entity; give them one when adding them to a layer directly.

      Returns MeshInstance[]

    • get minorLineThickness(): number

      Gets the thickness of the minor lines in CSS pixels.

      Returns number

    • set minorLineThickness(value: number): void

      Sets the thickness of the minor lines in CSS pixels. Defaults to 1.

      Parameters

      • value: number

      Returns void

    • get showAxes(): boolean

      Gets whether the lines through the origin are drawn in the colors of their axes.

      Returns boolean

    • set showAxes(value: boolean): void

      Sets whether the lines through the origin are drawn in the colors of their axes. Defaults to true.

      Parameters

      • value: boolean

      Returns void

    • get spacing(): number

      Gets the size of the major cells in world units.

      Returns number

    • set spacing(value: number): void

      Sets the cell size in world units the levels of lines are scaled from: each level's cells are this times a power of Grid#subdivisions. Defaults to 10.

      Parameters

      • value: number

      Returns void

    • get subdivisions(): number

      Gets how many cells of each level span a cell of the level above.

      Returns number

    • set subdivisions(value: number): void

      Sets how many cells of each level span a cell of the level above. Set to 1 for a single fixed level of cells of Grid#spacing that doesn't follow the zoom. Defaults to 10.

      Parameters

      • value: number

      Returns void

    • get visible(): boolean

      Gets whether the grid is visible.

      Returns boolean

    • set visible(value: boolean): void

      Sets whether the grid is visible. Defaults to true.

      Parameters

      • value: boolean

      Returns void

    • Destroys the grid's mesh instances and materials. Remove the mesh instances from any render component or layer first.

      Returns void

    • Sets the theme or partial theme for the grid. The alpha of each color scales the opacity of its lines.

      Parameters

      Returns void

      grid.setTheme({
      axis: { x: new Color(1, 0, 0) },
      minor: new Color(0.5, 0.5, 0.5, 0.5)
      });