sdfRotate

an SDF around a pivot point with Euler angles.

110 total functionsUpdated: 30/07/2026

sdfRotate

an SDF around a pivot point with Euler angles.

Parameters

NameTypeDescription
positionvec3<f32>3D position to transform.
anglesvec3<f32>Rotation angles in radians (x, y, z).
pivotvec3<f32>Point to rotate around.

Returns

vec3<f32>position.

WGSL Code

fn sdfRotate(position: vec3<f32>, angles: vec3<f32>, pivot: vec3<f32>) -> vec3<f32> {
  // First translate to origin relative to pivot point
  let centered = position - pivot;
  
  // Create rotation matrices (inverse rotation = negative angles)
  let cx = cos(-angles.x);
  let sx = sin(-angles.x);
  let cy = cos(-angles.y);
  let sy = sin(-angles.y);
  let cz = cos(-angles.z);
  let sz = sin(-angles.z);
  
  // Rotate around X axis
  let rx = vec3<f32>(
    centered.x,
    centered.y * cx - centered.z * sx,
    centered.y * sx + centered.z * cx
  );
  
  // Rotate around Y axis
  let ry = vec3<f32>(
    rx.x * cy + rx.z * sy,
    rx.y,
    -rx.x * sy + rx.z * cy
  );
  
  // Rotate around Z axis
  let rz = vec3<f32>(
    ry.x * cz - ry.y * sz,
    ry.x * sz + ry.y * cz,
    ry.z
  );
  
  // Translate back from pivot point
  return rz + pivot;
}

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