@call-me-sensei/toonlab 0.1.1

package/src/shaders-tsl/flower.js

@@ -0,0 +1,267 @@
+// TSL port of src/shaders/flower.vert.glsl + flower.frag.glsl — procedural
+// daisy heads riding the grass canopy as camera-facing billboards. Also home
+// to the tree lab's flower-patch materials (textured species heads + toon
+// stems), so every flower path renders through node materials.
+
+import * as THREE from 'three';
+import {
+  abs,
+  atan,
+  cameraProjectionMatrix,
+  cameraViewMatrix,
+  clamp,
+  cos,
+  Discard,
+  dot,
+  float,
+  Fn,
+  instanceIndex,
+  length,
+  mix,
+  modelWorldMatrix,
+  normalize,
+  positionLocal,
+  pow,
+  sin,
+  smoothstep,
+  texture,
+  time,
+  uniform,
+  uv,
+  varying,
+  vertexColor,
+  vec2,
+  vec3,
+  vec4,
+  attribute,
+} from 'three/tsl';
+import { MeshBasicNodeMaterial, MeshToonNodeMaterial, NodeMaterial } from 'three/webgpu';
+
+import { sampleEnvironmentSunShadow } from './chunks/environment-sun-shadow.js';
+
+export function createFlowerNodeMaterial(settings) {
+  const u = {
+    uCenterColor: uniform(new THREE.Color()),
+    uPetalColor: uniform(new THREE.Color()),
+    uShadowStrength: uniform(settings.shadowStrength),
+    uTime: uniform(0),
+    uWindDirection: uniform(new THREE.Vector2(settings.windDirection[0], settings.windDirection[1])),
+    uWindSpeed: uniform(settings.windSpeed),
+    uWindStrength: uniform(settings.windStrength),
+  };
+
+  const material = new NodeMaterial();
+  material.name = 'StylizedFlowers';
+  material.side = THREE.DoubleSide;
+  material.fog = true;
+
+  const vPetal = varying(vec2(), 'vFlowerPetal');
+  const vPhase = varying(float(), 'vFlowerPhase');
+  const vWorldPosition = varying(vec3(), 'vFlowerWorldPosition');
+
+  material.vertexNode = Fn(() => {
+    const iOrigin = attribute('iOrigin', 'vec3');
+    const iInfo = attribute('iInfo', 'vec4');
+
+    vPetal.assign(positionLocal.xy.mul(2.0));
+    vPhase.assign(iInfo.y);
+
+    const windDirection = normalize(u.uWindDirection.add(vec2(1e-4, 0.0)));
+    const phase = u.uTime.mul(u.uWindSpeed).add(iInfo.y.mul(6.2831))
+      .add(dot(iOrigin.xz, vec2(0.35, 0.28)));
+    const flutter = sin(phase).mul(0.5).add(0.5).add(sin(phase.mul(2.33).add(1.7)).mul(0.3));
+    const sway = windDirection.mul(flutter).mul(u.uWindStrength).mul(0.55).mul(iInfo.z);
+
+    const center = iOrigin.add(vec3(sway.x, iInfo.z, sway.y));
+    // viewMatrix rows 0/1 = camera right/up (GLSL viewMatrix[c][r] indexing).
+    const cameraRight = vec3(
+      cameraViewMatrix.element(0).x,
+      cameraViewMatrix.element(1).x,
+      cameraViewMatrix.element(2).x,
+    );
+    const cameraUp = vec3(
+      cameraViewMatrix.element(0).y,
+      cameraViewMatrix.element(1).y,
+      cameraViewMatrix.element(2).y,
+    );
+    const flowerPosition = center.add(
+      cameraRight.mul(positionLocal.x).add(cameraUp.mul(positionLocal.y)).mul(iInfo.x),
+    );
+
+    const worldPosition = modelWorldMatrix.mul(vec4(flowerPosition, 1.0));
+    vWorldPosition.assign(worldPosition.xyz);
+    return cameraProjectionMatrix.mul(cameraViewMatrix).mul(worldPosition);
+  })();
+
+  material.fragmentNode = Fn(() => {
+    const radius = length(vPetal);
+    const angle = atan(vPetal.y, vPetal.x);
+    // Eight wide petals with narrow notches between them.
+    const petalEdge = pow(abs(cos(angle.mul(4.0).add(vPhase.mul(6.2831)))), 0.35)
+      .mul(0.58).add(0.42);
+    Discard(radius.greaterThan(petalEdge));
+
+    const centerMask = smoothstep(0.34, 0.2, radius);
+    const color = mix(u.uPetalColor, u.uCenterColor, centerMask).toVar();
+    // Petals cup slightly: darken toward their outer edge.
+    color.mulAssign(radius.div(petalEdge).oneMinus().mul(0.12).add(0.9));
+
+    // Scene shadows: cool dark tint matched to the grass field's response.
+    const sceneShadow = mix(1.0, sampleEnvironmentSunShadow(vWorldPosition), u.uShadowStrength);
+    color.mulAssign(mix(vec3(0.44, 0.48, 0.62), vec3(1.0), sceneShadow));
+
+    return vec4(color, 1.0);
+  })();
+
+  material.uniforms = u;
+  return material;
+}
+
+// Shared instance-phased sway for the tree lab's flower patch. Heads use the
+// full amplitude; stems scale it by height fraction so a head stays glued to
+// its stem tip (head and stem instances share the same index order, so the
+// phases line up).
+function flowerSway(u) {
+  const phase = time.mul(u.uWindSpeed).add(float(instanceIndex).mul(1.618));
+  return vec3(sin(phase), 0.0, cos(phase.mul(0.7)).mul(0.5)).mul(u.uWindStrength);
+}
+
+/**
+ * Unlit cutout material for textured flower heads (species sprites drawn on
+ * a canvas, including hand-drawn petals). TSL replacement for the flower
+ * patch's old MeshBasicMaterial billboards, plus a gentle wind bob the
+ * classic material never had.
+ */
+export function createFlowerHeadNodeMaterial({ map, alphaCutoff = 0.4, windSpeed = 1, windStrength = 0 } = {}) {
+  const u = {
+    uAlphaCutoff: uniform(alphaCutoff),
+    uMap: texture(map),
+    uWindSpeed: uniform(windSpeed),
+    uWindStrength: uniform(windStrength),
+  };
+
+  const material = new MeshBasicNodeMaterial();
+  material.name = 'FlowerPatchHead';
+  material.side = THREE.DoubleSide;
+  material.transparent = true;
+
+  material.positionNode = positionLocal.add(flowerSway(u));
+  material.colorNode = u.uMap; // TextureNode samples at uv() by default
+  material.alphaTestNode = u.uAlphaCutoff;
+
+  material.uniforms = u;
+  return material;
+}
+
+/**
+ * Camera-facing textured bloom material for StylizedFlower plants: instanced
+ * billboard quads (iOrigin vec3 + iInfo vec4 = size / roll / sway amplitude)
+ * sampling a species head sprite, with the daisy field's wind bob. A bloom
+ * never renders edge-on, from any camera.
+ */
+export function createFlowerHeadBillboardNodeMaterial({
+  map, alphaCutoff = 0.4, windDirection = [1, 0.3], windSpeed = 1, windStrength = 0,
+} = {}) {
+  const u = {
+    uAlphaCutoff: uniform(alphaCutoff),
+    uMap: texture(map),
+    uWindDirection: uniform(new THREE.Vector2(windDirection[0], windDirection[1])),
+    uWindSpeed: uniform(windSpeed),
+    uWindStrength: uniform(windStrength),
+  };
+
+  const material = new NodeMaterial();
+  material.name = 'StylizedFlowerHeads';
+  material.side = THREE.DoubleSide;
+
+  const vUv = varying(vec2(), 'vFlowerHeadUv');
+
+  material.vertexNode = Fn(() => {
+    const iOrigin = attribute('iOrigin', 'vec3');
+    const iInfo = attribute('iInfo', 'vec4');
+    vUv.assign(uv());
+
+    const windDir = normalize(u.uWindDirection.add(vec2(1e-4, 0.0)));
+    const phase = time.mul(u.uWindSpeed).add(iInfo.y.mul(6.2831));
+    const flutter = sin(phase).mul(0.5).add(0.5).add(sin(phase.mul(2.33).add(1.7)).mul(0.3));
+    const sway = windDir.mul(flutter).mul(u.uWindStrength).mul(iInfo.z);
+    const center = iOrigin.add(vec3(sway.x, 0.0, sway.y));
+
+    // Static per-head roll so repeated petal sprites don't align.
+    const roll = iInfo.y.mul(6.2831);
+    const rollCos = cos(roll);
+    const rollSin = sin(roll);
+    const corner = vec2(
+      positionLocal.x.mul(rollCos).sub(positionLocal.y.mul(rollSin)),
+      positionLocal.x.mul(rollSin).add(positionLocal.y.mul(rollCos)),
+    );
+
+    // viewMatrix rows 0/1 = camera right/up (GLSL viewMatrix[c][r] indexing).
+    const cameraRight = vec3(
+      cameraViewMatrix.element(0).x,
+      cameraViewMatrix.element(1).x,
+      cameraViewMatrix.element(2).x,
+    );
+    const cameraUp = vec3(
+      cameraViewMatrix.element(0).y,
+      cameraViewMatrix.element(1).y,
+      cameraViewMatrix.element(2).y,
+    );
+    const headPosition = center.add(
+      cameraRight.mul(corner.x).add(cameraUp.mul(corner.y)).mul(iInfo.x),
+    );
+    const worldPosition = modelWorldMatrix.mul(vec4(headPosition, 1.0));
+    return cameraProjectionMatrix.mul(cameraViewMatrix).mul(worldPosition);
+  })();
+
+  material.fragmentNode = Fn(() => {
+    const sprite = u.uMap.sample(vUv).toVar();
+    Discard(sprite.a.lessThan(u.uAlphaCutoff));
+    return vec4(sprite.rgb, 1.0);
+  })();
+
+  material.uniforms = u;
+  return material;
+}
+
+/**
+ * Toon material for 3D bloom-head meshes (vertex-colored petals + center
+ * from createFlowerHeadGeometry), with the shared instance-phased wind bob.
+ */
+export function createFlowerBloomNodeMaterial({ windSpeed = 1, windStrength = 0 } = {}) {
+  const u = {
+    uWindSpeed: uniform(windSpeed),
+    uWindStrength: uniform(windStrength),
+  };
+
+  const material = new MeshToonNodeMaterial({ side: THREE.DoubleSide, vertexColors: true });
+  material.name = 'StylizedFlowerBloom';
+  material.positionNode = positionLocal.add(flowerSway(u));
+  // Petal-tinted floor for unlit faces: cup interiors and shaded petals
+  // read as darker petal color instead of toon-band black.
+  material.emissiveNode = vertexColor().rgb.mul(0.35);
+
+  material.uniforms = u;
+  return material;
+}
+
+/**
+ * Toon stem material for ground flowers. Bends with the same sway as the
+ * head, scaled by height fraction (root stays planted, tip follows the head).
+ */
+export function createFlowerStemNodeMaterial({ color = 0x4d8a3f, height = 1, windSpeed = 1, windStrength = 0 } = {}) {
+  const u = {
+    uHeight: uniform(Math.max(height, 1e-3)),
+    uWindSpeed: uniform(windSpeed),
+    uWindStrength: uniform(windStrength),
+  };
+
+  const material = new MeshToonNodeMaterial({ color });
+  material.name = 'FlowerPatchStem';
+
+  const bend = clamp(positionLocal.y.div(u.uHeight), 0.0, 1.0);
+  material.positionNode = positionLocal.add(flowerSway(u).mul(bend));
+
+  material.uniforms = u;
+  return material;
+}

