kmcom-nuxt-layers 1.0.1

package/layers/shader/app/utils/tsl/color.ts

@@ -0,0 +1,189 @@
+import { abs, clamp, float, Fn, max, min, mix, mod, vec3 } from 'three/tsl'
+import type { GradientStop, TSLNode } from '../../types'
+import { circularDistance } from './math'
+
+/**
+ * Linear gradient with multiple color stops
+ */
+export const gradientLinear = Fn(([t, stops]: [TSLNode, GradientStop[]]) => {
+  if (stops.length === 0) return vec3(0.0)
+  if (stops.length === 1) return stops[0]!.color
+
+  let result: TSLNode = stops[0]!.color
+
+  for (let i = 1; i < stops.length; i++) {
+    const prevStop = stops[i - 1]!
+    const currStop = stops[i]!
+    const localT = clamp(
+      t.sub(prevStop.position).div(currStop.position - prevStop.position),
+      0.0,
+      1.0
+    )
+    result = mix(
+      result,
+      currStop.color,
+      localT.mul(t.greaterThanEqual(prevStop.position).mul(t.lessThan(currStop.position)))
+    )
+  }
+
+  // Handle end
+  const lastStop = stops[stops.length - 1]!
+  result = mix(result, lastStop.color, t.greaterThanEqual(lastStop.position))
+
+  return result
+})
+
+/**
+ * Radial gradient from center
+ */
+export const gradientRadial = Fn(([uv, center, stops]: [TSLNode, TSLNode, GradientStop[]]) => {
+  const dist = circularDistance(uv, center)
+  return gradientLinear(dist, stops)
+})
+
+/**
+ * Blend modes
+ */
+export const blendMultiply = Fn(([base, blend]: [TSLNode, TSLNode]) => {
+  return base.mul(blend)
+})
+
+export const blendScreen = Fn(([base, blend]: [TSLNode, TSLNode]) => {
+  return float(1.0).sub(float(1.0).sub(base).mul(float(1.0).sub(blend)))
+})
+
+export const blendOverlay = Fn(([base, blend]: [TSLNode, TSLNode]) => {
+  const isLight = base.lessThan(0.5)
+  const dark = base.mul(blend).mul(2.0)
+  const light = float(1.0).sub(float(1.0).sub(base).mul(float(1.0).sub(blend)).mul(2.0))
+  return isLight.select(dark, light)
+})
+
+export const blendSoftLight = Fn(([base, blend]: [TSLNode, TSLNode]) => {
+  const isLight = blend.lessThan(0.5)
+  const dark = base.mul(blend.mul(2.0)).add(base.mul(base).mul(float(1.0).sub(blend.mul(2.0))))
+  const light = base
+    .mul(float(1.0).sub(blend.mul(2.0).sub(1.0)))
+    .add(base.sqrt().mul(blend.mul(2.0).sub(1.0)))
+  return isLight.select(dark, light)
+})
+
+export const blendAdd = Fn(([base, blend]: [TSLNode, TSLNode]) => {
+  return min(base.add(blend), 1.0)
+})
+
+export const blendSubtract = Fn(([base, blend]: [TSLNode, TSLNode]) => {
+  return max(base.sub(blend), 0.0)
+})
+
+/**
+ * RGB to HSL conversion
+ */
+export const rgbToHsl = Fn(([rgb]: [TSLNode]) => {
+  const r = rgb.x
+  const g = rgb.y
+  const b = rgb.z
+
+  const maxC = max(max(r, g), b)
+  const minC = min(min(r, g), b)
+  const delta = maxC.sub(minC)
+
+  const l = maxC.add(minC).mul(0.5)
+
+  const s = delta
+    .lessThan(0.00001)
+    .select(
+      float(0.0),
+      l.lessThan(0.5).select(delta.div(maxC.add(minC)), delta.div(float(2.0).sub(maxC).sub(minC)))
+    )
+
+  // Hue calculation
+  const rMax = maxC.equal(r).select(mod(g.sub(b).div(delta), 6.0), float(0.0))
+  const gMax = maxC.equal(g).select(b.sub(r).div(delta).add(2.0), float(0.0))
+  const bMax = maxC.equal(b).select(r.sub(g).div(delta).add(4.0), float(0.0))
+  const h = delta.lessThan(0.00001).select(float(0.0), rMax.add(gMax).add(bMax).div(6.0))
+
+  return vec3(h, s, l)
+})
+
+/**
+ * HSL to RGB conversion
+ */
+export const hslToRgb = Fn(([hsl]: [TSLNode]) => {
+  const h = hsl.x
+  const s = hsl.y
+  const l = hsl.z
+
+  const c = float(1.0)
+    .sub(abs(l.mul(2.0).sub(1.0)))
+    .mul(s)
+  const x = c.mul(float(1.0).sub(abs(mod(h.mul(6.0), 2.0).sub(1.0))))
+  const m = l.sub(c.mul(0.5))
+
+  const h6 = h.mul(6.0)
+
+  const rgb0 = h6.lessThan(1.0).select(vec3(c, x, 0.0), vec3(0.0))
+  const rgb1 = h6
+    .greaterThanEqual(1.0)
+    .mul(h6.lessThan(2.0))
+    .select(vec3(x, c, 0.0), rgb0)
+  const rgb2 = h6
+    .greaterThanEqual(2.0)
+    .mul(h6.lessThan(3.0))
+    .select(vec3(0.0, c, x), rgb1)
+  const rgb3 = h6
+    .greaterThanEqual(3.0)
+    .mul(h6.lessThan(4.0))
+    .select(vec3(0.0, x, c), rgb2)
+  const rgb4 = h6
+    .greaterThanEqual(4.0)
+    .mul(h6.lessThan(5.0))
+    .select(vec3(x, 0.0, c), rgb3)
+  const rgb5 = h6.greaterThanEqual(5.0).select(vec3(c, 0.0, x), rgb4)
+
+  return rgb5.add(m)
+})
+
+/**
+ * Shift hue by an amount (0-1)
+ */
+export const hueShift = Fn(([rgb, shift]: [TSLNode, TSLNode]) => {
+  const hsl = rgbToHsl(rgb)
+  const newH = mod(hsl.x.add(shift), 1.0)
+  return hslToRgb(vec3(newH, hsl.y, hsl.z))
+})
+
+/**
+ * Adjust saturation
+ */
+export const adjustSaturation = Fn(([rgb, amount]: [TSLNode, TSLNode]) => {
+  const hsl = rgbToHsl(rgb)
+  const newS = clamp(hsl.y.mul(amount), 0.0, 1.0)
+  return hslToRgb(vec3(hsl.x, newS, hsl.z))
+})
+
+/**
+ * Adjust contrast
+ */
+export const adjustContrast = Fn(([rgb, contrast]: [TSLNode, TSLNode]) => {
+  return rgb.sub(0.5).mul(contrast).add(0.5)
+})
+
+/**
+ * Adjust brightness
+ */
+export const adjustBrightness = Fn(([rgb, brightness]: [TSLNode, TSLNode]) => {
+  return clamp(rgb.add(brightness), 0.0, 1.0)
+})
+
+/**
+ * Vibrance adjustment (smarter saturation)
+ */
+export const adjustVibrance = Fn(([rgb, vibrance]: [TSLNode, TSLNode]) => {
+  const maxC = max(max(rgb.x, rgb.y), rgb.z)
+  const minC = min(min(rgb.x, rgb.y), rgb.z)
+  const sat = maxC.sub(minC)
+  const satFactor = float(1.0).sub(sat).mul(vibrance)
+  const gray = rgb.x.mul(0.299).add(rgb.y.mul(0.587)).add(rgb.z.mul(0.114))
+  return mix(vec3(gray), rgb, float(1.0).add(satFactor))
+})

