Ribbon3DRenderer

Renders time-series or profile data as continuous 3D lit ribbons.

Constructor

const renderer = new Ribbon3DRenderer(options: Ribbon3DRendererOptions);

Options

Property	Type	Default	Description
canvas	HTMLCanvasElement	Required	The target canvas element.
opacity	number	0.9	Global transparency.
showAxes	boolean	true	Show coordinate system.

Methods

setData(series: RibbonSeriesData[]): void

Submits multiple series to be rendered as ribbons.

fitToData(): void

Fits the camera to encompass all ribbons.

Interfaces

RibbonSeriesData

interface RibbonSeriesData {
  xValues: Float32Array;   // Path X coordinates
  yValues: Float32Array;   // Path Y coordinates
  z: number;               // Fixed depth for this slice
  width?: number;          // Ribbon width (thickness)
  color?: [number, number, number]; // RGB fill
}

Geometry

Each ribbon is dynamically generated as a triangular strip. Surface normals are computed for each segment to ensure smooth directional lighting and a premium 3D look.

Known limitations

• Bundle entry — pick velo-plot, velo-plot/trading, velo-plot/scientific, or velo-plot/full. See Bundle Architecture.
• WebGPU renderer (renderer: 'webgpu') requires an extended bundle entry and is experimental — use WebGL (default) for production.
• SVG — exportSVG() and renderer: 'svg' require an extended bundle. LaTeX labels and contour overlays are partial; 3D is not supported in SVG. See SVG examples.
• See Plugin status registry for plugin maturity (complete, partial, experimental).