leafthrough 0.1.5 → 0.1.7

package/dist/{chunk-GYSQO7QZ.js → chunk-KCIOFDSW.js}

@@ -33,8 +33,11 @@ function resolveSettings(options, layout, prefersReducedMotion) {
       backColor: paper.backColor ?? "#fcfcf9",
       wrinkles: paper.wrinkles ?? 1,
       bulge: paper.bulge ?? 1,
-      cutout: paper.cutout ?? false
+      cutout: paper.cutout ?? false,
+      sheetGap: Math.max(0, paper.sheetGap ?? 0),
+      depthBias: paper.depthBias ?? true
     },
+    deform: null,
     lighting: {
       ambient: {
         sky: lighting.ambient?.sky ?? "#ffffff",
@@ -247,11 +250,11 @@ function displayImage(source, alt = "") {
     return img;
   }
   if (typeof HTMLCanvasElement !== "undefined" && (drawable instanceof HTMLCanvasElement || drawable instanceof ImageBitmap)) {
-    const canvas = document.createElement("canvas");
-    canvas.width = drawable.width;
-    canvas.height = drawable.height;
-    canvas.getContext("2d")?.drawImage(drawable, 0, 0);
-    return describe(canvas, alt, style);
+    const canvas2 = document.createElement("canvas");
+    canvas2.width = drawable.width;
+    canvas2.height = drawable.height;
+    canvas2.getContext("2d")?.drawImage(drawable, 0, 0);
+    return describe(canvas2, alt, style);
   }
   return describe(document.createElement("div"), alt, style);
 }
@@ -423,6 +426,10 @@ import * as THREE7 from "three";
 // src/textures.ts
 import * as THREE4 from "three";
 var CONCURRENCY = 4;
+var NEAR = 1;
+var UPLOADS_PER_FRAME = 1;
+var IDLE_SPARE = 8;
+var UPLOAD_TIMEOUT = 100;
 var PageLoader = class {
   constructor(sources, renderer, radius, events) {
     this.sources = sources;
@@ -440,6 +447,9 @@ var PageLoader = class {
   owned = /* @__PURE__ */ new Set();
   inFlight = /* @__PURE__ */ new Map();
   failed = /* @__PURE__ */ new Set();
+  // decoded pages waiting for their turn on the GPU
+  pending = /* @__PURE__ */ new Map();
+  cancelUploads = null;
   // `first` pages load before the rest; the rest go nearest first
   first = [];
   // the pages in view, and the one being read, which loads first among them
@@ -488,6 +498,15 @@ var PageLoader = class {
       this.owned.delete(texture);
       texture.dispose();
     });
+    for (const [i, texture] of this.pending) {
+      if (this.distance(i) > keep) {
+        this.pending.delete(i);
+        if (this.owned.delete(texture)) texture.dispose();
+      } else if (this.distance(i) <= NEAR) {
+        this.pending.delete(i);
+        this.show(i, texture);
+      }
+    }
     this.pump();
   }
   setWrap(wrap) {
@@ -506,6 +525,9 @@ var PageLoader = class {
   }
   dispose() {
     this.disposed = true;
+    this.cancelUploads?.();
+    this.cancelUploads = null;
+    this.pending.clear();
     for (const request of this.inFlight.values()) request.abort();
     for (const texture of this.owned) texture.dispose();
     this.owned.clear();
@@ -520,7 +542,7 @@ var PageLoader = class {
   // starts the most wanted pages while there's room
   pump() {
     if (this.disposed || this.inFlight.size >= CONCURRENCY) return;
-    const wanted = (i) => !this.textures[i] && !this.inFlight.has(i) && !this.failed.has(i) && this.distance(i) <= this.radius;
+    const wanted = (i) => !this.textures[i] && !this.inFlight.has(i) && !this.pending.has(i) && !this.failed.has(i) && this.distance(i) <= this.radius;
     const queue = [
       ...this.first.filter((i) => this.waiting.has(i)),
       ...this.sources.map((_, i) => i).sort((a, b) => this.distance(a) - this.distance(b) || Math.abs(a - this.around) - Math.abs(b - this.around))
@@ -538,13 +560,17 @@ var PageLoader = class {
         if (this.owned.delete(texture)) texture.dispose();
         return;
       }
-      texture.colorSpace = THREE4.SRGBColorSpace;
-      texture.premultiplyAlpha = true;
-      texture.anisotropy = this.renderer.capabilities.getMaxAnisotropy();
-      texture.needsUpdate = true;
-      this.renderer.initTexture(texture);
-      this.textures[page] = texture;
-      this.events.onLoad(page, texture);
+      if (this.owned.has(texture)) {
+        texture.colorSpace = THREE4.SRGBColorSpace;
+        texture.premultiplyAlpha = true;
+        texture.anisotropy = this.renderer.capabilities.getMaxAnisotropy();
+        texture.needsUpdate = true;
+      }
+      if (this.waiting.has(page) || this.distance(page) <= NEAR) this.show(page, texture);
+      else {
+        this.pending.set(page, texture);
+        this.scheduleUploads();
+      }
     }).catch((error) => {
       if (this.disposed || request.signal.aborted) return;
       this.failed.add(page);
@@ -555,6 +581,41 @@ var PageLoader = class {
       this.pump();
     });
   }
+  // Puts the page's texture on the GPU and hands it over. A texture passed in is taken as it
+  // is, so one that's on the GPU already, or shared with the caller's own material, isn't
+  // uploaded again: initTexture only uploads what the renderer hasn't got.
+  show(page, texture) {
+    this.renderer.initTexture(texture);
+    this.textures[page] = texture;
+    this.events.onLoad(page, texture);
+  }
+  // the next pending pages, in idle time where the browser offers it, else before the next frame
+  scheduleUploads() {
+    if (this.cancelUploads || !this.pending.size) return;
+    if (typeof requestIdleCallback === "function") {
+      const id = requestIdleCallback((deadline) => this.uploadSome(deadline), { timeout: UPLOAD_TIMEOUT });
+      this.cancelUploads = () => cancelIdleCallback(id);
+    } else {
+      const id = requestAnimationFrame(() => this.uploadSome());
+      this.cancelUploads = () => cancelAnimationFrame(id);
+    }
+  }
+  // nearest the reader first
+  uploadSome(deadline) {
+    this.cancelUploads = null;
+    const queue = [...this.pending.keys()].sort(
+      (a, b) => this.distance(a) - this.distance(b) || Math.abs(a - this.around) - Math.abs(b - this.around)
+    );
+    let count = 0;
+    for (const page of queue) {
+      if (count >= UPLOADS_PER_FRAME && !(deadline && deadline.timeRemaining() > IDLE_SPARE)) break;
+      const texture = this.pending.get(page);
+      this.pending.delete(page);
+      this.show(page, texture);
+      count++;
+    }
+    this.scheduleUploads();
+  }
   async createTexture(source, signal) {
     if (source instanceof THREE4.Texture) return source;
     const own = (texture) => (this.owned.add(texture), texture);
@@ -564,11 +625,11 @@ var PageLoader = class {
       if (!source.complete || !source.naturalWidth) await source.decode();
       return own(new THREE4.Texture(source));
     }
-    const canvas = document.createElement("canvas");
-    canvas.width = source.width;
-    canvas.height = source.height;
-    canvas.getContext("2d").drawImage(source, 0, 0);
-    return own(new THREE4.CanvasTexture(canvas));
+    const canvas2 = document.createElement("canvas");
+    canvas2.width = source.width;
+    canvas2.height = source.height;
+    canvas2.getContext("2d").drawImage(source, 0, 0);
+    return own(new THREE4.CanvasTexture(canvas2));
   }
 };
 function loadImage(url, signal) {
@@ -632,27 +693,37 @@ function createPaperMaterials(uniforms, shader, settings) {
   `
   );
   const noiseAt = (component) => shader.noise ? `aNoise.${component}` : "0.0";
+  const deform = settings.deform;
+  const deformChunk = deform ? `#include <common>
+      uniform vec3 uSheetOrigin;
+      ${deform.glsl}
+      vec3 sheetDeformed(vec3 p, vec2 uv) {
+        return deformSheet(p + uSheetOrigin, uv) - uSheetOrigin;
+      }` : "#include <common>";
+  const deformed = (p, uv) => deform ? `sheetDeformed(${p}, ${uv})` : p;
+  const deformUniforms = deform ? { ...deform.uniforms, uSheetOrigin: uniforms.uSheetOrigin } : {};
   const material = new THREE5.MeshStandardMaterial({
     side: THREE5.DoubleSide,
     metalness: paper.metalness,
     roughness: paper.roughness
   });
   material.onBeforeCompile = (program) => {
-    Object.assign(program.uniforms, uniforms);
+    Object.assign(program.uniforms, uniforms, deformUniforms);
     program.vertexShader = constants + shader.vertexChunk + "varying vec2 vSheetUv;\nvarying vec3 vSheetPosition;\n" + program.vertexShader;
-    program.vertexShader = program.vertexShader.replace(
+    program.vertexShader = program.vertexShader.replace("#include <common>", deformChunk).replace(
       "#include <beginnormal_vertex>",
       `#include <beginnormal_vertex>
         vec2 sheetStep = vec2(NORMAL_EPSILON, NORMAL_EPSILON / SHEET_ASPECT);
-        vec3 sheetP = sheetPosition(uv, ${noiseAt("x")});
-        vec3 sheetPx = sheetPosition(uv + vec2(sheetStep.x, 0.0), ${noiseAt("y")});
-        vec3 sheetPy = sheetPosition(uv + vec2(0.0, sheetStep.y), ${noiseAt("z")});
+        vec3 sheetShaped = sheetPosition(uv, ${noiseAt("x")});
+        vec3 sheetP = ${deformed("sheetShaped", "uv")};
+        vec3 sheetPx = ${deformed(`sheetPosition(uv + vec2(sheetStep.x, 0.0), ${noiseAt("y")})`, "uv + vec2(sheetStep.x, 0.0)")};
+        vec3 sheetPy = ${deformed(`sheetPosition(uv + vec2(0.0, sheetStep.y), ${noiseAt("z")})`, "uv + vec2(0.0, sheetStep.y)")};
         objectNormal = normalize(cross(sheetPx - sheetP, sheetPy - sheetP));`
     ).replace(
       "#include <begin_vertex>",
       `vec3 transformed = sheetP;
         vSheetUv = uv;
-        vSheetPosition = sheetP;`
+        vSheetPosition = sheetShaped;`
     );
     program.fragmentShader = constants + `uniform sampler2D uFront;
       uniform sampler2D uBack;
@@ -732,13 +803,13 @@ function createPaperMaterials(uniforms, shader, settings) {
   });
   const distanceMaterial = new THREE5.MeshDistanceMaterial({ side: THREE5.DoubleSide });
   depthMaterial.onBeforeCompile = distanceMaterial.onBeforeCompile = (program) => {
-    Object.assign(program.uniforms, uniforms);
+    Object.assign(program.uniforms, uniforms, deformUniforms);
     program.vertexShader = constants + shader.vertexChunk + "varying vec2 vSheetUv;\nvarying vec3 vSheetPosition;\n" + program.vertexShader;
-    program.vertexShader = program.vertexShader.replace(
+    program.vertexShader = program.vertexShader.replace("#include <common>", deformChunk).replace(
       "#include <begin_vertex>",
       `vSheetUv = uv;
       vSheetPosition = sheetPosition(uv, ${noiseAt("x")});
-      vec3 transformed = vSheetPosition - vec3(SHADOW_OFFSET_X, 0.0, 0.0);`
+      vec3 transformed = ${deformed("vSheetPosition - vec3(SHADOW_OFFSET_X, 0.0, 0.0)", "uv")};`
     );
     program.fragmentShader = constants + `
       uniform sampler2D uFront;
@@ -753,7 +824,7 @@ function createPaperMaterials(uniforms, shader, settings) {
       ${shader.fragmentChunk ? "if (sheetHidden(vSheetPosition)) discard;" : ""}`
     );
   };
-  const cacheKey = constants + shader.vertexChunk + (shader.fragmentChunk ?? "") + (paper.cutout ? "cutout" : "");
+  const cacheKey = constants + shader.vertexChunk + (shader.fragmentChunk ?? "") + (paper.cutout ? "cutout" : "") + (deform?.glsl ?? "");
   material.customProgramCacheKey = () => cacheKey;
   depthMaterial.customProgramCacheKey = () => cacheKey;
   distanceMaterial.customProgramCacheKey = () => cacheKey;
@@ -777,11 +848,11 @@ function createSheetMesh(geometry, uniforms, shader, settings) {
   mesh.frustumCulled = false;
   return mesh;
 }
-function layerSheet(mesh, depth, count, moving) {
+function layerSheet(mesh, depth, count, moving, bias) {
   const material = mesh.material;
-  material.polygonOffset = true;
+  material.polygonOffset = bias;
   material.polygonOffsetFactor = 0;
-  material.polygonOffsetUnits = moving ? -(count + 4) : -(count - Math.min(depth, count));
+  material.polygonOffsetUnits = bias ? moving ? -(count + 4) : -(count - Math.min(depth, count)) : 0;
   mesh.renderOrder = depth;
 }
 function disposeSheetMesh(mesh) {
@@ -802,6 +873,37 @@ function solidTexture(color) {
   return texture;
 }
 
+// src/shared.ts
+var SharedResources = class {
+  entries = /* @__PURE__ */ new Map();
+  /** The resource under `key`, made by `make` for the first user. Pair every call with `release`. */
+  acquire(key, make) {
+    let entry = this.entries.get(key);
+    if (!entry) {
+      entry = { value: make(), users: 0 };
+      this.entries.set(key, entry);
+    }
+    entry.users++;
+    return entry.value;
+  }
+  /** Lets go of `key`; the last user's release frees it. */
+  release(key) {
+    const entry = this.entries.get(key);
+    if (!entry || --entry.users > 0) return;
+    this.entries.delete(key);
+    entry.value.dispose();
+  }
+};
+var byRenderer = /* @__PURE__ */ new WeakMap();
+function sharedResources(renderer) {
+  let shared = byRenderer.get(renderer);
+  if (!shared) {
+    shared = new SharedResources();
+    byRenderer.set(renderer, shared);
+  }
+  return shared;
+}
+
 // src/paper/paperPattern.ts
 import * as THREE6 from "three";
 var SIZE = 384;
@@ -852,7 +954,9 @@ function spread(values) {
   for (const v of values) variance += (v - mean) ** 2;
   return Math.sqrt(variance / values.length) || 1;
 }
-function createPaperPattern(renderer) {
+var canvas = null;
+function paperPatternCanvas() {
+  if (canvas) return canvas;
   let s = 7;
   const random = () => (s = s * 1664525 + 1013904223 >>> 0) / 4294967296;
   const noise = new Float32Array(SIZE * SIZE);
@@ -880,7 +984,7 @@ function createPaperPattern(renderer) {
   const cloudScale = CLOUD * spread(grain) / spread(cloud);
   for (let i = 0; i < grain.length; i++) grain[i] += cloud[i] * cloudScale;
   const order = Array.from(grain.keys()).sort((a, b) => grain[a] - grain[b]);
-  const canvas = document.createElement("canvas");
+  canvas = document.createElement("canvas");
   canvas.width = canvas.height = SIZE;
   const ctx = canvas.getContext("2d");
   const image = ctx.createImageData(SIZE, SIZE);
@@ -896,13 +1000,17 @@ function createPaperPattern(renderer) {
     image.data[o + 3] = 255;
   });
   ctx.putImageData(image, 0, 0);
-  const texture = new THREE6.CanvasTexture(canvas);
+  return canvas;
+}
+function createPaperPattern(renderer) {
+  const texture = new THREE6.CanvasTexture(paperPatternCanvas());
   texture.wrapS = texture.wrapT = THREE6.RepeatWrapping;
   texture.anisotropy = renderer.capabilities.getMaxAnisotropy();
   return texture;
 }
 
 // src/paper/paperTextures.ts
+var BUILTIN_PATTERN = "paper-pattern";
 var PaperTextures = class {
   constructor(backColor, events) {
     this.events = events;
@@ -927,30 +1035,34 @@ var PaperTextures = class {
     const grain = settings.paper.grain;
     const key = grain === true || grain === void 0 ? "builtin" : grain === false ? "none" : grain;
     if (this.pattern?.key === key) return this.pattern.texture;
-    this.pattern?.texture.dispose();
-    let texture;
-    if (key === "builtin") texture = createPaperPattern(renderer);
-    else if (key === "none") texture = solidTexture("#000000");
-    else {
-      texture = solidTexture("#000000");
+    this.pattern?.release();
+    if (key === "builtin") {
+      const shared = sharedResources(renderer);
+      const texture = shared.acquire(BUILTIN_PATTERN, () => createPaperPattern(renderer));
+      this.pattern = { texture, key, release: () => shared.release(BUILTIN_PATTERN) };
+      return texture;
+    }
+    const pattern = { texture: solidTexture("#000000"), key, release: () => pattern.texture.dispose() };
+    this.pattern = pattern;
+    if (key !== "none") {
       loadGrain(key).then(
         (loaded) => {
-          if (this.pattern?.key !== key || this.disposed) return loaded.dispose();
-          this.pattern.texture.dispose();
-          this.pattern.texture = loaded;
+          if (this.pattern !== pattern || this.disposed) return loaded.dispose();
+          pattern.texture.dispose();
+          pattern.texture = loaded;
           this.events.onGrain();
         },
         (error) => {
-          if (this.pattern?.key === key && !this.disposed) this.events.onError(error);
+          if (this.pattern === pattern && !this.disposed) this.events.onError(error);
         }
       );
     }
-    this.pattern = { texture, key };
-    return texture;
+    return pattern.texture;
   }
   dispose() {
     this.disposed = true;
-    this.pattern?.texture.dispose();
+    this.pattern?.release();
+    this.pattern = null;
     this.blank.dispose();
     this.backBlank.texture.dispose();
   }
@@ -1085,6 +1197,7 @@ var vertexChunk = (
   uniform float uTailBend; // how far the free end bows back
   uniform vec3 uCone; // radius change per unit of y, radius at the top, how far to wrap
   uniform vec2 uFlipRotation;
+  uniform float uStackGap; // how far the sheet stands off the spine, along its own normal
 
   float sheetPileLift(float x) {
     float t = 1.0 - min(x / uPileLift.x, 1.0);
@@ -1170,7 +1283,7 @@ var vertexChunk = (
     }
 
     // spin about the spine
-    float z = shape.z + pile.z;
+    float z = shape.z + pile.z + uStackGap;
     return vec3(
       shape.x * uFlipRotation.x - z * uFlipRotation.y,
       shape.y,
@@ -1196,6 +1309,10 @@ var fragmentChunk = (
 function createSingleGeometry(aspect) {
   return new THREE9.PlaneGeometry(1, aspect, 64, Math.round(64 * aspect));
 }
+function sharedSingleGeometry(shared, aspect) {
+  const key = `single-geometry:${aspect}`;
+  return { geometry: shared.acquire(key, () => createSingleGeometry(aspect)), release: () => shared.release(key) };
+}
 function createSingleSheet(geometry, front, back, pattern, settings, shading) {
   const uniforms = {
     uPileLift: { value: new THREE9.Vector3(1, 0, 0) },
@@ -1206,11 +1323,13 @@ function createSingleSheet(geometry, front, back, pattern, settings, shading) {
     uCone: { value: new THREE9.Vector3(0, 1, 0) },
     uFlipRotation: { value: new THREE9.Vector2(1, 0) },
     uTrim: { value: new THREE9.Vector3(0, 1, 1) },
+    uStackGap: { value: 0 },
     uFront: { value: front },
     uBack: { value: back },
     uPattern: { value: pattern },
     uSpineContact: shading.spineContact,
-    uLightDirection: shading.lightDirection
+    uLightDirection: shading.lightDirection,
+    uSheetOrigin: shading.origin
   };
   const mesh = createSheetMesh(
     geometry,
@@ -1294,6 +1413,7 @@ var SingleEngine = class {
   metrics;
   requestFrame;
   geometry;
+  releaseGeometry;
   sheets;
   count;
   radiusSpacing;
@@ -1301,6 +1421,7 @@ var SingleEngine = class {
   fallDelay;
   fallDuration;
   abort = new AbortController();
+  shading;
   current;
   turned = 0;
   // sum of every sheet's progress, as of the last update
@@ -1321,10 +1442,13 @@ var SingleEngine = class {
     this.input = ctx.input;
     this.metrics = ctx.metrics;
     this.requestFrame = ctx.requestFrame;
+    this.shading = ctx.shading;
     this.count = ctx.textures.length;
     this.maxPosition = this.count;
     this.current = clamp(Math.round(ctx.position), 0, Math.max(this.count - 1, 0));
-    this.geometry = createSingleGeometry(ctx.settings.pageAspect);
+    const { geometry, release } = sharedSingleGeometry(ctx.shared, ctx.settings.pageAspect);
+    this.geometry = geometry;
+    this.releaseGeometry = release;
     this.sheets = ctx.textures.map((front, index) => {
       const { mesh, uniforms } = createSingleSheet(this.geometry, front, ctx.blank, ctx.pattern, ctx.settings, ctx.shading);
       this.group.add(mesh);
@@ -1399,11 +1523,16 @@ var SingleEngine = class {
     if (this.press) this.release(new PointerEvent("pointercancel", { pointerId: this.press.id }));
     this.wake();
   }
+  setShadows(on) {
+    this.settings.lighting.shadows = on;
+    for (const sheet of this.sheets) sheet.mesh.castShadow = sheet.mesh.receiveShadow = on;
+    this.wake();
+  }
   dispose() {
     this.cancelHold();
     this.abort.abort();
     for (const sheet of this.sheets) disposeSheetMesh(sheet.mesh);
-    this.geometry.dispose();
+    this.releaseGeometry();
   }
   // --- helpers ----------------------------------------------------------------
   randomWobble() {
@@ -1453,6 +1582,10 @@ var SingleEngine = class {
   shutting(turned) {
     return smooth((this.closing(turned) - 0.6) / 0.4);
   }
+  // how far a read page has settled flat under the pile: 0 still on the roll, 1 flat
+  fallOf(sheet, paced, shut) {
+    return Math.max(smooth((paced - (sheet.index + 1) - this.fallDelay) / this.fallDuration), shut);
+  }
   inFlight(sheet) {
     return this.flights.some((f) => f.sheet === sheet);
   }
@@ -1755,15 +1888,19 @@ var SingleEngine = class {
       sheet.uniforms.uTrim.value.set(sheet === top || this.busy(sheet) ? 0 : 1, edge.bottom, edge.top);
     }
     const closing = this.closing(turned) > 0;
+    const paced = this.paced(turned);
+    const shut = this.shutting(turned);
     const pileFrom = Math.max(this.current, top?.index ?? this.current);
     for (const sheet of this.sheets) {
       const i = sheet.index;
       sheet.mesh.visible = closing || i <= pileFrom + PILE.renderDepth || this.busy(sheet);
-      layerSheet(sheet.mesh, i < this.current ? this.current - 1 - i : i - this.current, this.count, this.busy(sheet));
+      const depth = i >= this.current ? i - this.current : this.fallOf(sheet, paced, shut) >= 1 ? this.count - this.current + i : this.current - 1 - i;
+      layerSheet(sheet.mesh, depth, this.count, this.busy(sheet), this.settings.paper.depthBias);
     }
     const read = smooth(this.count > 1 ? this.paced(turned) / (this.count - 1) : 0) * (1 - this.shutting(turned));
     this.group.position.x = BOOK.pushRight * read;
     this.group.position.z = -BOOK.pushBack * read;
+    this.shading.origin.value.copy(this.group.position);
     this.dirty = false;
     return true;
   }
@@ -1790,10 +1927,7 @@ var SingleEngine = class {
     const spineOpen = (ROLL.spineOpenStartDeg + (ROLL.spineOpenEndDeg - ROLL.spineOpenStartDeg) * Math.pow(openFraction, ROLL.spineOpenPower)) * Math.PI / 180;
     const shut = this.shutting(turned);
     const closed = this.closing(turned) >= 1 ? 1 : 0;
-    const fall = Math.max(
-      smooth((paced - (sheet.index + 1) - this.fallDelay) / this.fallDuration),
-      shut
-    );
+    const fall = this.fallOf(sheet, paced, shut);
     const spacing = this.radiusSpacing[sheet.index] ?? 0;
     const topR = ROLL.coverTopRadius + (ROLL.backTopRadius - ROLL.coverTopRadius) * spacing;
     const bottomR = ROLL.coverBottomRadius + (ROLL.backBottomRadius - ROLL.coverBottomRadius) * spacing;
@@ -1833,6 +1967,11 @@ var SingleEngine = class {
       topReach = Math.min(topReach, edge.top);
     }
     u.uPileReach.value.set(bottomReach, topReach);
+    const under = P - 1 - sheet.index;
+    const before = Math.max(0, turned - 1 - sheet.index);
+    const around = smooth(T);
+    const offset = fallen ? -(sheet.index + 1) : under + (before - under) * around;
+    u.uStackGap.value = this.settings.paper.sheetGap * (offset + (under - offset) * shut);
   }
   // a turning page: swing round the spine up to the open angle, then roll round the cone
   shapeTurn(sheet, T, spineOpen, radii, tilt) {
@@ -1891,6 +2030,7 @@ var vertexChunk2 = (settings) => (
 
   const float BULGE = ${settings.paper.bulge.toFixed(4)};
   const float WRINKLE = ${(0.13 * settings.paper.wrinkles).toFixed(4)};
+  const bool NESTED = ${settings.paper.depthBias ? "false" : "true"};
 
   uniform float uFlipProgress;
   uniform float uWrinkleSide;
@@ -1900,6 +2040,7 @@ var vertexChunk2 = (settings) => (
   uniform vec2 uFlipRotation;
   uniform float uDirection;
   uniform float uStackLift;
+  uniform float uStackGap;
 
   attribute vec3 aNoise;
 
@@ -1916,8 +2057,11 @@ var vertexChunk2 = (settings) => (
     float y = (uv.y - 0.5) * SHEET_ASPECT;
 
     // Every sheet shares the same wrinkles and bulge, scaled by its place in the stack,
-    // so stacked sheets nest inside each other instead of crossing.
-    float wrinkle = (mix(noise, 1.0 - noise, uFlipProgress) - 0.5) * smoothstep(0.0, 0.35, x) * WRINKLE * uStackLift;
+    // so stacked sheets nest inside each other instead of crossing. Where a wrinkle dips, a
+    // bigger one dips below the sheets under it, which only the depth bias hides; without it
+    // the dips are the same on every sheet.
+    float wrinkle = uWrinkleSide * (mix(noise, 1.0 - noise, uFlipProgress) - 0.5) * smoothstep(0.0, 0.35, x) * WRINKLE;
+    wrinkle *= NESTED && wrinkle < 0.0 ? 1.0 : uStackLift;
     float lift = sheetRestingLift(x) * BULGE * uStackLift;
 
     // bend with constant curvature past the fold line, trailing against the turn
@@ -1935,7 +2079,7 @@ var vertexChunk2 = (settings) => (
     // turn about the spine
     p = vec3(p.x * uFlipRotation.x - p.z * uFlipRotation.y, p.y, p.x * uFlipRotation.y + p.z * uFlipRotation.x);
 
-    p.z += lift + uWrinkleSide * wrinkle;
+    p.z += lift + wrinkle + uStackGap;
     return p;
   }
 `
@@ -1968,20 +2112,29 @@ function wrinkleNoise(u, v, aspect) {
   }
   return value;
 }
+var noiseByAspect = /* @__PURE__ */ new Map();
 function createSpreadGeometry(aspect) {
   const geometry = new THREE11.PlaneGeometry(1, aspect, 64, Math.round(64 * aspect));
-  const uv = geometry.attributes.uv;
-  const noise = new Float32Array(uv.count * 3);
-  for (let i = 0; i < uv.count; i++) {
-    const u = uv.getX(i);
-    const v = uv.getY(i);
-    noise[i * 3] = wrinkleNoise(u, v, aspect);
-    noise[i * 3 + 1] = wrinkleNoise(u + NORMAL_EPSILON2, v, aspect);
-    noise[i * 3 + 2] = wrinkleNoise(u, v + NORMAL_EPSILON2 / aspect, aspect);
+  let noise = noiseByAspect.get(aspect);
+  if (!noise) {
+    const uv = geometry.attributes.uv;
+    noise = new Float32Array(uv.count * 3);
+    for (let i = 0; i < uv.count; i++) {
+      const u = uv.getX(i);
+      const v = uv.getY(i);
+      noise[i * 3] = wrinkleNoise(u, v, aspect);
+      noise[i * 3 + 1] = wrinkleNoise(u + NORMAL_EPSILON2, v, aspect);
+      noise[i * 3 + 2] = wrinkleNoise(u, v + NORMAL_EPSILON2 / aspect, aspect);
+    }
+    noiseByAspect.set(aspect, noise);
   }
   geometry.setAttribute("aNoise", new THREE11.BufferAttribute(noise, 3));
   return geometry;
 }
+function sharedSpreadGeometry(shared, aspect) {
+  const key = `spread-geometry:${aspect}`;
+  return { geometry: shared.acquire(key, () => createSpreadGeometry(aspect)), release: () => shared.release(key) };
+}
 function createSpreadSheet(geometry, front, back, pattern, settings, shading) {
   const uniforms = {
     uFlipProgress: { value: 0 },
@@ -1992,11 +2145,13 @@ function createSpreadSheet(geometry, front, back, pattern, settings, shading) {
     uFlipRotation: { value: new THREE11.Vector2(1, 0) },
     uDirection: { value: 1 },
     uStackLift: { value: 1 },
+    uStackGap: { value: 0 },
     uFront: { value: front },
     uBack: { value: back },
     uPattern: { value: pattern },
     uSpineContact: shading.spineContact,
-    uLightDirection: shading.lightDirection
+    uLightDirection: shading.lightDirection,
+    uSheetOrigin: shading.origin
   };
   const mesh = createSheetMesh(
     geometry,
@@ -2037,6 +2192,10 @@ function stackLift(index, count, progress) {
   if (count <= 1) return 1;
   return 0.31 + 0.69 * (index + (count - 1 - 2 * index) * (1 - progress)) / (count - 1);
 }
+function sheetsUnder(index, count, progress) {
+  const t = clamp2((progress - 0.25) / 0.5, 0, 1);
+  return count - 1 - index + (2 * index - count + 1) * t * t * (3 - 2 * t);
+}
 var SpreadEngine = class {
   group = new THREE12.Group();
   maxPosition;
@@ -2046,6 +2205,7 @@ var SpreadEngine = class {
   metrics;
   requestFrame;
   geometry;
+  releaseGeometry;
   sheets;
   abort = new AbortController();
   shading;
@@ -2073,7 +2233,9 @@ var SpreadEngine = class {
     const count = Math.ceil(ctx.textures.length / 2);
     this.maxPosition = count;
     this.current = clamp2(Math.round(ctx.position), 0, count);
-    this.geometry = createSpreadGeometry(ctx.settings.pageAspect);
+    const { geometry, release } = sharedSpreadGeometry(ctx.shared, ctx.settings.pageAspect);
+    this.geometry = geometry;
+    this.releaseGeometry = release;
     this.sheets = [];
     for (let i = 0; i < count; i++) {
       const front = ctx.textures[2 * i];
@@ -2133,11 +2295,16 @@ var SpreadEngine = class {
     if (this.press) this.release(new PointerEvent("pointercancel", { pointerId: this.press.id }));
     this.wake();
   }
+  setShadows(on) {
+    this.settings.lighting.shadows = on;
+    for (const sheet of this.sheets) sheet.mesh.receiveShadow = on;
+    this.wake();
+  }
   dispose() {
     this.cancelHold();
     this.abort.abort();
     for (const sheet of this.sheets) disposeSheetMesh(sheet.mesh);
-    this.geometry.dispose();
+    this.releaseGeometry();
   }
   // --- helpers ----------------------------------------------------------------
   randomWobble() {
@@ -2495,7 +2662,7 @@ var SpreadEngine = class {
       const depth = i >= this.current ? i - this.current : this.current - 1 - i;
       const turning = this.inFlight(i) || this.drag?.index === i;
       sheet.mesh.castShadow = this.settings.lighting.shadows && (depth < 3 || turning);
-      layerSheet(sheet.mesh, depth, this.sheets.length, turning);
+      layerSheet(sheet.mesh, depth, this.sheets.length, turning, this.settings.paper.depthBias);
       const lift = Math.abs(sheet.uniforms.uFlipRotation.value.y);
       if (turning && lift > upright) {
         upright = lift;
@@ -2526,6 +2693,7 @@ var SpreadEngine = class {
     u.uWrinkleSide.value = -Math.cos(turn);
     u.uDirection.value = sheet.directionSmooth;
     u.uStackLift.value = sheet.liftBase + sheet.liftSpan * sheet.progress;
+    u.uStackGap.value = this.settings.paper.sheetGap * sheetsUnder(sheet.index, this.sheets.length, sheet.progress);
     u.uBendAngle.value = bend;
     u.uFold.value.set(cos, sin);
     u.uCurl.value.set(curlStart, curlLength);
@@ -2806,7 +2974,8 @@ var LeafThrough = class extends EventTarget {
     scene.add(sun, sun.target);
     const shading = {
       spineContact: { value: new THREE13.Vector3(1, 0, 0) },
-      lightDirection: { value: sun.position.clone().sub(sun.target.position).normalize() }
+      lightDirection: { value: sun.position.clone().sub(sun.target.position).normalize() },
+      origin: { value: new THREE13.Vector3() }
     };
     let floor2 = null;
     if (layout === "spread" && shadows && settings.lighting.floorShadow > 0) {
@@ -2828,6 +2997,7 @@ var LeafThrough = class extends EventTarget {
       textures,
       blank: layout === "single" ? this.paper.back(settings.paper.backColor) : blank,
       pattern: this.paper.grain(settings, renderer),
+      shared: sharedResources(renderer),
       position: this.pageToPosition(page, layout),
       metrics: this.metrics,
       shading,
@@ -2880,18 +3050,18 @@ var LeafThrough = class extends EventTarget {
     const right = Math.min(placed.view.x + placed.view.width, (documentWidth - pageLeft) / scaleX);
     const top = Math.max(placed.view.y, -pageTop / scaleY);
     const bottom = placed.view.y + placed.view.height;
-    const canvas = { x: left, y: top, width: Math.max(1, right - left), height: Math.max(1, bottom - top) };
+    const canvas2 = { x: left, y: top, width: Math.max(1, right - left), height: Math.max(1, bottom - top) };
     const px = (n) => `${Math.round(n * 100) / 100}px`;
     Object.assign(this.canvas.style, {
-      left: px(canvas.x),
-      top: px(canvas.y),
-      width: px(canvas.width),
-      height: px(canvas.height)
+      left: px(canvas2.x),
+      top: px(canvas2.y),
+      width: px(canvas2.width),
+      height: px(canvas2.height)
     });
     const maxRatio = Math.min(devicePixelRatio, settings.maxPixelRatio);
-    const budget = Math.sqrt(15e6 / Math.max(1, canvas.width * canvas.height));
+    const budget = Math.sqrt(15e6 / Math.max(1, canvas2.width * canvas2.height));
     this.renderer.setPixelRatio(Math.min(maxRatio, budget));
-    this.renderer.setSize(Math.max(1, Math.round(canvas.width)), Math.max(1, Math.round(canvas.height)), false);
+    this.renderer.setSize(Math.max(1, Math.round(canvas2.width)), Math.max(1, Math.round(canvas2.height)), false);
     const { eye, view, distance } = framing;
     const halfWidth = Math.max(eye.x - view.x, view.x + view.width - eye.x);
     const halfHeight = Math.max(eye.y - view.y, view.y + view.height - eye.y);
@@ -2903,10 +3073,10 @@ var LeafThrough = class extends EventTarget {
     camera.setViewOffset(
       2 * halfWidth * scale,
       2 * halfHeight * scale,
-      canvas.x - frustumLeft,
-      canvas.y - frustumTop,
-      canvas.width,
-      canvas.height
+      canvas2.x - frustumLeft,
+      canvas2.y - frustumTop,
+      canvas2.width,
+      canvas2.height
     );
     camera.updateProjectionMatrix();
   }
@@ -3074,10 +3244,10 @@ var LeafThrough = class extends EventTarget {
     this.syncContent(view);
   }
 };
-function createRenderer(canvas) {
+function createRenderer(canvas2) {
   let renderer;
   try {
-    renderer = new THREE13.WebGLRenderer({ canvas, antialias: true, alpha: true });
+    renderer = new THREE13.WebGLRenderer({ canvas: canvas2, antialias: true, alpha: true });
   } catch {
     return null;
   }
@@ -3097,6 +3267,7 @@ export {
   LIVE_OPTIONS,
   preloadRadius,
   snapshot,
+  deepEqual,
   changedOptions,
   sourceKey,
   floorPoint,
@@ -3109,9 +3280,10 @@ export {
   Riffle,
   bindKeyboard,
   PageLoader,
+  sharedResources,
   PaperTextures,
   SingleEngine,
   SpreadEngine,
   LeafThrough
 };
-//# sourceMappingURL=chunk-GYSQO7QZ.js.map
+//# sourceMappingURL=chunk-KCIOFDSW.js.map