@call-me-sensei/toonlab 0.1.1

package/src/shaders-tsl/water-kelp.js

@@ -0,0 +1,171 @@
+// TSL port of src/shaders/waterKelp.vert.glsl + waterKelp.frag.glsl —
+// instanced underwater kelp blades swaying with the water flow.
+//
+// getShadowMask() → sampleEnvironmentSunShadow(worldPos) (shared sun-shadow
+// pass; inert 1.0 until it runs). The material also exposes
+// userData.createDepthColorVariant() so depth-as-color passes (the water grab
+// pass on the node backends, the sun-shadow pass) see the blades exactly
+// where the color pass draws them — same sway, same edge cutout — mirroring
+// the tree-leaf convention. Varyings are created per material variant
+// (tree-leaf pattern): node graphs may share uniforms, but each material owns
+// its varyings.
+//
+// TODO(tsl Phase 7): fog ordering — GLSL fogs after colorspace; scene fog is
+// disabled here until the fog phase resolves the ordering.
+
+import * as THREE from 'three';
+import {
+  abs,
+  attribute,
+  cameraFar,
+  cameraNear,
+  cameraProjectionMatrix,
+  cameraViewMatrix,
+  cos,
+  Discard,
+  dot,
+  float,
+  Fn,
+  mix,
+  modelWorldMatrix,
+  normalize,
+  positionGeometry,
+  pow,
+  select,
+  sin,
+  smoothstep,
+  uniform,
+  uv,
+  varying,
+  vec2,
+  vec3,
+  vec4,
+  viewZToOrthographicDepth,
+  viewZToPerspectiveDepth,
+} from 'three/tsl';
+import { NodeMaterial } from 'three/webgpu';
+
+import { sampleEnvironmentSunShadow } from './chunks/environment-sun-shadow.js';
+import { waterToonStep, waterValueNoise } from './chunks/water-common.js';
+
+export function createWaterKelpNodeMaterial({
+  swayAmplitude = 0.24,
+  shadowStrength = 0.55,
+} = {}) {
+  const u = {
+    uTime: uniform(0),
+    uSceneShadowStrength: uniform(shadowStrength),
+    uFlowDirection: uniform(new THREE.Vector2(1, 0)),
+    uFlowSpeed: uniform(0.3),
+    uSwayAmplitude: uniform(swayAmplitude),
+    uKelpColor: uniform(new THREE.Color()),
+    uKelpShadeColor: uniform(new THREE.Color()),
+  };
+
+  const vUv = uv();
+
+  // Shared vertex displacement, parameterized by the owning material's
+  // varyings (waterKelp.vert.glsl).
+  const buildVertexNode = ({ vSeed, vWorldPosition }) => Fn(() => {
+    const iOrigin = attribute('iOrigin', 'vec3');
+    // iInfo = (height, phase, width, yaw)
+    const iInfo = attribute('iInfo', 'vec4');
+
+    vSeed.assign(iInfo.y);
+
+    const heightFraction = vUv.y.toVar();
+    const bladeHeight = iInfo.x.toVar();
+    const yaw = iInfo.w;
+    const facing = vec2(cos(yaw), sin(yaw)).toVar();
+
+    const flow = normalize(u.uFlowDirection.add(vec2(1e-4, 0.0))).toVar();
+    const bendPhase = u.uTime.mul(u.uFlowSpeed.mul(0.9).add(0.9)).add(iInfo.y.mul(6.28))
+      .add(dot(iOrigin.xz, vec2(0.4, 0.31))).toVar();
+    const bend = sin(bendPhase).mul(0.5).add(0.5).add(u.uFlowSpeed.mul(0.35)).mul(u.uSwayAmplitude).toVar();
+    const wiggle = vec2(flow.y.negate(), flow.x)
+      .mul(sin(bendPhase.mul(2.6).add(heightFraction.mul(3.2)))).mul(0.14).mul(u.uSwayAmplitude).toVar();
+    const curve = pow(heightFraction, 1.55).toVar();
+
+    const bladePosition = vec3(iOrigin).toVar();
+    bladePosition.xz.addAssign(facing.mul(positionGeometry.x.mul(iInfo.z)));
+    bladePosition.y.addAssign(heightFraction.mul(bladeHeight));
+    bladePosition.xz.addAssign(flow.mul(bend).add(wiggle).mul(curve).mul(bladeHeight));
+    bladePosition.y.subAssign(bend.mul(curve).mul(curve).mul(bladeHeight).mul(0.2));
+
+    const worldPosition = modelWorldMatrix.mul(vec4(bladePosition, 1.0)).toVar();
+    vWorldPosition.assign(worldPosition.xyz);
+    return cameraProjectionMatrix.mul(cameraViewMatrix).mul(worldPosition);
+  })();
+
+  // Shared blade silhouette cutout (color + depth variant); returns the
+  // distance-from-midrib term the color stage keeps using.
+  const bladeCutout = (vSeed) => {
+    // Tapered silhouette with a wavy edge; widest near the base.
+    const edgeWave = sin(vUv.y.mul(9.0).add(vSeed.mul(37.0))).mul(0.22).add(0.78);
+    const halfWidth = vUv.y.mul(0.62).oneMinus().mul(0.5).mul(edgeWave);
+    const distanceFromMid = abs(vUv.x.sub(0.5)).toVar();
+    Discard(distanceFromMid.greaterThan(halfWidth));
+
+    const tipFade = smoothstep(0.93, 1.0, vUv.y).oneMinus();
+    Discard(tipFade.lessThan(0.4));
+    return distanceFromMid;
+  };
+
+  const material = new NodeMaterial();
+  material.name = 'WaterKelp';
+  material.lights = false;
+  // TODO(tsl Phase 7): fog ordering (see module header).
+  material.fog = false;
+  material.side = THREE.DoubleSide;
+
+  const vSeed = varying(float(), 'vKelpSeed');
+  const vWorldPosition = varying(vec3(), 'vKelpWorldPosition');
+  material.vertexNode = buildVertexNode({ vSeed, vWorldPosition });
+
+  material.fragmentNode = Fn(() => {
+    const distanceFromMid = bladeCutout(vSeed);
+
+    const shadeNoise = waterValueNoise(vec2(vUv.x.mul(3.0), vUv.y.mul(5.0)).add(vSeed.mul(19.0)));
+    const lit = waterToonStep(0.5, 0.09, shadeNoise.add(vUv.y.mul(0.42)));
+    const color = mix(u.uKelpShadeColor, u.uKelpColor, lit).toVar();
+    // Darker midrib line.
+    color.mulAssign(smoothstep(0.02, 0.05, distanceFromMid).oneMinus().mul(0.28).oneMinus());
+
+    // Scene shadows filtering down through the water.
+    const sceneShadow = mix(1.0, sampleEnvironmentSunShadow(vWorldPosition), u.uSceneShadowStrength);
+    color.mulAssign(mix(vec3(0.52, 0.58, 0.68), vec3(1.0), sceneShadow));
+
+    return vec4(color, 1.0);
+  })();
+
+  material.uniforms = u;
+  material.userData.isToonNodeMaterial = true;
+
+  // Depth-color variant: same sway + cutout, linear window depth as color
+  // (pass-depth-color convention; the pass's own camera feeds cameraNear/Far).
+  material.userData.createDepthColorVariant = () => {
+    const depthMaterial = new NodeMaterial();
+    depthMaterial.name = 'WaterKelpDepth';
+    depthMaterial.lights = false;
+    depthMaterial.fog = false;
+    depthMaterial.side = THREE.DoubleSide;
+    depthMaterial.isShadowPassMaterial = true; // see pass-depth-color.js
+    const dSeed = varying(float(), 'vKelpDepthSeed');
+    const dWorldPosition = varying(vec3(), 'vKelpDepthWorldPosition');
+    depthMaterial.vertexNode = buildVertexNode({ vSeed: dSeed, vWorldPosition: dWorldPosition });
+    depthMaterial.fragmentNode = Fn(() => {
+      bladeCutout(dSeed);
+      const viewZ = cameraViewMatrix.mul(vec4(dWorldPosition, 1.0)).z;
+      const orthographic = cameraProjectionMatrix.element(3).w.equal(1.0);
+      const depth01 = select(
+        orthographic,
+        viewZToOrthographicDepth(viewZ, cameraNear, cameraFar),
+        viewZToPerspectiveDepth(viewZ, cameraNear, cameraFar),
+      );
+      return vec4(vec3(depth01), 1.0);
+    })();
+    return depthMaterial;
+  };
+
+  return material;
+}

package/src/shaders-tsl/water-rain.js

@@ -0,0 +1,107 @@
+// TSL port of src/shaders/waterRain.vert.glsl + waterRain.frag.glsl —
+// GPU-looping rain streak particles. Each particle owns a static seed; its
+// full trajectory is derived from time, so rain runs forever with zero
+// per-frame buffer writes.
+//
+// WGSL has no gl_PointSize, so the streak POINTS become instanced billboard
+// quads with the exact pixel-size math in clip space (dust-motes pattern,
+// docs/tsl-conventions.md). The quad uv is flipped to gl_PointCoord
+// orientation for the bar shape (symmetric here, kept for exactness).
+
+import * as THREE from 'three';
+import {
+  abs,
+  attribute,
+  cameraProjectionMatrix,
+  cameraViewMatrix,
+  Discard,
+  float,
+  Fn,
+  max,
+  mod,
+  positionGeometry,
+  smoothstep,
+  uniform,
+  uv,
+  varying,
+  vec2,
+  vec3,
+  vec4,
+  viewportSize,
+} from 'three/tsl';
+import { NodeMaterial } from 'three/webgpu';
+
+export function createWaterRainNodeMaterial({
+  areaSize = 30,
+  fallHeight = 16,
+  speed = 16,
+  streakLength = 0.42,
+  wind = [2.2, 0.8],
+  color = [0.8, 0.88, 0.95],
+  opacity = 0.34,
+} = {}) {
+  const u = {
+    uTime: uniform(0),
+    uCenter: uniform(new THREE.Vector3()),
+    uArea: uniform(new THREE.Vector2(areaSize * 0.5, areaSize * 0.5)),
+    uFallHeight: uniform(fallHeight),
+    uSpeed: uniform(speed),
+    uWind: uniform(new THREE.Vector2(wind[0], wind[1])),
+    uStreakLength: uniform(streakLength),
+    uPointScale: uniform(540),
+    uPixelRatio: uniform(1),
+    uColor: uniform(new THREE.Color().setRGB(color[0], color[1], color[2], THREE.SRGBColorSpace)),
+    uOpacity: uniform(opacity),
+  };
+
+  const material = new NodeMaterial();
+  material.name = 'WaterRain';
+  material.lights = false;
+  material.fog = false;
+  material.transparent = true;
+  material.depthWrite = false;
+
+  const vFade = varying(float(), 'vRainFade');
+
+  material.vertexNode = Fn(() => {
+    // aSeed = (unitX, unitZ, phase, jitter)
+    const aSeed = attribute('aSeed', 'vec4');
+
+    const speedValue = u.uSpeed.mul(aSeed.w.mul(0.5).add(0.75)).toVar();
+    const cycle = u.uFallHeight.div(speedValue).toVar();
+    const t = mod(u.uTime.add(aSeed.z.mul(cycle)), cycle).toVar();
+    const y = u.uFallHeight.sub(speedValue.mul(t)).toVar();
+
+    const xz = aSeed.xy.mul(2.0).sub(1.0).mul(u.uArea).add(u.uWind.mul(t)).toVar();
+    xz.assign(mod(xz.add(u.uArea), u.uArea.mul(2.0)).sub(u.uArea));
+
+    const worldPosition = u.uCenter.add(vec3(xz.x, y, xz.y)).toVar();
+    const mvPosition = cameraViewMatrix.mul(vec4(worldPosition, 1.0)).toVar();
+
+    vFade.assign(smoothstep(0.0, 0.5, y)
+      .mul(smoothstep(u.uFallHeight.mul(0.85), u.uFallHeight, y).oneMinus()));
+
+    // gl_PointSize equivalent, in device pixels.
+    const pixels = u.uStreakLength.mul(u.uPointScale).mul(u.uPixelRatio)
+      .div(max(mvPosition.z.negate(), 0.5)).toVar();
+    const clipPosition = cameraProjectionMatrix.mul(mvPosition).toVar();
+    clipPosition.xy.addAssign(
+      positionGeometry.xy.mul(pixels).mul(float(2.0).div(viewportSize)).mul(clipPosition.w),
+    );
+    return clipPosition;
+  })();
+
+  material.fragmentNode = Fn(() => {
+    // gl_PointCoord replacement (y flipped), remapped to [-1, 1].
+    const point = vec2(uv().x, uv().y.oneMinus()).mul(2.0).sub(1.0).toVar();
+    const bar = smoothstep(0.05, 0.18, abs(point.x)).oneMinus()
+      .mul(smoothstep(0.65, 1.0, abs(point.y)).oneMinus());
+    const alpha = bar.mul(u.uOpacity).mul(vFade).toVar();
+    Discard(alpha.lessThan(0.02));
+    return vec4(u.uColor, alpha);
+  })();
+
+  material.uniforms = u;
+  material.userData.isToonNodeMaterial = true;
+  return material;
+}

