Options
All
  • Public
  • Public/Protected
  • All
Menu

Module @pixano/graphics-3d

@pixano/graphics-3d

Set of web components for 3D point cloud annotations.

Import

import "@pixano/graphics-3d";
// or a specific element
import "@pixano/graphics-3d/lib/pxn-cuboid";

Example: Rectangle annotation

Example usage:

import { css, html, LitElement} from 'lit-element';
import '@pixano/graphics-3d';

const colors = [
  'blue', 'green', 'purple',
  'yellow', 'pink', 'orange', 'tan'
];

class MyDemocuboid extends LitElement {

  firstUpdated() {
    fetch('pointcloud.bin').then((response) => {
      return response.ok ? response.arrayBuffer() : Promise.reject(response.status);
    }).then((points) => {
      this.element.pcl = new Float32Array(points);
    });
  }

  onCreate(evt) {
    // listening to the create event dispatched
    // by the element to assign a nice color to
    // the new cuboid.
    const newObj = evt.detail;
    newObj.color = colors[this.element.editableCuboids.size % colors.length];
  }

  get element() {
    // Utility getter of the element
    return this.shadowRoot.querySelector('pxn-cuboid-editor');
  }

  render() {
    // Render the template with the cuboid element
    // enriched with some buttons to interact with it.
    return html`
    <pxn-cuboid-editor @create=${this.onCreate}></pxn-cuboid-editor>
    <div>
        <button @click=${() => this.element.mode = 'create'}>Add</button>
    </div>`;
  }
}

customElements.define('my-demo-cuboid', MyDemocuboid);

API

Properties/Attributes

pxn-cuboid-editor

Name Type Default Description
pcl Float32Array null Point cloud as one-dimensional array in the XYZ order
editableCuboids Set<Cuboid*> [] Cuboids rendered in the scene
editTarget `Cuboid null` null
cameraMode `orthographic perspective` perspective
mode InteractionMode** edit Sets the canvas interaction mode. Use none for no interactions at all.

*Cuboid format:

interface Cuboid {
  id: string;
  // x, y, z
  position: number[];
  // length, width, height
  size: number[];
  // rotation around z axis (trigometric)
  heading: number;
  // optional color
  color?: number;
}

**InteractionMode is a string with the following possible values:

type InteractiveMode =  "edit" | "create" | "none";

Methods

pxn-cuboid-editor

Name Description
rotate() => void Rotate selected cuboid by 90°
swap() => void Swap selected cuboid coordinates

Events

pxn-canvas-2d

Event Name Detail Description
create EditionDetail Fired when a shape has been created.
update EditionDetail Fired when a shapes update has been made.
delete EditionDetail Fired when shapes are deleted. Detail is the list of the deleted shape ids.
selection SelectionDetail Fired when shapes are selected.
mode InteractionMode Fired when user interaction mode changed
interface EditionDetail {
  // cuboid being created/edited/deleted
  detail: Cuboid;
}
interface SelectionDetail {
  // cuboids being selected
  detail: Cuboid[];
}

Shortcuts

pxn-cuboid-editor

Key Description
n Switch to create mode
Escape Unselect shapes
Delete Delete selected shapes
Ctrl+C Copy in clipboard currently selected cuboid
Ctrl+V Create new cuboid (with new id) from the clipboard content
+ Scale up size of points in pointcloud
- Scale down size of points in pointcloud

Index

Type aliases

InteractiveMode

InteractiveMode: "edit" | "create" | "none"

Functions

axisAlignedBox

  • axisAlignedBox(pos: number[], size: number[], heading: number): { pos: number[]; size: number[] }
  • Compute encompassing axis-aligned box from oriented box centered around pos

    Parameters

    • pos: number[]
    • size: number[]
    • heading: number

    Returns { pos: number[]; size: number[] }

    • pos: number[]
    • size: number[]

Const chunk

  • chunk(arr: any, size: number): any
  • Parameters

    • arr: any
    • size: number

    Returns any

Const cubeToCoordinates

  • cubeToCoordinates(cube: Cuboid): { edges: number[][]; vertices: number[][] }
  • Convert 3d box to 3d vertex coordinates

    Parameters

    Returns { edges: number[][]; vertices: number[][] }

    • edges: number[][]
    • vertices: number[][]

