@basementstudio/shader-lab 0.1.0

package/packages/shader-lab-react/src/renderer/shaders/tsl/color/tonemapping.ts

@@ -0,0 +1,87 @@
+// @ts-nocheck
+import { Fn, dot, exp, mix, pow, smoothstep, vec3 } from "three/tsl"
+
+export const reinhardTonemap = Fn(([color]) => {
+  return color.div(color.add(1.0))
+})
+
+export const totosTonemap = Fn(([color]) => {
+  const compressed = color
+    .mul(vec3(1.18, 1.04, 0.94))
+    .div(color.mul(vec3(0.82, 0.9, 0.98)).add(vec3(0.78, 0.68, 0.6)))
+  const lum = dot(compressed, vec3(0.2126, 0.7152, 0.0722))
+  const shadowLift = smoothstep(0.0, 0.38, lum)
+  const highlightRoll = smoothstep(0.42, 1.0, lum)
+  const toneMix = smoothstep(0.16, 0.82, lum)
+  const cool = vec3(
+    compressed.x.mul(0.82),
+    compressed.y.mul(0.98).add(shadowLift.mul(0.04)),
+    compressed.z.mul(1.24).add(shadowLift.mul(0.08)),
+  )
+  const warm = vec3(
+    compressed.x.mul(1.14).add(highlightRoll.mul(0.08)),
+    compressed.y.mul(1.03).add(highlightRoll.mul(0.03)),
+    compressed.z.mul(0.84),
+  )
+  const splitToned = mix(cool, warm, toneMix)
+  const curved = vec3(
+    pow(splitToned.x, 0.86),
+    pow(splitToned.y, 0.95),
+    pow(splitToned.z, 1.12),
+  )
+  const bleach = mix(curved, vec3(lum), highlightRoll.mul(0.06))
+
+  return bleach.clamp(0.0, 1.0)
+})
+
+export const acesTonemap = Fn(([color]) => {
+  const a = 2.51
+  const b = 0.03
+  const c = 2.43
+  const d = 0.59
+  const e = 0.14
+
+  return color
+    .mul(color.mul(a).add(b))
+    .div(color.mul(color.mul(c).add(d)).add(e))
+    .clamp(0.0, 1.0)
+})
+
+export const crossProcessTonemap = Fn(([color]) => {
+  const r = pow(color.x, 0.8)
+  const g = pow(color.y, 1.2)
+  const b = pow(color.z, 1.5)
+
+  return vec3(r, g, b).clamp(0.0, 1.0)
+})
+
+export const bleachBypassTonemap = Fn(([color]) => {
+  const lum = dot(color, vec3(0.2126, 0.7152, 0.0722))
+  const mixAmount = 0.7
+
+  return mix(vec3(lum), color, mixAmount).mul(1.2).clamp(0.0, 1.0)
+})
+
+export const technicolorTonemap = Fn(([color]) => {
+  const r = color.x.mul(1.5)
+  const g = color.y.mul(1.2)
+  const b = color.z.mul(0.8).add(color.x.mul(0.2))
+
+  return vec3(r, g, b).clamp(0.0, 1.0)
+})
+
+export const cinematicTonemap = Fn(([color]) => {
+  const r = smoothstep(0.05, 0.95, color.x.mul(0.95).add(0.02))
+  const g = smoothstep(0.05, 0.95, color.y.mul(1.05))
+  const b = smoothstep(0.05, 0.95, color.z.mul(1.1))
+
+  return vec3(r, g, b).clamp(0.0, 1.0)
+})
+
+export const tanh = Fn(([x]) => {
+  const e2x = exp(x.mul(2.0))
+
+  return e2x.sub(1.0).div(e2x.add(1.0))
+})
+
+export const uncharted2Tonemap = totosTonemap

package/packages/shader-lab-react/src/renderer/shaders/tsl/cosine-palette.ts

@@ -0,0 +1,9 @@
+// @ts-nocheck
+import { Fn, cos, float } from "three/tsl"
+
+/**
+ * Generates a palette of colors using a cosine-based function.
+ */
+export const cosinePalette = Fn(([t, a, b, c, d, e = float(6.28318)]) => {
+  return a.add(b.mul(cos(e.mul(c.mul(t).add(d)))))
+})

package/packages/shader-lab-react/src/renderer/shaders/tsl/noise/common.ts

