or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

aggregation-layers.mdcarto-integration.mdcore-api.mdeffects-lighting.mdextensions.mdgeo-layers.mdindex.mdintegration.mdjson-configuration.mdlayers.mdmesh-layers.mdviews-controllers.md
tile.json

mesh-layers.mddocs/

Mesh Layers

3D mesh rendering layers for complex geometry, models, and scenes. These layers enable rendering of arbitrary 3D geometry including models loaded from files, procedural geometry, and scenegraph-based 3D objects.

Capabilities

SimpleMeshLayer

Renders multiple instances of 3D mesh geometry with individual positioning, scaling, and styling for each instance.

/**
 * Render a number of instances of an arbitrary 3D geometry
 */
class SimpleMeshLayer<DataT = any> extends Layer {
  constructor(props: SimpleMeshLayerProps<DataT>);
}

interface SimpleMeshLayerProps<DataT = any> extends LayerProps {
  /** Data source for positioning instances */
  data: LayerDataSource<DataT>;
  
  /** 3D mesh geometry - URL, object, or Promise */
  mesh: string | Mesh | Promise<Mesh> | null;
  
  /** Texture to apply to mesh - URL, Texture object, or Promise */
  texture?: string | Texture | Promise<Texture>;
  
  /** WebGL texture parameters */
  textureParameters?: Record<number, number> | null;
  
  /** Anchor position accessor for each instance */
  getPosition?: Accessor<DataT, Position>;
  
  /** Color accessor - mixed with vertex colors or texture */
  getColor?: Accessor<DataT, Color>;
  
  /** Orientation in [pitch, yaw, roll] degrees */
  getOrientation?: Accessor<DataT, [number, number, number]>;
  
  /** Scaling factor along each axis [x, y, z] */
  getScale?: Accessor<DataT, [number, number, number]>;
  
  /** Translation from anchor point in meters [x, y, z] */
  getTranslation?: Accessor<DataT, [number, number, number]>;
  
  /** Complete transform matrix (overrides orientation/scale/translation) */
  getTransformMatrix?: Accessor<DataT, number[]>;
  
  /** Global size multiplier for all instances */
  sizeScale?: number;
  
  /** Whether to use vertex colors from mesh */
  _useMeshColors?: boolean;
  
  /** Whether to render in wireframe mode */
  wireframe?: boolean;
  
  /** Material properties for lighting effects */
  material?: Material;
}

type Mesh = 
  | Geometry
  | { attributes: MeshAttributes; indices?: MeshAttribute }
  | MeshAttributes;

Usage Examples:

import {SimpleMeshLayer} from 'deck.gl';

// Basic mesh layer with loaded 3D model
const layer = new SimpleMeshLayer({
  id: 'mesh-layer',
  data: buildings,
  mesh: '/models/building.obj',
  getPosition: d => d.coordinates,
  getColor: d => d.color || [255, 255, 255],
  getScale: d => [1, 1, d.height],
  sizeScale: 1,
  pickable: true
});

// Mesh with custom geometry
const cubeGeometry = new Geometry({
  attributes: {
    positions: new Float32Array([...vertexData]),
    normals: new Float32Array([...normalData]),
    colors: new Float32Array([...colorData])
  }
});

const cubeLayer = new SimpleMeshLayer({
  id: 'cubes',
  data: locations,
  mesh: cubeGeometry,
  getPosition: d => d.position,
  getOrientation: d => [0, d.rotation, 0],
  _useMeshColors: true
});

ScenegraphLayer

Renders 3D scenegraphs and hierarchical models with support for animations, materials, and complex model structures.

/**
 * Render scenegraph-based 3D models with support for animations
 */
class ScenegraphLayer<DataT = any> extends Layer {
  constructor(props: ScenegraphLayerProps<DataT>);
}

interface ScenegraphLayerProps<DataT = any> extends LayerProps {
  /** Data source for positioning instances */
  data: LayerDataSource<DataT>;
  
  /** Scenegraph URL or object - typically glTF/GLB format */
  scenegraph: string | object | Promise<object>;
  
  /** Animation configurations */
  _animations?: {[name: string]: any};
  
  /** Size scale multiplier */
  sizeScale?: number;
  
  /** Whether to use mesh colors from the scenegraph */
  _useMeshColors?: boolean;
  
  /** Anchor position accessor */
  getPosition?: Accessor<DataT, Position>;
  
  /** Color accessor */
  getColor?: Accessor<DataT, Color>;
  
  /** Orientation in [pitch, yaw, roll] degrees */
  getOrientation?: Accessor<DataT, [number, number, number]>;
  
  /** Scaling factor [x, y, z] */
  getScale?: Accessor<DataT, [number, number, number]>;
  
  /** Translation offset [x, y, z] */
  getTranslation?: Accessor<DataT, [number, number, number]>;
  
  /** Transform matrix accessor */
  getTransformMatrix?: Accessor<DataT, number[]>;
  
  /** Scene properties for advanced control */
  _lighting?: 'flat' | 'pbr';
  
  /** Loading options for the scenegraph */
  loaders?: any[];
  
  /** Loading options passed to the loader */
  loadOptions?: {[key: string]: any};
}

Usage Examples:

import {ScenegraphLayer} from 'deck.gl';

// Basic scenegraph layer with glTF model
const layer = new ScenegraphLayer({
  id: 'gltf-models',
  data: vehicles,
  scenegraph: '/models/car.gltf',
  getPosition: d => d.position,
  getOrientation: d => [0, d.heading, 0],
  getScale: [1, 1, 1],
  sizeScale: 100,
  _lighting: 'pbr'
});

// Animated scenegraph
const animatedLayer = new ScenegraphLayer({
  id: 'animated-models',
  data: characters,
  scenegraph: '/models/character.glb',
  _animations: {
    idle: {speed: 1.0},
    walk: {speed: 2.0}
  },
  getPosition: d => d.coordinates,
  getColor: d => d.teamColor,
  pickable: true
});

Types

interface MeshAttributes {
  positions?: MeshAttribute;
  POSITION?: MeshAttribute;
  normals?: MeshAttribute;
  NORMAL?: MeshAttribute;
  colors?: MeshAttribute;
  COLOR_0?: MeshAttribute;
  texCoords?: MeshAttribute;
  TEXCOORD_0?: MeshAttribute;
}

interface MeshAttribute {
  value: ArrayLike<number>;
  size?: number;
  byteOffset?: number;
  byteStride?: number;
  normalized?: boolean;
}

interface Geometry {
  attributes: {[name: string]: MeshAttribute};
  indices?: MeshAttribute;
  mode?: number;
}

interface Material {
  ambient?: number;
  diffuse?: number;
  shininess?: number;
  specularColor?: [number, number, number];
}