filterCentralArea

  • filterCentralArea(pointBuffer: Float32Array, rmin?: number, rmax?: number): { points: [number, number, number][]; rmax: number; zmax: number; zmin: number }
  • Find points in central region of interest ( rmin < r < rmax && z < 0) and find minimal z (zmin) in that region and maximal distance (dmax) in the entire point cloud

    Parameters

    • pointBuffer: Float32Array
    • Default value rmin: number = 3

      minimal distance for pointcloud filtering

    • Default value rmax: number = 6

      maximal distance for pointcloud filtering

    Returns { points: [number, number, number][]; rmax: number; zmax: number; zmin: number }

    filtered central points, zmin and rmax

    • points: [number, number, number][]
    • rmax: number
    • zmax: number
    • zmin: number

findHighDensityZ

  • findHighDensityZ(points: [number, number, number][], zmin: number, delta?: number): { mean: number; zh: number; zl: number }
  • Find sensor height by counting number of points in layers of height delta, and choosing layer with max nb of points.

    Parameters

    • points: [number, number, number][]

      input point cloud

    • zmin: number

      search grid is [zmin, 0] (zmin negative)

    • Default value delta: number = 0.25

      search grid step

    Returns { mean: number; zh: number; zl: number }

    zl : bottom z value of higher density layer zh : top z value of higher density layer (zl + delta) mean : mean inside layer of higher density

    • mean: number
    • zh: number
    • zl: number

findLowestZ

  • findLowestZ(points: [number, number, number][], zmin: number, zmax: number): number
  • Simple search for ground z.

    Parameters

    • points: [number, number, number][]

      pointcloud

    • zmin: number

      min z for search

    • zmax: number

      max z for search

    Returns number

findPtsInBox

  • findPtsInBox(pointBuffer: Float32Array, annotation: Cuboid): Uint32Array
  • Find points in box

    Parameters

    • pointBuffer: Float32Array

      array of point coordinates

    • annotation: Cuboid

      filtering cube

    Returns Uint32Array

    list of included points indices

fitBoxWithAutoZ

  • fitBoxWithAutoZ(pointBuffer: Float32Array, pos: [number, number, number], searchSize: [number, number], rz: number, gz?: number | null): { heading: number; position: [number, number, number]; size: [number, number, number] }
  • Fit box w.r.t pointcloud. Ignores low points (ground) for better box fitting.

    Parameters

    • pointBuffer: Float32Array

      point cloud

    • pos: [number, number, number]

      original center of the box (z not used)

    • searchSize: [number, number]
    • rz: number

      original heading of the box

    • Optional gz: number | null

    Returns { heading: number; position: [number, number, number]; size: [number, number, number] }

    • heading: number
    • position: [number, number, number]
    • size: [number, number, number]

      original length/width of the box (height not used)

fitToPts

  • fitToPts(positions: number[][]): { angle: number; l: number; w: number; x: number; y: number }
  • Fit box to point cloud (2d)

    Parameters

    • positions: number[][]

      point cloud

    Returns { angle: number; l: number; w: number; x: number; y: number }

    • angle: number
    • l: number
    • w: number
    • x: number
    • y: number

getHeightOfPts

  • getHeightOfPts(pointBuffer: Float32Array, position: [number, number], size: [number, number], heading: number): [number, number]
  • Find max and min height of points included in a cuboid

    Parameters

    • pointBuffer: Float32Array

      array of point coordinates

    • position: [number, number]
    • size: [number, number]
    • heading: number

    Returns [number, number]

    list of included points indices

mod

  • mod(n: number, m: number): number
  • True modulo function (not remainder, duh!).

    Parameters

    • n: number
    • m: number

    Returns number

normalizeAngle

  • normalizeAngle(a: number): number
  • Normalize angle between -pi and pi.

    Parameters

    • a: number

    Returns number

removeCentralArea

  • removeCentralArea(pointBuffer: Float32Array, r?: number): number[]
  • Find points in central region of interest ( rmin < r < rmax && z < 0) and find minimal z (zmin) in that region and maximal distance (dmax) in the entire point cloud

    Parameters

    • pointBuffer: Float32Array
    • Default value r: number = 2

    Returns number[]

    filtered central points, zmin and rmax