This package provides a simple way to generate Signed Distance Fields (SDFs) and other distance-based fields from images using WebGPU.
You can install this package using npm:
npm install fastsdf
Here are basic examples of how to use the main functions:
import { generateSDF, generateDF, generateNearestNeighbourMap } from 'fastsdf';
// Load the source image
const srcImg = new Image();
srcImg.onload = async () => {
// Generate a Signed Distance Field
const sdfCanvas = await generateSDF(srcImg, 0.5, 10, 0.25);
document.body.appendChild(sdfCanvas);
// Generate a Distance Field
const dfCanvas = await generateDF(srcImg, 0.5, false, 10);
document.body.appendChild(dfCanvas);
// Generate a Nearest Neighbour Map
const nnMap = await generateNearestNeighbourMap(srcImg, 0.5);
// Use nnMap as needed
};
srcImg.src = 'path/to/your/image.png';
generateSDF(src: HTMLImageElement | HTMLCanvasElement, srcAlphaThreshold: number, maxDistance: number, dstAlphaThreshold: number): Promise<HTMLCanvasElement>
Generates a Signed Distance Field from the input image.
-
src
: The source image as an HTMLImageElement or HTMLCanvasElement. -
srcAlphaThreshold
: The alpha threshold for the source image. -
maxDistance
: The maximum distance to consider for the SDF. -
dstAlphaThreshold
: The threshold for the destination alpha channel. - Returns: A Promise that resolves to an HTMLCanvasElement containing the generated SDF.
generateDF(src: HTMLImageElement | HTMLCanvasElement, srcAlphaThreshold: number, inverseAlpha: boolean, maxDistance: number): Promise<HTMLCanvasElement>
Generates a Distance Field from the input image.
-
src
: The source image as an HTMLImageElement or HTMLCanvasElement. -
srcAlphaThreshold
: The alpha threshold for the source image. -
inverseAlpha
: Whether to invert the alpha channel. -
maxDistance
: The maximum distance to consider for the DF. - Returns: A Promise that resolves to an HTMLCanvasElement containing the generated DF.
generateNearestNeighbourMap(src: HTMLImageElement | HTMLCanvasElement, srcAlphaThreshold: number): Promise<FloatField>
Generates a Nearest Neighbour Map from the input image.
-
src
: The source image as an HTMLImageElement or HTMLCanvasElement. -
srcAlphaThreshold
: The alpha threshold for the source image. - Returns: A Promise that resolves to a FloatField containing the Nearest Neighbour Map.
The functions use WebGPU to efficiently generate various distance-based fields from the input image. The process involves:
- Initializing a Computron and JFACompute instance.
- Creating seed maps from the input image.
- Computing the required fields using Jump Flooding Algorithm (JFA).
- Generating the final output (SDF, DF, or Nearest Neighbour Map).
- This package requires WebGPU support in the browser.
- The input image should be loaded before calling the functions.
- All main functions return Promises, so make sure to use
await
or.then()
when calling them. - The generated fields are returned as HTMLCanvasElement or FloatField, depending on the function.
This project is licensed under the ISC License - see the LICENSE file for details.
Contributions are welcome! Please feel free to submit a Pull Request.
If you find a bug or have a suggestion, please file an issue on the GitHub repository.