Skip to content
TypeGPU Logo TypeGPU Logo TypeGPU
Docs
Examples
Challenges
Blog

@typegpu/sdf

The @typegpu/sdf package offers a set of signed distance function utilities for use in TypeGPU and WebGPU projects.

Example usage

Section titled “Example usage”

By definition, signed distance functions return a distance from the given point to the boundary of a shape. For example, the sdf.sdDisk(point, radius) returns the signed distance from the point, to a circle located at point (0, 0) of radius equal to radius.

  • sdf.sdDisk(d.vec2f(2, 0), 1) is equal to 1,
  • sdf.sdDisk(d.vec2f(1, 0), 1) is equal to 0,
  • sdf.sdDisk(d.vec2f(0, 0), 1) is equal to -1.

Here is an example of a fragment shader that draws a disk of radius 0.25 on the center of a (presumably square) canvas:

import 
const tgpu: {
    fn: {
        <Args extends d.AnyData[] | []>(argTypes: Args, returnType?: undefined): TgpuFnShell<Args, d.Void>;
        <Args extends d.AnyData[] | [], Return extends d.AnyData>(argTypes: Args, returnType: Return): TgpuFnShell<Args, Return>;
    };
    bindGroupLayout: {
        <Entries extends Record<string, TgpuLayoutEntry | null>>(entries: Entries): TgpuBindGroupLayout<Prettify<Entries>>;
        <Entries extends Record<string, TgpuLegacyLayoutEntry | null>>(entries: Entries): TgpuBindGroupLayout<Prettify<MapLegacyTextureToUpToDate<...>>>;
    };
    ... 9 more ...;
    '~unstable': {
        ...;
    };
}
tgpu from 'typegpu';
import * as 
import d
d from 'typegpu/data';
import * as 
import sdf
sdf from '@typegpu/sdf';


const 
const mainFragment: TgpuFragmentFn<{
    uv: d.Vec2f;
}, d.Vec4f>
mainFragment = 
const tgpu: {
    fn: {
        <Args extends d.AnyData[] | []>(argTypes: Args, returnType?: undefined): TgpuFnShell<Args, d.Void>;
        <Args extends d.AnyData[] | [], Return extends d.AnyData>(argTypes: Args, returnType: Return): TgpuFnShell<Args, Return>;
    };
    bindGroupLayout: {
        <Entries extends Record<string, TgpuLayoutEntry | null>>(entries: Entries): TgpuBindGroupLayout<Prettify<Entries>>;
        <Entries extends Record<string, TgpuLegacyLayoutEntry | null>>(entries: Entries): TgpuBindGroupLayout<Prettify<MapLegacyTextureToUpToDate<...>>>;
    };
    ... 9 more ...;
    '~unstable': {
        ...;
    };
}
tgpu['~unstable'].
fragmentFn: <{
    uv: d.Vec2f;
}, d.Vec4f>(options: {
    in: {
        uv: d.Vec2f;
    };
    out: d.Vec4f;
}) => TgpuFragmentFnShell<{
    uv: d.Vec2f;
}, d.Vec4f> (+1 overload)
fragmentFn({
  
in: {
    uv: d.Vec2f;
}
in: { 
uv: d.Vec2f
uv: 
import d
d.
const vec2f: d.Vec2f
export vec2f
Schema representing vec2f - a vector with 2 elements of type f32.
Also a constructor function for this vector value.
@example const vector = d.vec2f(); // (0.0, 0.0)
const vector = d.vec2f(1); // (1.0, 1.0)
const vector = d.vec2f(0.5, 0.1); // (0.5, 0.1)
@example const buffer = root.createBuffer(d.vec2f, d.vec2f(0, 1)); // buffer holding a d.vec2f value, with an initial value of vec2f(0, 1);
vec2f },
  
out: d.Vec4f
out: 
import d
d.
const vec4f: d.Vec4f
export vec4f
Schema representing vec4f - a vector with 4 elements of type f32.
Also a constructor function for this vector value.
@example const vector = d.vec4f(); // (0.0, 0.0, 0.0, 0.0)
const vector = d.vec4f(1); // (1.0, 1.0, 1.0, 1.0)
const vector = d.vec4f(1, 2, 3, 4.5); // (1.0, 2.0, 3.0, 4.5)
@example const buffer = root.createBuffer(d.vec4f, d.vec4f(0, 1, 2, 3)); // buffer holding a d.vec4f value, with an initial value of vec4f(0, 1, 2, 3);
vec4f,
})(({ 
uv: d.v2f
uv }) => {
  if (
import sdf
sdf.
function sdDisk(point: d.v2f, radius: number): number
export sdDisk
Signed distance function for a disk (filled circle)
@param ― point Point to evaluate
@param ― radius Radius of the disk
sdDisk(
uv: d.v2f
uv.
vecInfixNotation<v2f>.sub(other: number): d.v2f (+1 overload)
sub(0.5), 0.25) < 0) {
    return 
import d
d.
function vec4f(x: number, y: number, z: number, w: number): d.v4f (+9 overloads)
export vec4f
Schema representing vec4f - a vector with 4 elements of type f32.
Also a constructor function for this vector value.
@example const vector = d.vec4f(); // (0.0, 0.0, 0.0, 0.0)
const vector = d.vec4f(1); // (1.0, 1.0, 1.0, 1.0)
const vector = d.vec4f(1, 2, 3, 4.5); // (1.0, 2.0, 3.0, 4.5)
@example const buffer = root.createBuffer(d.vec4f, d.vec4f(0, 1, 2, 3)); // buffer holding a d.vec4f value, with an initial value of vec4f(0, 1, 2, 3);
vec4f(0, 0, 0, 1);
  }
  return 
import d
d.
function vec4f(xyzw: number): d.v4f (+9 overloads)
export vec4f
Schema representing vec4f - a vector with 4 elements of type f32.
Also a constructor function for this vector value.
@example const vector = d.vec4f(); // (0.0, 0.0, 0.0, 0.0)
const vector = d.vec4f(1); // (1.0, 1.0, 1.0, 1.0)
const vector = d.vec4f(1, 2, 3, 4.5); // (1.0, 2.0, 3.0, 4.5)
@example const buffer = root.createBuffer(d.vec4f, d.vec4f(0, 1, 2, 3)); // buffer holding a d.vec4f value, with an initial value of vec4f(0, 1, 2, 3);
vec4f(1);
});

Implemented functions

Section titled “Implemented functions”

For the list of all implemented functions see this file. All functions are documented using JSDoc.

For any missing SDFs or utilities, feel free to submit an issue at https://github.com/software-mansion/TypeGPU/issues.

Further Reading

Section titled “Further Reading”