CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-deck-gl--core

Core library for deck.gl WebGL2/WebGPU-powered visualization framework providing fundamental classes for high-performance data visualization

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

index.mddocs/

@deck.gl/core

@deck.gl/core is the foundational library for deck.gl, a WebGL2/WebGPU-powered visualization framework designed for high-performance rendering of large datasets. The core library provides essential classes, utilities, and infrastructure for building GPU-accelerated data visualizations.

Package Information

  • Package Name: @deck.gl/core
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @deck.gl/core

Core Imports

import { Deck, Layer, MapView, WebMercatorViewport, COORDINATE_SYSTEM } from "@deck.gl/core";

For CommonJS:

const { Deck, Layer, MapView, WebMercatorViewport, COORDINATE_SYSTEM } = require("@deck.gl/core");

Basic Usage

import { Deck, MapView } from "@deck.gl/core";

// Create a Deck instance
const deck = new Deck({
  // Canvas dimensions
  width: 800,
  height: 600,
  
  // View configuration
  views: [new MapView({id: 'map'})],
  
  // Initial view state
  initialViewState: {
    longitude: -122.4,
    latitude: 37.8,
    zoom: 12,
    pitch: 0,
    bearing: 0
  },
  
  // Layers to render
  layers: [
    // Add your layers here
  ],
  
  // Event handlers
  onViewStateChange: ({viewState}) => {
    // Handle view state changes
  }
});

// Trigger redraw when needed
deck.setProps({
  layers: [/* updated layers */]
});

Architecture

@deck.gl/core is built around several key architectural components:

  • Deck Class: Main application controller managing the complete rendering lifecycle
  • Layer System: Hierarchical rendering system with base Layer and CompositeLayer classes
  • View/Viewport System: Flexible camera and projection management for different visualization types
  • Controller System: User interaction handlers for navigation and manipulation
  • Effect System: Lighting and post-processing effects for enhanced visual quality
  • Attribute System: Efficient data-to-GPU attribute management with automatic updates
  • Coordinate System: Flexible coordinate transformations supporting multiple spatial reference systems

Capabilities

Application Management

Core application lifecycle management including rendering coordination, layer management, and user interaction handling.

class Deck {
  constructor(props: DeckProps);
  setProps(props: DeckProps): void;
  finalize(): void;
  redraw(reason?: string): void;
  pickObject(opts: PickByPointOptions): PickingInfo | null;
  pickMultipleObjects(opts: PickByPointOptions): PickingInfo[];
  pickObjects(opts: PickByRectOptions): PickingInfo[];
}

interface DeckProps {
  width?: string | number | null;
  height?: string | number | null;
  views?: View | View[];
  layers?: Layer[];
  initialViewState?: any;
  viewState?: any;
  onViewStateChange?: (params: ViewStateChangeParameters) => void;
  pickingRadius?: number;
  useDevicePixels?: boolean | number;
  style?: Partial<CSSStyleDeclaration> | null;
}

Application Management

Layer System

Hierarchical layer system for rendering data with base Layer class for direct GPU rendering and CompositeLayer for sublayer composition.

abstract class Layer<PropsT = {}> {
  constructor(props: LayerProps<PropsT>);
  abstract initializeState(context: LayerContext): void;
  updateState(params: UpdateParameters<Layer>): void;
  finalizeState(context: LayerContext): void;
  draw(opts: any): void;
  getPickingInfo(params: GetPickingInfoParams): PickingInfo;
  project(xyz: [number, number, number]): [number, number, number];
  unproject(xy: [number, number]): [number, number, number];
}

abstract class CompositeLayer<PropsT = {}> extends Layer<PropsT> {
  abstract renderLayers(): Layer[] | Layer;
  getSubLayers(): Layer[];
  filterSubLayer(context: FilterContext): boolean;
}