@@ -0,0 +1,31 @@
+// @ts-nocheck
+import { Fn, abs, add, dot, floor, fract, mod, mul, step, sub, vec3, vec4 } from "three/tsl"
+
+export const permute = Fn(([x]) => {
+  return mod(mul(add(mul(x, 34.0), 10.0), x), 289.0)
+})
+
+export const taylorInvSqrt = Fn(([r]) => {
+  return sub(1.79284291400159, mul(0.85373472095314, r))
+})
+
+export const mod289 = Fn(([x]) => {
+  return mod(mul(add(mul(x, 34.0), 10.0), x), 289.0)
+})
+
+export const fade = Fn(([t]) => {
+  return t.mul(t).mul(t).mul(t.mul(t).mul(6.0).sub(t.mul(15.0)).add(10.0))
+})
+
+export const grad4 = Fn(([j, ip]) => {
+  const ones = vec4(1.0, 1.0, 1.0, -1.0)
+  const p = vec4().toVar()
+  const s = vec4().toVar()
+
+  p.xyz.assign(floor(fract(vec3(j).mul(ip.xyz)).mul(7.0)).mul(ip.z).sub(1.0))
+  p.w.assign(sub(1.5, dot(abs(p.xyz), ones.xyz)))
+  s.assign(step(p, vec4(0.0)))
+  p.xyz.assign(p.xyz.add(s.xyz.mul(2.0).sub(1.0).mul(s.www)))
+
+  return p
+})

package/packages/shader-lab-react/src/renderer/shaders/tsl/noise/curl-noise-3d.ts

@@ -0,0 +1,36 @@
+// @ts-nocheck
+import { EPSILON, Fn, cross, vec3 } from "three/tsl"
+import { simplexNoise3d } from "./simplex-noise-3d"
+
+export const curlNoise3d = Fn(([inputA]) => {
+  const aXPos = simplexNoise3d(inputA.add(vec3(EPSILON, 0, 0)))
+  const aXNeg = simplexNoise3d(inputA.sub(vec3(EPSILON, 0, 0)))
+  const aXAverage = aXPos.sub(aXNeg).div(EPSILON.mul(2))
+
+  const aYPos = simplexNoise3d(inputA.add(vec3(0, EPSILON, 0)))
+  const aYNeg = simplexNoise3d(inputA.sub(vec3(0, EPSILON, 0)))
+  const aYAverage = aYPos.sub(aYNeg).div(EPSILON.mul(2))
+
+  const aZPos = simplexNoise3d(inputA.add(vec3(0, 0, EPSILON)))
+  const aZNeg = simplexNoise3d(inputA.sub(vec3(0, 0, EPSILON)))
+  const aZAverage = aZPos.sub(aZNeg).div(EPSILON.mul(2))
+
+  const aGrabNoise = vec3(aXAverage, aYAverage, aZAverage).normalize()
+  const inputB = inputA.add(3.5)
+
+  const bXPos = simplexNoise3d(inputB.add(vec3(EPSILON, 0, 0)))
+  const bXNeg = simplexNoise3d(inputB.sub(vec3(EPSILON, 0, 0)))
+  const bXAverage = bXPos.sub(bXNeg).div(EPSILON.mul(2))
+
+  const bYPos = simplexNoise3d(inputB.add(vec3(0, EPSILON, 0)))
+  const bYNeg = simplexNoise3d(inputB.sub(vec3(0, EPSILON, 0)))
+  const bYAverage = bYPos.sub(bYNeg).div(EPSILON.mul(2))
+
+  const bZPos = simplexNoise3d(inputB.add(vec3(0, 0, EPSILON)))
+  const bZNeg = simplexNoise3d(inputB.sub(vec3(0, 0, EPSILON)))
+  const bZAverage = bZPos.sub(bZNeg).div(EPSILON.mul(2))
+
+  const bGrabNoise = vec3(bXAverage, bYAverage, bZAverage).normalize()
+
+  return cross(aGrabNoise, bGrabNoise).normalize()
+})

package/packages/shader-lab-react/src/renderer/shaders/tsl/noise/curl-noise-4d.ts

