PointCloudLayer

webgpu

Edit on Codepen

The PointCloudLayer renders a point cloud with 3D positions, normals and colors.

JavaScript

import {Deck, COORDINATE_SYSTEM} from '@deck.gl/core';
import {PointCloudLayer} from '@deck.gl/layers';

const layer = new PointCloudLayer({
  id: 'PointCloudLayer',
  data: 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/pointcloud.json',
  
  getColor: d => d.color,
  getNormal: d => d.normal,
  getPosition: d => d.position,
  pointSize: 2,
  coordinateOrigin: [-122.4, 37.74],
  coordinateSystem: COORDINATE_SYSTEM.METER_OFFSETS,
  pickable: true
});

new Deck({
  initialViewState: {
    longitude: -122.4,
    latitude: 37.74,
    zoom: 11
  },
  controller: true,
  getTooltip: ({object}) => object && object.position.join(', '),
  layers: [layer]
});

TypeScript

import {Deck, COORDINATE_SYSTEM, PickingInfo} from '@deck.gl/core';
import {PointCloudLayer} from '@deck.gl/layers';

type DataType = {
  position: [x: number, y: number, z: number];
  normal: [nx: number, ny: number, nz: number];
  color: [r: number, g: number, b: number];
};

const layer = new PointCloudLayer<DataType>({
  id: 'PointCloudLayer',
  data: 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/pointcloud.json',
  
  getColor: (d: DataType) => d.color,
  getNormal: (d: DataType) => d.normal,
  getPosition: (d: DataType) => d.position,
  pointSize: 2,
  coordinateOrigin: [-122.4, 37.74],
  coordinateSystem: COORDINATE_SYSTEM.METER_OFFSETS,
  pickable: true
});

new Deck({
  initialViewState: {
    longitude: -122.4,
    latitude: 37.74,
    zoom: 11
  },
  controller: true,
  getTooltip: ({object}: PickingInfo<DataType>) => object && object.position.join(', '),
  layers: [layer]
});

React

import React from 'react';
import {DeckGL} from '@deck.gl/react';
import {COORDINATE_SYSTEM} from '@deck.gl/core';
import {PointCloudLayer} from '@deck.gl/layers';
import type {PickingInfo} from '@deck.gl/core';

type DataType = {
  position: [x: number, y: number, z: number];
  normal: [nx: number, ny: number, nz: number];
  color: [r: number, g: number, b: number];
};

function App() {
  const layer = new PointCloudLayer<DataType>({
    id: 'PointCloudLayer',
    data: 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/pointcloud.json',
    
    getColor: (d: DataType) => d.color,
    getNormal: (d: DataType) => d.normal,
    getPosition: (d: DataType) => d.position,
    pointSize: 2,
    coordinateOrigin: [-122.4, 37.74],
    coordinateSystem: COORDINATE_SYSTEM.METER_OFFSETS,
    pickable: true
  });

  return <DeckGL
    initialViewState={{
      longitude: -122.4,
      latitude: 37.74,
      zoom: 11
    }}
    controller
    getTooltip={({object}: PickingInfo<DataType>) => object && object.position.join(', ')}
    layers={[layer]}
  />;
}

loaders.gl offers a category of loaders for loading point clouds from standard formats. For example, the following code adds support for LAS/LAZ files:

import {PointCloudLayer} from '@deck.gl/layers';
import {LASLoader} from '@loaders.gl/las';

new PointCloudLayer({
  data: 'path/to/pointcloud.laz',
  loaders: [LASLoader]
});

Installation

To install the dependencies from NPM:

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

import {PointCloudLayer} from '@deck.gl/layers';
import type {PointCloudLayerProps} from '@deck.gl/layers';

new PointCloudLayer<DataT>(...props: PointCloudLayerProps<DataT>[]);

To use pre-bundled scripts:

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

new deck.PointCloudLayer({});

Properties

Inherits from all Base Layer properties.

Render Options

sizeUnits (string, optional)

• Default: 'pixels'

The units of the point size, one of 'meters', 'common', and 'pixels'. See unit system.

pointSize (number, optional)

• Default: 10

Global radius of all points, in units specified by sizeUnits (default pixels).

material (Material, 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.

Data Accessors

getPosition (Accessor<Position>, optional)

• Default: object => object.position

Method called to retrieve the position of each object.

getNormal (Accessor<number[3]>, optional)

• Default: [0, 0, 1]

The normal of each object, in [nx, ny, nz].

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

getColor (Accessor<Color>, optional)

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

The rgba 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.

Source

modules/layers/src/point-cloud-layer