SimpleMeshLayer

The SimpleMeshLayer renders a number of arbitrary geometries. For example, a fleet of 3d cars each with a position and an orientation over the map.

import DeckGL from '@deck.gl/react';
import {SimpleMeshLayer} from '@deck.gl/mesh-layers';
import {CubeGeometry} from '@luma.gl/core'

function App({data, viewState}) {
  /**
   * Data format:
   * [
   *   {
   *     position: [-122.45, 37.7],
   *     angle: 0,
   *     color: [255, 0, 0]
   *   },
   *   {
   *     position: [-122.46, 37.73],
   *     angle: 90,
   *     color: [0, 255, 0]
   *   },
   *   ...
   * ]
   */
  const layer = new SimpleMeshLayer({
    id: 'mesh-layer',
    data,
    texture: 'texture.png',
    mesh: new CubeGeometry(),
    getPosition: d => d.position,
    getColor: d => d.color,
    getOrientation: d => [0, d.angle, 0]
  });

  return <DeckGL viewState={viewState} layers={[layer]} />;
}

Installation

To install the dependencies from NPM:

npm install deck.gl
# or
npm install @deck.gl/core @deck.gl/mesh-layers

import {SimpleMeshLayer} from '@deck.gl/mesh-layers';
new SimpleMeshLayer({});

To use pre-bundled scripts:

<script src="https://unpkg.com/deck.gl@^8.0.0/dist.min.js"></script>
<!-- or -->
<script src="https://unpkg.com/@deck.gl/core@^8.0.0/dist.min.js"></script>
<script src="https://unpkg.com/@deck.gl/mesh-layers@^8.0.0/dist.min.js"></script>

new deck.SimpleMeshLayer({});

Properties

Inherits from all Base Layer properties.

Mesh

mesh (String|Geometry|Object)

The geometry to render for each data object. One of:

• An URL to a mesh description file in a format supported by loaders.gl. The appropriate loader will have to be registered via the loaders.gl registerLoaders function for this usage.
• A luma.gl Geometry instance
• An object containing the following fields:
  • positions (Float32Array) - 3d vertex offset from the object center, in meters
  • normals (Float32Array) - 3d normals
  • texCoords (Float32Array) - 2d texture coordinates

texture (Texture2D|Image|String, optional)

• Default null.

The texture of the geometries. Can be either a luma.gl Texture2D instance, an HTMLImageElement, or a url string to the texture image.

If texture is supplied, texture is used to render the geometries. Otherwise, object color obtained via the getColor accessor is used.

Render Options

sizeScale (Number, optional)

• Default 1.

Multiplier to scale each geometry by.

wireframe (Boolean, optional)

• Default: false

Whether to render the mesh in wireframe mode.

material (Object, optional)

• Default: true

This is an object that contains material props for lighting effect applied on extruded polygons. Check the lighting guide for configurable settings.

_useMeshColors (Boolean, optional)

• Default: false

Whether to color pixels using vertex colors supplied in the mesh (the COLOR_0 or colors attribute). If set to true, vertex colors will be used. If set to false (default) vertex colors will be ignored.

Remarks:

• In the next major release of deck.gl, vertex colors are expected to always be used when supplied with a mesh. This property will then likely be removed and effectively default to true.

Data Accessors

getPosition (Function, optional)

• Default: object => object.position

Method called to retrieve the center position for each object in the data stream.

getColor (Function|Array, optional)

• Default: [0, 0, 0, 255]

If mesh does not contain vertex colors, use this color to render each object. If mesh contains vertex colors, then the two colors are mixed together. Use [255, 255, 255] to use the original mesh colors. If texture is assigned, then both colors will be ignored.

The color is in the format of [r, g, b, [a]]. Each channel is a number between 0-255 and a is 255 if not supplied.

• If an array is provided, it is used as the color for all objects.
• If a function is provided, it is called on each object to retrieve its color.

getOrientation (Function|Array, optional)

• Default: [0, 0, 0]

Object orientation defined as a vec3 of Euler angles, [pitch, yaw, roll] in degrees. This will be composed with layer's modelMatrix.

• If an array is provided, it is used as the orientation for all objects.
• If a function is provided, it is called on each object to retrieve its orientation.

getScale (Function|Array, optional)

• Default: [1, 1, 1]

Scaling factor on the mesh along each axis.

• If an array is provided, it is used as the scale for all objects.
• If a function is provided, it is called on each object to retrieve its scale.

getTranslation (Function|Array, optional)

• Default: [0, 0, 0]

Translation of the mesh along each axis. Offset from the center position given by getPosition. [x, y, z] in meters. This will be composed with layer's modelMatrix.

• If an array is provided, it is used as the offset for all objects.
• If a function is provided, it is called on each object to retrieve its offset.

getTransformMatrix (Function|Array, optional)

• Default: null

Explicitly define a 4x4 column-major model matrix for the mesh. If provided, will override getOrientation, getScale, getTranslation.

• If an array is provided, it is used as the transform matrix for all objects.
• If a function is provided, it is called on each object to retrieve its transform matrix.

Source

modules/mesh-layers/src/simple-mesh-layer