@@ -0,0 +1,36 @@
+// @ts-nocheck
+import { EPSILON, Fn, cross, vec3, vec4 } from "three/tsl"
+import { simplexNoise4d } from "./simplex-noise-4d"
+
+export const curlNoise4d = Fn(([inputA]) => {
+  const aXPos = simplexNoise4d(inputA.add(vec4(EPSILON, 0, 0, 0)))
+  const aXNeg = simplexNoise4d(inputA.sub(vec4(EPSILON, 0, 0, 0)))
+  const aXAverage = aXPos.sub(aXNeg).div(EPSILON.mul(2))
+
+  const aYPos = simplexNoise4d(inputA.add(vec4(0, EPSILON, 0, 0)))
+  const aYNeg = simplexNoise4d(inputA.sub(vec4(0, EPSILON, 0, 0)))
+  const aYAverage = aYPos.sub(aYNeg).div(EPSILON.mul(2))
+
+  const aZPos = simplexNoise4d(inputA.add(vec4(0, 0, EPSILON, 0)))
+  const aZNeg = simplexNoise4d(inputA.sub(vec4(0, 0, EPSILON, 0)))
+  const aZAverage = aZPos.sub(aZNeg).div(EPSILON.mul(2))
+
+  const aGrabNoise = vec3(aXAverage, aYAverage, aZAverage).normalize()
+  const inputB = inputA.add(3.5)
+
+  const bXPos = simplexNoise4d(inputB.add(vec4(EPSILON, 0, 0, 0)))
+  const bXNeg = simplexNoise4d(inputB.sub(vec4(EPSILON, 0, 0, 0)))
+  const bXAverage = bXPos.sub(bXNeg).div(EPSILON.mul(2))
+
+  const bYPos = simplexNoise4d(inputB.add(vec4(0, EPSILON, 0, 0)))
+  const bYNeg = simplexNoise4d(inputB.sub(vec4(0, EPSILON, 0, 0)))
+  const bYAverage = bYPos.sub(bYNeg).div(EPSILON.mul(2))
+
+  const bZPos = simplexNoise4d(inputB.add(vec4(0, 0, EPSILON, 0)))
+  const bZNeg = simplexNoise4d(inputB.sub(vec4(0, 0, EPSILON, 0)))
+  const bZAverage = bZPos.sub(bZNeg).div(EPSILON.mul(2))
+
+  const bGrabNoise = vec3(bXAverage, bYAverage, bZAverage).normalize()
+
+  return cross(aGrabNoise, bGrabNoise).normalize()
+})

package/packages/shader-lab-react/src/renderer/shaders/tsl/noise/fbm.ts

@@ -0,0 +1,13 @@
+// @ts-nocheck
+import { Fn, vec3 } from "three/tsl"
+import { simplexNoise3d } from "./simplex-noise-3d"
+
+export const fbm = Fn(([pImmutable]) => {
+  const p = vec3(pImmutable).toVar()
+  const n1 = simplexNoise3d(p).mul(0.5).add(0.5)
+  const n2 = simplexNoise3d(p.mul(2.02).add(vec3(19.1, 7.3, 13.7)))
+    .mul(0.5)
+    .add(0.5)
+
+  return n1.mul(0.7).add(n2.mul(0.3))
+})

package/packages/shader-lab-react/src/renderer/shaders/tsl/noise/perlin-noise-3d.ts

