kmcom-nuxt-layers 1.0.1

package/layers/shader/app/shaders/common/sdf.ts

@@ -0,0 +1,224 @@
+// @ts-nocheck - TSL types are complex and not fully exported from three/tsl
+/**
+ * Modular TSL SDF (Signed Distance Field) Utilities
+ * Provides 2D/3D SDF shapes and operations for procedural geometry
+ */
+import {
+  abs,
+  add,
+  clamp,
+  length,
+  max,
+  min,
+  mul,
+  select,
+  sign,
+  sqrt,
+  sub,
+  vec2,
+  vec3,
+} from 'three/tsl'
+import type { TSLNode } from '../types'
+
+// ============================================
+// SDF Operations
+// ============================================
+
+/**
+ * Smooth minimum of two SDF values
+ * Creates smooth blending between shapes
+ * @param a - First SDF value
+ * @param b - Second SDF value
+ * @param factor - Smoothing factor (higher = smoother blend)
+ */
+export function smin(a: TSLNode, b: TSLNode, factor: TSLNode | number): TSLNode {
+  const k = typeof factor === 'number' ? float(factor) : factor
+  const h = max(k.sub(abs(a.sub(b))), 0).div(k)
+  return min(a, b).sub(h.mul(h).mul(k).mul(0.25))
+}
+
+/**
+ * Smooth maximum of two SDF values
+ * @param a - First SDF value
+ * @param b - Second SDF value
+ * @param factor - Smoothing factor
+ */
+export function smax(a: TSLNode, b: TSLNode, factor: TSLNode | number = 0): TSLNode {
+  const k = typeof factor === 'number' ? float(factor) : factor
+  return smin(a, b, k.negate())
+}
+
+// ============================================
+// 2D SDF Shapes
+// ============================================
+
+/**
+ * Sphere/Circle SDF
+ * @param uv - UV coordinates (centered)
+ * @param r - Radius
+ */
+export function sdSphere(uv: TSLNode, r: TSLNode | number = 0): TSLNode {
+  const radius = typeof r === 'number' ? float(r) : r
+  return length(uv).sub(radius)
+}
+
+/**
+ * 2D Box SDF
+ * @param uv - UV coordinates (centered)
+ * @param size - Half-size (extent) of the box
+ */
+export function sdBox2d(uv: TSLNode, size: TSLNode | number = 0): TSLNode {
+  const s = typeof size === 'number' ? float(size) : size
+  return max(abs(uv.x), abs(uv.y)).sub(s)
+}
+
+/**
+ * Diamond SDF (rotated square)
+ * @param uv - UV coordinates (centered)
+ * @param r - Radius
+ */
+export function sdDiamond(uv: TSLNode, r: TSLNode | number = 0): TSLNode {
+  const radius = typeof r === 'number' ? float(r) : r
+  return abs(uv.x).add(abs(uv.y)).sub(radius)
+}
+
+/**
+ * Hexagon SDF
+ * @param p - Point coordinates
+ * @param r - Radius
+ */
+export function sdHexagon(p: TSLNode, r: TSLNode | number = 0.5): TSLNode {
+  const radius = typeof r === 'number' ? float(r) : r
+  const k = vec3(-0.866025404, 0.5, 0.577350269)
+
+  const _p = abs(p).toVar()
+  _p.subAssign(float(2.0).mul(min(dot(k.xy, _p), 0.0).mul(k.xy)))
+  _p.subAssign(vec2(clamp(_p.x, k.z.negate().mul(radius), k.z.mul(radius)), radius))
+
+  return length(_p).mul(sign(_p.y))
+}
+
+/**
+ * Equilateral Triangle SDF
+ * @param p - Point coordinates
+ * @param r - Radius (distance from center to vertex)
+ */
+export function sdEquilateralTriangle(p: TSLNode, r: TSLNode | number = 0.1): TSLNode {
+  const radius = typeof r === 'number' ? float(r) : r
+  const k = sqrt(3.0)
+  const _p = (p ?? vec2(0)).toVar()
+
+  _p.x = abs(_p.x).sub(radius).toVar()
+  _p.y = _p.y.add(radius.div(k)).toVar()
+
+  If(_p.x.add(k.mul(_p.y)).greaterThan(0), () => {
+    _p.assign(vec2(_p.x.sub(k.mul(_p.y)), k.negate().mul(_p.x).sub(_p.y)).div(2))
+  })
+
+  _p.x.subAssign(clamp(_p.x, radius.mul(-2), 0.0))
+  return length(_p).negate().mul(sign(_p.y))
+}
+
+/**
+ * Line SDF (axis-aligned)
+ * @param p - Coordinate value
+ */
+export function sdLine(p: TSLNode): TSLNode {
+  return abs(p)
+}
+
+/**
+ * Ring SDF
+ * @param uv - UV coordinates (centered)
+ * @param radius - Ring radius
+ */
+export function sdRing(uv: TSLNode, radius: TSLNode | number = 0.4): TSLNode {
+  const r = typeof radius === 'number' ? float(radius) : radius
+  return abs(length(uv).sub(r))
+}
+
+export interface ParallelogramOptions {
+  width?: TSLNode | number
+  height?: TSLNode | number
+  skew?: TSLNode | number
+}
+
+/**
+ * Parallelogram SDF
+ * @param p - Point coordinates
+ * @param options - Width, height, and skew parameters
+ */
+export function sdParallelogram(p: TSLNode, options: ParallelogramOptions = {}): TSLNode {
+  const { width = 0.4, height = 0.1, skew = 0.1 } = options
+
+  const wi = typeof width === 'number' ? float(width) : width
+  const he = typeof height === 'number' ? float(height) : height
+  const sk = typeof skew === 'number' ? float(skew) : skew
+
+  const _p = p.toVar()
+  const e = vec2(sk, he)
+
+  _p.assign(select(_p.y.lessThan(0.0), _p.negate(), _p))
+
+  const w = _p.sub(e)
+  w.x.subAssign(clamp(w.x, wi.negate(), wi))
+
+  const d = vec2(dot(w, w), w.y.negate()).toVar()
+  const s = _p.x.mul(e.y).sub(_p.y.mul(e.x))
+
+  _p.assign(select(s.lessThan(0.0), _p.negate(), _p))
+
+  const v = _p.sub(vec2(wi, 0)).toVar()
+  v.subAssign(e.mul(clamp(dot(v, e).div(dot(e, e)), -1.0, 1.0)))
+  d.assign(min(d, vec2(dot(v, v), wi.mul(he).sub(abs(s)))))
+
+  return sqrt(d.x).mul(sign(d.y.negate()))
+}
+
+/**
+ * Helper function for rhombus SDF
+ */
+function ndot(a: TSLNode, b: TSLNode): TSLNode {
+  return a.x.mul(b.x).sub(a.y.mul(b.y))
+}
+
+/**
+ * Rhombus SDF
+ * @param p - Point coordinates
+ * @param b - Size as vec2
+ */
+export function sdRhombus(p: TSLNode, b: TSLNode | [number, number] = [0.4, 0.4]): TSLNode {
+  const size = Array.isArray(b) ? vec2(b[0], b[1]) : b
+  const _p = p.toVar()
+  _p.assign(abs(_p))
+
+  const h = clamp(ndot(size.sub(mul(2.0, _p)), size).div(dot(size, size)), -1.0, 1.0)
+  const d = length(_p.sub(mul(0.5, size).mul(vec2(sub(1.0, h), add(1.0, h)))))
+
+  return d.mul(sign(_p.x.mul(size.y).add(_p.y.mul(size.x).sub(size.x.mul(size.y)))))
+}
+
+/**
+ * Simple Triangle SDF
+ * @param p - Point coordinates
+ * @param size - Size factor
+ */
+export function sdTriangle(p: TSLNode, size: TSLNode | number = 0.4): TSLNode {
+  const s = typeof size === 'number' ? float(size) : size
+  return max(abs(p.x.mul(s)).add(p.y), abs(p.y.mul(s).sub(0.5)).sub(0.5))
+}
+
+// ============================================
+// 3D SDF Shapes
+// ============================================
+
+/**
+ * 3D Box SDF
+ * @param p - Point coordinates
+ * @param b - Half-extents as vec3
+ */
+export function sdBox3d(p: TSLNode, b: TSLNode | [number, number, number] = [0, 0, 0]): TSLNode {
+  const size = Array.isArray(b) ? vec3(b[0], b[1], b[2]) : b
+  const q = abs(p).sub(size)
+  return length(max(q, 0.0)).add(min(max(q.x, max(q.y, q.z)), 0.0))
+}