package/layers/shader/app/utils/tsl/index.ts

@@ -0,0 +1,84 @@
+// Noise utilities
+export { simplexNoise2D, perlinNoise3D, voronoiNoise, fbm, curlNoise3D } from './noise'
+
+// Math utilities
+export {
+  remap,
+  smootherstep,
+  fresnel,
+  bias,
+  gain,
+  circularDistance,
+  boxDistance,
+  lineDistance,
+  quantize,
+  expFalloff,
+  linearFalloff,
+} from './math'
+
+// Color utilities
+export {
+  gradientLinear,
+  gradientRadial,
+  blendMultiply,
+  blendScreen,
+  blendOverlay,
+  blendSoftLight,
+  blendAdd,
+  blendSubtract,
+  rgbToHsl,
+  hslToRgb,
+  hueShift,
+  adjustSaturation,
+  adjustContrast,
+  adjustBrightness,
+  adjustVibrance,
+} from './color'
+
+// UV utilities
+export {
+  tileUV,
+  rotateUV,
+  distortUV,
+  polarUV,
+  cartesianUV,
+  waveUV,
+  rippleUV,
+  zoomUV,
+  mirrorUV,
+  kaleidoscopeUV,
+  barrelUV,
+  pincushionUV,
+  swirlUV,
+} from './uv'
+
+// Animation utilities
+export {
+  pingPong,
+  oscillate,
+  loopTime,
+  easing,
+  tslStep,
+  pulse,
+  sawtooth,
+  triangle,
+  square,
+} from './animation'
+
+// Pattern utilities
+export {
+  checker,
+  grid,
+  dots,
+  dotsSmooth,
+  stripes,
+  stripesSmooth,
+  hexGrid,
+  bricks,
+  concentricCircles,
+  radialLines,
+  diamonds,
+  triangles,
+  waves,
+  zigzag,
+} from './patterns'