@@ -0,0 +1,96 @@
+// @ts-nocheck
+import {
+  Fn,
+  abs,
+  dot,
+  floor,
+  fract,
+  mix,
+  mod,
+  mul,
+  step,
+  sub,
+  vec2,
+  vec3,
+  vec4,
+} from "three/tsl"
+import { fade, permute, taylorInvSqrt } from "./common"
+
+/**
+ * Classic Perlin noise (3D) — Ashima Arts / Stefan Gustavson port.
+ * Uses permute + taylorInvSqrt (same as simplex noise) for gradient generation.
+ */
+export const perlinNoise3d = Fn(([pImmutable]) => {
+  const P = vec3(pImmutable).toVar()
+
+  const Pi0 = vec3(mod(floor(P), 289.0)).toVar()
+  const Pi1 = vec3(mod(Pi0.add(1.0), 289.0)).toVar()
+  const Pf0 = vec3(fract(P)).toVar()
+  const Pf1 = vec3(Pf0.sub(1.0)).toVar()
+
+  const ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x)
+  const iy = vec4(Pi0.y, Pi0.y, Pi1.y, Pi1.y)
+  const iz0 = vec4(Pi0.z, Pi0.z, Pi0.z, Pi0.z)
+  const iz1 = vec4(Pi1.z, Pi1.z, Pi1.z, Pi1.z)
+
+  const ixy = vec4(permute(permute(ix).add(iy))).toVar()
+  const ixy0 = vec4(permute(ixy.add(iz0))).toVar()
+  const ixy1 = vec4(permute(ixy.add(iz1))).toVar()
+
+  const gx0 = vec4(ixy0.div(7.0)).toVar()
+  const gy0 = vec4(fract(floor(gx0).div(7.0)).sub(0.5)).toVar()
+  gx0.assign(fract(gx0))
+  const gz0 = vec4(sub(0.5, abs(gx0)).sub(abs(gy0))).toVar()
+  const sz0 = vec4(step(gz0, vec4(0.0))).toVar()
+  gx0.assign(gx0.sub(sz0.mul(step(0.0, gx0).sub(0.5))))
+  gy0.assign(gy0.sub(sz0.mul(step(0.0, gy0).sub(0.5))))
+
+  const gx1 = vec4(ixy1.div(7.0)).toVar()
+  const gy1 = vec4(fract(floor(gx1).div(7.0)).sub(0.5)).toVar()
+  gx1.assign(fract(gx1))
+  const gz1 = vec4(sub(0.5, abs(gx1)).sub(abs(gy1))).toVar()
+  const sz1 = vec4(step(gz1, vec4(0.0))).toVar()
+  gx1.assign(gx1.sub(sz1.mul(step(0.0, gx1).sub(0.5))))
+  gy1.assign(gy1.sub(sz1.mul(step(0.0, gy1).sub(0.5))))
+
+  const g000 = vec3(gx0.x, gy0.x, gz0.x).toVar()
+  const g100 = vec3(gx0.y, gy0.y, gz0.y).toVar()
+  const g010 = vec3(gx0.z, gy0.z, gz0.z).toVar()
+  const g110 = vec3(gx0.w, gy0.w, gz0.w).toVar()
+  const g001 = vec3(gx1.x, gy1.x, gz1.x).toVar()
+  const g101 = vec3(gx1.y, gy1.y, gz1.y).toVar()
+  const g011 = vec3(gx1.z, gy1.z, gz1.z).toVar()
+  const g111 = vec3(gx1.w, gy1.w, gz1.w).toVar()
+
+  const norm0 = vec4(
+    taylorInvSqrt(vec4(dot(g000, g000), dot(g010, g010), dot(g100, g100), dot(g110, g110))),
+  ).toVar()
+  g000.mulAssign(norm0.x)
+  g010.mulAssign(norm0.y)
+  g100.mulAssign(norm0.z)
+  g110.mulAssign(norm0.w)
+
+  const norm1 = vec4(
+    taylorInvSqrt(vec4(dot(g001, g001), dot(g011, g011), dot(g101, g101), dot(g111, g111))),
+  ).toVar()
+  g001.mulAssign(norm1.x)
+  g011.mulAssign(norm1.y)
+  g101.mulAssign(norm1.z)
+  g111.mulAssign(norm1.w)
+
+  const n000 = dot(g000, Pf0)
+  const n100 = dot(g100, vec3(Pf1.x, Pf0.y, Pf0.z))
+  const n010 = dot(g010, vec3(Pf0.x, Pf1.y, Pf0.z))
+  const n110 = dot(g110, vec3(Pf1.x, Pf1.y, Pf0.z))
+  const n001 = dot(g001, vec3(Pf0.x, Pf0.y, Pf1.z))
+  const n101 = dot(g101, vec3(Pf1.x, Pf0.y, Pf1.z))
+  const n011 = dot(g011, vec3(Pf0.x, Pf1.y, Pf1.z))
+  const n111 = dot(g111, Pf1)
+
+  const fadeXyz = vec3(fade(Pf0)).toVar()
+  const nZ = vec4(mix(vec4(n000, n100, n010, n110), vec4(n001, n101, n011, n111), fadeXyz.z))
+  const nYz = vec2(mix(nZ.xy, nZ.zw, fadeXyz.y))
+  const nXyz = mix(nYz.x, nYz.y, fadeXyz.x)
+
+  return mul(2.2, nXyz)
+})

package/packages/shader-lab-react/src/renderer/shaders/tsl/noise/ridge-noise.ts

