or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.mdscenegraph-layer.mdsimple-mesh-layer.md
tile.json

index.mddocs/

@deck.gl/mesh-layers

@deck.gl/mesh-layers provides specialized deck.gl layers for rendering 3D meshes and scene graphs in WebGL-based data visualizations. It includes two main layer types for different 3D rendering needs: SimpleMeshLayer for individual 3D meshes and ScenegraphLayer for complete glTF scene graphs with animations.

Package Information

  • Package Name: @deck.gl/mesh-layers
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @deck.gl/mesh-layers

Core Imports

import { SimpleMeshLayer, ScenegraphLayer } from "@deck.gl/mesh-layers";
import type { SimpleMeshLayerProps, ScenegraphLayerProps } from "@deck.gl/mesh-layers";

For CommonJS:

const { SimpleMeshLayer, ScenegraphLayer } = require("@deck.gl/mesh-layers");

Basic Usage

import { SimpleMeshLayer, ScenegraphLayer } from "@deck.gl/mesh-layers";
import { CubeGeometry } from "@luma.gl/engine";

// Simple mesh rendering
const meshLayer = new SimpleMeshLayer({
  id: 'mesh-layer',
  data: [{position: [0, 0, 0], color: [255, 0, 0]}],
  mesh: new CubeGeometry(),
  getPosition: d => d.position,
  getColor: d => d.color,
  sizeScale: 100
});

// glTF scene graph rendering with animations
const scenegraphLayer = new ScenegraphLayer({
  id: 'scenegraph-layer',
  data: [{coordinates: [-122.4, 37.8, 0]}],
  scenegraph: 'https://example.com/model.gltf',
  getPosition: d => d.coordinates,
  _lighting: 'pbr',
  _animations: {'*': {speed: 1}}
});

Architecture

@deck.gl/mesh-layers is built around deck.gl's layering system with WebGL rendering:

  • Layer System: Both layers extend deck.gl's base Layer class for data-driven rendering
  • WebGL Integration: Uses @luma.gl for efficient GPU-based rendering and shader management
  • Instance Rendering: Optimized for rendering many instances of the same geometry
  • Transform Pipeline: Matrix transformations for positioning, scaling, and rotation
  • Material System: Support for textures, lighting, and PBR materials

Capabilities

Simple Mesh Layer

Renders multiple instances of a single 3D mesh with per-instance transformations, colors, and materials. Supports custom geometries, textures, and lighting effects.

class SimpleMeshLayer<DataT = any, ExtraPropsT extends {} = {}> extends Layer<
  ExtraPropsT & Required<SimpleMeshLayerProps<DataT>>
> {
  constructor(props: SimpleMeshLayerProps<DataT> & ExtraPropsT);
  static readonly layerName: "SimpleMeshLayer";
  static readonly defaultProps: DefaultProps<SimpleMeshLayerProps>;
}

Simple Mesh Layer

Scene Graph Layer

Renders complete glTF scene graphs with support for hierarchical node structures, animations, and PBR materials. Ideal for complex 3D models with multiple components.

class ScenegraphLayer<DataT = any, ExtraPropsT extends {} = {}> extends Layer<
  ExtraPropsT & Required<ScenegraphLayerProps<DataT>>
> {
  constructor(props: ScenegraphLayerProps<DataT> & ExtraPropsT);
  static readonly layerName: "ScenegraphLayer";
  static readonly defaultProps: DefaultProps<ScenegraphLayerProps>;
}

Scene Graph Layer

Types

Common Types

type Position = [number, number, number];
type Color = [number, number, number, number];
type Orientation = [number, number, number]; // [pitch, yaw, roll] in degrees
type Scale = [number, number, number];
type Translation = [number, number, number];

interface LayerDataSource<DataT> extends Array<DataT> {}

type Accessor<DataT, ValueT> = 
  | ValueT 
  | ((d: DataT, info?: {index: number; target: any[]}) => ValueT);

interface DefaultProps<PropsT> {
  [key: string]: {
    type?: string;
    value?: any;
    min?: number;
    max?: number;
    async?: boolean;
    ignore?: boolean;
  };
}

Mesh Types

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

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

interface MeshAttribute {
  size: number;
  value: Float32Array | Uint16Array | Uint32Array;
}

Luma.gl Types

// From @luma.gl/engine
interface Geometry {
  attributes: MeshAttributes;
  indices?: MeshAttribute;
  topology?: string;
}

interface GroupNode {
  children: ScenegraphNode[];
  destroy(): void;
}

interface ScenegraphNode {
  children?: ScenegraphNode[];
  modelNode?: ModelNode;
}

interface ModelNode {
  model: Model;
}

interface Model {
  destroy(): void;
  draw(options?: any): void;
}

Lighting and Material Types

// From @deck.gl/core
interface Material {
  ambient?: number;
  diffuse?: number;
  shininess?: number;
  specularColor?: [number, number, number];
}

// From @luma.gl/gltf
interface GLTFAnimator {
  setTime(time: number): void;
  getAnimations(): any[];
}

interface PBREnvironment {
  brdfLutTexture?: any;
  diffuseEnvSampler?: any;
  specularEnvSampler?: any;
}

// From @luma.gl/core
interface Device {
  gl: WebGL2RenderingContext;
}

interface SamplerProps {
  [key: string]: any;
}

type TextureSource = string | HTMLImageElement | HTMLCanvasElement | ImageData | any;

Loader Types

// From @loaders.gl/gltf
interface GLTFLoader {
  name: string;
  id: string;
  module: string;
  version: string;
  extensions: string[];
  mimeTypes: string[];
  binary: boolean;
  parse: (arrayBuffer: ArrayBuffer, options?: any) => Promise<any>;
}

// Layer system types from @deck.gl/core
interface LayerContext {
  device: Device;
  gl: WebGL2RenderingContext;
  viewport: any;
}

interface UpdateParameters<LayerT> {
  props: any;
  oldProps: any;
  context: LayerContext;
  changeFlags: any;
}

interface ShaderModule {
  name: string;
  vs?: string;
  fs?: string;
  defines?: Record<string, any>;
  dependencies?: ShaderModule[];
}