sdfBend

geometry along a specified axis creating a smooth curve.

110 total functionsUpdated: 30/07/2026

sdfBend

geometry along a specified axis creating a smooth curve.

Parameters

NameTypeDescription
positionvec3<f32>3D position to transform.
anglef32Bend angle in radians.
axisvec3<f32>Axis normal to the bending plane.
centervec3<f32>Center of the bend.

Returns

vec3<f32>position.

WGSL Code

fn sdfBend(position: vec3<f32>, angle: f32, axis: vec3<f32>, center: vec3<f32>) -> vec3<f32> {
  // Normalize the bend axis
  let axisNorm = normalize(axis);
  
  // Translate position relative to bend center
  let localPos = position - center;
  
  // Find perpendicular vectors to the bend axis to define the bend plane
  var perpVec1: vec3<f32>;
  if (abs(axisNorm.y) < 0.999) {
    perpVec1 = normalize(cross(vec3<f32>(0.0, 1.0, 0.0), axisNorm));
  } else {
    perpVec1 = normalize(cross(vec3<f32>(1.0, 0.0, 0.0), axisNorm));
  }
  let perpVec2 = normalize(cross(axisNorm, perpVec1));
  
  // Project the position onto the perpendicular vectors
  let proj1 = dot(localPos, perpVec1);
  let proj2 = dot(localPos, perpVec2);
  let axisProj = dot(localPos, axisNorm);
  
  // Calculate radius for the bend
  let radius = proj1;
  
  // Calculate the angle based on the distance along the bend direction
  let bendAngle = proj2 * angle;
  
  // Calculate the bent position using polar coordinates
  let c = cos(bendAngle);
  let s = sin(bendAngle);
  
  // Apply the transformation
  let bentPos = center + 
                axisNorm * axisProj +
                perpVec1 * (c * radius) +
                perpVec2 * (s * radius);
  
  return bentPos;
}

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 { sdfBend, getFns } from 'wgsl-fns'
Usage:getFns(['sdfBend'])