OpenLIME

Class: ShaderFilterVector

ShaderFilterVector

ShaderFilterVector implements 2D vector field visualization techniques. Based on techniques from "2D vector field visualization by Morgan McGuire" and enhanced by Matthias Reitinger.

Features:

  • Arrow-based vector field visualization
  • Magnitude-based or custom arrow coloring
  • Optional vector normalization
  • Background field visualization
  • Customizable arrow appearance
  • Smooth interpolation

Technical Implementation:

  • Tile-based arrow rendering
  • Signed distance field for arrow shapes
  • Dynamic magnitude scaling
  • Colormap-based magnitude visualization
  • WebGL 1.0 and 2.0 compatibility

Example usage:

// Basic usage with default options
const vectorField = new ShaderFilterVector(myColorScale);
shader.addFilter(vectorField);

// Configure visualization modes
vectorField.setMode('normalize', 'on');  // Normalize arrow lengths
vectorField.setMode('arrow', 'col');     // Use custom arrow color
vectorField.setMode('field', 'mag');     // Show magnitude field

Advanced usage with custom configuration:

const vectorField = new ShaderFilterVector(colorscale, {
    inDomain: [-10, 10],         // Vector magnitude range
    maxSteps: 512,               // Higher colormap resolution
    arrowColor: [1, 0, 0, 1]     // Red arrows
});

// Add to shader pipeline
shader.addFilter(vectorField);

GLSL Implementation Details

Key Components:

  1. Arrow Generation:

    • Tile-based positioning
    • Shaft and head construction
    • Size and direction control

  2. Distance Functions:

    • line3(): Distance to line segment
    • line(): Signed distance to line
    • arrow(): Complete arrow shape

  3. Color Processing:

    • Vector magnitude computation
    • Colormap lookup
    • Mode-based blending

Constants:

  • ARROW_TILE_SIZE: Spacing between arrows (16.0)
  • ISQRT2: 1/sqrt(2) for magnitude normalization

Uniforms:

  • {vec4} arrow_color - Custom arrow color
  • {vec4} low_color - Color for values below range
  • {vec4} high_color - Color for values above range
  • {float} scale - Magnitude scaling factor
  • {float} bias - Magnitude offset
  • {sampler2D} colormap - Magnitude colormap texture

new ShaderFilterVector(colorscale [, options])

Creates a new vector field visualization filter

Parameters:
Name Type Argument Description
colorscale ColorScale

Colorscale for magnitude mapping
options ShaderFilterVector~Options <optional>

Configuration options
Source:
Throws:

If inDomain is invalid (length !== 2 or min >= max)

Type
Error
Example
```javascript
// Create with default options
const filter = new ShaderFilterVector(colorscale, {
    inDomain: [0, 1],
    maxSteps: 256,
    arrowColor: [0, 0, 0, 1]
});
```

Extends

Methods

getSampler(name)

Finds a sampler by name

Parameters:
Name Type Description
name string

Base sampler name
Inherited From:
Overrides:
Source:
Returns:

Found sampler or undefined

Type
ShaderFilter~Sampler | undefined

setMode(mode, id)

Sets the active mode for the filter

Parameters:
Name Type Description
mode string

Mode category to modify
id string

Specific mode ID to enable
Inherited From:
Overrides:
Source:
Throws:

If shader not registered or mode doesn't exist

Type
Error

setUniform(name, value)

Sets a uniform variable value

Parameters:
Name Type Description
name string

Base name of uniform variable
value number | boolean | Array

Value to set
Inherited From:
Overrides:
Source:
Throws:

If shader not registered

Type
Error

Type Definitions

Modes

Available visualization modes

Type:
  • Object
Properties:
Name Type Description
normalize string

Arrow normalization ('on'|'off')
arrow string

Arrow coloring mode ('mag'|'col')
field string

Background field visualization ('none'|'mag')
Source:

Options

Configuration options for vector field visualization

Type:
  • Object
Properties:
Name Type Argument Default Description
inDomain Array.<number> <optional>
 []

Input value range [min, max] for magnitude mapping
maxSteps number <optional>
 256

Number of discrete steps in the colormap texture
arrowColor Array.<number> <optional>
 [0.0, 0.0, 0.0, 1.0]

RGBA color for arrows when using 'col' mode
Source: