@call-me-sensei/toonlab 0.2.0 → 0.3.0

package/src/shaders-tsl/flower.js

@@ -17,13 +17,18 @@ import {
   Fn,
   instanceIndex,
   length,
+  floor,
+  max,
   mix,
   modelWorldMatrix,
   normalize,
+  normalWorld,
   positionLocal,
+  positionWorld,
   pow,
   sin,
   smoothstep,
+  step,
   texture,
   time,
   uniform,
@@ -35,12 +40,148 @@ import {
   vec4,
   attribute,
 } from 'three/tsl';
-import { MeshBasicNodeMaterial, MeshToonNodeMaterial, NodeMaterial } from 'three/webgpu';
+import { MeshBasicNodeMaterial, NodeMaterial } from 'three/webgpu';
 
 import { sampleEnvironmentSunShadow } from './chunks/environment-sun-shadow.js';
+import { stylizedCloudShadow } from './chunks/stylized-cloud-shadow.js';
+import {
+  createVegetationStyleUniforms,
+  shadeVegetationSurface,
+  tagVegetationRole,
+} from './chunks/vegetation-style.js';
+
+const FLOWER_HEAD_ROLES = Object.freeze(['flowerPetal', 'flowerCenter']);
+
+function flowerSurfaceUniforms(vegetationShader, role = FLOWER_HEAD_ROLES) {
+  const style = createVegetationStyleUniforms(vegetationShader, role);
+  return {
+    uCloudShadowCoverage: uniform(0.45),
+    uCloudShadowScale: uniform(0.012),
+    uCloudShadowStrength: uniform(0),
+    uCloudShadowVelocity: uniform(new THREE.Vector2(0.02, 0.006)),
+    uSkyColor: uniform(new THREE.Color().setRGB(0.62, 0.78, 0.95, THREE.SRGBColorSpace)),
+    uSunColor: uniform(new THREE.Color().setRGB(1, 0.96, 0.84, THREE.SRGBColorSpace)),
+    uSunDirection: uniform(new THREE.Vector3(0.35, 0.72, 0.42).normalize()),
+    ...style,
+  };
+}
 
-export function createFlowerNodeMaterial(settings) {
-  const u = {
+function resolveFlowerCenterRadius(map, centerRadius) {
+  const value = centerRadius
+    ?? map?.userData?.toonlabFlower?.centerRadius
+    ?? map?.userData?.toonlabFlowerCenterRadius
+    ?? 0;
+  return THREE.MathUtils.clamp(Number(value) || 0, 0, 0.5);
+}
+
+function flowerCloudShadow(u, worldPosition) {
+  return stylizedCloudShadow(
+    worldPosition.xz,
+    time,
+    u.uCloudShadowStrength,
+    u.uCloudShadowCoverage,
+    u.uCloudShadowScale,
+    u.uCloudShadowVelocity,
+  );
+}
+
+function aliasLegacyFlowerUniforms(u) {
+  // The old one-field Flower shader remains a compatibility adapter, but all
+  // petal variants now share the same underlying style uniform.
+  u.uUnlitLift = u.uStyleFlowerUnlitPetalLift;
+  return u;
+}
+
+function shadeFlowerHead({
+  centerBaseColor,
+  centerMask,
+  normal,
+  petalBaseColor,
+  sceneShadow,
+  u,
+  worldPosition,
+}) {
+  const cloudShadow = flowerCloudShadow(u, worldPosition);
+  const petal = shadeVegetationSurface({
+    baseColor: petalBaseColor,
+    bandSoftness: u.uStyleFlowerBandSoftness,
+    bandThreshold: u.uStyleFlowerBandThreshold,
+    cloudShadow,
+    cloudShadowResponse: 1,
+    normal,
+    sceneShadow,
+    sceneShadowResponse: u.uStyleFlowerSceneShadowResponse,
+    shadowFloor: u.uStyleThinSurfaceTransmissionShadowFloor,
+    skyColor: u.uSkyColor,
+    sunColor: u.uSunColor,
+    sunDirection: u.uSunDirection,
+    transmissionMultiplier: u.uStyleFlowerBacklitStrength.div(0.35)
+      .mul(u.uStyleFlowerPetalTransmissionMultiplier),
+    u,
+    worldPosition,
+  });
+  petal.color.addAssign(
+    petalBaseColor.mul(petal.band.oneMinus()).mul(u.uStyleFlowerUnlitPetalLift),
+  );
+
+  // Centers are opaque botanical structures, not thin petals. They share the
+  // IP lighting/weather and flower band treatment, but explicitly opt out of
+  // diffuse-wrap, two-sided, normal-bias, and transmission profile controls.
+  const centerSceneShadow = mix(1.0, sceneShadow, u.uStyleFlowerCenterShadowResponse);
+  const center = shadeVegetationSurface({
+    baseColor: centerBaseColor,
+    bandSoftness: u.uStyleFlowerBandSoftness,
+    bandThreshold: u.uStyleFlowerBandThreshold,
+    cloudShadow,
+    cloudShadowResponse: 1,
+    diffuseWrap: float(0.5),
+    normal,
+    normalUpBias: float(0),
+    sceneShadow: centerSceneShadow,
+    sceneShadowResponse: u.uStyleFlowerSceneShadowResponse,
+    shadowFloor: float(0.35),
+    skyColor: u.uSkyColor,
+    sunColor: u.uSunColor,
+    sunDirection: u.uSunDirection,
+    transmissionPower: float(3.5),
+    transmissionShadowFloor: float(0.35),
+    transmissionStrength: float(0),
+    twoSidedLighting: float(0),
+    u,
+    worldPosition,
+  });
+  const centerColor = mix(centerBaseColor, center.color, u.uStyleFlowerCenterLightResponse);
+  return mix(petal.color, centerColor, centerMask);
+}
+
+// Textured head variants carry petal and center pixels in one draw call. The
+// sprite texture publishes its semantic center radius (see flowerSpecies.js),
+// so the shader does not guess from color and recoloring cannot change roles.
+function shadeFlowerSprite({ normal, sceneShadow, sprite, surfaceUv, u, worldPosition }) {
+  const radius = length(surfaceUv.sub(vec2(0.5, 0.5))).toVar();
+  const centerFeather = u.uCenterRadius.mul(0.12).max(0.006);
+  const centerMask = smoothstep(
+    u.uCenterRadius.add(centerFeather),
+    u.uCenterRadius.sub(centerFeather),
+    radius,
+  ).mul(step(0.001, u.uCenterRadius)).toVar();
+  const petalEdge = clamp(radius.mul(2), 0, 1).mul(centerMask.oneMinus());
+  const petalBaseColor = sprite.rgb.mul(
+    petalEdge.mul(u.uStyleFlowerCupDarkeningStrength).mul(0.8).oneMinus(),
+  ).toVar();
+  return shadeFlowerHead({
+    centerBaseColor: sprite.rgb,
+    centerMask,
+    normal,
+    petalBaseColor,
+    sceneShadow,
+    u,
+    worldPosition,
+  });
+}
+
+export function createFlowerNodeMaterial(settings, vegetationShader = null) {
+  const u = aliasLegacyFlowerUniforms({
     uCenterColor: uniform(new THREE.Color()),
     uPetalColor: uniform(new THREE.Color()),
     uShadowStrength: uniform(settings.shadowStrength),
@@ -48,7 +189,8 @@ export function createFlowerNodeMaterial(settings) {
     uWindDirection: uniform(new THREE.Vector2(settings.windDirection[0], settings.windDirection[1])),
     uWindSpeed: uniform(settings.windSpeed),
     uWindStrength: uniform(settings.windStrength),
-  };
+    ...flowerSurfaceUniforms(vegetationShader),
+  });
 
   const material = new NodeMaterial();
   material.name = 'StylizedFlowers';
@@ -57,6 +199,7 @@ export function createFlowerNodeMaterial(settings) {
 
   const vPetal = varying(vec2(), 'vFlowerPetal');
   const vPhase = varying(float(), 'vFlowerPhase');
+  const vWorldNormal = varying(vec3(), 'vFlowerWorldNormal');
   const vWorldPosition = varying(vec3(), 'vFlowerWorldPosition');
 
   material.vertexNode = Fn(() => {
@@ -84,6 +227,11 @@ export function createFlowerNodeMaterial(settings) {
       cameraViewMatrix.element(1).y,
       cameraViewMatrix.element(2).y,
     );
+    vWorldNormal.assign(normalize(
+      vec3(0, 1, 0)
+        .add(cameraRight.mul(positionLocal.x).mul(0.3))
+        .add(cameraUp.mul(positionLocal.y).mul(0.3)),
+    ));
     const flowerPosition = center.add(
       cameraRight.mul(positionLocal.x).add(cameraUp.mul(positionLocal.y)).mul(iInfo.x),
     );
@@ -102,19 +250,27 @@ export function createFlowerNodeMaterial(settings) {
     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));
+    const petalBaseColor = u.uPetalColor.mul(
+      radius.div(petalEdge).mul(u.uStyleFlowerCupDarkeningStrength).oneMinus(),
+    );
 
-    // 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));
+    const color = shadeFlowerHead({
+      centerBaseColor: u.uCenterColor,
+      centerMask,
+      normal: normalize(vWorldNormal),
+      petalBaseColor,
+      sceneShadow,
+      u,
+      worldPosition: vWorldPosition,
+    });
 
     return vec4(color, 1.0);
   })();
 
   material.uniforms = u;
-  return material;
+  return tagVegetationRole(material, FLOWER_HEAD_ROLES, 'procedural');
 }
 
 // Shared instance-phased sway for the tree lab's flower patch. Heads use the
@@ -132,13 +288,18 @@ function flowerSway(u) {
  * 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 = {
+export function createFlowerHeadNodeMaterial({
+  map, alphaCutoff = 0.4, centerRadius = null, vegetationShader = null,
+  windSpeed = 1, windStrength = 0,
+} = {}) {
+  const u = aliasLegacyFlowerUniforms({
     uAlphaCutoff: uniform(alphaCutoff),
+    uCenterRadius: uniform(resolveFlowerCenterRadius(map, centerRadius)),
     uMap: texture(map),
     uWindSpeed: uniform(windSpeed),
     uWindStrength: uniform(windStrength),
-  };
+    ...flowerSurfaceUniforms(vegetationShader),
+  });
 
   const material = new MeshBasicNodeMaterial();
   material.name = 'FlowerPatchHead';
@@ -146,11 +307,23 @@ export function createFlowerHeadNodeMaterial({ map, alphaCutoff = 0.4, windSpeed
   material.transparent = true;
 
   material.positionNode = positionLocal.add(flowerSway(u));
-  material.colorNode = u.uMap; // TextureNode samples at uv() by default
+  material.colorNode = Fn(() => {
+    const sprite = u.uMap.sample(uv());
+    const sceneShadow = mix(1.0, sampleEnvironmentSunShadow(positionWorld), 0.85);
+    const color = shadeFlowerSprite({
+      normal: normalize(normalWorld),
+      sceneShadow,
+      sprite,
+      surfaceUv: uv(),
+      u,
+      worldPosition: positionWorld,
+    });
+    return vec4(color, sprite.a);
+  })();
   material.alphaTestNode = u.uAlphaCutoff;
 
   material.uniforms = u;
-  return material;
+  return tagVegetationRole(material, FLOWER_HEAD_ROLES, 'cutout');
 }
 
 /**
@@ -160,21 +333,26 @@ export function createFlowerHeadNodeMaterial({ map, alphaCutoff = 0.4, windSpeed
  * never renders edge-on, from any camera.
  */
 export function createFlowerHeadBillboardNodeMaterial({
-  map, alphaCutoff = 0.4, windDirection = [1, 0.3], windSpeed = 1, windStrength = 0,
+  map, alphaCutoff = 0.4, centerRadius = null, vegetationShader = null,
+  windDirection = [1, 0.3], windSpeed = 1, windStrength = 0,
 } = {}) {
-  const u = {
+  const u = aliasLegacyFlowerUniforms({
     uAlphaCutoff: uniform(alphaCutoff),
+    uCenterRadius: uniform(resolveFlowerCenterRadius(map, centerRadius)),
     uMap: texture(map),
     uWindDirection: uniform(new THREE.Vector2(windDirection[0], windDirection[1])),
     uWindSpeed: uniform(windSpeed),
     uWindStrength: uniform(windStrength),
-  };
+    ...flowerSurfaceUniforms(vegetationShader),
+  });
 
   const material = new NodeMaterial();
   material.name = 'StylizedFlowerHeads';
   material.side = THREE.DoubleSide;
 
   const vUv = varying(vec2(), 'vFlowerHeadUv');
+  const vWorldNormal = varying(vec3(), 'vFlowerHeadNormal');
+  const vWorldPosition = varying(vec3(), 'vFlowerHeadWorldPosition');
 
   material.vertexNode = Fn(() => {
     const iOrigin = attribute('iOrigin', 'vec3');
@@ -207,61 +385,132 @@ export function createFlowerHeadBillboardNodeMaterial({
       cameraViewMatrix.element(1).y,
       cameraViewMatrix.element(2).y,
     );
+    vWorldNormal.assign(normalize(cameraUp.mul(0.65).add(vec3(0, 1, 0).mul(0.35))));
     const headPosition = center.add(
       cameraRight.mul(corner.x).add(cameraUp.mul(corner.y)).mul(iInfo.x),
     );
     const worldPosition = modelWorldMatrix.mul(vec4(headPosition, 1.0));
+    vWorldPosition.assign(worldPosition.xyz);
     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);
+    const sceneShadow = mix(1.0, sampleEnvironmentSunShadow(vWorldPosition), 0.85);
+    const color = shadeFlowerSprite({
+      normal: normalize(vWorldNormal),
+      sceneShadow,
+      sprite,
+      surfaceUv: vUv,
+      u,
+      worldPosition: vWorldPosition,
+    });
+    return vec4(color, 1.0);
   })();
 
   material.uniforms = u;
-  return material;
+  return tagVegetationRole(material, FLOWER_HEAD_ROLES, 'billboard');
 }
 
 /**
  * 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 = {
+export function createFlowerBloomNodeMaterial({
+  unlitLift = 0.35, vegetationShader = null, windSpeed = 1, windStrength = 0,
+} = {}) {
+  const u = aliasLegacyFlowerUniforms({
     uWindSpeed: uniform(windSpeed),
     uWindStrength: uniform(windStrength),
-  };
+    ...flowerSurfaceUniforms(vegetationShader),
+  });
+  if (!vegetationShader) u.uStyleFlowerUnlitPetalLift.value = unlitLift;
 
-  const material = new MeshToonNodeMaterial({ side: THREE.DoubleSide, vertexColors: true });
+  const material = new NodeMaterial();
   material.name = 'StylizedFlowerBloom';
+  material.side = THREE.DoubleSide;
   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.fragmentNode = Fn(() => {
+    const centerMask = attribute('flowerRole', 'float');
+    const petalEdge = abs(uv().x.sub(0.5)).mul(2).mul(centerMask.oneMinus());
+    const rawColor = vertexColor().rgb;
+    const petalBaseColor = rawColor.mul(
+      petalEdge.mul(u.uStyleFlowerCupDarkeningStrength).mul(0.8).oneMinus(),
+    );
+    const sceneShadow = sampleEnvironmentSunShadow(positionWorld);
+    const color = shadeFlowerHead({
+      centerBaseColor: rawColor,
+      centerMask,
+      normal: normalize(normalWorld),
+      petalBaseColor,
+      sceneShadow,
+      u,
+      worldPosition: positionWorld,
+    });
+    return vec4(color, 1.0);
+  })();
 
   material.uniforms = u;
-  return material;
+  return tagVegetationRole(material, FLOWER_HEAD_ROLES, 'mesh');
 }
 
 /**
  * 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 } = {}) {
+export function createFlowerStemNodeMaterial({
+  color = 0x4d8a3f, height = 1, vegetationShader = null, windSpeed = 1, windStrength = 0,
+} = {}) {
   const u = {
+    uBaseColor: uniform(new THREE.Color(color)),
     uHeight: uniform(Math.max(height, 1e-3)),
     uWindSpeed: uniform(windSpeed),
     uWindStrength: uniform(windStrength),
+    ...flowerSurfaceUniforms(vegetationShader, 'herbaceousStem'),
   };
 
-  const material = new MeshToonNodeMaterial({ color });
+  const material = new NodeMaterial();
   material.name = 'FlowerPatchStem';
 
   const bend = clamp(positionLocal.y.div(u.uHeight), 0.0, 1.0);
   material.positionNode = positionLocal.add(flowerSway(u).mul(bend));
+  material.fragmentNode = Fn(() => {
+    const normal = normalize(normalWorld);
+    const sunDirection = normalize(u.uSunDirection);
+    const wrap = dot(normal, sunDirection).mul(0.5).add(0.5);
+    const steps = max(floor(u.uStyleStemBandCount), 2.0);
+    const intervals = max(steps.sub(1.0), 1.0);
+    const stepped = floor(clamp(wrap, 0, 1).mul(intervals).add(1e-4)).div(intervals);
+    const band = mix(stepped, wrap, u.uStyleStemBandSoftness);
+    const shaded = shadeVegetationSurface({
+      bandOverride: band,
+      baseColor: u.uBaseColor,
+      bandSoftness: u.uStyleStemBandSoftness,
+      bandThreshold: 0.5,
+      cloudShadow: flowerCloudShadow(u, positionWorld),
+      cloudShadowResponse: 1,
+      diffuseWrap: float(0.5),
+      normal,
+      normalUpBias: float(0),
+      sceneShadow: sampleEnvironmentSunShadow(positionWorld),
+      sceneShadowResponse: 1,
+      shadowFloor: u.uStyleStemShadowFloor,
+      skyColor: u.uSkyColor,
+      skyFillStrength: u.uStyleLightingSkyFillStrength.add(u.uStyleStemSkyFillStrength),
+      rimStrength: u.uStyleLightingRimStrength.add(u.uStyleStemRimStrength),
+      sunColor: u.uSunColor,
+      sunDirection,
+      transmissionPower: float(3.5),
+      transmissionShadowFloor: float(0.35),
+      transmissionStrength: u.uStyleStemTransmissionStrength,
+      twoSidedLighting: float(0),
+      u,
+      worldPosition: positionWorld,
+    });
+    return vec4(shaded.color, 1.0);
+  })();
 
   material.uniforms = u;
-  return material;
+  return tagVegetationRole(material, 'herbaceousStem', 'mesh');
 }

package/src/shaders-tsl/grass.js

@@ -41,10 +41,15 @@ import { NodeMaterial } from 'three/webgpu';
 
 import { sampleEnvironmentSunShadow } from './chunks/environment-sun-shadow.js';
 import { stylizedCloudShadow } from './chunks/stylized-cloud-shadow.js';
+import {
+  createVegetationStyleUniforms,
+  shadeVegetationSurface,
+  tagVegetationRole,
+} from './chunks/vegetation-style.js';
 
-export function createGrassNodeMaterial(settings) {
+export function createGrassNodeMaterial(settings, vegetationShader = null) {
+  const styleUniforms = createVegetationStyleUniforms(vegetationShader, 'grassBlade');
   const u = {
-    uBacklitStrength: uniform(settings.backlitStrength),
     uBaseColor: uniform(new THREE.Color()),
     uCloudShadowCoverage: uniform(settings.cloudShadowCoverage),
     uCloudShadowScale: uniform(settings.cloudShadowScale),
@@ -53,6 +58,7 @@ export function createGrassNodeMaterial(settings) {
     uFadeEnd: uniform(1e6 + 1),
     uFadeStart: uniform(1e6),
     uGustFrequency: uniform(settings.gustFrequency),
+    uGustResponse: uniform(settings.gustResponse),
     uGustSpeed: uniform(settings.gustSpeed),
     uPushPosition: uniform(new THREE.Vector3(0, -1e5, 0)),
     uPushRadius: uniform(settings.pushRadius),
@@ -64,9 +70,14 @@ export function createGrassNodeMaterial(settings) {
     uTime: uniform(0),
     uTipColor: uniform(new THREE.Color()),
     uWindDirection: uniform(new THREE.Vector2(settings.windDirection[0], settings.windDirection[1])),
+    uWindResponse: uniform(settings.windResponse),
     uWindSpeed: uniform(settings.windSpeed),
     uWindStrength: uniform(settings.windStrength),
+    ...styleUniforms,
   };
+  if (!vegetationShader) u.uStyleGrassBacklitStrength.value = settings.backlitStrength;
+  // Compatibility alias: legacy runtime setters now target the canonical style node.
+  u.uBacklitStrength = u.uStyleGrassBacklitStrength;
 
   const material = new NodeMaterial();
   material.name = 'StylizedGrass';
@@ -92,7 +103,7 @@ export function createGrassNodeMaterial(settings) {
     bladePosition.xz.addAssign(facing.mul(positionLocal.x.mul(iInfo.z)));
     bladePosition.y.addAssign(heightFraction.mul(iInfo.x));
 
-    const bendCurve = heightFraction.mul(heightFraction).toVar();
+    const bendCurve = pow(heightFraction, u.uStyleGrassBendExponent).toVar();
 
     // Static per-blade lean (see grass.vert.glsl).
     const bowDirection = vec2(facing.y.negate(), facing.x);
@@ -116,8 +127,11 @@ export function createGrassNodeMaterial(settings) {
     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));
+    const wind = windDirection.mul(
+      flutter.mul(0.6).add(vGust.mul(1.1).mul(u.uGustResponse)),
+    ).toVar();
+    const windAmplitude = u.uWindStrength.mul(u.uWindResponse).toVar();
+    bladePosition.xz.addAssign(wind.mul(windAmplitude).mul(bendCurve).mul(iInfo.x));
 
     // Character push.
     const fromPush = bladePosition.xz.sub(u.uPushPosition.xz).toVar();
@@ -125,12 +139,15 @@ export function createGrassNodeMaterial(settings) {
     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),
+      normalize(fromPush.add(vec2(1e-4, 0.0))).mul(push).mul(0.42)
+        .mul(bendCurve).mul(iInfo.x).mul(u.uStyleGrassInteractionResponse),
+    );
+    bladePosition.y.subAssign(
+      push.mul(0.14).mul(bendCurve).mul(iInfo.x).mul(u.uStyleGrassInteractionResponse),
     );
-    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);
+    const tilt = wind.mul(windAmplitude).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.
@@ -149,12 +166,20 @@ export function createGrassNodeMaterial(settings) {
     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 tipMix = smoothstep(
+      u.uStyleGrassTipGradientStart,
+      u.uStyleGrassTipGradientEnd,
+      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));
+    color.mulAssign(vJitter.sub(0.5).mul(u.uStyleGrassColorVariationStrength).add(1.0));
 
     // Dense-field AO toward the roots.
-    color.mulAssign(mix(0.64, 1.0, smoothstep(0.0, 0.62, vUv.y)));
+    color.mulAssign(mix(
+      u.uStyleGrassRootOcclusionStrength.oneMinus(),
+      1.0,
+      smoothstep(0.0, u.uStyleGrassRootOcclusionHeight, vUv.y),
+    ));
 
     const normal = normalize(vNormal);
     const sunDirection = normalize(u.uSunDirection);
@@ -163,31 +188,33 @@ export function createGrassNodeMaterial(settings) {
       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)),
+    const shaded = shadeVegetationSurface({
+      baseColor: color,
+      bandSoftness: u.uStyleGrassBandSoftness,
+      bandThreshold: u.uStyleGrassBandThreshold,
+      cloudShadow,
+      cloudShadowResponse: u.uStyleGrassCloudShadowResponse,
+      materialShadowColor: u.uShadowTint,
+      normal,
+      sceneShadow,
+      sceneShadowResponse: u.uStyleGrassSceneShadowResponse,
+      shadowFloor: u.uStyleGrassShadowFloor,
+      skyColor: u.uSkyColor,
+      sunColor: u.uSunColor,
+      sunDirection,
+      transmissionMultiplier: u.uStyleGrassBacklitStrength.div(0.35).mul(tipMix),
+      u,
+      worldPosition: vWorldPosition,
+    });
+
+    const sheen = smoothstep(u.uStyleGrassGustSheenThreshold, 1.0, vGust).mul(tipMix);
+    shaded.color.addAssign(
+      u.uSunColor.mul(sheen).mul(u.uStyleGrassGustSheenStrength).mul(shaded.band),
     );
 
-    return vec4(color, 1.0);
+    return vec4(shaded.color, 1.0);
   })();
 
   material.uniforms = u;
-  return material;
+  return tagVegetationRole(material, 'grassBlade', 'procedural');
 }