Skip to content

SurfaceBar3DRenderer ​

High-performance 3D histogram/bar chart for grid-based data.

Constructor ​

typescript
const renderer = new SurfaceBar3DRenderer(options: SurfaceBar3DRendererOptions);

Options ​

PropertyTypeDefaultDescription
canvasHTMLCanvasElementRequiredThe target canvas element.
barScalenumber0.8Width of bars relative to grid spacing.
opacitynumber1.0Global transparency.

Methods ​

setData(data: SurfaceBarData): void ​

Submits a grid of height values.

fitToData(): void ​

Centers the camera on the histogram grid.

Interfaces ​

SurfaceBarData ​

typescript
interface SurfaceBarData {
  rows: number;            // Number of rows (Z axis)
  cols: number;            // Number of columns (X axis)
  heights: Float32Array;   // One height value per cell
  colors?: Float32Array;   // Optional RGB per bar
  origin?: [number, number, number]; // Grid start position
  spacing?: [number, number];        // Distance between cells [dx, dz]
}

Performance ​

Uses GLSL Instancing. Each bar's unique height and color are passed as instance attributes, allowing thousands of bars to be rendered and updated with extremely low CPU overhead.

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).

Released under the MIT License.