sdfTwist

a continuous rotation around an axis proportional to distance along that axis.

110 total functionsUpdated: 30/07/2026

sdfTwist

a continuous rotation around an axis proportional to distance along that axis.

Parameters

NameTypeDescription
positionvec3<f32>3D position to transform.
anglef32Twist angle in radians per unit distance.
axisvec3<f32>Axis to twist around (should be normalized).

Returns

vec3<f32>position.

WGSL Code

fn sdfTwist(position: vec3<f32>, angle: f32, axis: vec3<f32>) -> vec3<f32> {
  // Normalize the axis
  let axisNorm = normalize(axis);
  
  // Project position onto the twist axis
  let proj = dot(position, axisNorm);
  
  // Calculate twist angle based on projection along axis
  let twistAngle = proj * angle;
  
  // Get sin and cos of the twist angle
  let s = sin(twistAngle);
  let c = cos(twistAngle);
  
  // Calculate vector from axis (the part that will be rotated)
  let axisProj = proj * axisNorm;
  let fromAxis = position - axisProj;
  
  // Find a perpendicular vector for the rotation
  let basis1 = normalize(fromAxis);
  let basis2 = cross(axisNorm, basis1);
  
  // Rotate using the basis vectors
  let rotated = axisProj + 
                basis1 * length(fromAxis) * c + 
                basis2 * length(fromAxis) * s;
  
  return rotated;
}

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