package/layers/shader/app/shaders/common/shapes.ts

@@ -0,0 +1,366 @@
+// @ts-nocheck - TSL types are complex and not fully exported from three/tsl
+/**
+ * Modular TSL Shape Utilities
+ * Provides composable shape functions for shader effects
+ */
+import {
+  abs,
+  atan2,
+  cos,
+  float,
+  floor,
+  fract,
+  length,
+  max,
+  min,
+  mix,
+  sin,
+  smoothstep,
+  vec2,
+} from 'three/tsl'
+import type { TSLNode } from '../types'
+
+// ============================================
+// Basic Shapes
+// ============================================
+
+/**
+ * Soft circular blob
+ */
+export function blob(
+  uv: TSLNode,
+  center: TSLNode | [number, number] = [0.5, 0.5],
+  radius: TSLNode | number = 0.3,
+  softness: TSLNode | number = 0.1
+): TSLNode {
+  const c = Array.isArray(center) ? vec2(center[0], center[1]) : center
+  const r = typeof radius === 'number' ? float(radius) : radius
+  const s = typeof softness === 'number' ? float(softness) : softness
+
+  const d = length(uv.sub(c))
+  return smoothstep(r.add(s), r.sub(s), d)
+}
+
+/**
+ * Hard-edged circle
+ */
+export function circle(
+  uv: TSLNode,
+  center: TSLNode | [number, number] = [0.5, 0.5],
+  radius: TSLNode | number = 0.3
+): TSLNode {
+  const c = Array.isArray(center) ? vec2(center[0], center[1]) : center
+  const r = typeof radius === 'number' ? float(radius) : radius
+
+  const d = length(uv.sub(c))
+  return step(d, r)
+}
+
+/**
+ * Ring shape (donut)
+ */
+export function ring(
+  uv: TSLNode,
+  center: TSLNode | [number, number] = [0.5, 0.5],
+  innerRadius: TSLNode | number = 0.2,
+  outerRadius: TSLNode | number = 0.3,
+  softness: TSLNode | number = 0.02
+): TSLNode {
+  const c = Array.isArray(center) ? vec2(center[0], center[1]) : center
+  const inner = typeof innerRadius === 'number' ? float(innerRadius) : innerRadius
+  const outer = typeof outerRadius === 'number' ? float(outerRadius) : outerRadius
+  const s = typeof softness === 'number' ? float(softness) : softness
+
+  const d = length(uv.sub(c))
+  const outerEdge = smoothstep(outer.add(s), outer.sub(s), d)
+  const innerEdge = smoothstep(inner.sub(s), inner.add(s), d)
+
+  return outerEdge.mul(innerEdge)
+}
+
+/**
+ * Radial gradient (1 at center, 0 at edges)
+ */
+export function radialGradient(
+  uv: TSLNode,
+  center: TSLNode | [number, number] = [0.5, 0.5],
+  scale: TSLNode | number = 1
+): TSLNode {
+  const c = Array.isArray(center) ? vec2(center[0], center[1]) : center
+  const s = typeof scale === 'number' ? float(scale) : scale
+
+  return max(float(0), float(1).sub(length(uv.sub(c)).mul(s)))
+}
+
+/**
+ * Rounded rectangle / box
+ */
+export function roundedRect(
+  uv: TSLNode,
+  center: TSLNode | [number, number] = [0.5, 0.5],
+  size: TSLNode | [number, number] = [0.4, 0.3],
+  cornerRadius: TSLNode | number = 0.05,
+  softness: TSLNode | number = 0.01
+): TSLNode {
+  const c = Array.isArray(center) ? vec2(center[0], center[1]) : center
+  const sz = Array.isArray(size) ? vec2(size[0], size[1]) : size
+  const r = typeof cornerRadius === 'number' ? float(cornerRadius) : cornerRadius
+  const s = typeof softness === 'number' ? float(softness) : softness
+
+  const p = abs(uv.sub(c)).sub(sz.div(2)).add(r)
+  const d = length(max(p, 0))
+    .add(min(max(p.x, p.y), 0))
+    .sub(r)
+
+  return smoothstep(s, s.negate(), d)
+}
+
+/**
+ * Rectangle / box (hard edges)
+ */
+export function rect(
+  uv: TSLNode,
+  center: TSLNode | [number, number] = [0.5, 0.5],
+  size: TSLNode | [number, number] = [0.4, 0.3]
+): TSLNode {
+  const c = Array.isArray(center) ? vec2(center[0], center[1]) : center
+  const sz = Array.isArray(size) ? vec2(size[0], size[1]) : size
+
+  const p = abs(uv.sub(c))
+  const halfSize = sz.div(2)
+
+  return step(p.x, halfSize.x).mul(step(p.y, halfSize.y))
+}
+
+// ============================================
+// Lines & Stripes
+// ============================================
+
+/**
+ * Horizontal line
+ */
+export function horizontalLine(
+  uv: TSLNode,
+  y: TSLNode | number = 0.5,
+  thickness: TSLNode | number = 0.02,
+  softness: TSLNode | number = 0.005
+): TSLNode {
+  const yPos = typeof y === 'number' ? float(y) : y
+  const t = typeof thickness === 'number' ? float(thickness) : thickness
+  const s = typeof softness === 'number' ? float(softness) : softness
+
+  const d = abs(uv.y.sub(yPos))
+  return smoothstep(t.div(2).add(s), t.div(2).sub(s), d)
+}
+
+/**
+ * Vertical line
+ */
+export function verticalLine(
+  uv: TSLNode,
+  x: TSLNode | number = 0.5,
+  thickness: TSLNode | number = 0.02,
+  softness: TSLNode | number = 0.005
+): TSLNode {
+  const xPos = typeof x === 'number' ? float(x) : x
+  const t = typeof thickness === 'number' ? float(thickness) : thickness
+  const s = typeof softness === 'number' ? float(softness) : softness
+
+  const d = abs(uv.x.sub(xPos))
+  return smoothstep(t.div(2).add(s), t.div(2).sub(s), d)
+}
+
+/**
+ * Repeating horizontal stripes
+ */
+export function stripes(
+  uv: TSLNode,
+  frequency: TSLNode | number = 10,
+  thickness: TSLNode | number = 0.5,
+  angle: TSLNode | number = 0
+): TSLNode {
+  const freq = typeof frequency === 'number' ? float(frequency) : frequency
+  const t = typeof thickness === 'number' ? float(thickness) : thickness
+  const a = typeof angle === 'number' ? float(angle) : angle
+
+  // Rotate UV
+  const cosA = cos(a)
+  const sinA = sin(a)
+  const rotatedX = uv.x.mul(cosA).sub(uv.y.mul(sinA))
+
+  const pattern = fract(rotatedX.mul(freq))
+  return step(pattern, t)
+}
+
+/**
+ * Smooth repeating stripes
+ */
+export function smoothStripes(
+  uv: TSLNode,
+  frequency: TSLNode | number = 10,
+  angle: TSLNode | number = 0
+): TSLNode {
+  const freq = typeof frequency === 'number' ? float(frequency) : frequency
+  const a = typeof angle === 'number' ? float(angle) : angle
+
+  const cosA = cos(a)
+  const sinA = sin(a)
+  const rotatedX = uv.x.mul(cosA).sub(uv.y.mul(sinA))
+
+  return sin(rotatedX.mul(freq).mul(Math.PI * 2))
+    .mul(0.5)
+    .add(0.5)
+}
+
+// ============================================
+// Grids & Patterns
+// ============================================
+
+/**
+ * Grid pattern
+ */
+export function grid(
+  uv: TSLNode,
+  cellSize: TSLNode | number = 0.1,
+  lineWidth: TSLNode | number = 0.02
+): TSLNode {
+  const size = typeof cellSize === 'number' ? float(cellSize) : cellSize
+  const width = typeof lineWidth === 'number' ? float(lineWidth) : lineWidth
+
+  const gridUV = fract(uv.div(size))
+  const halfWidth = width.div(size).div(2)
+
+  const xLine = step(gridUV.x, halfWidth).add(step(float(1).sub(halfWidth), gridUV.x))
+  const yLine = step(gridUV.y, halfWidth).add(step(float(1).sub(halfWidth), gridUV.y))
+
+  return max(xLine, yLine)
+}
+
+/**
+ * Dot pattern
+ */
+export function dots(
+  uv: TSLNode,
+  cellSize: TSLNode | number = 0.1,
+  dotRadius: TSLNode | number = 0.03
+): TSLNode {
+  const size = typeof cellSize === 'number' ? float(cellSize) : cellSize
+  const radius = typeof dotRadius === 'number' ? float(dotRadius) : dotRadius
+
+  const gridUV = fract(uv.div(size)).sub(0.5)
+  const d = length(gridUV.mul(size))
+
+  return step(d, radius)
+}
+
+/**
+ * Checker pattern
+ */
+export function checker(uv: TSLNode, scale: TSLNode | number = 10): TSLNode {
+  const s = typeof scale === 'number' ? float(scale) : scale
+  const scaledUV = floor(uv.mul(s))
+  return fract(scaledUV.x.add(scaledUV.y).mul(0.5)).mul(2)
+}
+
+// ============================================
+// Polar / Radial Patterns
+// ============================================
+
+/**
+ * Star shape
+ */
+export function star(
+  uv: TSLNode,
+  center: TSLNode | [number, number] = [0.5, 0.5],
+  points: number = 5,
+  innerRadius: TSLNode | number = 0.1,
+  outerRadius: TSLNode | number = 0.3
+): TSLNode {
+  const c = Array.isArray(center) ? vec2(center[0], center[1]) : center
+  const inner = typeof innerRadius === 'number' ? float(innerRadius) : innerRadius
+  const outer = typeof outerRadius === 'number' ? float(outerRadius) : outerRadius
+
+  const p = uv.sub(c)
+  const angle = atan2(p.y, p.x)
+  const dist = length(p)
+
+  const segmentAngle = float((Math.PI * 2) / points)
+  const halfSegment = segmentAngle.div(2)
+
+  // Fold angle into one segment
+  const foldedAngle = abs(fract(angle.div(segmentAngle).add(0.5)).sub(0.5)).mul(segmentAngle)
+
+  // Interpolate radius based on angle within segment
+  const t = foldedAngle.div(halfSegment)
+  const targetRadius = mix(outer, inner, t)
+
+  return step(dist, targetRadius)
+}
+
+/**
+ * Radial lines (sunburst pattern)
+ */
+export function radialLines(
+  uv: TSLNode,
+  center: TSLNode | [number, number] = [0.5, 0.5],
+  numLines: number = 12,
+  thickness: TSLNode | number = 0.5
+): TSLNode {
+  const c = Array.isArray(center) ? vec2(center[0], center[1]) : center
+  const t = typeof thickness === 'number' ? float(thickness) : thickness
+
+  const p = uv.sub(c)
+  const angle = atan2(p.y, p.x).add(Math.PI)
+  const segment = float((Math.PI * 2) / numLines)
+
+  const foldedAngle = fract(angle.div(segment))
+  return step(foldedAngle, t)
+}
+
+/**
+ * Concentric circles
+ */
+export function concentricCircles(
+  uv: TSLNode,
+  center: TSLNode | [number, number] = [0.5, 0.5],
+  frequency: TSLNode | number = 10,
+  thickness: TSLNode | number = 0.5
+): TSLNode {
+  const c = Array.isArray(center) ? vec2(center[0], center[1]) : center
+  const freq = typeof frequency === 'number' ? float(frequency) : frequency
+  const t = typeof thickness === 'number' ? float(thickness) : thickness
+
+  const d = length(uv.sub(c))
+  return step(fract(d.mul(freq)), t)
+}
+
+// ============================================
+// Polygon
+// ============================================
+
+/**
+ * Regular polygon
+ */
+export function polygon(
+  uv: TSLNode,
+  center: TSLNode | [number, number] = [0.5, 0.5],
+  sides: number = 6,
+  radius: TSLNode | number = 0.3,
+  rotation: TSLNode | number = 0
+): TSLNode {
+  const c = Array.isArray(center) ? vec2(center[0], center[1]) : center
+  const r = typeof radius === 'number' ? float(radius) : radius
+  const rot = typeof rotation === 'number' ? float(rotation) : rotation
+
+  const p = uv.sub(c)
+  const angle = atan2(p.y, p.x).add(rot)
+  const dist = length(p)
+
+  const segmentAngle = float((Math.PI * 2) / sides)
+
+  // Calculate distance to polygon edge
+  const foldedAngle = abs(fract(angle.div(segmentAngle).add(0.5)).sub(0.5)).mul(segmentAngle)
+  const edgeDist = r.mul(cos(segmentAngle.div(2))).div(cos(foldedAngle))
+
+  return step(dist, edgeDist)
+}