backIn
ease-in function that overshoots before settling.
Parameters
| Name | Type | Description |
|---|---|---|
| t | f32 | Input parameter (0-1). |
A collection of WGSL utility functions for WebGPU shader development
Try adjusting your search query or selecting a different category.
Easing functions and animation curves for smooth transitions.
9 functions
ease-in function that overshoots before settling.
| Name | Type | Description |
|---|---|---|
| t | f32 | Input parameter (0-1). |
ease-out function that overshoots before settling.
| Name | Type | Description |
|---|---|---|
| t | f32 | Input parameter (0-1). |
a cubic Bezier curve and returns both value and derivative.
| Name | Type | Description |
|---|---|---|
| t | f32 | Parameter along the curve (0-1). |
| p0 | f32 | First control point. |
| p1 | f32 | Second control point. |
| p2 | f32 | Third control point. |
| p3 | f32 | Fourth control point. |
ease-in function for smooth acceleration.
| Name | Type | Description |
|---|---|---|
| t | f32 | Input parameter (0-1). |
| power | f32 | Easing power (higher = more pronounced curve). |
ease-in-out function for smooth acceleration and deceleration.
| Name | Type | Description |
|---|---|---|
| t | f32 | Input parameter (0-1). |
| power | f32 | Easing power (higher = more pronounced curve). |
ease-out function for smooth deceleration.
| Name | Type | Description |
|---|---|---|
| t | f32 | Input parameter (0-1). |
| power | f32 | Easing power (higher = more pronounced curve). |
ease-in function with oscillating motion.
| Name | Type | Description |
|---|---|---|
| t | f32 | Input parameter (0-1). |
ease-out function with oscillating motion.
| Name | Type | Description |
|---|---|---|
| t | f32 | Input parameter (0-1). |
spring animation with configurable parameters.
| Name | Type | Description |
|---|---|---|
| t | f32 | Time parameter. |
| targetPosition | f32 | Target position for the spring. |
| initialPos | f32 | Initial position. |
| initialVel | f32 | Initial velocity. |
| stiffness | f32 | Spring stiffness coefficient. |
| damping | f32 | Damping coefficient. |
| mass | f32 | Mass of the spring system. |
HSL (Hue, Saturation, Lightness) color to RGB.
| Name | Type | Description |
|---|---|---|
| hsl | vec3<f32> | HSL color values (hue: 0-1, saturation: 0-1, lightness: 0-1). |
function for HSL to RGB conversion - converts hue component to RGB.
| Name | Type | Description |
|---|---|---|
| p | f32 | First HSL conversion parameter. |
| q | f32 | Second HSL conversion parameter. |
| t | f32 | Hue value (adjusted). |
linear RGB color values to sRGB color space.
| Name | Type | Description |
|---|---|---|
| color | vec3<f32> | Linear RGB color values. |
colors using cosine-based palette function for smooth color gradients.
| Name | Type | Description |
|---|---|---|
| t | f32 | Input parameter (typically 0-1) for palette lookup. |
| a | vec3<f32> | Offset values for RGB channels. |
| b | vec3<f32> | Amplitude values for RGB channels. |
| c | vec3<f32> | Frequency values for RGB channels. |
| d | vec3<f32> | Phase values for RGB channels. |
sRGB color values to linear RGB color space.
| Name | Type | Description |
|---|---|---|
| color | vec3<f32> | sRGB color values. |
Mathematical functions and general utilities for shader calculations.
8 functions
an elastic wave with exponential decay and sinusoidal oscillation.
| Name | Type | Description |
|---|---|---|
| x | f32 | Input position along the wave. |
| amplitude | f32 | Wave amplitude multiplier. |
| frequency | f32 | Wave frequency. |
| decay | f32 | Exponential decay factor. |
| phase | f32 | Phase offset for the wave. |
an exponential ramp function with derivative.
| Name | Type | Description |
|---|---|---|
| x | f32 | Input value. |
| base | f32 | Exponential base. |
| scale | f32 | Scale factor. |
| offset | f32 | Vertical offset. |
a logistic (S-curve) function with derivative.
| Name | Type | Description |
|---|---|---|
| x | f32 | Input value. |
| midpoint | f32 | Curve midpoint (inflection point). |
| steepness | f32 | Curve steepness factor. |
| min | f32 | Minimum output value. |
| max | f32 | Maximum output value. |
a 2D vector by a given angle.
| Name | Type | Description |
|---|---|---|
| v | vec2<f32> | Input 2D vector to rotate. |
| angle | f32 | Rotation angle in radians. |
interpolation between two values with smooth acceleration and deceleration.
| Name | Type | Description |
|---|---|---|
| edge0 | f32 | Lower edge of interpolation range. |
| edge1 | f32 | Upper edge of interpolation range. |
| x | f32 | Input value to interpolate. |
interpolation between two vectors with smooth acceleration and deceleration.
| Name | Type | Description |
|---|---|---|
| edge0 | vec2<f32> | Lower edge of interpolation range. |
| edge1 | vec2<f32> | Upper edge of interpolation range. |
| x | vec2<f32> | Input vector to interpolate. |
a stepped sequence with optional smoothing between steps.
| Name | Type | Description |
|---|---|---|
| x | f32 | Input value. |
| steps | f32 | Number of steps in the sequence. |
| smoothing | f32 | Smoothing factor between steps (0-1). |
| minValue | f32 | Minimum output value. |
| maxValue | f32 | Maximum output value. |
series inverse square root approximation for Perlin noise.
| Name | Type | Description |
|---|---|---|
| r | vec4<f32> | Input 4D vector. |
Noise generation and procedural pattern functions for textures and effects.
29 functions
Brownian Motion - combines multiple octaves of noise for complex patterns.
| Name | Type | Description |
|---|---|---|
| p | vec2<f32> | Input 2D coordinate. |
| octaves | i32 | Number of noise octaves to combine. |
Brownian Motion - combines multiple octaves of noise for complex patterns.
| Name | Type | Description |
|---|---|---|
| p | vec3<f32> | Input 3D coordinate. |
| octaves | i32 | Number of noise octaves to combine. |
a 1D hash value from an input value for noise generation.
| Name | Type | Description |
|---|---|---|
| p | f32 | Input value to hash. |
a 2D hash from a 2D input vector for procedural generation.
| Name | Type | Description |
|---|---|---|
| p | vec2<f32> | Input 2D vector to hash. |
a 1D hash value from a 3D input vector.
| Name | Type | Description |
|---|---|---|
| p | vec3<f32> | Input 3D vector to hash. |
a 3D hash vector from a 3D input for displacement effects.
| Name | Type | Description |
|---|---|---|
| p | vec3<f32> | Input 3D vector to hash. |
289 operation for Perlin noise.
| Name | Type | Description |
|---|---|---|
| x | vec4<f32> | Input 4D vector. |
2D Perlin-style noise for procedural textures and patterns.
| Name | Type | Description |
|---|---|---|
| p | vec2<f32> | Input 2D coordinate. |
3D noise using trilinear interpolation.
| Name | Type | Description |
|---|---|---|
| x | vec3<f32> | Input 3D position for noise generation. |
and fast integer hash using PCG algorithm.
| Name | Type | Description |
|---|---|---|
| n | u32 | Input unsigned integer to hash. |
PCG hash function for fast procedural generation.
| Name | Type | Description |
|---|---|---|
| p | vec2<u32> | Input 2D unsigned integer vector to hash. |
PCG hash function for volumetric procedural generation.
| Name | Type | Description |
|---|---|---|
| p | vec3<u32> | Input 3D unsigned integer vector to hash. |
PCG hash function for advanced procedural generation.
| Name | Type | Description |
|---|---|---|
| p | vec4<u32> | Input 4D unsigned integer vector to hash. |
Perlin noise implementation.
| Name | Type | Description |
|---|---|---|
| P | vec2<f32> | Input 2D coordinate. |
Perlin noise implementation.
| Name | Type | Description |
|---|---|---|
| P | vec3<f32> | Input 3D coordinate. |
function for Perlin noise.
| Name | Type | Description |
|---|---|---|
| x | vec4<f32> | Input 4D vector. |
float from 1D input using sine (platform dependent).
| Name | Type | Description |
|---|---|---|
| n | f32 | Input float value. |
float from 2D input using sine (platform dependent).
| Name | Type | Description |
|---|---|---|
| n | vec2<f32> | Input 2D vector. |
simplex noise implementation for efficient 2D procedural generation.
| Name | Type | Description |
|---|---|---|
| v | vec2<f32> | Input 2D coordinate. |
simplex noise implementation for volumetric procedural generation.
| Name | Type | Description |
|---|---|---|
| v | vec3<f32> | Input 3D coordinate. |
simplex noise implementation for high-quality procedural generation.
| Name | Type | Description |
|---|---|---|
| v | vec4<f32> | Input 4D coordinate. |
1D value noise using random interpolation.
| Name | Type | Description |
|---|---|---|
| p | f32 | Input 1D coordinate. |
2D value noise using smooth interpolation.
| Name | Type | Description |
|---|---|---|
| n | vec2<f32> | Input 2D coordinate. |
value noise using permutation tables.
| Name | Type | Description |
|---|---|---|
| p | vec3<f32> | Input 3D coordinate. |
3D warping noise using fractal Brownian motion.
| Name | Type | Description |
|---|---|---|
| x | vec3<f32> | Input 3D position. |
| seedVal | f32 | Random seed for variation. |
integer hash using xxHash algorithm.
| Name | Type | Description |
|---|---|---|
| n | u32 | Input unsigned integer to hash. |
xxHash for strong integer hashing in 2D.
| Name | Type | Description |
|---|---|---|
| p | vec2<u32> | Input 2D unsigned integer vector to hash. |
xxHash for strong integer hashing in 3D.
| Name | Type | Description |
|---|---|---|
| p | vec3<u32> | Input 3D unsigned integer vector to hash. |
xxHash for strong integer hashing in 4D.
| Name | Type | Description |
|---|---|---|
| p | vec4<u32> | Input 4D unsigned integer vector to hash. |
geometry along a specified axis creating a smooth curve.
| Name | Type | Description |
|---|---|---|
| position | vec3<f32> | 3D position to transform. |
| angle | f32 | Bend angle in radians. |
| axis | vec3<f32> | Axis normal to the bending plane. |
| center | vec3<f32> | Center of the bend. |
SDF using noise or other displacement functions.
| Name | Type | Description |
|---|---|---|
| position | vec3<f32> | 3D position to displace. |
| amount | f32 | Displacement amount. |
| frequency | f32 | Displacement frequency. |
| seed | f32 | Random seed for displacement. |
domain repetition with optional warping for complex patterns.
| Name | Type | Description |
|---|---|---|
| position | vec3<f32> | 3D position to transform. |
| cellSize | vec3<f32> | Size of each repetition cell. |
| warpAmount | f32 | Amount of warping to apply. |
| warpScale | f32 | Scale of the warping effect. |
| seed | f32 | Random seed for warping. |
finite repetition with specified count along each axis.
| Name | Type | Description |
|---|---|---|
| position | vec3<f32> | 3D position to transform. |
| spacing | vec3<f32> | Spacing between repetitions. |
| count | vec3<f32> | Number of repetitions along each axis. |
infinite repetition along all axes.
| Name | Type | Description |
|---|---|---|
| position | vec3<f32> | 3D position to transform. |
| spacing | vec3<f32> | Spacing between repetitions. |
a linear taper effect along an axis.
| Name | Type | Description |
|---|---|---|
| position | vec3<f32> | 3D position to transform. |
| amount | f32 | Taper amount (0 = no taper, 1 = full taper). |
| axis | vec3<f32> | Taper axis direction. |
| height | f32 | Height over which to apply the taper. |
| offset | f32 | Offset along the taper axis. |
a continuous rotation around an axis proportional to distance along that axis.
| Name | Type | Description |
|---|---|---|
| position | vec3<f32> | 3D position to transform. |
| angle | f32 | Twist angle in radians per unit distance. |
| axis | vec3<f32> | Axis to twist around (should be normalized). |
Boolean operations for combining and modifying signed distance fields.
9 functions
two SDFs using chamfer operation.
| Name | Type | Description |
|---|---|---|
| distanceA | f32 | First signed distance field. |
| distanceB | f32 | Second signed distance field. |
| radius | f32 | Chamfer radius for the edge. |
one SDF from another using chamfer operation.
| Name | Type | Description |
|---|---|---|
| distanceA | f32 | First signed distance field. |
| distanceB | f32 | Second signed distance field to subtract. |
| radius | f32 | Chamfer radius for the edge. |
two SDFs using chamfer union operation with hard edges.
| Name | Type | Description |
|---|---|---|
| distanceA | f32 | First signed distance field. |
| distanceB | f32 | Second signed distance field. |
| radius | f32 | Chamfer radius for the edge. |
two SDFs (logical AND).
| Name | Type | Description |
|---|---|---|
| distanceA | f32 | First signed distance field. |
| distanceB | f32 | Second signed distance field. |
one SDF from another (A - B).
| Name | Type | Description |
|---|---|---|
| distanceA | f32 | First signed distance field. |
| distanceB | f32 | Second signed distance field to subtract. |
two SDFs using union operation (logical OR).
| Name | Type | Description |
|---|---|---|
| distanceA | f32 | First signed distance field. |
| distanceB | f32 | Second signed distance field. |
two SDFs with smooth blending.
| Name | Type | Description |
|---|---|---|
| distanceA | f32 | First signed distance field. |
| distanceB | f32 | Second signed distance field. |
| smoothing | f32 | Smoothing factor for the blend. |
one SDF from another with smooth blending.
| Name | Type | Description |
|---|---|---|
| distanceA | f32 | First signed distance field. |
| distanceB | f32 | Second signed distance field to subtract. |
| smoothing | f32 | Smoothing factor for the blend. |
two SDFs using smooth union operation with configurable smoothing.
| Name | Type | Description |
|---|---|---|
| distanceA | f32 | First signed distance field. |
| distanceB | f32 | Second signed distance field. |
| smoothing | f32 | Smoothing factor for the blend. |
Basic SDF shapes and primitive geometry functions for ray marching.
26 functions
distance function for a rectangular box.
| Name | Type | Description |
|---|---|---|
| p | vec2<f32> | Point to evaluate distance from. |
| b | vec2<f32> | Box half-dimensions (width/2, height/2). |
a signed distance field for a 3D box frame (hollow box).
| Name | Type | Description |
|---|---|---|
| position | vec3<f32> | 3D position to evaluate. |
| size | vec3<f32> | Half-extents of the box. |
| thickness | f32 | Wall thickness of the frame. |
a signed distance field for a capped torus.
| Name | Type | Description |
|---|---|---|
| position | vec3<f32> | 3D position to evaluate. |
| majorRadius | f32 | Major radius of the torus. |
| minorRadius | f32 | Minor radius of the torus. |
| angle | f32 | Cap angle in radians. |
a signed distance field for a capsule (cylinder with rounded caps).
| Name | Type | Description |
|---|---|---|
| position | vec3<f32> | 3D position to evaluate. |
| radius | f32 | Radius of the capsule. |
| height | f32 | Height of the cylindrical portion. |
distance function for a circle.
| Name | Type | Description |
|---|---|---|
| p | vec2<f32> | Point to evaluate distance from. |
| r | f32 | Circle radius. |
a signed distance field for a cone.
| Name | Type | Description |
|---|---|---|
| position | vec3<f32> | 3D position to evaluate. |
| radius | f32 | Base radius of the cone. |
| height | f32 | Height of the cone. |
a signed distance field for a cylinder.
| Name | Type | Description |
|---|---|---|
| position | vec3<f32> | 3D position to evaluate. |
| radius | f32 | Radius of the cylinder. |
| height | f32 | Height of the cylinder. |
a signed distance field for an ellipsoid.
| Name | Type | Description |
|---|---|---|
| position | vec3<f32> | 3D position to evaluate. |
| radius | vec3<f32> | Radii along each axis. |
a signed distance field for a gyroid surface.
| Name | Type | Description |
|---|---|---|
| position | vec3<f32> | 3D position to evaluate. |
| scale | f32 | Scale factor for the gyroid pattern. |
| thickness | f32 | Thickness of the gyroid surface. |
a signed distance field for a hexagonal prism.
| Name | Type | Description |
|---|---|---|
| position | vec3<f32> | 3D position to evaluate. |
| radius | f32 | Radius of the hexagon. |
| height | f32 | Height of the prism. |
a signed distance field for an icosahedron.
| Name | Type | Description |
|---|---|---|
| position | vec3<f32> | 3D position to evaluate. |
| size | f32 | Size of the icosahedron. |
two SDFs using intersection operation (overlapping area only).
| Name | Type | Description |
|---|---|---|
| d1 | f32 | Distance from first shape. |
| d2 | f32 | Distance from second shape. |
a signed distance field for a 4D Julia set fractal.
| Name | Type | Description |
|---|---|---|
| position | vec3<f32> | 3D position to evaluate. |
| c | vec4<f32> | Julia set parameter (quaternion). |
| iterations | f32 | Maximum number of iterations. |
| bailout | f32 | Bailout radius for iteration escape. |
a signed distance field for an octahedron.
| Name | Type | Description |
|---|---|---|
| position | vec3<f32> | 3D position to evaluate. |
| size | f32 | Size of the octahedron. |
a signed distance field for an infinite plane.
| Name | Type | Description |
|---|---|---|
| position | vec3<f32> | 3D position to evaluate. |
| normal | vec3<f32> | Normal vector of the plane (should be normalized). |
a signed distance field for a pyramid.
| Name | Type | Description |
|---|---|---|
| position | vec3<f32> | 3D position to evaluate. |
| size | f32 | Base size of the pyramid. |
| height | f32 | Height of the pyramid. |
a signed distance field for a rhombus.
| Name | Type | Description |
|---|---|---|
| position | vec3<f32> | 3D position to evaluate. |
| dimensions | vec3<f32> | Dimensions of the rhombus. |
| sharpness | f32 | Sharpness factor for the edges. |
a signed distance field for a rounded box.
| Name | Type | Description |
|---|---|---|
| position | vec3<f32> | 3D position to evaluate. |
| size | vec3<f32> | Half-extents of the box. |
| radius | f32 | Rounding radius for the edges. |
a signed distance field for a rounded cone.
| Name | Type | Description |
|---|---|---|
| position | vec3<f32> | 3D position to evaluate. |
| radius1 | f32 | Bottom radius of the cone. |
| radius2 | f32 | Top radius of the cone. |
| height | f32 | Height of the cone. |
| roundness | f32 | Rounding factor for the edges. |
a signed distance field for a rounded cylinder.
| Name | Type | Description |
|---|---|---|
| position | vec3<f32> | 3D position to evaluate. |
| radius | f32 | Radius of the cylinder. |
| height | f32 | Height of the cylinder. |
| roundness | f32 | Rounding factor for the edges. |
a signed distance field for a sphere.
| Name | Type | Description |
|---|---|---|
| position | vec3<f32> | 3D position to evaluate. |
| radius | f32 | Radius of the sphere. |
two SDFs using subtraction operation (first shape minus second).
| Name | Type | Description |
|---|---|---|
| d1 | f32 | Distance from shape to subtract from. |
| d2 | f32 | Distance from shape to subtract. |
a signed distance field for a tetrahedron.
| Name | Type | Description |
|---|---|---|
| position | vec3<f32> | 3D position to evaluate. |
| size | f32 | Size of the tetrahedron. |
a signed distance field for a torus.
| Name | Type | Description |
|---|---|---|
| position | vec3<f32> | 3D position to evaluate. |
| majorRadius | f32 | Major radius of the torus. |
| minorRadius | f32 | Minor radius of the torus. |
a signed distance field for a triangular prism.
| Name | Type | Description |
|---|---|---|
| position | vec3<f32> | 3D position to evaluate. |
| radius | f32 | Radius of the triangular base. |
| height | f32 | Height of the prism. |
two SDFs using union operation (closest surface).
| Name | Type | Description |
|---|---|---|
| d1 | f32 | Distance from first shape. |
| d2 | f32 | Distance from second shape. |
Spatial transformation functions for positioning and orienting SDFs.
7 functions
cylindrical coordinate repetition.
| Name | Type | Description |
|---|---|---|
| position | vec3<f32> | 3D position to transform. |
| angleRepeat | f32 | Angular repetition count. |
| heightRepeat | f32 | Height repetition interval. |
| axis | vec3<f32> | Cylindrical axis (should be normalized). |
an SDF across a plane defined by a normal vector.
| Name | Type | Description |
|---|---|---|
| position | vec3<f32> | 3D position to transform. |
| normal | vec3<f32> | Normal vector of the mirror plane. |
| offset | f32 | Distance offset of the mirror plane. |
polar repetition around an axis.
| Name | Type | Description |
|---|---|---|
| position | vec3<f32> | 3D position to transform. |
| count | f32 | Number of repetitions around the circle. |
| axis | vec3<f32> | Axis to repeat around (should be normalized). |
an SDF around a pivot point with Euler angles.
| Name | Type | Description |
|---|---|---|
| position | vec3<f32> | 3D position to transform. |
| angles | vec3<f32> | Rotation angles in radians (x, y, z). |
| pivot | vec3<f32> | Point to rotate around. |
an SDF uniformly or non-uniformly.
| Name | Type | Description |
|---|---|---|
| position | vec3<f32> | 3D position to transform. |
| scale | vec3<f32> | Scale factors for each axis. |
spherical coordinate repetition.
| Name | Type | Description |
|---|---|---|
| position | vec3<f32> | 3D position to transform. |
| phiRepeat | f32 | Azimuthal angle repetition count. |
| thetaRepeat | f32 | Polar angle repetition count. |
an SDF by moving its position.
| Name | Type | Description |
|---|---|---|
| position | vec3<f32> | 3D position to transform. |
| offset | vec3<f32> | Translation offset. |
a signed distance field to a smooth solid with anti-aliasing.
| Name | Type | Description |
|---|---|---|
| signedDistance | f32 | Signed distance field value. |
| threshold | f32 | Threshold for solid determination. |
| smoothing | f32 | Smoothing factor for anti-aliasing. |
a signed distance field to a smooth stroke with anti-aliasing.
| Name | Type | Description |
|---|---|---|
| signedDistance | f32 | Signed distance field value. |
| thickness | f32 | Stroke thickness. |
| center | f32 | Center distance for the stroke. |
| smoothing | f32 | Smoothing factor for anti-aliasing. |
a signed distance field to a solid boolean value.
| Name | Type | Description |
|---|---|---|
| signedDistance | f32 | Signed distance field value. |
| threshold | f32 | Threshold for solid determination. |
a signed distance field to a stroke/outline.
| Name | Type | Description |
|---|---|---|
| signedDistance | f32 | Signed distance field value. |
| thickness | f32 | Stroke thickness. |
| center | f32 | Center distance for the stroke. |
Wave generation functions for oscillations and periodic patterns.
6 functions
a chirp wave with linearly changing frequency.
| Name | Type | Description |
|---|---|---|
| x | f32 | Input position. |
| startFrequency | f32 | Starting frequency. |
| endFrequency | f32 | Ending frequency. |
| amplitude | f32 | Wave amplitude. |
| period | f32 | Period over which frequency changes. |
a wave using interpolated noise for organic variation.
| Name | Type | Description |
|---|---|---|
| x | f32 | Input position. |
| frequency | f32 | Wave frequency. |
| amplitude | f32 | Wave amplitude. |
| seed | f32 | Random seed for noise generation. |
a pulse wave with smooth falloff edges.
| Name | Type | Description |
|---|---|---|
| x | f32 | Input position. |
| frequency | f32 | Wave frequency. |
| amplitude | f32 | Wave amplitude. |
| phase | f32 | Phase offset. |
| width | f32 | Pulse width (0-1). |
| falloff | f32 | Smooth falloff duration. |
a sawtooth wave with linear ramp.
| Name | Type | Description |
|---|---|---|
| x | f32 | Input position. |
| frequency | f32 | Wave frequency. |
| amplitude | f32 | Wave amplitude. |
| phase | f32 | Phase offset. |
a square wave with configurable duty cycle.
| Name | Type | Description |
|---|---|---|
| x | f32 | Input position. |
| frequency | f32 | Wave frequency. |
| amplitude | f32 | Wave amplitude. |
| phase | f32 | Phase offset. |
| dutyCycle | f32 | Duty cycle (0-1) for wave on/off ratio. |
a triangle wave with configurable frequency and amplitude.
| Name | Type | Description |
|---|---|---|
| x | f32 | Input position. |
| frequency | f32 | Wave frequency. |
| amplitude | f32 | Wave amplitude. |
| phase | f32 | Phase offset. |
A JavaScript library providing WGSL utility functions as strings for WebGPU shader development. Includes mathematical utilities, noise generation, signed distance fields, and color manipulation functions.
npm install wgsl-fnsimport { elasticWave, getFns } from 'wgsl-fns'getFns(['elasticWave', 'smoothStep'])