@call-me-sensei/toonlab 0.2.0 → 0.3.0

package/src/vegetation/stylizedFlower.js

@@ -90,6 +90,7 @@ export class StylizedFlower extends StylizedTree {
       trunkMaterial: createFlowerStemNodeMaterial({
         color: stemColor,
         height: trunk.height,
+        vegetationShader: treeOptions.vegetationShader,
       }),
     });
     this.name = 'StylizedFlower';
@@ -169,6 +170,7 @@ export class StylizedFlower extends StylizedTree {
     // bloom faces up-and-out along its twig like a real flower head instead
     // of tracking the camera.
     const headMaterial = createFlowerBloomNodeMaterial({
+      vegetationShader: treeOptions.vegetationShader,
       windSpeed: 1.1,
       windStrength: headSize * 0.04,
     });
@@ -205,6 +207,86 @@ export class StylizedFlower extends StylizedTree {
     };
   }
 
+  setWind(options = {}) {
+    super.setWind(options);
+    for (const material of [this.headsMesh?.material, this.trunkMesh?.material]) {
+      const uniforms = material?.uniforms;
+      if (!uniforms) continue;
+      if (options.speed !== undefined && uniforms.uWindSpeed) uniforms.uWindSpeed.value = Number(options.speed) || 0;
+      if (options.strength !== undefined && uniforms.uWindStrength) uniforms.uWindStrength.value = Math.max(Number(options.strength) || 0, 0);
+      if (options.direction !== undefined && uniforms.uWindDirection) {
+        const direction = Array.isArray(options.direction)
+          ? options.direction
+          : [options.direction.x, options.direction.y ?? options.direction.z];
+        uniforms.uWindDirection.value.set(Number(direction[0]) || 0, Number(direction[1]) || 0);
+      }
+    }
+    return this;
+  }
+
+  setSun(options = {}) {
+    super.setSun(options);
+    const uniforms = this.headsMesh?.material?.uniforms;
+    if (!uniforms) return this;
+    if (options.direction !== undefined && uniforms.uSunDirection) {
+      const direction = Array.isArray(options.direction)
+        ? options.direction
+        : [options.direction.x, options.direction.y, options.direction.z];
+      uniforms.uSunDirection.value.set(...direction).normalize();
+    }
+    if (options.color !== undefined && uniforms.uSunColor) {
+      const color = Array.isArray(options.color)
+        ? options.color
+        : [options.color.r, options.color.g, options.color.b];
+      uniforms.uSunColor.value.setRGB(...color, THREE.SRGBColorSpace);
+    }
+    if (options.sky !== undefined && uniforms.uSkyColor) {
+      const sky = Array.isArray(options.sky)
+        ? options.sky
+        : [options.sky.r, options.sky.g, options.sky.b];
+      uniforms.uSkyColor.value.setRGB(...sky, THREE.SRGBColorSpace);
+    }
+    return this;
+  }
+
+  setCloudShadow(options = {}) {
+    super.setCloudShadow(options);
+    for (const material of [this.headsMesh?.material, this.trunkMesh?.material]) {
+      const uniforms = material?.uniforms;
+      if (!uniforms) continue;
+      if (options.strength !== undefined && uniforms.uCloudShadowStrength) {
+        uniforms.uCloudShadowStrength.value = THREE.MathUtils.clamp(Number(options.strength) || 0, 0, 1);
+      }
+      if (options.coverage !== undefined && uniforms.uCloudShadowCoverage) {
+        uniforms.uCloudShadowCoverage.value = THREE.MathUtils.clamp(Number(options.coverage) || 0, 0, 1);
+      }
+      if (options.scale !== undefined && uniforms.uCloudShadowScale) {
+        uniforms.uCloudShadowScale.value = Math.max(Number(options.scale) || 0.0001, 0.0001);
+      }
+      if (options.velocity !== undefined && uniforms.uCloudShadowVelocity) {
+        const velocity = Array.isArray(options.velocity)
+          ? options.velocity
+          : [options.velocity.x, options.velocity.y];
+        uniforms.uCloudShadowVelocity.value.set(Number(velocity[0]) || 0, Number(velocity[1]) || 0);
+      }
+    }
+    return this;
+  }
+
+  setSurfaceWeather(options = {}) {
+    super.setSurfaceWeather?.(options);
+    for (const material of [this.headsMesh?.material, this.trunkMesh?.material]) {
+      const uniforms = material?.uniforms;
+      if (uniforms?.uWetness && options.wetness !== undefined) {
+        uniforms.uWetness.value = THREE.MathUtils.clamp(Number(options.wetness) || 0, 0, 1);
+      }
+      if (uniforms?.uSnowCover && options.snowCover !== undefined) {
+        uniforms.uSnowCover.value = THREE.MathUtils.clamp(Number(options.snowCover) || 0, 0, 1);
+      }
+    }
+    return this;
+  }
+
   dispose() {
     this.headsMesh.geometry.dispose();
     this.headsMesh.material.dispose();

package/src/vegetation/stylizedFlowers.js

@@ -1,6 +1,7 @@
 import * as THREE from 'three';
 
 import { createFlowerNodeMaterial } from '../shaders-tsl/flower.js';
+import { applyVegetationShader } from './vegetationShaders.js';
 
 function setSrgbColor(color, rgb) {
   color.setRGB(rgb[0], rgb[1], rgb[2], THREE.SRGBColorSpace);
@@ -254,7 +255,7 @@ export const FLOWER_SETTING_FIELD_SCHEMA = Object.freeze(
 // existing callers keep working unchanged.
 export class StylizedFlowerField extends THREE.Mesh {
   constructor(options = {}) {
-    const { placements = [] } = cleanObject(options);
+    const { placements = [], vegetationShader = null } = cleanObject(options);
     const settings = createFlowerSettings(options);
     const { sizeRange } = settings;
 
@@ -283,7 +284,7 @@ export class StylizedFlowerField extends THREE.Mesh {
     geometry.instanceCount = placements.length;
     geometry.boundingSphere = new THREE.Sphere(new THREE.Vector3(), 1e5);
 
-    const material = createFlowerNodeMaterial(settings);
+    const material = createFlowerNodeMaterial(settings, vegetationShader);
     setSrgbColor(material.uniforms.uPetalColor.value, settings.petalColor);
     setSrgbColor(material.uniforms.uCenterColor.value, settings.centerColor);
 
@@ -324,14 +325,54 @@ export class StylizedFlowerField extends THREE.Mesh {
   }
 
   setWind({ direction, speed, strength } = {}) {
-    this.applySettings({
-      windDirection: direction,
-      windSpeed: speed,
-      windStrength: strength,
-    });
+    const uniforms = this.material.uniforms;
+    if (direction !== undefined) {
+      const next = vectorArray(direction, this.settings.windDirection, 2);
+      uniforms.uWindDirection.value.set(next[0], next[1]);
+    }
+    if (speed !== undefined) uniforms.uWindSpeed.value = finiteNumber(speed, uniforms.uWindSpeed.value);
+    if (strength !== undefined) uniforms.uWindStrength.value = finiteNumber(strength, uniforms.uWindStrength.value, { min: 0 });
     return this;
   }
 
+  setSun({ direction, color, sky } = {}) {
+    const uniforms = this.material.uniforms;
+    if (direction !== undefined && uniforms.uSunDirection) {
+      const next = vectorArray(direction, [0.35, 0.72, 0.42], 3);
+      uniforms.uSunDirection.value.set(...next).normalize();
+    }
+    if (color !== undefined && uniforms.uSunColor) setSrgbColor(uniforms.uSunColor.value, colorArray(color, [1, 0.96, 0.84]));
+    if (sky !== undefined && uniforms.uSkyColor) setSrgbColor(uniforms.uSkyColor.value, colorArray(sky, [0.62, 0.78, 0.95]));
+    return this;
+  }
+
+  setCloudShadow({ strength, coverage, scale, velocity } = {}) {
+    const uniforms = this.material.uniforms;
+    if (strength !== undefined) uniforms.uCloudShadowStrength.value = finiteNumber(strength, uniforms.uCloudShadowStrength.value, { min: 0, max: 1 });
+    if (coverage !== undefined) uniforms.uCloudShadowCoverage.value = finiteNumber(coverage, uniforms.uCloudShadowCoverage.value, { min: 0, max: 1 });
+    if (scale !== undefined) uniforms.uCloudShadowScale.value = finiteNumber(scale, uniforms.uCloudShadowScale.value, { min: 0.0001 });
+    if (velocity !== undefined) {
+      const next = vectorArray(velocity, [0.02, 0.006], 2);
+      uniforms.uCloudShadowVelocity.value.set(next[0], next[1]);
+    }
+    return this;
+  }
+
+  setSurfaceWeather({ wetness, snowCover } = {}) {
+    const uniforms = this.material.uniforms;
+    if (uniforms.uWetness && wetness !== undefined) {
+      uniforms.uWetness.value = finiteNumber(wetness, uniforms.uWetness.value, { min: 0, max: 1 });
+    }
+    if (uniforms.uSnowCover && snowCover !== undefined) {
+      uniforms.uSnowCover.value = finiteNumber(snowCover, uniforms.uSnowCover.value, { min: 0, max: 1 });
+    }
+    return this;
+  }
+
+  setVegetationShader(profile) {
+    return applyVegetationShader(this, profile);
+  }
+
   update(delta) {
     this.material.uniforms.uTime.value += Math.min(Math.max(delta ?? 0.016, 0), 0.1);
     return this;

package/src/vegetation/stylizedForest.js

@@ -1,4 +1,5 @@
 import * as THREE from 'three';
+import { applyVegetationShader } from './vegetationShaders.js';
 import { MeshBasicNodeMaterial } from 'three/webgpu';
 import {
   clamp, exp, length, max, mix, positionView, positionWorld, texture, uniform, vec4, vertexColor,
@@ -90,12 +91,14 @@ export class StylizedForest extends THREE.Group {
     castShadow = true,          // near live clones cast; anchors the forest to the ground
     renderer = null,            // enables texture-baked billboard impostors (strongly recommended)
     impostorTextureSize = 256,  // billboard bake resolution per variant
+    vegetationShader = null,
   } = {}) {
     super();
     this.name = 'StylizedForest';
     this.detailDistance = detailDistance;
     this.detailCount = detailCount;
     this.updateInterval = updateInterval;
+    this.hasBakedImpostors = Boolean(renderer);
     this._timer = updateInterval; // force an assignment on the first update
 
     const variantCount = Math.max(1, Math.min(variants, Math.max(placements.length, 1)));
@@ -113,7 +116,7 @@ export class StylizedForest extends THREE.Group {
       if (Array.isArray(canopyColors) && canopyColors.length > 0) {
         variantSettings.tree.canopyColor = canopyColors[i % canopyColors.length];
       }
-      const tree = new StylizedTree({ preset, seed, ...variantSettings });
+      const tree = new StylizedTree({ preset, seed, ...variantSettings, vegetationShader });
       this.variantTrees.push(tree);
       this._bakedVariants.push(prepareTreeForExport(tree));
     }
@@ -406,6 +409,31 @@ export class StylizedForest extends THREE.Group {
     return this;
   }
 
+  setWind(options) {
+    for (const tree of this.variantTrees) tree.setWind?.(options);
+    return this;
+  }
+
+  /** Keeps every live near-LOD tree on the current scene sun/sky inputs. */
+  setSun(options) {
+    for (const tree of this.variantTrees) tree.setSun?.(options);
+    return this;
+  }
+
+  setSurfaceWeather(options) {
+    for (const tree of this.variantTrees) tree.setSurfaceWeather?.(options);
+    return this;
+  }
+
+  setVegetationShader(profile) {
+    const report = applyVegetationShader(this.variantTrees, profile);
+    // Far LODs are rasterized from variant trees at construction time. Live
+    // materials update immediately; hosts that expose runtime style editing
+    // should rebuild the forest to bake matching impostors.
+    report.requiresImpostorRebake = this.hasBakedImpostors;
+    return report;
+  }
+
   /**
    * Matches the impostors' fog to the environment shader's height fog so far
    * canopies haze with the terrain they stand on. Pass the same