interface LayerProps<PropsT = {}> {
  id: string;
  data?: LayerData;
  visible?: boolean;
  opacity?: number;
  pickable?: boolean;
  coordinateSystem?: CoordinateSystem;
  coordinateOrigin?: [number, number, number];
  modelMatrix?: number[];
  getPosition?: Accessor<PropsT, Position>;
  extensions?: LayerExtension[];
  onHover?: (info: PickingInfo, event: MjolnirEvent) => boolean | void;
  onClick?: (info: PickingInfo, event: MjolnirEvent) => boolean | void;
}

Layer System

Views and Viewports

Flexible view and viewport system supporting multiple projection types including geospatial, orthographic, and 3D perspectives.

abstract class Viewport {
  constructor(opts: ViewportOptions);
  equals(viewport: Viewport): boolean;
  project(xyz: [number, number, number], opts?: ProjectOptions): [number, number, number];
  unproject(xyz: [number, number], opts?: UnprojectOptions): [number, number, number];
  getBounds(opts?: BoundsOptions): [[number, number], [number, number]];
}

class WebMercatorViewport extends Viewport {
  constructor(opts: WebMercatorViewportOptions);
  addMetersToLngLat(lngLat: [number, number], meters: [number, number]): [number, number];
  fitBounds(bounds: [[number, number], [number, number]], opts?: FitBoundsOptions): WebMercatorViewportOptions;
}

abstract class View {
  constructor(props: ViewProps);
  makeViewport(opts: MakeViewportOptions): Viewport;
  getViewStateId(): string;
  filterViewState(viewState: any): any;
}

class MapView extends View {
  constructor(props: MapViewProps);
}

Views and Viewports

Controllers

User interaction controllers for handling navigation and manipulation events across different view types.

abstract class Controller {
  constructor(props: ControllerProps);
  handleEvent(event: MjolnirEvent): void;
  setProps(props: ControllerProps): void;
  updateViewport(viewport: Viewport): void;
}

class MapController extends Controller {
  constructor(props: MapControllerProps);
}

interface ControllerProps {
  makeViewport: (viewState: any) => Viewport;
  onViewStateChange?: (params: ViewStateChangeParameters) => void;
  onStateChange?: (state: InteractionState) => void;
  eventManager?: EventManager;
  scrollZoom?: boolean;
  dragPan?: boolean;
  dragRotate?: boolean;
  doubleClickZoom?: boolean;
  touchZoom?: boolean;
  touchRotate?: boolean;
  keyboard?: boolean;
}

Controllers

Effects and Lighting

Visual enhancement system with lighting effects and post-processing capabilities for photorealistic rendering.

abstract class Effect {
  constructor(props: any);
  preRender(gl: WebGL2RenderingContext, opts: PreRenderOptions): void;
  postRender(gl: WebGL2RenderingContext, opts: PostRenderOptions): void;
}

class LightingEffect extends Effect {
  constructor(props: LightingEffectProps);
}

class AmbientLight {
  constructor(props: AmbientLightOptions);
}

class DirectionalLight {
  constructor(props: DirectionalLightOptions);
}

class PointLight {
  constructor(props: PointLightOptions);
}

Effects and Lighting

Attribute Management

Efficient data-to-GPU attribute management system with automatic buffer updates and memory optimization.

class AttributeManager {
  constructor(device: Device, opts: AttributeManagerOptions);
  add(attributes: Record<string, AttributeOptions>): void;
  addInstanced(attributes: Record<string, AttributeOptions>): void;
  remove(attributeNames: string[]): void;
  update(opts: UpdateOptions): void;
  invalidate(triggerName: string, range?: [number, number]): void;
  getAttributes(): Record<string, Attribute>;
}

class Attribute {
  constructor(device: Device, opts: AttributeOptions);
  needsUpdate(): boolean;
  needsRedraw(opts?: any): boolean;
  allocate(numInstances: number): void;
  updateBuffer(opts: UpdateBufferOptions): void;
  setConstantValue(value: any): void;
}

Attribute Management

Transitions and Animation

Smooth animation system with interpolation support for view state transitions and layer property changes.