@@ -0,0 +1,24 @@
+// @ts-nocheck
+import { Fn, Loop, abs, clamp, float } from "three/tsl"
+import { simplexNoise3d } from "./simplex-noise-3d"
+
+export const ridgeNoise = Fn(([pImmutable]) => {
+  const p = pImmutable.toVar()
+  const value = float(0).toVar()
+  const amplitude = float(0.5).toVar()
+  const frequency = float(1).toVar()
+  const weight = float(1).toVar()
+
+  Loop({ end: 6, start: 0, type: "int" }, () => {
+    const n = float(1).sub(abs(simplexNoise3d(p.mul(frequency)).mul(2)))
+    const signal = n.mul(n).mul(weight)
+
+    value.addAssign(signal.mul(amplitude))
+    weight.assign(clamp(signal, 0, 1))
+
+    frequency.mulAssign(2.0)
+    amplitude.mulAssign(0.5)
+  })
+
+  return value
+})

package/packages/shader-lab-react/src/renderer/shaders/tsl/noise/simplex-noise-3d.ts

@@ -0,0 +1,79 @@
+// @ts-nocheck
+import {
+  Fn,
+  abs,
+  dot,
+  float,
+  floor,
+  max,
+  min,
+  mod,
+  mul,
+  step,
+  sub,
+  vec2,
+  vec3,
+  vec4,
+} from "three/tsl"
+import { permute, taylorInvSqrt } from "./common"
+
+export const simplexNoise3d = Fn(([vImmutable]) => {
+  const v = vec3(vImmutable).toVar()
+  const c = vec2(1.0 / 6.0, 1.0 / 3.0)
+  const d = vec4(0.0, 0.5, 1.0, 2.0)
+  const i = vec3(floor(v.add(dot(v, c.yyy)))).toVar()
+  const x0 = vec3(v.sub(i).add(dot(i, c.xxx))).toVar()
+  const g = vec3(step(x0.yzx, x0.xyz)).toVar()
+  const l = vec3(sub(1.0, g)).toVar()
+  const i1 = vec3(min(g.xyz, l.zxy)).toVar()
+  const i2 = vec3(max(g.xyz, l.zxy)).toVar()
+  const x1 = vec3(x0.sub(i1).add(mul(1.0, c.xxx))).toVar()
+  const x2 = vec3(x0.sub(i2).add(mul(2.0, c.xxx))).toVar()
+  const x3 = vec3(x0.sub(1).add(mul(3.0, c.xxx))).toVar()
+
+  i.assign(mod(i, 289.0))
+
+  const p = vec4(
+    permute(
+      permute(
+        permute(i.z.add(vec4(0.0, i1.z, i2.z, 1.0))).add(i.y.add(vec4(0.0, i1.y, i2.y, 1.0))),
+      ).add(i.x.add(vec4(0.0, i1.x, i2.x, 1.0))),
+    ),
+  ).toVar()
+
+  const n = float(1.0 / 7.0).toVar()
+  const ns = vec3(n.mul(d.wyz).sub(d.xzx)).toVar()
+  const j = vec4(p.sub(mul(49.0, floor(p.mul(ns.z.mul(ns.z)))))).toVar()
+  const x = vec4(floor(j.mul(ns.z)).mul(ns.x).add(ns.yyyy)).toVar()
+  const y = vec4(floor(j.sub(mul(7.0, floor(j.mul(ns.z))))).mul(ns.x).add(ns.yyyy)).toVar()
+  const h = vec4(sub(1.0, abs(x).sub(abs(y)))).toVar()
+  const b0 = vec4(x.xy, y.xy).toVar()
+  const b1 = vec4(x.zw, y.zw).toVar()
+  const s0 = vec4(floor(b0).mul(2.0).add(1.0)).toVar()
+  const s1 = vec4(floor(b1).mul(2.0).add(1.0)).toVar()
+  const sh = vec4(step(h, vec4(0.0)).negate()).toVar()
+  const a0 = vec4(b0.xzyw.add(s0.xzyw.mul(sh.xxyy))).toVar()
+  const a1 = vec4(b1.xzyw.add(s1.xzyw.mul(sh.zzww))).toVar()
+  const p0 = vec3(a0.xy, h.x).toVar()
+  const p1 = vec3(a0.zw, h.y).toVar()
+  const p2 = vec3(a1.xy, h.z).toVar()
+  const p3 = vec3(a1.zw, h.w).toVar()
+  const norm = vec4(
+    taylorInvSqrt(vec4(dot(p0, p0), dot(p1, p1), dot(p2, p2), dot(p3, p3))),
+  ).toVar()
+
+  p0.mulAssign(norm.x)
+  p1.mulAssign(norm.y)
+  p2.mulAssign(norm.z)
+  p3.mulAssign(norm.w)
+
+  const m = vec4(
+    max(sub(0.6, vec4(dot(x0, x0), dot(x1, x1), dot(x2, x2), dot(x3, x3))), 0.0),
+  ).toVar()
+  m.assign(m.mul(m))
+
+  return mul(
+    42.0,
+    dot(m.mul(m), vec4(dot(p0, x0), dot(p1, x1), dot(p2, x2), dot(p3, x3))),
+  )
+})

