@call-me-sensei/toonlab 0.2.0 → 0.3.0

package/src/shaders-tsl/sky.js

@@ -33,30 +33,63 @@ import {
   step,
   uniform,
   vec2,
-  vec3,
   vec4,
 } from 'three/tsl';
 import { MeshBasicNodeMaterial } from 'three/webgpu';
 
 import { waterFbm, waterHash12, waterToonStep, waterVoronoi2 } from './chunks/water-common.js';
+import { resolveSkyQuality } from '../sky/skyQuality.js';
 
-export function createSkyNodeMaterial() {
+export function createSkyNodeMaterial({ quality = 'high' } = {}) {
+  const qualitySettings = resolveSkyQuality(quality);
   const uniforms = {
     uCloudColor: uniform(new THREE.Color()),
     uCloudCoverage: uniform(0),
+    uCloudDirection: uniform(new THREE.Vector2(1, 0.2857142857)),
+    uCloudEdgeOpacity: uniform(0),
+    uCloudHorizonFade: uniform(0),
+    uCloudLightOffset: uniform(0),
+    uCloudOpacity: uniform(0),
+    uCloudProjection: uniform(0),
     uCloudScale: uniform(0),
+    uCloudSeed: uniform(0),
     uCloudShadeColor: uniform(new THREE.Color()),
+    uCloudShadeSoftness: uniform(0),
+    uCloudShadeStrength: uniform(0),
+    uCloudShadeThreshold: uniform(0),
+    uCloudSilverLiningStrength: uniform(0),
+    uCloudSoftness: uniform(0),
     uCloudSpeed: uniform(0),
+    uCloudSunPower: uniform(0),
     uGroundColor: uniform(new THREE.Color()),
+    uGroundExponent: uniform(0),
+    uHorizonBandSize: uniform(0),
     uHorizonColor: uniform(new THREE.Color()),
     uHorizonScattering: uniform(0),
+    uHorizonSunPower: uniform(0),
+    uStarsColor: uniform(new THREE.Color()),
+    uStarsDensity: uniform(0),
+    uStarsHorizonFade: uniform(0),
+    uStarsScale: uniform(0),
+    uStarsSeed: uniform(0),
+    uStarsSize: uniform(0),
     uStarsStrength: uniform(0),
+    uStarsTwinkleSpeed: uniform(0),
+    uStarsTwinkleStrength: uniform(0),
+    uSunCloudOcclusionStrength: uniform(0),
     uSunColor: uniform(new THREE.Color()),
+    uSunDiscSoftness: uniform(0),
+    uSunDiscIntensity: uniform(0),
     uSunDirection: uniform(new THREE.Vector3(0, 1, 0)),
+    uSunGlowBroadStrength: uniform(0),
+    uSunGlowCoreSharpness: uniform(0),
+    uSunGlowCoreStrength: uniform(0),
+    uSunGlowSpread: uniform(0),
     uSunGlowStrength: uniform(0),
     uSunSize: uniform(0),
     uTime: uniform(0),
     uZenithColor: uniform(new THREE.Color()),
+    uZenithExponent: uniform(0),
   };
 
   const material = new MeshBasicNodeMaterial({
@@ -66,6 +99,7 @@ export function createSkyNodeMaterial() {
   material.name = 'StylizedSky';
   material.fog = false;
   material.lights = false;
+  material.userData.skyQuality = { ...qualitySettings };
 
   // Vertex stage: dome pinned to the far plane regardless of sphere radius,
   // so it never clips scene geometry and works inside reflection passes.
@@ -85,30 +119,52 @@ export function createSkyNodeMaterial() {
     const up = direction.y.toVar();
 
     // Base vertical gradient with a mirrored ground fade below the horizon.
-    const zenithMix = pow(clamp(up, 0.0, 1.0), 0.48);
+    const zenithMix = pow(clamp(up, 0.0, 1.0), uniforms.uZenithExponent);
     const color = select(
       up.greaterThanEqual(0.0),
       mix(uniforms.uHorizonColor, uniforms.uZenithColor, zenithMix),
-      mix(uniforms.uHorizonColor, uniforms.uGroundColor, pow(clamp(up.negate(), 0.0, 1.0), 0.55)),
+      mix(
+        uniforms.uHorizonColor,
+        uniforms.uGroundColor,
+        pow(clamp(up.negate(), 0.0, 1.0), uniforms.uGroundExponent),
+      ),
     ).toVar();
 
     // Sun disc and glow.
     const cosAngle = dot(direction, uniforms.uSunDirection).toVar();
     const angle = acos(clamp(cosAngle, -1.0, 1.0));
-    const sunDisc = smoothstep(uniforms.uSunSize.mul(0.5), uniforms.uSunSize, angle)
+    const sunCloudVisibility = smoothstep(0.55, 0.82, uniforms.uCloudCoverage).oneMinus();
+    const sunVisibility = mix(1.0, sunCloudVisibility, uniforms.uSunCloudOcclusionStrength);
+    const safeSunSize = max(uniforms.uSunSize, 0.00001);
+    const sunDisc = smoothstep(
+      safeSunSize.mul(uniforms.uSunDiscSoftness.oneMinus()),
+      safeSunSize,
+      angle,
+    )
       .oneMinus()
-      .mul(smoothstep(0.55, 0.82, uniforms.uCloudCoverage).oneMinus());
-    const sunGlow = pow(max(cosAngle, 0.0), 5.0).mul(0.16)
-      .add(pow(max(cosAngle, 0.0), 60.0).mul(0.5))
+      .mul(sunVisibility)
+      .mul(step(0.00001, uniforms.uSunSize));
+    const sunGlow = pow(max(cosAngle, 0.0), uniforms.uSunGlowSpread)
+      .mul(uniforms.uSunGlowBroadStrength)
+      .add(
+        pow(max(cosAngle, 0.0), uniforms.uSunGlowCoreSharpness)
+          .mul(uniforms.uSunGlowCoreStrength),
+      )
       .toVar();
     color.addAssign(
-      uniforms.uSunColor.mul(sunDisc.mul(2.4).add(sunGlow.mul(uniforms.uSunGlowStrength))),
+      uniforms.uSunColor.mul(
+        sunDisc.mul(uniforms.uSunDiscIntensity)
+          .add(sunGlow.mul(uniforms.uSunGlowStrength)),
+      ),
     );
 
     // Atmospheric scattering hint: a warm wedge along the sun-side horizon
     // that fades with altitude.
-    const horizonBand = smoothstep(0.0, 0.42, up.abs()).oneMinus();
-    const sunward = pow(clamp(cosAngle.mul(0.5).add(0.5), 0.0, 1.0), 5.0);
+    const horizonBand = smoothstep(0.0, uniforms.uHorizonBandSize, up.abs()).oneMinus();
+    const sunward = pow(
+      clamp(cosAngle.mul(0.5).add(0.5), 0.0, 1.0),
+      uniforms.uHorizonSunPower,
+    );
     color.addAssign(
       uniforms.uSunColor
         .mul(horizonBand)
@@ -121,23 +177,29 @@ export function createSkyNodeMaterial() {
     // The If guard matches the GLSL branch — it also keeps the projected UV
     // division (up + 0.28 crosses zero below the horizon) out of reach.
     If(uniforms.uStarsStrength.greaterThan(0.001).and(up.greaterThan(0.02)), () => {
-      const starUv = direction.xz.div(up.add(0.28)).mul(14.0);
+      const starUv = direction.xz
+        .div(up.add(0.28))
+        .mul(uniforms.uStarsScale)
+        .add(vec2(uniforms.uStarsSeed.mul(1.37), uniforms.uStarsSeed.mul(2.11)));
       const starVoro = waterVoronoi2(starUv);
       const starRandom = waterHash12(starVoro.zw);
-      const twinkle = uniforms.uTime
+      const twinkleWave = uniforms.uTime
+        .mul(uniforms.uStarsTwinkleSpeed)
         .mul(starRandom.mul(2.4).add(1.2))
         .add(starRandom.mul(31.0))
-        .sin()
-        .mul(0.4)
-        .add(0.6);
-      const star = smoothstep(0.0, 0.06, starVoro.x).oneMinus().mul(step(0.72, starRandom));
+        .sin();
+      const twinkleAmount = uniforms.uStarsTwinkleStrength.mul(0.5);
+      const twinkle = twinkleWave.mul(twinkleAmount).add(float(1.0).sub(twinkleAmount));
+      const star = smoothstep(0.0, uniforms.uStarsSize, starVoro.x)
+        .oneMinus()
+        .mul(step(uniforms.uStarsDensity.oneMinus(), starRandom));
       color.addAssign(
-        vec3(1.0, 0.98, 0.92)
+        uniforms.uStarsColor
           .mul(star)
           .mul(twinkle)
           .mul(uniforms.uStarsStrength)
-          .mul(smoothstep(0.03, 0.24, up))
-          .mul(sunGlow.oneMinus()),
+          .mul(smoothstep(0.03, uniforms.uStarsHorizonFade, up))
+          .mul(clamp(sunGlow, 0.0, 1.0).oneMinus()),
       );
     });
 
@@ -145,23 +207,55 @@ export function createSkyNodeMaterial() {
     // silver lining toward the sun, projected onto a virtual cloud plane.
     If(uniforms.uCloudCoverage.greaterThan(0.001).and(up.greaterThan(0.015)), () => {
       const cloudUv = direction.xz
-        .div(up.add(0.22))
+        .div(up.add(uniforms.uCloudProjection))
         .mul(uniforms.uCloudScale)
-        .add(uniforms.uTime.mul(uniforms.uCloudSpeed).mul(vec2(0.021, 0.006)))
+        .add(
+          uniforms.uTime
+            .mul(uniforms.uCloudSpeed)
+            .mul(uniforms.uCloudDirection)
+            .mul(0.0218403297),
+        )
+        .add(vec2(uniforms.uCloudSeed.mul(1.37), uniforms.uCloudSeed.mul(2.11)))
         .toVar();
-      const cloudBase = waterFbm(cloudUv, 4).toVar();
+      const cloudBase = waterFbm(cloudUv, qualitySettings.cloudOctaves).toVar();
       const threshold = mix(0.74, 0.34, clamp(uniforms.uCloudCoverage, 0.0, 1.0));
-      const cloudCore = smoothstep(threshold.add(0.1), threshold.add(0.24), cloudBase);
-      const cloudEdge = smoothstep(threshold, threshold.add(0.1), cloudBase);
-      const cloudMask = max(cloudCore, cloudEdge.mul(0.65));
+      const cloudCore = smoothstep(
+        threshold.add(uniforms.uCloudSoftness),
+        threshold.add(uniforms.uCloudSoftness.mul(2.4)),
+        cloudBase,
+      );
+      const cloudEdge = smoothstep(
+        threshold,
+        threshold.add(uniforms.uCloudSoftness),
+        cloudBase,
+      );
+      const cloudMask = max(
+        cloudCore,
+        cloudEdge.mul(uniforms.uCloudEdgeOpacity),
+      ).mul(uniforms.uCloudOpacity);
 
-      const litSample = waterFbm(cloudUv.sub(uniforms.uSunDirection.xz.mul(0.4)), 4);
-      const shade = waterToonStep(float(0.02), float(0.06), cloudBase.sub(litSample));
-      const cloudColor = mix(uniforms.uCloudColor, uniforms.uCloudShadeColor, shade.mul(0.85))
-        .add(uniforms.uSunColor.mul(pow(max(cosAngle, 0.0), 10.0)).mul(0.3))
+      const litSample = waterFbm(
+        cloudUv.sub(uniforms.uSunDirection.xz.mul(uniforms.uCloudLightOffset)),
+        qualitySettings.cloudOctaves,
+      );
+      const shade = waterToonStep(
+        uniforms.uCloudShadeThreshold,
+        uniforms.uCloudShadeSoftness,
+        cloudBase.sub(litSample),
+      );
+      const cloudColor = mix(
+        uniforms.uCloudColor,
+        uniforms.uCloudShadeColor,
+        shade.mul(uniforms.uCloudShadeStrength),
+      )
+        .add(
+          uniforms.uSunColor
+            .mul(pow(max(cosAngle, 0.0), uniforms.uCloudSunPower))
+            .mul(uniforms.uCloudSilverLiningStrength),
+        )
         .toVar();
 
-      const horizonFade = smoothstep(0.015, 0.16, up);
+      const horizonFade = smoothstep(0.015, uniforms.uCloudHorizonFade, up);
       color.assign(mix(color, cloudColor, cloudMask.mul(horizonFade)));
     });
 

package/src/shaders-tsl/tree-leaf.js

@@ -48,6 +48,13 @@ import { NodeMaterial } from 'three/webgpu';
 import { sampleEnvironmentSunShadow } from './chunks/environment-sun-shadow.js';
 import { stylizedCloudShadow } from './chunks/stylized-cloud-shadow.js';
 import { applyFoliageFog, createFoliageFogUniforms } from './chunks/foliage-fog.js';
+import {
+  createVegetationStyleUniforms,
+  shadeVegetationSurface,
+  tagVegetationRole,
+  vegetationBand,
+  vegetationVisibility,
+} from './chunks/vegetation-style.js';
 
 // Shared card-placement vertex logic (color + depth variants). Returns the
 // clip position; assigns the provided varyings when given.
@@ -101,10 +108,10 @@ function buildLeafVertexNode(u, { vUv, vWorldNormal, vWorldPosition, vTint, vHei
   })();
 }
 
-export function createTreeLeafNodeMaterial(settings) {
+export function createTreeLeafNodeMaterial(settings, vegetationShader = null) {
+  const styleUniforms = createVegetationStyleUniforms(vegetationShader, 'foliageCard');
   const u = {
     uAlphaCutoff: uniform(settings.alphaCutoff ?? 0.5),
-    uBacklitStrength: uniform(settings.backlitStrength ?? 0),
     uCloudShadowCoverage: uniform(settings.cloudShadowCoverage ?? 0),
     uCloudShadowScale: uniform(settings.cloudShadowScale ?? 1),
     uCloudShadowStrength: uniform(settings.cloudShadowStrength ?? 0),
@@ -122,7 +129,12 @@ export function createTreeLeafNodeMaterial(settings) {
     uWindSpeed: uniform(settings.windSpeed ?? 1),
     uWindStrength: uniform(settings.windStrength ?? 0.06),
     ...createFoliageFogUniforms(),
+    ...styleUniforms,
   };
+  if (!vegetationShader) {
+    u.uStyleFoliageBacklitStrength.value = settings.backlitStrength ?? 0;
+  }
+  u.uBacklitStrength = u.uStyleFoliageBacklitStrength;
 
   const material = new NodeMaterial();
   material.name = 'StylizedTreeFoliage';
@@ -151,41 +163,65 @@ export function createTreeLeafNodeMaterial(settings) {
       u.uCloudShadowStrength, u.uCloudShadowCoverage, u.uCloudShadowScale, u.uCloudShadowVelocity,
     );
     const sceneShadow = mix(1.0, sampleEnvironmentSunShadow(vWorldPosition), u.uSceneShadowStrength).toVar();
-    const sunVisibility = cloudShadow.mul(sceneShadow).toVar();
+    const sunVisibility = vegetationVisibility(
+      sceneShadow,
+      cloudShadow,
+      u.uStyleFoliageSceneShadowResponse,
+      u.uStyleFoliageCloudShadowResponse,
+    ).toVar();
 
-    const litBand = smoothstep(0.38, 0.56, wrap).mul(sunVisibility).toVar();
-    const crestBand = smoothstep(0.66, 0.78, wrap).mul(sunVisibility)
+    const litBand = vegetationBand(
+      wrap,
+      u.uStyleFoliageBandThreshold,
+      u.uStyleFoliageBandSoftness,
+    ).mul(sunVisibility).toVar();
+    const crestBand = vegetationBand(
+      wrap,
+      u.uStyleFoliageCrestThreshold,
+      u.uStyleFoliageCrestSoftness,
+    ).mul(sunVisibility)
       .mul(smoothstep(0.3, 0.8, vHeightT.mul(normal.y.mul(0.5).add(0.5).mul(0.3).add(0.7))));
 
     const color = mix(u.uShadowColor, u.uLitColor, litBand).toVar();
     color.assign(mix(color, u.uCrownColor, crestBand));
-    color.mulAssign(mix(vec3(1.0), u.uSunColor, litBand.mul(0.35)));
 
     // Baked per-leaf luminance + per-card jitter.
-    color.mulAssign(sprite.r.mul(0.36).add(0.78));
-    color.mulAssign(vTint.mul(0.16).add(0.92));
-
-    // Sky fill + silhouette rim.
-    color.addAssign(u.uSkyColor.mul(normal.y.mul(0.5).add(0.5)).mul(litBand.oneMinus()).mul(0.10));
-    const viewDirection = normalize(cameraPosition.sub(vWorldPosition));
-    const rim = pow(abs(dot(normal, viewDirection)).oneMinus(), 3.0);
-    color.addAssign(u.uSkyColor.mul(rim).mul(0.12).mul(vHeightT.mul(0.6).add(0.4)));
+    color.mulAssign(sprite.r.mul(u.uStyleFoliageSpriteLuminanceStrength)
+      .add(u.uStyleFoliageSpriteLuminanceStrength.mul(0.611111).oneMinus()));
+    color.mulAssign(vTint.sub(0.5).mul(u.uStyleFoliageCardVariationStrength).add(1.0));
 
-    // Backlit translucency.
-    const backlit = pow(clamp(dot(viewDirection, sunDirection.negate()), 0.0, 1.0), 4.0);
-    color.addAssign(
-      u.uSunColor.mul(backlit).mul(u.uBacklitStrength)
-        .mul(sprite.r.mul(0.7).add(0.3))
-        .mul(sunVisibility.mul(0.65).add(0.35)),
-    );
+    const shaded = shadeVegetationSurface({
+      baseColor: color,
+      bandSoftness: u.uStyleFoliageBandSoftness,
+      bandThreshold: u.uStyleFoliageBandThreshold,
+      cloudShadow,
+      cloudShadowResponse: u.uStyleFoliageCloudShadowResponse,
+      normal,
+      sceneShadow,
+      sceneShadowResponse: u.uStyleFoliageSceneShadowResponse,
+      shadowFloor: 1,
+      skyColor: u.uSkyColor,
+      sunColor: u.uSunColor,
+      sunDirection,
+      transmissionMultiplier: u.uStyleFoliageBacklitStrength.div(0.35)
+        .mul(sprite.r.mul(0.7).add(0.3)),
+      transmissionPower: u.uStyleThinSurfaceTransmissionPower
+        .mul(u.uStyleFoliageTransmissionPowerMultiplier),
+      u,
+      worldPosition: vWorldPosition,
+    });
 
     // Occluded crowns read clearly darker.
-    color.mulAssign(mix(0.8, 1.0, sceneShadow));
+    shaded.color.mulAssign(mix(
+      u.uStyleFoliageCrownOcclusionStrength.oneMinus(),
+      1.0,
+      sceneShadow,
+    ));
 
     // Manual linear scene fog on the true billboarded depth (see foliage-fog).
-    color.assign(applyFoliageFog(color, vViewZ, u));
+    shaded.color.assign(applyFoliageFog(shaded.color, vViewZ, u));
 
-    return vec4(color, 1.0);
+    return vec4(shaded.color, 1.0);
   })();
 
   material.uniforms = u;
@@ -260,5 +296,5 @@ export function createTreeLeafNodeMaterial(settings) {
     return depthMaterial;
   };
 
-  return material;
+  return tagVegetationRole(material, 'foliageCard', 'cutout');
 }

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

@@ -257,7 +257,10 @@ export function createWaterBreakerNodeMaterial({
     // --- Shell shaping ----------------------------------------------------
     const amount = clamp(u.uBreakerAmount, 0.0, 1.0).toVar();
     const capDepth = min(lineDepth, localDepth);
-    const breakHeight = capDepth.mul(0.9).mul(u.uBreakerScale).mul(amount).mul(endFade).mul(setEnvelope).toVar();
+    // Crest elevation is roughly half the depth-limited wave height. Using
+    // 0.9*d here treated the entire breaker height as elevation above rest
+    // water and made Ocean-on-Beach shells hover like layered ice shelves.
+    const breakHeight = capDepth.mul(0.48).mul(u.uBreakerScale).mul(amount).mul(endFade).mul(setEnvelope).toVar();
     const H = breakHeight.mul(mix(0.12, 1.0, pulse)).mul(post.mul(0.55).oneMinus()).toVar();
     const R = H.mul(0.52).toVar();
 
@@ -386,10 +389,10 @@ export function createWaterBreakerNodeMaterial({
     const faceNoise = waterFbm(
       vec2(vAlong.mul(1.7), vProfile.mul(4.0).sub(u.uTime.mul(1.6))).mul(noiseScale), 3,
     ).toVar();
-    const lipFoam = smoothstep(faceNoise.mul(-0.12).add(0.68), 0.9, vProfile.add(faceNoise.mul(0.08)))
-      .mul(vPulse).mul(1.4).toVar();
+    const lipFoam = smoothstep(faceNoise.mul(-0.08).add(0.82), 0.96, vProfile.add(faceNoise.mul(0.04)))
+      .mul(vPulse).mul(1.1).toVar();
     const streaks = smoothstep(0.62, 0.85, faceNoise)
-      .mul(smoothstep(0.3, 0.7, vProfile)).mul(vPulse).mul(0.7);
+      .mul(smoothstep(0.38, 0.76, vProfile)).mul(vPulse).mul(0.45);
     const whitewater = vPost.mul(
       waterFbm(vec2(vAlong.mul(2.3), vProfile.mul(3.0).add(u.uTime.mul(2.2))), 3).mul(0.6).add(0.7),
     );