Image Filter API
Frequency domain image filtering using 2D FFT.
createImageFilter()
Creates an image filter instance.
Signature
ts
function createImageFilter(
config: ImageFilterConfig
): ImageFilter;1
2
3
2
3
Example
ts
import { createImageFilter, FilterType } from 'webgpu-fft';
const filter = await createImageFilter({
width: 512,
height: 512,
});1
2
3
4
5
6
2
3
4
5
6
ImageFilter Class
Methods
applyFilter()
Applies a filter to image data.
ts
applyFilter(
imageData: Float32Array,
options: {
type: FilterType;
cutoff: number;
shape?: 'ideal' | 'gaussian';
}
): Float32Array;1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
Parameters:
imageData— Interleaved complex image dataoptions.type— Filter type (LowPass, HighPass, BandPass, BandStop)options.cutoff— Cutoff frequency (0-1, normalized)options.shape— Filter shape ('ideal' or 'gaussian', default 'ideal')
Returns: Float32Array — Filtered image data.
ts
// Low-pass filter (blur)
const blurred = await filter.applyFilter(imageData, {
type: FilterType.LowPass,
cutoff: 0.3,
});
// High-pass filter (edge detection)
const edges = await filter.applyFilter(imageData, {
type: FilterType.HighPass,
cutoff: 0.1,
shape: 'gaussian',
});1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
dispose()
Releases GPU resources.
ts
dispose(): void;1
ImageFilterConfig Type
ts
interface ImageFilterConfig {
/** Image width (power of 2) */
width: number;
/** Image height (power of 2) */
height: number;
}1
2
3
4
5
6
2
3
4
5
6
FilterType Enum
ts
enum FilterType {
LowPass = 'lowpass',
HighPass = 'highpass',
BandPass = 'bandpass',
BandStop = 'bandstop',
}1
2
3
4
5
6
2
3
4
5
6
FilterShape Type
ts
type FilterShape = 'ideal' | 'gaussian';1
| Shape | Description |
|---|---|
ideal | Hard cutoff, may cause ringing artifacts |
gaussian | Smooth rolloff, fewer artifacts |
Related
- Image Filtering Tutorial — Usage guide
- 2D FFT Tutorial — 2D transform basics