package/packages/shader-lab-react/src/renderer/shaders/tsl/noise/simplex-noise-4d.ts

@@ -0,0 +1,89 @@
+// @ts-nocheck
+import {
+  Fn,
+  clamp,
+  dot,
+  float,
+  floor,
+  max,
+  mod,
+  mul,
+  step,
+  sub,
+  vec2,
+  vec3,
+  vec4,
+} from "three/tsl"
+import { grad4, permute, taylorInvSqrt } from "./common"
+
+export const simplexNoise4d = Fn(([vImmutable]) => {
+  const v = vec4(vImmutable).toVar()
+  const c = vec2(0.1381966011250105, 0.30901699437494745)
+  const i = vec4(floor(v.add(dot(v, c.yyyy)))).toVar()
+  const x0 = vec4(v.sub(i).add(dot(i, c.xxxx))).toVar()
+  const i0 = vec4().toVar()
+  const isX = vec3(step(x0.yzw, x0.xxx)).toVar()
+  const isYZ = vec3(step(x0.zww, x0.yyz)).toVar()
+
+  i0.x.assign(isX.x.add(isX.y).add(isX.z))
+  i0.yzw.assign(sub(1.0, isX))
+  i0.y.addAssign(isYZ.x.add(isYZ.y))
+  i0.zw.addAssign(sub(1.0, isYZ.xy))
+  i0.z.addAssign(isYZ.z)
+  i0.w.addAssign(sub(1.0, isYZ.z))
+
+  const i3 = vec4(clamp(i0, 0.0, 1.0)).toVar()
+  const i2 = vec4(clamp(i0.sub(1.0), 0.0, 1.0)).toVar()
+  const i1 = vec4(clamp(i0.sub(2.0), 0.0, 1.0)).toVar()
+  const x1 = vec4(x0.sub(i1).add(mul(1.0, c.xxxx))).toVar()
+  const x2 = vec4(x0.sub(i2).add(mul(2.0, c.xxxx))).toVar()
+  const x3 = vec4(x0.sub(i3).add(mul(3.0, c.xxxx))).toVar()
+  const x4 = vec4(x0.sub(1.0).add(mul(4.0, c.xxxx))).toVar()
+
+  i.assign(mod(i, 289.0))
+
+  const j0 = float(permute(permute(permute(permute(i.w).add(i.z)).add(i.y)).add(i.x))).toVar()
+  const j1 = vec4(
+    permute(
+      permute(
+        permute(
+          permute(i.w.add(vec4(i1.w, i2.w, i3.w, 1.0)))
+            .add(i.z)
+            .add(vec4(i1.z, i2.z, i3.z, 1.0)),
+        )
+          .add(i.y)
+          .add(vec4(i1.y, i2.y, i3.y, 1.0)),
+      )
+        .add(i.x)
+        .add(vec4(i1.x, i2.x, i3.x, 1.0)),
+    ),
+  ).toVar()
+
+  const ip = vec4(1.0 / 294.0, 1.0 / 49.0, 1.0 / 7.0, 0.0).toVar()
+  const p0 = vec4(grad4(j0, ip)).toVar()
+  const p1 = vec4(grad4(j1.x, ip)).toVar()
+  const p2 = vec4(grad4(j1.y, ip)).toVar()
+  const p3 = vec4(grad4(j1.z, ip)).toVar()
+  const p4 = vec4(grad4(j1.w, ip)).toVar()
+  const norm = vec4(
+    taylorInvSqrt(vec4(dot(p0, p0), dot(p1, p1), dot(p2, p2), dot(p3, p3))),
+  ).toVar()
+
+  p0.mulAssign(norm.x)
+  p1.mulAssign(norm.y)
+  p2.mulAssign(norm.z)
+  p3.mulAssign(norm.w)
+  p4.mulAssign(taylorInvSqrt(dot(p4, p4)))
+
+  const m0 = vec3(max(sub(0.6, vec3(dot(x0, x0), dot(x1, x1), dot(x2, x2))), 0.0)).toVar()
+  const m1 = vec2(max(sub(0.6, vec2(dot(x3, x3), dot(x4, x4))), 0.0)).toVar()
+  m0.assign(m0.mul(m0))
+  m1.assign(m1.mul(m1))
+
+  return mul(
+    49.0,
+    dot(m0.mul(m0), vec3(dot(p0, x0), dot(p1, x1), dot(p2, x2))).add(
+      dot(m1.mul(m1), vec2(dot(p3, x3), dot(p4, x4))),
+    ),
+  )
+})

