Skip to content

WasmGPU.createOverlay.legend

Summary

WasmGPU.createOverlay.legend creates a LegendLayer for scalar-to-color interpretation. The source can be a point cloud, glyph field, data material, or an explicit colormap/scale descriptor. Add the layer to an OverlaySystem to display a synchronized legend during interaction.

Syntax

WasmGPU.createOverlay.legend(descriptor: LegendLayerDescriptor): LegendLayer
const layer = wgpu.createOverlay.legend(descriptor);

Parameters

Name Type Required Description
descriptor LegendLayerDescriptor Yes Source binding and layout/format settings for the legend.

Returns

LegendLayer - Legend layer instance for overlay.addLayer(...).

Type Details

BuiltinColormapName

type BuiltinColormapName = "grayscale" | "turbo" | "viridis" | "magma" | "plasma" | "inferno";

Color4

type Color4 = [number, number, number, number];

OverlayLegendExplicitSource

type OverlayLegendExplicitSource = {
    scaleTransform: ScaleTransformDescriptor | ScaleTransform;
    colormap: Colormap | BuiltinColormapName;
    colormapStops?: ReadonlyArray<Color4>;
};

OverlayLegendSource

type OverlayLegendSource = PointCloud | GlyphField | DataMaterial | OverlayLegendExplicitSource;

LegendLayerDescriptor

type LegendLayerDescriptor = {
    id?: string;
    source: OverlayLegendSource;
    title?: string;
    anchor?: ScreenAnchorDescriptor;
    widthPx?: number;
    heightPx?: number;
    tickCount?: number;
    strictParity?: boolean;
    font?: string;
    formatValue?: (value: number) => string;
};

Example

const canvas = document.querySelector("canvas");
const wgpu = await WasmGPU.create(canvas);

const overlay = wgpu.createOverlay.system();
const legend = wgpu.createOverlay.legend({
    title: "Velocity Magnitude",
    source: {
        scaleTransform: { mode: "linear", domainMin: 0, domainMax: 10 },
        colormap: "viridis"
    },
    tickCount: 6
});
overlay.addLayer(legend);

See Also