package/src/shaders-tsl/water-simulation.js

@@ -0,0 +1,140 @@
+// TSL port of src/shaders/waterSimulation.vert.glsl + waterSimulation.frag.glsl
+// — the fullscreen ripple heightfield simulation material (ping-pong render
+// targets, decision D3: stays fragment-based, no compute).
+// State texture: R = height, G = vertical velocity, B = foam energy.
+//
+// Porting notes (docs/tsl-conventions.md):
+// - The GLSL early return (region shift moving the source uv off the state)
+//   becomes var + If — the fragment root stays a plain vec4 var.
+// - uPrevState is the RT being ping-ponged: every sample is .level(0).
+// - The impulse loop (WATER_SIM_MAX_IMPULSES) unrolls at graph build; the
+//   `i >= uImpulseCount break` / `distanceSq > 4 continue` guards become
+//   nested Ifs (impulses are packed from slot 0, so the guard is equivalent).
+// - uImpulses is a uniformArray (vec4 slots, GLSL layout preserved).
+
+import * as THREE from 'three';
+import {
+  abs,
+  dot,
+  exp,
+  clamp,
+  Fn,
+  If,
+  max,
+  min,
+  mix,
+  positionGeometry,
+  pow,
+  smoothstep,
+  texture,
+  uniform,
+  uniformArray,
+  uv,
+  vec2,
+  vec4,
+} from 'three/tsl';
+import { NodeMaterial } from 'three/webgpu';
+
+import { waterArrayUniformEntry } from './water.js';
+
+let fallbackStateTexture = null;
+function getFallbackStateTexture() {
+  if (!fallbackStateTexture) {
+    fallbackStateTexture = new THREE.DataTexture(new Uint8Array([0, 0, 0, 255]), 1, 1, THREE.RGBAFormat);
+    fallbackStateTexture.needsUpdate = true;
+  }
+  return fallbackStateTexture;
+}
+
+export function createWaterSimulationNodeMaterial({ maxImpulses, resolution }) {
+  // uImpulses[i] = (centerU, centerV, worldRadius, strength)
+  const impulsesNode = uniformArray(
+    Array.from({ length: maxImpulses }, () => new THREE.Vector4()), 'vec4',
+  );
+  const u = {
+    uPrevState: texture(getFallbackStateTexture()),
+    uTexel: uniform(new THREE.Vector2(1 / resolution, 1 / resolution)),
+    uDelta: uniform(1 / 120),
+    uPropagation: uniform(1),
+    uDamping: uniform(0.985),
+    uHeightRelaxation: uniform(0.9985),
+    uFoamDecay: uniform(0.94),
+    uFoamGain: uniform(2.4),
+    uRegionShiftTexels: uniform(new THREE.Vector2(0, 0)),
+    uRegionWorldSize: uniform(new THREE.Vector2(20, 20)),
+    uImpulseCount: uniform(0, 'int'),
+    // Array uniform wrapper: `.value[i].set(...)` writes land on the node's
+    // authoring array (see waterArrayUniformEntry).
+    uImpulses: waterArrayUniformEntry(impulsesNode),
+  };
+
+  const material = new NodeMaterial();
+  material.name = 'WaterRippleSimulation';
+  material.lights = false;
+  material.fog = false;
+  material.depthTest = false;
+  material.depthWrite = false;
+
+  // Fullscreen pass: clip position straight from the quad's xy.
+  material.vertexNode = Fn(() => vec4(positionGeometry.xy, 0.0, 1.0))();
+
+  const vUv = uv();
+
+  material.fragmentNode = Fn(() => {
+    const result = vec4(0.0, 0.0, 0.0, 1.0).toVar();
+
+    // Texel-aligned region shift so the simulation window can follow a
+    // character while ripples stay put in world space.
+    const sourceUv = vUv.add(u.uRegionShiftTexels.mul(u.uTexel)).toVar();
+    const inRange = sourceUv.x.greaterThanEqual(0.0).and(sourceUv.x.lessThanEqual(1.0))
+      .and(sourceUv.y.greaterThanEqual(0.0)).and(sourceUv.y.lessThanEqual(1.0));
+    If(inRange, () => {
+      const state = u.uPrevState.sample(sourceUv).level(0).rgb.toVar();
+      const height = state.r.toVar();
+      const velocity = state.g.toVar();
+      const foam = state.b.toVar();
+
+      const left = u.uPrevState.sample(sourceUv.sub(vec2(u.uTexel.x, 0.0))).level(0).r;
+      const right = u.uPrevState.sample(sourceUv.add(vec2(u.uTexel.x, 0.0))).level(0).r;
+      const down = u.uPrevState.sample(sourceUv.sub(vec2(0.0, u.uTexel.y))).level(0).r;
+      const up = u.uPrevState.sample(sourceUv.add(vec2(0.0, u.uTexel.y))).level(0).r;
+      const laplacian = left.add(right).add(up).add(down).sub(height.mul(4.0));
+
+      velocity.addAssign(laplacian.mul(u.uPropagation).mul(u.uDelta));
+      velocity.mulAssign(pow(u.uDamping, u.uDelta.mul(60.0)));
+
+      for (let i = 0; i < maxImpulses; i += 1) {
+        If(u.uImpulseCount.greaterThan(i), () => {
+          const impulse = impulsesNode.element(i).toVar();
+          const delta = vUv.sub(impulse.xy).mul(u.uRegionWorldSize).div(max(impulse.z, 1e-4));
+          const distanceSq = dot(delta, delta).toVar();
+          If(distanceSq.lessThanEqual(4.0), () => {
+            const falloff = exp(distanceSq.mul(-3.0)).toVar();
+            velocity.addAssign(impulse.w.mul(falloff));
+            height.subAssign(impulse.w.mul(falloff).mul(0.12));
+          });
+        });
+      }
+
+      height.addAssign(velocity.mul(u.uDelta));
+      height.mulAssign(pow(u.uHeightRelaxation, u.uDelta.mul(60.0)));
+
+      // Absorbing border so waves never bounce off the region edge.
+      const borderDistance = min(vUv, vUv.oneMinus()).toVar();
+      const border = smoothstep(0.0, 0.05, min(borderDistance.x, borderDistance.y)).toVar();
+      height.mulAssign(mix(0.9, 1.0, border));
+      velocity.mulAssign(mix(0.82, 1.0, border));
+
+      foam.assign(foam.mul(pow(u.uFoamDecay, u.uDelta.mul(60.0)))
+        .add(abs(velocity).mul(u.uFoamGain).mul(u.uDelta)));
+      foam.assign(clamp(foam, 0.0, 1.5));
+
+      result.assign(vec4(height, velocity, foam, 1.0));
+    });
+
+    return result;
+  })();
+
+  material.uniforms = u;
+  return material;
+}