package/layers/shader/app/utils/tsl/math.ts

@@ -0,0 +1,111 @@
+import { clamp, dot, float, Fn, length, mix, normalize, pow, sub, vec2 } from 'three/tsl'
+import type { TSLNode } from '../../types'
+
+/**
+ * Remap a value from one range to another
+ */
+export const remap = Fn(
+  ([value, inMin, inMax, outMin, outMax]: [TSLNode, TSLNode, TSLNode, TSLNode, TSLNode]) => {
+    const t = clamp(value.sub(inMin).div(inMax.sub(inMin)), 0.0, 1.0)
+    return mix(outMin, outMax, t)
+  }
+)
+
+/**
+ * Ken Perlin's improved smoothstep (smootherstep)
+ * 6t^5 - 15t^4 + 10t^3
+ */
+export const smootherstep = Fn(([edge0, edge1, x]: [TSLNode, TSLNode, TSLNode]) => {
+  const t = clamp(x.sub(edge0).div(edge1.sub(edge0)), 0.0, 1.0)
+  return t
+    .mul(t)
+    .mul(t)
+    .mul(t.mul(t.mul(6.0).sub(15.0)).add(10.0))
+})
+
+/**
+ * Fresnel rim lighting effect
+ */
+export const fresnel = Fn(([viewDir, normal, power]: [TSLNode, TSLNode, TSLNode]) => {
+  const nDotV = clamp(dot(normalize(normal), normalize(viewDir)), 0.0, 1.0)
+  return pow(float(1.0).sub(nDotV), power)
+})
+
+/**
+ * Bias function - shifts distribution towards 0 or 1
+ * b < 0.5: shifts towards 0
+ * b > 0.5: shifts towards 1
+ */
+export const bias = Fn(([x, b]: [TSLNode, TSLNode]) => {
+  return x.div(float(1.0).sub(b).div(b).mul(float(1.0).sub(x)).add(1.0))
+})
+
+/**
+ * Gain function - adjusts contrast around 0.5
+ * g < 0.5: reduces contrast
+ * g > 0.5: increases contrast
+ */
+export const gain = Fn(([x, g]: [TSLNode, TSLNode]) => {
+  const a = float(1.0).sub(g).div(g)
+  const isLessThanHalf = x.lessThan(0.5)
+  const lowPart = x
+    .mul(2.0)
+    .div(a.mul(float(1.0).sub(x.mul(2.0))).add(1.0))
+    .mul(0.5)
+  const highPart = float(1.0).sub(
+    float(1.0)
+      .sub(x)
+      .mul(2.0)
+      .div(a.mul(x.mul(2.0).sub(1.0)).add(1.0))
+      .mul(0.5)
+  )
+  return isLessThanHalf.select(lowPart, highPart)
+})
+
+/**
+ * Circular distance from center point
+ */
+export const circularDistance = Fn(([uv, center]: [TSLNode, TSLNode]) => {
+  return length(sub(uv, center))
+})
+
+/**
+ * Box distance (Chebyshev distance)
+ */
+export const boxDistance = Fn(([uv, center, size]: [TSLNode, TSLNode, TSLNode]) => {
+  const d = uv.sub(center).abs().sub(size)
+  const outside = length(vec2(d.x.max(0.0), d.y.max(0.0)))
+  const inside = d.x.max(d.y).min(0.0)
+  return outside.add(inside)
+})
+
+/**
+ * Signed distance to a line segment
+ */
+export const lineDistance = Fn(([uv, a, b]: [TSLNode, TSLNode, TSLNode]) => {
+  const pa = uv.sub(a)
+  const ba = b.sub(a)
+  const t = clamp(dot(pa, ba).div(dot(ba, ba)), 0.0, 1.0)
+  return length(pa.sub(ba.mul(t)))
+})
+
+/**
+ * Quantize a value to discrete steps
+ */
+export const quantize = Fn(([value, steps]: [TSLNode, TSLNode]) => {
+  return value.mul(steps).floor().div(steps)
+})
+
+/**
+ * Exponential falloff
+ */
+export const expFalloff = Fn(([x, falloff]: [TSLNode, TSLNode]) => {
+  return pow(float(2.0), x.mul(falloff).negate())
+})
+
+/**
+ * Linear falloff with soft clamp
+ */
+export const linearFalloff = Fn(([x, start, end]: [TSLNode, TSLNode, TSLNode]) => {
+  return clamp(float(1.0).sub(x.sub(start).div(end.sub(start))), 0.0, 1.0)
+})