package/packages/shader-lab-react/src/renderer/shaders/tsl/noise/turbulence.ts

@@ -0,0 +1,56 @@
+// @ts-nocheck
+import { Fn, float, Loop, sin, vec2 } from "three/tsl"
+
+interface TurbulenceOptions {
+  _amp?: number
+  _exp?: number
+  _freq?: number
+  _num?: number
+  _speed?: number
+}
+
+const HALF_PI = 1.5707963267948966
+const THETA = 0.9272952180016122
+
+/**
+ * Turbulence based on XorDev's "Turbulent Dark" technique.
+ * Displaces coordinates by layering rotated sine waves at increasing frequencies
+ *
+ * @see https://mini.gmshaders.com/p/turbulence
+ */
+export const turbulence = Fn(([pInput, time, rawOptions]) => {
+  const options = (rawOptions as TurbulenceOptions | undefined) ?? {}
+  const {
+    _num = 10,
+    _amp = 0.7,
+    _speed = 0.3,
+    _freq = 2.0,
+    _exp = 1.4,
+  } = options
+
+  const p = vec2(pInput.xy).toVar()
+  const t = time.mul(float(_speed))
+  const freq = float(_freq).toVar()
+  const angle = float(0.0).toVar()
+  const iter = float(0.0).toVar()
+
+  Loop({ end: _num, start: 0, type: "int" }, () => {
+    const c = sin(angle.add(HALF_PI))
+    const s = sin(angle)
+
+    const phase = freq
+      .mul(p.x.mul(s).add(p.y.mul(c)))
+      .add(t)
+      .add(iter)
+
+    const scale = float(_amp).mul(sin(phase)).div(freq)
+    p.x.addAssign(scale.mul(c))
+    p.y.addAssign(scale.mul(s.negate()))
+
+    angle.addAssign(THETA)
+    freq.mulAssign(float(_exp))
+    iter.addAssign(1.0)
+  })
+
+  return p.sub(pInput.xy)
+})

package/packages/shader-lab-react/src/renderer/shaders/tsl/noise/value-noise-3d.ts

@@ -0,0 +1,32 @@
+// @ts-nocheck
+import { Fn, dot, floor, fract, mix, sin, vec3 } from "three/tsl"
+import { fade } from "./common"
+
+const hash31 = Fn(([p]) => {
+  return fract(sin(dot(p, vec3(127.1, 311.7, 74.7))).mul(43758.5453123))
+})
+
+export const valueNoise3d = Fn(([pImmutable]) => {
+  const p = vec3(pImmutable).toVar()
+  const cell = vec3(floor(p)).toVar()
+  const local = vec3(fract(p)).toVar()
+  const eased = vec3(fade(local)).toVar()
+
+  const n000 = hash31(cell)
+  const n100 = hash31(cell.add(vec3(1, 0, 0)))
+  const n010 = hash31(cell.add(vec3(0, 1, 0)))
+  const n110 = hash31(cell.add(vec3(1, 1, 0)))
+  const n001 = hash31(cell.add(vec3(0, 0, 1)))
+  const n101 = hash31(cell.add(vec3(1, 0, 1)))
+  const n011 = hash31(cell.add(vec3(0, 1, 1)))
+  const n111 = hash31(cell.add(vec3(1, 1, 1)))
+
+  const nx00 = mix(n000, n100, eased.x)
+  const nx10 = mix(n010, n110, eased.x)
+  const nx01 = mix(n001, n101, eased.x)
+  const nx11 = mix(n011, n111, eased.x)
+  const nxy0 = mix(nx00, nx10, eased.y)
+  const nxy1 = mix(nx01, nx11, eased.y)
+
+  return mix(nxy0, nxy1, eased.z).mul(2).sub(1)
+})

package/packages/shader-lab-react/src/renderer/shaders/tsl/noise/voronoi-noise-3d.ts