package/src/shaders-tsl/grass.js

@@ -0,0 +1,193 @@
+// TSL port of src/shaders/grass.vert.glsl + grass.frag.glsl — instanced,
+// wind-swayed, character-aware stylized grass blades.
+//
+// Scene-shadow reception (getShadowMask) comes from the shared sun-shadow
+// pass; cloud shadows from the stylized-cloud-shadow chunk. Uniforms keep
+// their GLSL names on `.uniforms` (StylizedGrassField.applySettings writes
+// them by name on both backends).
+
+import * as THREE from 'three';
+import {
+  abs,
+  attribute,
+  cameraPosition,
+  cameraProjectionMatrix,
+  cameraViewMatrix,
+  clamp,
+  cos,
+  Discard,
+  distance,
+  dot,
+  float,
+  Fn,
+  fract,
+  length,
+  mix,
+  modelWorldMatrix,
+  normalize,
+  positionLocal,
+  pow,
+  sin,
+  smoothstep,
+  step,
+  uniform,
+  uv,
+  varying,
+  vec2,
+  vec3,
+  vec4,
+} from 'three/tsl';
+import { NodeMaterial } from 'three/webgpu';
+
+import { sampleEnvironmentSunShadow } from './chunks/environment-sun-shadow.js';
+import { stylizedCloudShadow } from './chunks/stylized-cloud-shadow.js';
+
+export function createGrassNodeMaterial(settings) {
+  const u = {
+    uBacklitStrength: uniform(settings.backlitStrength),
+    uBaseColor: uniform(new THREE.Color()),
+    uCloudShadowCoverage: uniform(settings.cloudShadowCoverage),
+    uCloudShadowScale: uniform(settings.cloudShadowScale),
+    uCloudShadowStrength: uniform(settings.cloudShadowStrength),
+    uCloudShadowVelocity: uniform(new THREE.Vector2(settings.cloudShadowVelocity[0], settings.cloudShadowVelocity[1])),
+    uFadeEnd: uniform(1e6 + 1),
+    uFadeStart: uniform(1e6),
+    uGustFrequency: uniform(settings.gustFrequency),
+    uGustSpeed: uniform(settings.gustSpeed),
+    uPushPosition: uniform(new THREE.Vector3(0, -1e5, 0)),
+    uPushRadius: uniform(settings.pushRadius),
+    uShadowStrength: uniform(settings.shadowStrength),
+    uShadowTint: uniform(new THREE.Color()),
+    uSkyColor: uniform(new THREE.Color()),
+    uSunColor: uniform(new THREE.Color()),
+    uSunDirection: uniform(new THREE.Vector3(...settings.sunDirection).normalize()),
+    uTime: uniform(0),
+    uTipColor: uniform(new THREE.Color()),
+    uWindDirection: uniform(new THREE.Vector2(settings.windDirection[0], settings.windDirection[1])),
+    uWindSpeed: uniform(settings.windSpeed),
+    uWindStrength: uniform(settings.windStrength),
+  };
+
+  const material = new NodeMaterial();
+  material.name = 'StylizedGrass';
+  material.side = THREE.DoubleSide;
+  material.fog = true;
+
+  const vUv = uv();
+  const vJitter = varying(float(), 'vGrassJitter');
+  const vGust = varying(float(), 'vGrassGust');
+  const vNormal = varying(vec3(), 'vGrassNormal');
+  const vWorldPosition = varying(vec3(), 'vGrassWorldPosition');
+
+  material.vertexNode = Fn(() => {
+    const iOrigin = attribute('iOrigin', 'vec3');
+    const iInfo = attribute('iInfo', 'vec4');
+
+    vJitter.assign(fract(iInfo.y.mul(13.73)));
+    const heightFraction = vUv.y;
+    const facing = vec2(cos(iInfo.w), sin(iInfo.w)).toVar();
+    const windDirection = normalize(u.uWindDirection.add(vec2(1e-4, 0.0))).toVar();
+
+    const bladePosition = vec3(iOrigin).toVar();
+    bladePosition.xz.addAssign(facing.mul(positionLocal.x.mul(iInfo.z)));
+    bladePosition.y.addAssign(heightFraction.mul(iInfo.x));
+
+    const bendCurve = heightFraction.mul(heightFraction).toVar();
+
+    // Static per-blade lean (see grass.vert.glsl).
+    const bowDirection = vec2(facing.y.negate(), facing.x);
+    const leanDirection = normalize(
+      bowDirection.mul(vJitter.sub(0.5))
+        .add(facing.mul(fract(iInfo.y.mul(7.31)).sub(0.5)))
+        .add(vec2(1e-4, 0.0)),
+    ).toVar();
+    const leanAmount = fract(iInfo.y.mul(3.17)).mul(0.5).add(0.18).toVar();
+    bladePosition.xz.addAssign(leanDirection.mul(leanAmount).mul(bendCurve).mul(iInfo.x));
+    bladePosition.y.subAssign(leanAmount.mul(leanAmount).mul(0.4).mul(bendCurve).mul(iInfo.x));
+
+    // Traveling gust wave.
+    const gustPhase = dot(iOrigin.xz, windDirection).mul(u.uGustFrequency)
+      .sub(u.uTime.mul(u.uGustSpeed));
+    const gust = sin(gustPhase).mul(0.5)
+      .add(sin(gustPhase.mul(0.43).add(1.7)).mul(0.3))
+      .add(sin(gustPhase.mul(2.3).add(iInfo.y.mul(4.0))).mul(0.2));
+    vGust.assign(clamp(gust.mul(0.5).add(0.5), 0.0, 1.0));
+
+    const phase = u.uTime.mul(u.uWindSpeed).add(iInfo.y.mul(6.2831))
+      .add(dot(iOrigin.xz, vec2(0.35, 0.28)));
+    const flutter = sin(phase).mul(0.5).add(0.5).add(sin(phase.mul(2.33).add(1.7)).mul(0.3));
+    const wind = windDirection.mul(flutter.mul(0.6).add(vGust.mul(1.1))).toVar();
+    bladePosition.xz.addAssign(wind.mul(u.uWindStrength).mul(bendCurve).mul(iInfo.x));
+
+    // Character push.
+    const fromPush = bladePosition.xz.sub(u.uPushPosition.xz).toVar();
+    const pushDistance = length(fromPush);
+    const push = smoothstep(0.0, u.uPushRadius, pushDistance).oneMinus()
+      .mul(step(abs(iOrigin.y.sub(u.uPushPosition.y)), 1.8));
+    bladePosition.xz.addAssign(
+      normalize(fromPush.add(vec2(1e-4, 0.0))).mul(push).mul(0.42).mul(bendCurve).mul(iInfo.x),
+    );
+    bladePosition.y.subAssign(push.mul(0.14).mul(bendCurve).mul(iInfo.x));
+
+    // Shared field normal, tilted by the current bend.
+    const tilt = wind.mul(u.uWindStrength).add(leanDirection.mul(leanAmount).mul(0.35)).mul(heightFraction);
+    vNormal.assign(normalize(vec3(tilt.x.mul(1.4), 1.0, tilt.y.mul(1.4))));
+
+    // Distance fade to a degenerate point.
+    const fadeDistance = distance(modelWorldMatrix.mul(vec4(iOrigin, 1.0)).xz, cameraPosition.xz);
+    const fade = smoothstep(u.uFadeStart, u.uFadeEnd, fadeDistance).oneMinus();
+    bladePosition.assign(mix(iOrigin, bladePosition, fade));
+
+    const worldPosition = modelWorldMatrix.mul(vec4(bladePosition, 1.0));
+    vWorldPosition.assign(worldPosition.xyz);
+    return cameraProjectionMatrix.mul(cameraViewMatrix).mul(worldPosition);
+  })();
+
+  material.fragmentNode = Fn(() => {
+    // Rounded taper silhouette.
+    const taper = pow(vUv.y, 1.6).mul(0.96).oneMinus();
+    const halfWidth = taper.mul(0.5);
+    Discard(abs(vUv.x.sub(0.5)).greaterThan(halfWidth));
+
+    const tipMix = smoothstep(0.1, 0.95, vUv.y.mul(vJitter.mul(0.3).add(0.85))).toVar();
+    const color = mix(u.uBaseColor, u.uTipColor, tipMix).toVar();
+    color.mulAssign(vJitter.mul(0.2).add(0.9));
+
+    // Dense-field AO toward the roots.
+    color.mulAssign(mix(0.64, 1.0, smoothstep(0.0, 0.62, vUv.y)));
+
+    const normal = normalize(vNormal);
+    const sunDirection = normalize(u.uSunDirection);
+    const cloudShadow = stylizedCloudShadow(
+      vWorldPosition.xz, u.uTime,
+      u.uCloudShadowStrength, u.uCloudShadowCoverage, u.uCloudShadowScale, u.uCloudShadowVelocity,
+    );
+    const sceneShadow = mix(1.0, sampleEnvironmentSunShadow(vWorldPosition), u.uShadowStrength);
+    const sunVisibility = cloudShadow.mul(sceneShadow).toVar();
+    const wrap = dot(normal, sunDirection).mul(0.5).add(0.5);
+    const litBand = smoothstep(0.44, 0.54, wrap).mul(sunVisibility).toVar();
+    color.mulAssign(mix(0.86, 1.06, litBand));
+    color.mulAssign(mix(vec3(1.0), u.uSunColor, litBand.mul(0.25)));
+
+    // Occlusion darkening shared with the terrain response.
+    color.mulAssign(mix(u.uShadowTint, vec3(1.0), sunVisibility));
+
+    // Sky fill + gust sheen.
+    color.addAssign(u.uSkyColor.mul(litBand.oneMinus()).mul(0.07));
+    const sheen = smoothstep(0.78, 1.0, vGust).mul(tipMix);
+    color.addAssign(u.uSunColor.mul(sheen).mul(0.22).mul(litBand));
+
+    // Backlit translucency.
+    const viewDirection = normalize(cameraPosition.sub(vWorldPosition));
+    const backlit = pow(clamp(dot(viewDirection, sunDirection.negate()), 0.0, 1.0), 3.0);
+    color.addAssign(
+      u.uSunColor.mul(backlit).mul(tipMix).mul(u.uBacklitStrength)
+        .mul(sunVisibility.mul(0.65).add(0.35)),
+    );
+
+    return vec4(color, 1.0);
+  })();
+
+  material.uniforms = u;
+  return material;
+}