package/layers/shader/app/utils/tsl/noise.ts

@@ -0,0 +1,195 @@
+import { abs, dot, float, floor, Fn, fract, max, mix, mod, vec2, vec3, vec4 } from 'three/tsl'
+import type { FBMOptions, TSLNode } from '../../types'
+
+/**
+ * Hash function for noise generation
+ */
+const hash21 = Fn(([p]: [TSLNode]) => {
+  const p3 = fract(p.mul(vec2(443.8975, 397.2973)))
+  const shifted = p3.add(dot(p3, p3.add(19.19)))
+  return fract(shifted.x.mul(shifted.y))
+})
+
+const hash22 = Fn(([p]: [TSLNode]) => {
+  const p3 = fract(p.mul(vec2(443.8975, 397.2973)))
+  const shifted = p3.add(dot(p3, p3.yx.add(19.19)))
+  return fract(vec2(shifted.x.mul(shifted.y), shifted.y.mul(shifted.x)))
+})
+
+const hash31 = Fn(([p]: [TSLNode]) => {
+  const p3 = fract(p.mul(vec3(443.8975, 397.2973, 491.1871)))
+  const shifted = p3.add(dot(p3, p3.yzx.add(19.19)))
+  return fract(shifted.x.mul(shifted.y).mul(shifted.z))
+})
+
+/**
+ * 2D Simplex noise
+ */
+export const simplexNoise2D = Fn(([uv]: [TSLNode]) => {
+  const C = vec4(
+    0.211324865405187, // (3.0-sqrt(3.0))/6.0
+    0.366025403784439, // 0.5*(sqrt(3.0)-1.0)
+    -0.577350269189626, // -1.0 + 2.0 * C.x
+    0.024390243902439 // 1.0 / 41.0
+  )
+
+  // First corner
+  const i = floor(uv.add(dot(uv, C.yy)))
+  const x0 = uv.sub(i).add(dot(i, C.xx))
+
+  // Other corners
+  const i1 = x0.x.greaterThan(x0.y).select(vec2(1.0, 0.0), vec2(0.0, 1.0))
+  const x1 = x0.sub(i1).add(C.xx)
+  const x2 = x0.add(C.zz)
+
+  // Permutations
+  const iMod = mod(i, 289.0)
+  const p = mod(
+    mod(iMod.y.add(vec3(0.0, i1.y, 1.0)), 289.0)
+      .mul(34.0)
+      .add(1.0)
+      .mul(mod(iMod.y.add(vec3(0.0, i1.y, 1.0)), 289.0))
+      .add(iMod.x)
+      .add(vec3(0.0, i1.x, 1.0)),
+    289.0
+  )
+    .mul(34.0)
+    .add(1.0)
+    .mul(
+      mod(
+        mod(iMod.y.add(vec3(0.0, i1.y, 1.0)), 289.0)
+          .mul(34.0)
+          .add(1.0)
+          .mul(mod(iMod.y.add(vec3(0.0, i1.y, 1.0)), 289.0))
+          .add(iMod.x)
+          .add(vec3(0.0, i1.x, 1.0)),
+        289.0
+      )
+    )
+
+  // Gradients
+  const m = max(float(0.5).sub(vec3(dot(x0, x0), dot(x1, x1), dot(x2, x2))), 0.0)
+  const m2 = m.mul(m)
+  const m4 = m2.mul(m2)
+
+  const x = fract(p.mul(C.w)).mul(2.0).sub(1.0)
+  const h = abs(x).sub(0.5)
+  const ox = floor(x.add(0.5))
+  const a0 = x.sub(ox)
+
+  // Normalize gradients
+  const norm = float(1.79284291400159).sub(float(0.85373472095314).mul(a0.mul(a0).add(h.mul(h))))
+
+  const g0 = vec2(a0.x, h.x).mul(norm.x)
+  const g1 = vec2(a0.y, h.y).mul(norm.y)
+  const g2 = vec2(a0.z, h.z).mul(norm.z)
+
+  const px = vec3(dot(g0, x0), dot(g1, x1), dot(g2, x2))
+
+  return float(130.0).mul(dot(m4, px))
+})
+
+/**
+ * 3D Perlin noise
+ */
+export const perlinNoise3D = Fn(([position]: [TSLNode]) => {
+  const Pi = floor(position)
+  const Pf = fract(position)
+
+  // Quintic interpolation
+  const u = Pf.mul(Pf)
+    .mul(Pf)
+    .mul(Pf.mul(Pf.mul(6.0).sub(15.0)).add(10.0))
+
+  // Hash corners
+  const n000 = hash31(Pi)
+  const n001 = hash31(Pi.add(vec3(0, 0, 1)))
+  const n010 = hash31(Pi.add(vec3(0, 1, 0)))
+  const n011 = hash31(Pi.add(vec3(0, 1, 1)))
+  const n100 = hash31(Pi.add(vec3(1, 0, 0)))
+  const n101 = hash31(Pi.add(vec3(1, 0, 1)))
+  const n110 = hash31(Pi.add(vec3(1, 1, 0)))
+  const n111 = hash31(Pi.add(vec3(1, 1, 1)))
+
+  // Trilinear interpolation
+  const x0 = mix(n000, n100, u.x)
+  const x1 = mix(n010, n110, u.x)
+  const x2 = mix(n001, n101, u.x)
+  const x3 = mix(n011, n111, u.x)
+
+  const y0 = mix(x0, x1, u.y)
+  const y1 = mix(x2, x3, u.y)
+
+  return mix(y0, y1, u.z).mul(2.0).sub(1.0)
+})
+
+/**
+ * Voronoi cellular noise
+ */
+export const voronoiNoise = Fn(([uv, scale]: [TSLNode, TSLNode]) => {
+  const scaledUV = uv.mul(scale)
+  const i = floor(scaledUV)
+  const f = fract(scaledUV)
+
+  let minDist: TSLNode = float(8.0)
+  let cellCenter: TSLNode = vec2(0.0)
+
+  // Check 3x3 neighborhood
+  for (let y = -1; y <= 1; y++) {
+    for (let x = -1; x <= 1; x++) {
+      const neighbor = vec2(x, y)
+      const point = hash22(i.add(neighbor))
+      const diff = neighbor.add(point).sub(f)
+      const dist = dot(diff, diff)
+
+      const isCloser = dist.lessThan(minDist)
+      minDist = isCloser.select(dist, minDist)
+      cellCenter = isCloser.select(i.add(neighbor).add(point).div(scale), cellCenter)
+    }
+  }
+
+  return vec4(minDist.sqrt(), cellCenter.x, cellCenter.y, float(0.0))
+})
+
+/**
+ * Fractal Brownian Motion
+ */
+export const fbm = Fn(([position, options]: [TSLNode, FBMOptions]) => {
+  const { octaves = 6, lacunarity = 2.0, gain = 0.5, amplitude = 0.5, frequency = 1.0 } = options
+
+  let value: TSLNode = float(0.0)
+  let amp: TSLNode = float(amplitude)
+  let freq: TSLNode = float(frequency)
+
+  for (let i = 0; i < octaves; i++) {
+    const pos3 = position.toVec3().mul(freq)
+    value = value.add(perlinNoise3D(pos3).mul(amp))
+    freq = freq.mul(lacunarity)
+    amp = amp.mul(gain)
+  }
+
+  return value
+})
+
+/**
+ * 3D Curl noise for fluid motion
+ */
+export const curlNoise3D = Fn(([position]: [TSLNode]) => {
+  const eps = 0.0001
+
+  const dx = vec3(eps, 0, 0)
+  const dy = vec3(0, eps, 0)
+  const dz = vec3(0, 0, eps)
+
+  // Compute derivatives
+  const px = perlinNoise3D(position.add(dx)).sub(perlinNoise3D(position.sub(dx)))
+  const py = perlinNoise3D(position.add(dy)).sub(perlinNoise3D(position.sub(dy)))
+  const pz = perlinNoise3D(position.add(dz)).sub(perlinNoise3D(position.sub(dz)))
+
+  // Curl = nabla x F
+  const curlX = py.sub(pz)
+  const curlY = pz.sub(px)
+  const curlZ = px.sub(py)
+
+  return vec3(curlX, curlY, curlZ).div(eps * 2.0)
+})