leafthrough 0.1.4 → 0.1.6

package/README.md

@@ -6,7 +6,8 @@ Vue, Svelte, and a Web Component for everything else (Angular, Solid, Lit, plain
 can also be [one object in your own three.js scene](#in-your-own-threejs-scene).
 
 **[Live demo](https://dmtrbrl.github.io/leafthrough/)**, with one page per binding and a dev panel
-for every option, method and event.
+for every option, method and event, and
+[a three.js scene](https://dmtrbrl.github.io/leafthrough/three.html) with the magazine in it.
 
 - **Two layouts.** `spread` is an open magazine with sheets turning over the spine.
   `single` shows one page at a time, and read pages roll up behind the magazine. `auto`
@@ -139,19 +140,21 @@ error trackers listen. To register the element under another tag, call
 
 ## In your own three.js scene
 
-`LeafThroughObject` is the magazine as a `THREE.Group`, for a scene you already have: a
-booklet in a CD case, a magazine on a desk. It draws with your renderer and takes pointer
-input through your camera, so it turns wherever it lies, however it's moved, turned or
-scaled. Every option, method and event of `LeafThrough` works the same, apart from those
-about its own canvas and DOM (`bleed`, `maxPixelRatio`, `plain`, `label`,
-`formatPageLabel`).
+`LeafThroughObject` is the magazine as a `THREE.Group`, for a scene you already have. It
+draws with your renderer and takes pointer input through your camera, so it turns wherever
+it lies, however it's moved, turned or scaled. Every option, method, property and event of
+`LeafThrough` works the same, apart from those about its own canvas and DOM: the options
+`bleed`, `maxPixelRatio`, `plain`, `label` and `formatPageLabel`, and the properties
+`plain` and `element`. It has one option of its own, `deform`
+([Reshaping the paper](#reshaping-the-paper)), and its sheets stand apart by default
+([Depth](#depth)).
 
 ```ts
 import { LeafThroughObject } from 'leafthrough'
 
-const magazine = new LeafThroughObject({ renderer, camera }, { pages, layout: 'spread', pageAspect: 1 })
+const magazine = new LeafThroughObject({ renderer, camera }, { pages, layout: 'spread' })
 magazine.rotation.x = -Math.PI / 2   // lay it on the table
-magazine.scale.setScalar(0.12)        // a page 12 cm wide, in a scene measured in metres
+magazine.scale.setScalar(0.21)        // a page 21 cm wide, in a scene measured in metres
 scene.add(magazine)
 
 renderer.setAnimationLoop((now) => {
@@ -161,38 +164,116 @@ renderer.setAnimationLoop((now) => {
 ```
 
 - **Units.** A page is 1 wide and `pageAspect` tall. The spine runs up the y axis at
-  x = 0 and the pages lie on the z = 0 plane, facing +z. A closed spread shows its cover
-  at x 0 to 1. `magazine.bounds.pages` is the pages at rest, the rectangle to frame with
-  your camera; `magazine.bounds.reach` is everything a turning page sweeps through.
+  x = 0 and the pages lie on the z = 0 plane, facing +z. A spread closed on its front
+  cover shows it at x 0 to 1, and closed on its back cover at x -1 to 0.
+  `magazine.bounds.pages` is the pages at rest, the rectangle to frame with your camera;
+  `magazine.bounds.reach` is everything a turning page sweeps through.
 - **Input.** The magazine listens for pointer events on `renderer.domElement` (or the
-  `domElement` you pass). A press it takes is one on its pages, which you can test with
-  `magazine.covers(clientX, clientY)`; check that in your own handlers to leave such
-  presses alone. Hide the magazine (`visible = false`, on it or a parent) and it takes
-  none. With `interaction.keyboard: true` the keys work while that element has focus; a
-  canvas usually doesn't take focus, so use `'global'`.
+  `domElement` you pass, which must show exactly the camera's view). It takes presses in
+  its hit area: the pages in `spread` (only the cover's side while closed), and in
+  `single` a box round the page with a strip left of the spine for turning back. It
+  doesn't look at your scene, so objects in front of the magazine don't block it.
+  `magazine.covers(clientX, clientY)` tells you whether it takes a press there; check that
+  in your own handlers to leave such presses alone. Hide the magazine (`visible = false`,
+  on it or a parent) and it takes none. With `interaction.keyboard: true` the keys work
+  while that element has focus; a canvas only takes focus with a `tabIndex`, so give it
+  one or use `'global'`. Drags scale with the magazine's size on screen, so they feel the
+  same near or far. For touch drags, give the element `touch-action: pan-y pinch-zoom`
+  (or `none`), so the browser doesn't take them for scrolling.
 - **Light.** The paper is a `MeshStandardMaterial`, lit by your scene's lights,
-  environment, fog and tone mapping. Of the `lighting` options, `sun.position` (in the
-  magazine's own units) steers the paper's shading and `shadows` makes the sheets cast
-  and receive shadows when your renderer draws them.
+  environment, fog and tone mapping. Of the `lighting` options, `shadows` makes the
+  sheets cast and receive shadows when your renderer draws them, and `sun.position`
+  should point towards your shadow-casting directional light, in the magazine's own
+  frame (only the direction counts). It places the shadow a turning sheet casts right by
+  the spine, where the shadow map can't. `update({ lighting: { shadows } })` switches the
+  sheets' shadows without a rebuild. Use it rather than setting `castShadow` or
+  `receiveShadow` on the sheets, which the magazine sets itself.
+- **Depth.** See [Depth](#depth): the sheets stand a little apart, which needs enough depth
+  precision from your camera.
 - **Rendering on demand.** If you only draw when something changes, listen for `change`:
   it fires when input, loading or a method call needs a frame. Then keep drawing while
   `tick()` returns true.
+- **Accessibility is yours.** With no DOM of its own, it has no live region, no page
+  descriptions and no plain view: pages' `alt` and `text` aren't read. Describe the pages
+  in your own page, and announce `pagechange` if readers should hear it.
 
 ```ts
 magazine.tick(now)                       // advance; true while the pages still move
-magazine.covers(e.clientX, e.clientY)    // whether a press there lands on the pages
+magazine.covers(e.clientX, e.clientY)    // whether the magazine takes a press there
 magazine.bounds                          // { pages, reach }, in the magazine's own units
 magazine.camera = otherCamera            // cast input from another camera
 magazine.enabled = false                 // cancel active gestures and stop taking pointer/key input
+magazine.update({ lighting: { shadows: false } })   // sheets stop casting and receiving, no rebuild
 magazine.addEventListener('change', () => requestRender())
 magazine.addEventListener('pagechange', (e) => e.detail)   // also ready, pageload, error
 magazine.dispose()                       // free everything and leave the scene
 ```
 
+### Depth
+
+In a `LeafThroughObject` the sheets stand apart, `paper.sheetGap` `0.0005` page widths
+(0.1 mm paper on a 210 mm page), and sort by their real depth, so they stay in order from the front, from
+behind and at any angle. Your camera has to resolve that gap. A 24-bit depth buffer tells
+apart points roughly `distance² / (near × 16,777,216)` apart, in your scene's units, and that
+must be well under the gap in the same units. Take a booklet 120 mm wide in a scene in
+metres, seen from 4.4 m: its gap is 0.06 mm. With the camera's `near` at 0.1 the buffer
+resolves about 0.012 mm, which is enough; at 0.01 it's about 0.12 mm, and hidden pages
+flicker through. So keep `near` as large as your scene allows; `far` matters much less.
+The magazine never changes your camera. With a coarse depth buffer you can widen the gap.
+
+The standalone magazine instead draws sheets that touch at the spine and lets
+`paper.depthBias` sort them: a polygon offset brings each sheet nearer the camera than
+those under it. You can turn that on here too (`paper: { sheetGap: 0, depthBias: true }`),
+but it has two limits in a scene of your own. It assumes the magazine is seen from the
+front, so from behind it brings the wrong sheets forward. And it moves sheets by steps of
+the depth buffer, so how far depends on `near`, `far` and distance: with a small `near`
+it can pull pages through whatever lies just in front of the magazine.
+
+### Reshaping the paper
+
+Experimental: this may change in a patch release. `deform` reshapes the paper with your
+own GLSL, after the magazine has shaped it: bend a booklet coming out of its case, squeeze
+it, roll it. It applies wherever the paper is drawn, in colour and in the shadow passes,
+and lighting follows, because normals come from the deformed shape.
+
+```ts
+const bend = { value: 0 }
+const magazine = new LeafThroughObject({ renderer, camera }, {
+  pages,
+  deform: {
+    uniforms: { uBend: bend },
+    glsl: /* glsl */ `
+      uniform float uBend;
+      vec3 deformSheet(vec3 p, vec2 uv) {
+        // curl the pages up along x, around a cylinder of radius 1 / uBend
+        if (uBend < 1e-4) return p;
+        float a = p.x * uBend;
+        float r = 1.0 / uBend - p.z;
+        return vec3(r * sin(a), p.y, 1.0 / uBend - r * cos(a));
+      }`,
+  },
+})
+
+bend.value = 1.2   // read on the next frame: no rebuild
+```
+
+- `deformSheet` gets `p`, a point of a sheet in the magazine's own units (see Units
+  above), and `uv`, where it is on that sheet: x from the spine (0) to the outer edge (1),
+  y from bottom to top. It returns where to draw that point, in the same units.
+- three.js's common GLSL (`PI`, `saturate` and so on) is available. Name your uniforms
+  with a prefix of your own, as the magazine's start with `u`.
+- Uniforms are read every frame: set `value` on your own objects, or pass new objects
+  under the same names through `update()`. Changing the GLSL, or which uniforms there are,
+  rebuilds the pages.
+- It changes only what's drawn. Pointer input, `covers()`, `bounds` and the shadow a
+  turning sheet casts by the spine still work from the undeformed pages, so turn input off
+  (`enabled = false`) while the paper is far from its own shape.
+
 The [three.js demo](https://dmtrbrl.github.io/leafthrough/three.html) takes a magazine
 out of a portrait paperboard mailer on a table; its source is
-[`demo/main-three.ts`](demo/main-three.ts), with the native three.js mailer geometry in
-[`demo/envelope.ts`](demo/envelope.ts).
+[`demo/main-three.ts`](https://github.com/dmtrbrl/leafthrough/blob/main/demo/main-three.ts),
+with the native three.js mailer geometry in
+[`demo/envelope.ts`](https://github.com/dmtrbrl/leafthrough/blob/main/demo/envelope.ts).
 
 ## Sizing
 
@@ -247,6 +328,8 @@ The magazine fills the element you give it and keeps its proportions, centred.
 | `wrinkles`                | `1`                         | Waviness of resting sheets; `0` lays them flat.                                                              |
 | `bulge`                   | `1`                         | How much pages rise off the spine.                                                                           |
 | `cutout`                  | `false`                     | Cuts each sheet to the shape of its front page: transparent areas are no paper at all, shadow included.      |
+| `sheetGap`                | `0` (`0.0005` in a scene)   | Space between stacked sheets, in page widths. 0.1 mm paper on a 120 mm page is `0.1 / 120`.                  |
+| `depthBias`               | `true` (`false` in a scene) | Draws each sheet nearer the camera than those under it, so sheets touching at the spine don't flicker. See [Depth](#depth). |
 
 **`lighting`**: `ambient: { sky, ground, intensity }`, `sun: { color, intensity, position }`,
 `shadows` (default `true`), `shadowMapSize` (default `2048`), and `floorShadow`. That last
@@ -297,7 +380,8 @@ magazine.addEventListener('error', (e) => e.detail)       // { error, page }
 
 Both compare options by value. Changing callbacks or the label is free. Changing `pages`,
 `layout`, paper, lighting, motion or interaction rebuilds the scene (a few milliseconds)
-and keeps the reader on the same page. `startPage` only applies at creation; use `goTo()`
+and keeps the reader on the same page. In a `LeafThroughObject`, `lighting.shadows` and
+new values for `deform`'s uniforms apply without a rebuild. `startPage` only applies at creation; use `goTo()`
 after that. The React, Vue and Svelte bindings and the element use `setOptions()`, so
 removing a prop or attribute restores its default. Options are copied on every call, so an
 object or array changed in place and passed again (as Vue's reactive props are) counts as
@@ -352,7 +436,8 @@ off screen or the tab is hidden.
 The 3D canvas is hidden from screen readers, so give pages an `alt` and their `text` (see
 [Pages](#pages)). The magazine keeps the visible pages' descriptions and text in the page,
 visually hidden, where screen readers can read them; each page is a `figure` named by
-`formatPageLabel`.
+`formatPageLabel`. `LeafThroughObject` has no DOM, so none of this comes with it (see
+[In your own three.js scene](#in-your-own-threejs-scene)).
 
 **Plain view.** `plain: true` shows the pages as flat images, with the same layouts,
 navigation, keyboard and events, and no 3D. Clicking the right half turns forward, the left
@@ -387,7 +472,10 @@ How it works:
 - `content.ts` keeps the visible pages' content as DOM: hidden for screen readers in 3D,
   the pages themselves in the plain view.
 - `textures.ts` loads, prioritises and unloads page textures.
-- `src/paper` holds the shared paper material and the procedural grain.
+- `src/paper` holds the shared paper material and the procedural grain. Sheets keep their
+  order by real depth, each lifted by `paper.sheetGap` for the sheets under it, or by a
+  polygon offset (`layerSheet`) where they touch. `deform` wraps the layout's sheet shape
+  in every pass.
 - `LeafThrough.ts` handles the DOM, sizing, loading, layout switching, keyboard and
   events. `LeafThroughObject.ts` does the same inside someone else's scene, without the DOM.
 - Engines take input through `EngineInput` (`engine.ts`): an element to listen on, a ray
@@ -395,6 +483,8 @@ How it works:
   their own floor plane, so the same code serves the magazine's own camera and any scene's.
 - `navigation.ts` maps pages to engine positions, riffles an animated `goTo()` and binds
   the keyboard, for both.
+- `test/depth.test.ts` prints the pages that should be hidden pure red and checks that
+  none shows, across layouts, views, paper shapes, turns and camera depth ranges.
 
 ## Credits
 
@@ -403,4 +493,4 @@ The page deformation and interaction model are reverse-engineered from the magaz
 
 ## License
 
-[MIT](LICENSE)
+[MIT](https://github.com/dmtrbrl/leafthrough/blob/main/LICENSE)

package/dist/LeafThroughObject.d.ts

@@ -1,13 +1,21 @@
 import * as THREE from 'three';
 import { type Rect } from './framing.js';
 import type { GoToOptions } from './LeafThrough.js';
-import { type LeafThroughOptions, type Layout, type PageChangeDetail } from './options.js';
+import { type LeafThroughOptions, type Layout, type PageChangeDetail, type PaperDeform } from './options.js';
 /**
  * The magazine's options, less those about its own canvas and DOM. Of `lighting`, only
- * `sun.position` (which way the paper is shaded) and `shadows` (whether sheets cast and
- * receive them) apply: the lights are your scene's.
+ * `shadows` (whether sheets cast and receive them) and `sun.position` apply: the lights are
+ * your scene's. Point `sun.position` towards your shadow-casting directional light, in the
+ * magazine's own frame; it places the shadow a turning sheet casts right by the spine.
+ * `lighting.shadows` changes without a rebuild.
+ *
+ * Its sheets stand apart by default (`paper.sheetGap` `0.0005`, about 0.1 mm paper on a
+ * 210 mm page) and `paper.depthBias` is off, so they sort by real depth from any side.
  */
-export type LeafThroughObjectOptions = Omit<LeafThroughOptions, 'bleed' | 'maxPixelRatio' | 'plain' | 'label' | 'formatPageLabel'>;
+export type LeafThroughObjectOptions = Omit<LeafThroughOptions, 'bleed' | 'maxPixelRatio' | 'plain' | 'label' | 'formatPageLabel'> & {
+    /** Reshapes the paper in your own GLSL. Experimental. */
+    deform?: PaperDeform;
+};
 /** What the magazine draws with, from your scene. */
 export interface LeafThroughObjectContext {
     /** The renderer drawing your scene. Pages load into it. */
@@ -137,6 +145,7 @@ export declare class LeafThroughObject extends THREE.Group<LeafThroughObjectEven
     private pickLayout;
     private watchSpreadQuery;
     private remount;
+    private resolve;
     private readonly axis;
     private pageAxis;
     private dragWidth;

package/dist/{chunk-GYSQO7QZ.js → chunk-QFOGCGJJ.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",
@@ -632,27 +635,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 +745,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 +766,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 +790,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) {
@@ -1085,6 +1098,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 +1184,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,
@@ -1206,11 +1220,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,
@@ -1301,6 +1317,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,6 +1338,7 @@ 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));
@@ -1399,6 +1417,11 @@ 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();
@@ -1759,11 +1782,13 @@ var SingleEngine = class {
     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 ? this.current - 1 - i : i - this.current;
+      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;
   }
@@ -1833,6 +1858,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 ? before * Math.cos(spineOpen) : 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 +1921,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 +1931,7 @@ var vertexChunk2 = (settings) => (
   uniform vec2 uFlipRotation;
   uniform float uDirection;
   uniform float uStackLift;
+  uniform float uStackGap;
 
   attribute vec3 aNoise;
 
@@ -1916,8 +1948,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 +1970,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;
   }
 `
@@ -1992,11 +2027,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 +2074,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;
@@ -2133,6 +2174,11 @@ 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();
@@ -2495,7 +2541,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 +2572,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 +2853,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) {
@@ -3097,6 +3145,7 @@ export {
   LIVE_OPTIONS,
   preloadRadius,
   snapshot,
+  deepEqual,
   changedOptions,
   sourceKey,
   floorPoint,
@@ -3114,4 +3163,4 @@ export {
   SpreadEngine,
   LeafThrough
 };
-//# sourceMappingURL=chunk-GYSQO7QZ.js.map
+//# sourceMappingURL=chunk-QFOGCGJJ.js.map