sdf-flow

Converts a binary shape (black/white image) into a flowmap texture using signed distance fields and the Jump Flooding Algorithm. The output encodes flow direction and strength — sample it from a particle system or shader to make things flow around shapes.

Quick Start

import { createSdfFlow } from './gpu-modules/sdf-flow/sdf-flow';

const flow = createSdfFlow(device);

const flowmap = device.createTexture({
  size: [512, 512],
  format: 'rgba8unorm',
  usage: GPUTextureUsage.STORAGE_BINDING | GPUTextureUsage.TEXTURE_BINDING
});

// Source must be a GPUTexture with TEXTURE_BINDING usage
flow.render(shapeTexture, flowmap, {
  bevelWidth: 16,
  threshold: 128
});

// flowmap now contains the result — bind it in your pipeline

flow.destroy();

Output Format

The output is an rgba8unorm texture:

• R — Flow direction X (0.5 = no flow, 0 = left, 1 = right)
• G — Flow direction Y (0.5 = no flow, 0 = up, 1 = down)
• B — 0.5 (neutral)
• A — Flow strength (0 = no flow, 1 = max flow)

Values are premultiplied by alpha, so transparent areas are (0, 0, 0, 0).

API

createSdfFlow(device)

Returns { render, destroy }. No options — dimensions are derived from the source texture. The renderer auto-resizes internal JFA buffers if the source texture dimensions change.

render(source, target, params?)

• source — GPUTexture containing the shape (must have TEXTURE_BINDING usage)
• target — GPUTexture to write the flowmap into (must have STORAGE_BINDING usage, format rgba8unorm)
• params.bevelWidth — Pixel radius of the flow falloff zone. Default 16.
• params.threshold — Brightness threshold (0–255) to binarize the input. Default 128.
• params.smoothing — Central-difference step radius. Higher = smoother gradients. Default 1.
• params.invert — Swap inside/outside. Default false.

How It Works

1. Threshold — Binarize the input texture into inside/outside regions, seeding two JFA textures.
2. Jump Flooding — Run JFA separately for inside and outside seeds. Each pixel finds its nearest boundary pixel in O(log N) passes.
3. SDF + Gradient — Compute the signed distance (outside distance minus inside distance), apply smoothstep bevel, then derive flow direction via central differences.

How to Modify

• Change the output format: Edit the storageTexture format in the bind group layout and the texture_storage_2d declaration in flowmap.wgsl.
• Adjust the bevel curve: The height_at function in flowmap.wgsl uses a smoothstep. Replace with a linear ramp or custom curve.
• Use as a distance field only: Modify flowmap.wgsl to output the raw SDF value instead of the gradient. Store sdf_at(coords) directly.
• Multiple shapes: Render multiple shapes into the source texture before passing it to render.