@@ -0,0 +1,60 @@
+// @ts-nocheck
+import { Fn, dot, float, floor, fract, length, min, sin, vec3 } from "three/tsl"
+
+const random3 = Fn(([p]) => {
+  return fract(
+    sin(
+      vec3(
+        dot(p, vec3(127.1, 311.7, 74.7)),
+        dot(p, vec3(269.5, 183.3, 246.1)),
+        dot(p, vec3(113.5, 271.9, 124.6)),
+      ),
+    ).mul(43758.5453),
+  )
+})
+
+const checkNeighbor = Fn(([i, f, neighbor, currentMin]) => {
+  const point = random3(i.add(neighbor))
+  const diff = neighbor.add(point).sub(f)
+
+  return min(currentMin, length(diff))
+})
+
+export const voronoiNoise3d = Fn(([pImmutable]) => {
+  const p = vec3(pImmutable).toVar()
+  const i = vec3(floor(p)).toVar()
+  const f = vec3(fract(p)).toVar()
+
+  const d = float(1).toVar()
+
+  // Unrolled 3x3x3 neighbor search
+  d.assign(checkNeighbor(i, f, vec3(-1, -1, -1), d))
+  d.assign(checkNeighbor(i, f, vec3(-1, -1, 0), d))
+  d.assign(checkNeighbor(i, f, vec3(-1, -1, 1), d))
+  d.assign(checkNeighbor(i, f, vec3(-1, 0, -1), d))
+  d.assign(checkNeighbor(i, f, vec3(-1, 0, 0), d))
+  d.assign(checkNeighbor(i, f, vec3(-1, 0, 1), d))
+  d.assign(checkNeighbor(i, f, vec3(-1, 1, -1), d))
+  d.assign(checkNeighbor(i, f, vec3(-1, 1, 0), d))
+  d.assign(checkNeighbor(i, f, vec3(-1, 1, 1), d))
+  d.assign(checkNeighbor(i, f, vec3(0, -1, -1), d))
+  d.assign(checkNeighbor(i, f, vec3(0, -1, 0), d))
+  d.assign(checkNeighbor(i, f, vec3(0, -1, 1), d))
+  d.assign(checkNeighbor(i, f, vec3(0, 0, -1), d))
+  d.assign(checkNeighbor(i, f, vec3(0, 0, 0), d))
+  d.assign(checkNeighbor(i, f, vec3(0, 0, 1), d))
+  d.assign(checkNeighbor(i, f, vec3(0, 1, -1), d))
+  d.assign(checkNeighbor(i, f, vec3(0, 1, 0), d))
+  d.assign(checkNeighbor(i, f, vec3(0, 1, 1), d))
+  d.assign(checkNeighbor(i, f, vec3(1, -1, -1), d))
+  d.assign(checkNeighbor(i, f, vec3(1, -1, 0), d))
+  d.assign(checkNeighbor(i, f, vec3(1, -1, 1), d))
+  d.assign(checkNeighbor(i, f, vec3(1, 0, -1), d))
+  d.assign(checkNeighbor(i, f, vec3(1, 0, 0), d))
+  d.assign(checkNeighbor(i, f, vec3(1, 0, 1), d))
+  d.assign(checkNeighbor(i, f, vec3(1, 1, -1), d))
+  d.assign(checkNeighbor(i, f, vec3(1, 1, 0), d))
+  d.assign(checkNeighbor(i, f, vec3(1, 1, 1), d))
+
+  return d
+})

package/packages/shader-lab-react/src/renderer/shaders/tsl/patterns/bloom-edge-pattern.ts

@@ -0,0 +1,15 @@
+// @ts-nocheck
+import { Fn, abs, float } from "three/tsl"
+import { bloom } from "./bloom"
+import { repeatingPattern } from "./repeating-pattern"
+
+/**
+ * Returns a repeating pattern of lines with a bloom effect.
+ */
+export const bloomEdgePattern = Fn(([pattern, repeat, edge, exponent, time = float(0)]) => {
+  pattern.assign(repeatingPattern(pattern, repeat, time))
+  pattern.assign(abs(pattern))
+  pattern.assign(bloom(pattern, edge, exponent))
+
+  return pattern
+})

package/packages/shader-lab-react/src/renderer/shaders/tsl/patterns/bloom.ts

@@ -0,0 +1,11 @@
+// @ts-nocheck
+import { Fn, pow } from "three/tsl"
+
+/**
+ * Returns a bloomed edge based on a given edge and pattern.
+ */
+export const bloom = Fn(([pattern, edge, exponent]) => {
+  pattern.assign(pow(edge.div(pattern), exponent))
+
+  return pattern
+})