abstract class TransitionInterpolator {
  arePropsEqual(props1: any, props2: any): boolean;
  initializeProps(startProps: any, endProps: any): any;
  interpolateProps(startProps: any, endProps: any, t: number): any;
}

class LinearInterpolator extends TransitionInterpolator {
  constructor(transitionProps?: string[]);
}

class FlyToInterpolator extends TransitionInterpolator {
  constructor(opts?: FlyToInterpolatorOptions);
}

Transitions and Animation

Coordinate Systems and Constants

Comprehensive coordinate system support and essential constants for spatial data visualization.

const COORDINATE_SYSTEM: {
  readonly DEFAULT: -1;
  readonly CARTESIAN: 0;
  readonly LNGLAT: 1;
  readonly METER_OFFSETS: 2;
  readonly LNGLAT_OFFSETS: 3;
};

const UNIT: {
  readonly common: 0;
  readonly meters: 1;
  readonly pixels: 2;
};

const OPERATION: {
  readonly DRAW: "draw";
  readonly MASK: "mask";
  readonly TERRAIN: "terrain";
};

type CoordinateSystem = -1 | 0 | 1 | 2 | 3;

Coordinate Systems

Utilities and Helpers

Essential utility functions for data processing, mathematical operations, and development support.

function createIterable<T>(data: any, objectInfo?: any): Iterable<T>;
function fp64LowPart(x: number): number;

class Tesselator {
  constructor(opts?: TesselatorOptions);
  tesselate(opts: TesselateOptions): TesselationResult;
}

// Logging and debugging
const log: {
  info: (message: string) => void;
  warn: (message: string) => void;
  error: (message: string) => void;
};

function assert(condition: any, message?: string): asserts condition;

Utilities and Helpers

Types

// Core types
type Position = [number, number] | [number, number, number];
type Color = [number, number, number] | [number, number, number, number];
type Accessor<T, V> = V | AccessorFunction<T, V>;
type AccessorFunction<T, V> = (object: T, context: AccessorContext<T>) => V;

interface AccessorContext<T> {
  index: number;
  data: LayerData<T>;
  target: any[];
}

// Data types
type LayerData<T = any> = T[] | LayerDataSource<T>;
interface LayerDataSource<T> {
  length: number;
  [key: number]: T;
}

// Picking types
interface PickingInfo {
  layer: Layer | null;
  index: number;
  object: any;
  x: number;
  y: number;
  coordinate?: [number, number, number];
  devicePixel?: [number, number];
  pixelRatio: number;
}

// View state types
interface MapViewState {
  longitude: number;
  latitude: number;
  zoom: number;
  pitch?: number;
  bearing?: number;
  altitude?: number;
}

interface FirstPersonViewState {
  longitude?: number;
  latitude?: number;
  position?: [number, number, number];
  bearing?: number;
  pitch?: number;
}

interface OrbitViewState {
  target: [number, number, number];
  rotationX?: number;
  rotationOrbit?: number;
  zoom?: number;
  minZoom?: number;
  maxZoom?: number;
}

interface OrthographicViewState {
  target: [number, number, number];
  zoom?: number;
  minZoom?: number;
  maxZoom?: number;
}

// Material and rendering types
interface Material {
  ambient?: number;
  diffuse?: number;
  shininess?: number;
  specularColor?: [number, number, number];
}

type TextureSource = string | HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | ImageData | ImageBitmap;

// Extension types
abstract class LayerExtension {
  constructor(opts?: any);
  getShaders(extension: this): any;
  initializeState(context: LayerContext, extension: this): void;
  updateState(params: UpdateParameters<Layer>, extension: this): void;
  draw(params: any, extension: this): void;
}

Install with Tessl CLI

npx tessl i tessl/npm-deck-gl--core

docs

application-management.md

attribute-management.md

controllers.md

coordinate-systems.md

effects-and-lighting.md

index.md

layer-system.md

transitions-and-animation.md

utilities-and-helpers.md

views-and-viewports.md

tile.json