sdfTaper

a linear taper effect along an axis.

110 total functionsUpdated: 30/07/2026

sdfTaper

a linear taper effect along an axis.

Parameters

NameTypeDescription
positionvec3<f32>3D position to transform.
amountf32Taper amount (0 = no taper, 1 = full taper).
axisvec3<f32>Taper axis direction.
heightf32Height over which to apply the taper.
offsetf32Offset along the taper axis.

Returns

vec3<f32>position.

WGSL Code

fn sdfTaper(position: vec3<f32>, amount: f32, axis: vec3<f32>, height: f32, offset: f32) -> vec3<f32> {
  let axisNorm = normalize(axis);
  
  // Project position onto the taper axis
  let axisPos = dot(position, axisNorm) - offset;
  
  // Calculate taper factor based on position along axis
  let t = clamp(axisPos / height, 0.0, 1.0);
  let taperFactor = 1.0 - amount * t;
  
  // Apply taper to the perpendicular components
  let axisComponent = axisPos * axisNorm;
  let perpComponent = position - dot(position, axisNorm) * axisNorm;
  
  return axisComponent + perpComponent * taperFactor;
}

About wgsl-fns

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.

Install:npm install wgsl-fns
Import:import { sdfTaper, getFns } from 'wgsl-fns'
Usage:getFns(['sdfTaper'])