Skip to content

VectorField3DRenderer

Visualizes directional vector fields (quiver plots) using instanced arrow primitives.

Constructor

typescript
const renderer = new VectorField3DRenderer(options: VectorField3DRendererOptions);

Options

PropertyTypeDefaultDescription
canvasHTMLCanvasElementRequiredThe target canvas element.
scaleMultipliernumber1.0Global scaling factor for arrow length.
opacitynumber1.0Global opacity for all vectors.
enableTooltipbooleantrueEnable interactive data tooltips.

Methods

setData(data: VectorFieldData): void

Submits new vector data to the GPU.

updateScale(multiplier: number): void

Updates the scaleMultiplier without regenerating geometry.

fitToData(): void

Centers the camera on the bounding box of all vectors.

Interfaces

VectorFieldData

typescript
interface VectorFieldData {
  positions: Float32Array;  // Flattened [x, y, z] origins
  directions: Float32Array; // Flattened [dx, dy, dz] vectors
  colors?: Float32Array;    // Optional flattened [r, g, b] per vector
  color?: [number, number, number]; // Fallback color
}

Performance

Uses Instanced Rendering to draw thousands of arrows in a single draw call. The rotation and scaling matrices are computed per-vertex in the GPU shader for maximum performance.

Released under the MIT License.