@call-me-sensei/toonlab 0.1.1 → 0.2.0

package/src/shaders-tsl/water.js

@@ -33,7 +33,9 @@ import {
   cameraProjectionMatrix,
   cameraViewMatrix,
   clamp,
+  Discard,
   dot,
+  exp,
   float,
   Fn,
   If,
@@ -139,6 +141,21 @@ export function createWaterNodeMaterial({
   //      `.value` like ShaderMaterial uniform entries; array uniforms are
   //      wrapped — see waterArrayUniformEntry) ----
   const u = {
+    // Manual scene-fog (linear, matches THREE.Fog). material.fog stays false
+    // (see the fog-ordering TODO above); WaterSurface.update() mirrors
+    // scene.fog into these each frame so distant water fades into the same
+    // haze as everything else instead of cutting sharp against fogged
+    // terrain. far <= near disables.
+    uSceneFogColor: uniform(new THREE.Color(0.72, 0.83, 0.94)),
+    uSceneFogFar: uniform(0),
+    uSceneFogNear: uniform(0),
+    // Exponential distance fog matching the environment shader's height fog
+    // (water sits at the bottom of the height falloff, so the depth term is
+    // the whole story). Without this, water at the far shore stays bright
+    // while terrain behind it hazes out — reading like water slicing into
+    // the mountains. density 0 disables.
+    uDistanceFogColor: uniform(new THREE.Color(0.66, 0.8, 0.94)),
+    uDistanceFogDensity: uniform(0),
     uTime: uniform(0),
     uResolution: uniform(new THREE.Vector2(1, 1)),
     uCameraNear: uniform(0.05),
@@ -244,6 +261,10 @@ export function createWaterNodeMaterial({
   const vBreaker = varying(float(), 'vWaterBreaker');
   const vSwash = varying(float(), 'vWaterSwash');
   const vChop = varying(float(), 'vWaterChop');
+  // Rest-pose column depth (waterline − bed). Deeply negative = the surface
+  // is under dry land; the fragment shader discards those fragments so
+  // triangles spanning a cliff face can't poke through the terrain.
+  const vRestDepth = varying(float(), 'vWaterRestDepth');
 
   material.vertexNode = Fn(() => {
     const worldPosition = modelWorldMatrix.mul(vec4(positionGeometry, 1.0)).toVar();
@@ -263,6 +284,7 @@ export function createWaterNodeMaterial({
     if (flags.shoaling) {
       const aBedHeight = attribute('aBedHeight', 'float');
       const restDepth = worldPosition.y.sub(aBedHeight).toVar();
+      vRestDepth.assign(restDepth);
       // Big swells feel the bottom much deeper than small ones.
       const shoalRange = max(max(u.uShoalingDepth, u.uWaveEnergy.mul(2.2)), 1e-3).toVar();
       chopWeight.assign(mix(0.15, 1.0, smoothstep(shoalRange.mul(0.3), shoalRange.mul(1.4), restDepth)));
@@ -289,7 +311,14 @@ export function createWaterNodeMaterial({
       const runup = u.uShorelineRunup.mul(u.uWaveEnergy).mul(max(wavePhase, 0.0));
       // Dry land tucks the film 20cm under the terrain.
       const film = clamp(restDepth.add(runup), -0.2, 0.05).toVar();
-      const filmY = aBedHeight.sub(worldPosition.y).add(film);
+      // Cap the drape: the film follows the bed up the beach, but a steep
+      // bank (terraced shore, cliff base) puts a whole cliff step inside one
+      // mesh cell — the dry vertex would ride 10m+ up the slope and drag
+      // surviving near-shore fragments with it (giant white "iceberg"
+      // wedges at distant shorelines). Real swash never climbs above ~½m
+      // over the rest waterline, so clamp the geometry there and let the
+      // vRestDepth fragment discard own the rest.
+      const filmY = min(aBedHeight.sub(worldPosition.y).add(film), 0.5);
       const beach = smoothstep(-0.02, 0.06, restDepth).oneMinus().toVar();
 
       rippleShoal.assign(smoothstep(0.0, 0.12, restDepth));
@@ -301,6 +330,7 @@ export function createWaterNodeMaterial({
         rawWave.z.mul(shoal),
       ));
     } else {
+      vRestDepth.assign(float(1000.0));
       rawWave = waves.gerstnerDisplacementFiltered(restXZ, u.uTime, chopWeight).toVar();
       waveDisplacement.assign(rawWave);
     }
@@ -324,6 +354,12 @@ export function createWaterNodeMaterial({
 
   // ---- Fragment stage (water.frag.glsl) ----
   material.fragmentNode = Fn(() => {
+    // Surface sections tucked under dry land (see vRestDepth) never shade:
+    // without this, water triangles spanning steep banks slice through the
+    // terrain as visible shards.
+    if (flags.shoaling) {
+      Discard(vRestDepth.lessThan(-0.35));
+    }
     const screenUv = screenUV.toVar();
     const toCamera = cameraPosition.sub(vWorldPosition).toVar();
     const viewDir = normalize(toCamera).toVar();
@@ -460,6 +496,23 @@ export function createWaterNodeMaterial({
       alpha.assign(max(alpha, vSwash.mul(0.55)));
       alpha.assign(max(alpha, clamp(reflectionMix.add(fresnel.mul(0.4)), 0.0, 1.0).mul(0.85)));
 
+      // Fog last: foam, sparkles, and shorelines haze out with the rest of
+      // the world. Exponential term mirrors the environment height fog;
+      // linear term mirrors scene.fog.
+      If(u.uDistanceFogDensity.greaterThan(0.0), () => {
+        const depthTerm = exp(viewDistance.mul(u.uDistanceFogDensity).negate()).oneMinus();
+        litColor.assign(mix(litColor, u.uDistanceFogColor, clamp(depthTerm, 0.0, 1.0)));
+      });
+      If(u.uSceneFogFar.greaterThan(u.uSceneFogNear), () => {
+        const fogAmount = clamp(
+          viewDistance.sub(u.uSceneFogNear)
+            .div(max(u.uSceneFogFar.sub(u.uSceneFogNear), 1e-3)),
+          0.0,
+          1.0,
+        );
+        litColor.assign(mix(litColor, u.uSceneFogColor, fogAmount));
+      });
+
       // --- debug visualizations (?waterDebug=...) ---
       // Masked sum instead of an if/else chain (docs/tsl-conventions.md #3);
       // always compiled — every input already lives in the graph.

package/src/sky/stylizedSky.js

@@ -35,6 +35,53 @@ export const DEFAULT_SKY_SETTINGS = Object.freeze({
   starsStrength: 0.0,
 });
 
+// Named sky presets: 'default' is the baseline; 'call_me_sensei' is the
+// studio-managed signature look, curated and updated over releases.
+// Community presets register alongside them via registerSkyPreset().
+const skyPresetRegistry = new Map([
+  ['default', Object.freeze({
+    description: 'Baseline daytime sky.',
+    label: 'Default',
+    settings: Object.freeze({}),
+  })],
+  ['call_me_sensei', Object.freeze({
+    description: 'Studio-managed signature sky, curated by Call Me Sensei and updated over releases. Currently the tuned library defaults.',
+    label: 'Call Me Sensei',
+    settings: Object.freeze({}),
+  })],
+]);
+
+/**
+ * Registers a named sky preset so it resolves in `createSkySettings({
+ * preset })` exactly like the built-ins. Accepts `{ label?, description?,
+ * settings? }` or flat settings.
+ */
+export function registerSkyPreset(name, preset = {}, { overwrite = false } = {}) {
+  const id = String(name ?? '').trim();
+  if (!id) throw new Error('Sky preset name is required.');
+  if (!overwrite && skyPresetRegistry.has(id)) {
+    throw new Error(`Sky preset "${id}" already exists.`);
+  }
+  const source = preset && typeof preset === 'object' ? preset : {};
+  const { label, description, settings, ...flat } = source;
+  const entry = Object.freeze({
+    description: typeof description === 'string' ? description : '',
+    label: typeof label === 'string' && label ? label : id,
+    settings: Object.freeze({ ...(settings && typeof settings === 'object' ? settings : flat) }),
+  });
+  skyPresetRegistry.set(id, entry);
+  return { description: entry.description, id, label: entry.label };
+}
+
+/** Lists registered sky presets as `{ id, label, description }` (for HUDs). */
+export function getSkyPresetOptions() {
+  return Array.from(skyPresetRegistry.entries()).map(([id, preset]) => ({
+    description: preset.description,
+    id,
+    label: preset.label,
+  }));
+}
+
 function finiteNumber(value, fallback) {
   const number = Number(value);
   return Number.isFinite(number) ? number : fallback;
@@ -77,7 +124,8 @@ function vector3Array(value, fallback) {
  */
 export function createSkySettings(options = {}) {
   const source = options && typeof options === 'object' ? options : {};
-  const base = DEFAULT_SKY_SETTINGS;
+  const presetSettings = skyPresetRegistry.get(source.preset)?.settings;
+  const base = presetSettings ? { ...DEFAULT_SKY_SETTINGS, ...presetSettings } : DEFAULT_SKY_SETTINGS;
   return {
     radius: Math.max(finiteNumber(source.radius, base.radius), 0.1),
     zenithColor: colorArray(source.zenithColor, base.zenithColor),