Idetik

The top-level entry point for an Idetik visualization.

An Idetik instance owns the renderer, the shared chunk manager, and one or more viewports. Each viewport pairs a camera, its controls, and a stack of layers and draws into a region of the canvas. Call Idetik.start to begin the render loop and Idetik.stop to halt it.

Constructor

Creates a new Idetik visualization runtime instance.

new Idetik(params): Idetik;

Parameter	Type	Description
params	{ canvas: HTMLCanvasElement; viewports?: ViewportProps[]; overlays?: Overlay[]; showStats?: boolean; memoryLimitMB?: number; maxConcurrentRequests?: number; maxGpuUploadsPerUpdate?: number; }	Configuration parameters for the Idetik instance
params.canvas	HTMLCanvasElement	HTMLCanvasElement to render to
params.viewports?	ViewportProps[]	Optional array of viewport configurations. Each viewport renders with its own camera, layers, and controls. The element property is optional and defaults to the canvas if not provided. Elements must be unique across viewports. The id property is optional but useful for referencing specific viewports later.
params.overlays?	Overlay[]	Optional array of overlay objects that update each frame (e.g., for HUD elements)
params.showStats?	boolean	Optional flag to display performance statistics
params.memoryLimitMB?	number	-
params.maxConcurrentRequests?	number	-
params.maxGpuUploadsPerUpdate?	number	-

Examples

// Single viewport (element defaults to canvas)
const camera = new OrthographicCamera({ left: 0, right: 1024, top: 0, bottom: 1024 });
const idetik = new Idetik({
  canvas: document.querySelector('canvas')!,
  viewports: [{
    camera: camera,
    layers: [imageLayer],
    cameraControls: new PanZoomControls(camera)
  }]
});

// Multiple viewports - one defaults to canvas, others use separate elements
const idetik = new Idetik({
  canvas: document.querySelector('canvas')!,
  viewports: [
    {
      id: 'main',
      // element omitted - defaults to canvas
      camera: camera1,
      layers: [layer1]
    },
    {
      id: 'minimap',
      element: document.querySelector('#minimap')!,
      camera: camera2,
      layers: [layer2]
    }
  ]
});

Properties

canvas

readonly canvas: HTMLCanvasElement;

overlays

readonly overlays: Overlay[];

Accessors

chunkQueueStats QueueStats

get chunkQueueStats(): QueueStats;

memoryStats MemoryStats

get memoryStats(): MemoryStats;

renderedObjects number

get renderedObjects(): number;

width number

get width(): number;

height number

get height(): number;

viewports readonly Viewport[]

get viewports(): readonly Viewport[];

running boolean

get running(): boolean;

Methods

getViewport() Viewport | undefined

getViewport(id): Viewport | undefined;

Parameter	Type
id	string

addViewport() Viewport

addViewport(props): Viewport;

Parameter	Type
props	ViewportProps

removeViewport() boolean

removeViewport(viewport): boolean;

Parameter	Type
viewport	Viewport

addOverlay() void

addOverlay(overlay): void;

Parameter	Type
overlay	Overlay

removeOverlay() boolean

removeOverlay(overlay): boolean;

Parameter	Type
overlay	Overlay

setMemoryLimitMB() void

setMemoryLimitMB(memoryLimitMB): void;

Parameter	Type
memoryLimitMB	number

start() Idetik

start(): Idetik;

stop() void

stop(): void;