postext-folio 0.6.0 → 0.7.0

package/dist/pageFlip.js

@@ -1,12 +1,21 @@
-import { BoxGeometry, BufferAttribute, BufferGeometry, Color, CustomBlending, DepthTexture, DirectionalLight, DoubleSide, Group, HalfFloatType, LinearMipmapLinearFilter, MaxEquation, Mesh, MeshPhysicalMaterial, MeshStandardMaterial, LinearFilter, Matrix4, NeutralToneMapping, OneFactor, OrthographicCamera, PCFShadowMap, PerspectiveCamera, Plane, PlaneGeometry, PMREMGenerator, Raycaster, Scene, ShaderChunk, ShaderMaterial, ShadowMaterial, SRGBColorSpace, Texture, TextureLoader, Vector2, Vector3, Vector4, VideoTexture, WebGLRenderer, WebGLRenderTarget, } from "three";
+import { BoxGeometry, BufferAttribute, BufferGeometry, Color, CustomBlending, DepthTexture, DirectionalLight, DoubleSide, Group, HalfFloatType, LinearMipmapLinearFilter, MaxEquation, Mesh, MeshPhysicalMaterial, MeshStandardMaterial, LinearFilter, Matrix4, NeutralToneMapping, OneFactor, OrthographicCamera, PCFShadowMap, PerspectiveCamera, Plane, PlaneGeometry, PMREMGenerator, Raycaster, Scene, ShaderChunk, ShaderMaterial, ShadowMaterial, SRGBColorSpace, Texture, TextureLoader, Vector2, Vector3, Vector4, WebGLRenderer, WebGLRenderTarget, } from "three";
+import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer.js";
+import { OutputPass } from "three/examples/jsm/postprocessing/OutputPass.js";
+import { RenderPass } from "three/examples/jsm/postprocessing/RenderPass.js";
+import { SMAAPass } from "three/examples/jsm/postprocessing/SMAAPass.js";
 import { resolveFolioConfig } from "postext";
 import { along, BINDINGS, gutterOcclusion, profiles, stackGeometry, topAt } from "./bookGeometry";
 import { environment } from "./environments";
 import { pagePaper, paperSpec } from "./paper";
 import { loadDeskMaps } from "./deskTextures";
+import { ATLAS_MAX, MAX_PAGE_VIDEOS, VideoAtlas } from "./videoAtlas";
 import { cachedDesk, cachedRelief } from "./procedural";
 /** Columns and rows of a leaf's mesh: fine enough for a tight roll. */
 const NX = 96;
+/** How far a leaf's folded paper stays over its own paper beneath it. */
+const OWN_GAP = 1.2;
+/** How much higher than at rest a leaf in the air stays over a block. */
+const BLOCK_GAP = 1.5;
 const NY = 120;
 /** Columns of a page lying open (its curve runs across only). */
 const NX_OPEN = 72;
@@ -23,6 +32,9 @@ export const BLOCK_PAGES = 10;
 /** How long a block of leaves takes to go over (ms), a little longer for
  *  a thicker one. */
 const BLOCK_DURATION = 1150;
+/** A page is taken by its outer part only: from this fraction of its
+ *  width from the spine out to the fore-edge (#494). */
+const GRIP = 0.5;
 /** A leaf follows the one before it once that one is this far through its turn. */
 const GAP = 0.14;
 // Ambient occlusion from the book's own shape: each frame the book is
@@ -263,11 +275,11 @@ function pageMaterial(mirror, sign) {
         uLeafOcc: { value: 0.45 },
         uOccBias: { value: 6 },
         uVideo: { value: null },
-        uVidFace: { value: 0 },
-        uVidO: { value: new Vector2() },
-        uVidA: { value: new Vector2(1, 0) },
-        uVidB: { value: new Vector2(0, 1) },
-        uVidCrop: { value: new Vector4(0, 0, 1, 1) },
+        uVidTexel: { value: new Vector2(1, 1) },
+        uVidCount: { value: 0 },
+        uVidOA: { value: Array.from({ length: MAX_PAGE_VIDEOS }, () => new Vector4()) },
+        uVidDF: { value: Array.from({ length: MAX_PAGE_VIDEOS }, () => new Vector4()) },
+        uVidRect: { value: Array.from({ length: MAX_PAGE_VIDEOS }, () => new Vector4()) },
         uReflection: { value: null },
         uReflectionOn: { value: 0 },
         uReflectionSize: { value: new Vector2(1, 1) },
@@ -312,11 +324,11 @@ function pageMaterial(mirror, sign) {
         uniform float uLeafOcc;
         uniform float uSign;
         uniform sampler2D uVideo;
-        uniform float uVidFace;
-        uniform vec2 uVidO;
-        uniform vec2 uVidA;
-        uniform vec2 uVidB;
-        uniform vec4 uVidCrop;
+        uniform vec2 uVidTexel;
+        uniform float uVidCount;
+        uniform vec4 uVidOA[${MAX_PAGE_VIDEOS}];
+        uniform vec4 uVidDF[${MAX_PAGE_VIDEOS}];
+        uniform vec4 uVidRect[${MAX_PAGE_VIDEOS}];
         uniform sampler2D uReflection;
         uniform float uReflectionOn;
         uniform vec2 uReflectionSize;
@@ -334,15 +346,22 @@ function pageMaterial(mirror, sign) {
           vec2 uvB = vec2(1.0 - u, vPageUv.y);
           vec3 ink = uPaper;
           if (has > 0.5 && has < 1.5) ink = front ? texture2D(uFront, uvF).rgb : texture2D(uBack, uvB).rgb;
-          // A video playing on this face, printed over its poster: the
-          // point of the page (from its top left corner) in the picture's
-          // own frame, which may lie turned on the page.
-          if (uVidFace > 0.5 && (uVidFace < 1.5) == front) {
-            vec2 tuv = front ? uvF : uvB;
-            vec2 p = vec2(tuv.x, 1.0 - tuv.y) - uVidO;
-            vec2 st = vec2(dot(p, uVidA) / dot(uVidA, uVidA), dot(p, uVidB) / dot(uVidB, uVidB));
+          // The videos playing on this face, printed over their posters:
+          // the point of the page (from its top left corner) in each
+          // picture's own frame, which may lie turned on the page, then in
+          // its slot of the atlas (kept half a texel inside it, clear of
+          // the next slot).
+          vec2 tuv = front ? uvF : uvB;
+          for (int i = 0; i < ${MAX_PAGE_VIDEOS}; i++) {
+            if (float(i) >= uVidCount) break;
+            vec4 oa = uVidOA[i];
+            vec4 df = uVidDF[i];
+            if ((df.z < 1.5) != front) continue;
+            vec2 p = vec2(tuv.x, 1.0 - tuv.y) - oa.xy;
+            vec2 st = vec2(dot(p, oa.zw) / dot(oa.zw, oa.zw), dot(p, df.xy) / dot(df.xy, df.xy));
             if (st.x >= 0.0 && st.x <= 1.0 && st.y >= 0.0 && st.y <= 1.0) {
-              vec2 v = uVidCrop.xy + st * uVidCrop.zw;
+              vec4 r = uVidRect[i];
+              vec2 v = clamp(r.xy + st * r.zw, r.xy + 0.5 * uVidTexel, r.xy + r.zw - 0.5 * uVidTexel);
               ink = texture2D(uVideo, vec2(v.x, 1.0 - v.y)).rgb;
             }
           }
@@ -623,12 +642,33 @@ export function foldOf(G, P, W, H, roll = 1) {
     // straight, lands over the hand: R sinθ + (c − Rθ) cosθ = c − D.
     const arc = R * theta;
     const k = arc > 0 ? Math.min(1, D / arc) : 0;
-    let c = (D + k * (R * Math.sin(theta) - arc * Math.cos(theta))) / (1 - Math.cos(theta));
+    const free = (D + k * (R * Math.sin(theta) - arc * Math.cos(theta))) / (1 - Math.cos(theta));
+    let c = free;
     for (const S of [-H / 2, H / 2])
         c = Math.min(c, G.u * n.u + (G.v - S) * n.v);
     if (c <= 0)
         return null;
-    return { F: { u: G.u - n.u * c, v: G.v - n.v * c }, n, R, theta };
+    const F = { u: G.u - n.u * c, v: G.v - n.v * c };
+    // Never all at once (#502). Paper lying beyond the point taken, along
+    // the pull (a page taken by the middle of an edge and pulled across),
+    // turns over as the hand carries it away, not the moment it moves (a
+    // pixel's pull stood half the page up). A fold held off the spine short
+    // of the hand turns the less the nearer it comes to the point taken, so
+    // that it is gone, not dropped, when it reaches it.
+    let beyond = 0;
+    for (const u of [0, W])
+        for (const v of [-H / 2, H / 2])
+            beyond = Math.max(beyond, (u - G.u) * n.u + (v - G.v) * n.v);
+    const turns = (c / free) * (beyond > 0 ? smooth(0, 0.5 * beyond, D) : 1);
+    return { F, n, R, theta: theta * turns };
+}
+/** Paper `d` past the fold, round a roll of radius R and straight on at
+ *  θ: how far it reaches back across the page, and how high it stands. */
+function rollOf(d, R, theta) {
+    if (R > 1e-3 && d < R * theta)
+        return [R * Math.sin(d / R), R * (1 - Math.cos(d / R))];
+    const rest = d - R * theta;
+    return [R * Math.sin(theta) + rest * Math.cos(theta), R * (1 - Math.cos(theta)) + rest * Math.sin(theta)];
 }
 /** How far through its turn a leaf is: the point taken, from where it
  *  was to its mirror image across the spine. */
@@ -704,13 +744,17 @@ export function layLeaf(geometry, fold, forward, W, H, lift, book, rigidity, q,
     // corner barely lifted, a few degrees through the middle of the turn.
     const inAir = smooth(0.02, 0.22, q) * smooth(0.02, 0.22, 1 - q);
     const lean = LEAN * inAir;
-    const cosA = Math.cos(lean);
-    const sinA = Math.sin(lean);
     // Each side's chord, from the spine to its fore-edge: a side hanging
     // from a standing spine slopes down to the desk, and a leaf leaning off
     // it leans off that slope, not off a level plane over it.
     const chordR = (zr - zr0) / (xr || 1);
     const chordL = (zl - zl0) / (xl || 1);
+    // The plane a leaf lifts off along, by side: the chord turned up by the
+    // lean. A leaf keeps its width along it (stepping the chord's rise per
+    // unit across, on a side sloping to the desk, stretched it by a tenth
+    // and more, #495).
+    const tiltR = Math.atan(chordR) + lean;
+    const tiltL = Math.atan(chordL) + lean;
     // Onto the book. At rest (and as it lands) the leaf lies on the open
     // book's surface, into the gutter and out. In the air it is lifted off
     // at the spine: its own plane rises from the gutter's floor at a small
@@ -721,8 +765,9 @@ export function layLeaf(geometry, fold, forward, W, H, lift, book, rigidity, q,
         let px = rx;
         let pz = rz + z + lift;
         if (inAir > 0) {
-            const fx = (s >= 0 ? 1 : -1) * Math.abs(s) * cosA;
-            const plane = (s >= 0 ? zr0 + s * chordR : zl0 - s * chordL) + Math.abs(s) * sinA + z + lift;
+            const tilt = s >= 0 ? tiltR : tiltL;
+            const fx = (s >= 0 ? 1 : -1) * Math.abs(s) * Math.cos(tilt);
+            const plane = (s >= 0 ? zr0 : zl0) + Math.abs(s) * Math.sin(tilt) + z + lift;
             const under = surfaceAt(book, fx)[1] + lift + 0.6;
             const flying = smoothMax(plane, under, 0.006 * W);
             px += (fx - px) * inAir;
@@ -730,6 +775,33 @@ export function layLeaf(geometry, fold, forward, W, H, lift, book, rigidity, q,
         }
         return [px, pz];
     };
+    // Thin paper ripples in the air, more towards its free edge. Never
+    // down into the pages under it: the ripple dies away where the leaf
+    // lies close over them (it stays at least `lift` above them), or a
+    // leaf held low over its stack dipped into the page under it, whose
+    // print then showed through (#447).
+    const ripple = (u, v, px, pz) => {
+        const amp = flutter * W * (u / W) * (u / W);
+        if (flutter <= 0 || amp <= 1e-6)
+            return 0;
+        const clear = pz - surfaceAt(book, px)[1] - lift;
+        return amp * smooth(0, 2 * amp, clear) * Math.sin(2 * Math.PI * (time / 520) - (3 * u) / W + (2 * v) / H);
+    };
+    // Where the leaf's paper lies unfolded, column by column (before it
+    // ripples): [out from the spine, u, height].
+    const clearing = BLOCK_GAP * smooth(0, 0.06, q) * smooth(0, 0.06, 1 - q);
+    const own = [];
+    if (fold) {
+        for (let ix = 0; ix <= NX; ix++) {
+            const u = column(ix / NX) * W;
+            let [ox, oz] = onBook(sx * u, 0);
+            if (r > 0) {
+                ox += (u * Math.cos(phi) - offset * Math.sin(phi) - ox) * r;
+                oz += (hinge + lift + u * Math.sin(phi) + offset * Math.cos(phi) - oz) * r;
+            }
+            own.push([sx * ox, u, oz]);
+        }
+    }
     for (let iy = 0; iy <= NY; iy++) {
         const v = (0.5 - iy / NY) * H;
         for (let ix = 0; ix <= NX; ix++) {
@@ -740,22 +812,13 @@ export function layLeaf(geometry, fold, forward, W, H, lift, book, rigidity, q,
             let d = 0;
             let dd = 0;
             if (fold) {
-                const { F, n, R } = fold;
+                const { F, n } = fold;
                 d = (u - F.u) * n.u + (v - F.v) * n.v;
                 if (d > 0) {
                     // Round the roll, then straight on at the fold's angle.
-                    const theta = fold.theta;
-                    if (R > 1e-3 && d < R * theta) {
-                        dd = R * Math.sin(d / R);
-                        z = R * (1 - Math.cos(d / R));
-                    }
-                    else {
-                        const rest = d - R * theta;
-                        dd = R * Math.sin(theta) + rest * Math.cos(theta);
-                        z = R * (1 - Math.cos(theta)) + rest * Math.sin(theta);
-                    }
-                    x = u - n.u * (d - dd);
+                    [dd, z] = rollOf(d, fold.R, fold.theta);
                     y = v - n.v * (d - dd);
+                    x = u - n.u * (d - dd);
                 }
             }
             let [px, pz] = onBook(sx * x, z);
@@ -775,24 +838,42 @@ export function layLeaf(geometry, fold, forward, W, H, lift, book, rigidity, q,
                 y += (v - y) * r;
                 pz += (hinge + lift + u * Math.sin(phi) + offset * Math.cos(phi) - pz) * r;
             }
-            // Thin paper ripples in the air, more towards its free edge. Never
-            // down into the pages under it: the ripple dies away where the leaf
-            // lies close over them (it stays at least `lift` above them), or a
-            // leaf held low over its stack dipped into the page under it, whose
-            // print then showed through (#447).
-            if (flutter > 0) {
-                const amp = flutter * W * (u / W) * (u / W);
-                const clear = pz - surfaceAt(book, px)[1] - lift;
-                if (amp > 1e-6)
-                    pz += amp * smooth(0, 2 * amp, clear) * Math.sin(2 * Math.PI * (time / 520) - (3 * u) / W + (2 * v) / H);
+            pz += ripple(u, v, px, pz);
+            // Never through the leaf's own paper not yet folded, as it ripples
+            // too: carried level from a fold low on a side sloping up to the
+            // spine, the paper folded back over it ran under it, crossing it.
+            if (fold && d > 0) {
+                const at = sx * px;
+                // (A row past the head and foot too: a triangle reaching past them
+                // from paper kept over sagged through.)
+                if (at > own[0][0] && at < own[NX][0] && Math.abs(y) <= H / 2 + (1.5 * H) / NY) {
+                    let lo = 0;
+                    let hi = NX;
+                    while (hi - lo > 1) {
+                        const mid = (lo + hi) >> 1;
+                        if (own[mid][0] <= at)
+                            lo = mid;
+                        else
+                            hi = mid;
+                    }
+                    const f = (at - own[lo][0]) / (own[hi][0] - own[lo][0] || 1);
+                    const ou = own[lo][1] + (own[hi][1] - own[lo][1]) * f;
+                    if ((ou - fold.F.u) * fold.n.u + (y - fold.F.v) * fold.n.v < 0) {
+                        const oz = own[lo][2] + (own[hi][2] - own[lo][2]) * f;
+                        pz = Math.max(pz, oz + ripple(ou, y, px, oz) + OWN_GAP);
+                    }
+                }
             }
             // Never into the book: over a block (and past its head or foot) a
             // leaf stands at least just over its top. A fold's flap is carried
             // level from the foot of its fold, and on a thin side hanging from
             // the spine that foot lies low: the flap went through the tall block
             // on the other side (#489).
+            // In the air a little higher still (until it lands): half a pixel
+            // over the block is hardly any depth at the view's distance, and a
+            // leaf lying over a tall block's top drew through its page in teeth.
             if (!board && Math.abs(px) < (px >= 0 ? xr : xl))
-                pz = Math.max(pz, topAt(px >= 0 ? book.right : book.left, Math.abs(px)) + Math.min(lift, 0.5));
+                pz = Math.max(pz, topAt(px >= 0 ? book.right : book.left, Math.abs(px)) + Math.min(lift, 0.5) + clearing);
             pos.setXYZ(iy * (NX + 1) + ix, px, y, pz);
         }
     }
@@ -857,6 +938,7 @@ export class PageFlipper {
     renderer;
     scene = new Scene();
     camera = new PerspectiveCamera(FOV, 1, 1, 10000);
+    composer;
     left;
     right;
     desk;
@@ -965,10 +1047,20 @@ export class PageFlipper {
         this.staticCaster = casterMaterial(false);
         // `__postextFolioPreserve`: keep the drawing buffer (to read the canvas back while debugging).
         const preserveDrawingBuffer = !!globalThis.__postextFolioPreserve;
-        this.renderer = new WebGLRenderer({ canvas, alpha: true, antialias: true, premultipliedAlpha: true, preserveDrawingBuffer });
+        this.renderer = new WebGLRenderer({ canvas, alpha: true, antialias: false, premultipliedAlpha: true, preserveDrawingBuffer });
         this.renderer.outputColorSpace = SRGBColorSpace;
         this.renderer.toneMapping = NeutralToneMapping;
         this.renderer.setClearColor(0x000000, 0);
+        // Edges smoothed by SMAA over the finished picture (#503), not by the
+        // canvas's own four samples a pixel: those left steps on long, nearly
+        // level edges of strong contrast (a light page over the dark block)
+        // and cost the most of a frame (resolved into a preserved drawing
+        // buffer); SMAA smooths them better for a fraction of it. The scene
+        // is drawn into a float picture, toned for the screen, then smoothed.
+        this.composer = new EffectComposer(this.renderer, new WebGLRenderTarget(1, 1, { type: HalfFloatType }));
+        this.composer.addPass(new RenderPass(this.scene, this.camera));
+        this.composer.addPass(new OutputPass());
+        this.composer.addPass(new SMAAPass());
         if (this.renderer.shadowMap) {
             this.renderer.shadowMap.enabled = true;
             this.renderer.shadowMap.type = PCFShadowMap;
@@ -1039,7 +1131,8 @@ export class PageFlipper {
     setAppearance(appearance) {
         this.appearance = appearance;
         this.resolved = resolveFolioConfig(withStockForExtent(appearance.folio, this.pageCount(appearance)));
-        this.bookSpec = paperSpec(this.resolved.paper);
+        const mm = appearance.pageWidthMm;
+        this.bookSpec = paperSpec(this.resolved.paper, mm);
         // The settings now give the view the reader orbited to (it was just
         // saved as the book's): they drive it again, so editing them moves it.
         const { yaw, pitch } = this.orbit;
@@ -1056,20 +1149,22 @@ export class PageFlipper {
             const key = JSON.stringify(own);
             let spec = specs.get(key);
             if (!spec)
-                specs.set(key, (spec = paperSpec(pagePaper(appearance.folio, own))));
+                specs.set(key, (spec = paperSpec(pagePaper(appearance.folio, own), mm)));
             return spec;
         });
         const r = this.resolved;
         const covers = appearance.coverLeaves;
         const ownCovers = !!covers && (covers.front !== undefined || covers.back !== undefined);
-        this.coverSpec = !ownCovers
+        // A newspaper's front page is the outer sheet, no heavier than the
+        // others: it turns as a page does.
+        this.coverSpec = !ownCovers || r.binding.type === "folded"
             ? null
             : r.binding.type === "saddleStitch"
                 ? // A stapled booklet's cover is a sheet like the others, of the same
                     // finish and a little heavier: it bends and turns as a page does.
-                    paperSpec({ ...r.paper, grammage: Math.min(350, Math.round(r.paper.grammage * 1.5)), showThrough: false })
+                    paperSpec({ ...r.paper, grammage: Math.min(350, Math.round(r.paper.grammage * 1.5)), showThrough: false }, mm)
                 : {
-                    ...paperSpec({ ...r.paper, type: "board", grammage: 1250, bulk: 1.6, finish: "silk", texture: "smooth", shade: { hex: "#ffffff", model: "hex" }, showThrough: false }),
+                    ...paperSpec({ ...r.paper, type: "board", grammage: 1250, bulk: 1.6, finish: "silk", texture: "smooth", shade: { hex: "#ffffff", model: "hex" }, showThrough: false }, mm),
                     // The book's own printed covers: in a case binding a printed
                     // (litho-laminated) case, on the case's 2–3 mm board; on a
                     // paperback a laminated cover card, about 0.3 mm.
@@ -1117,9 +1212,17 @@ export class PageFlipper {
         c.clearcoat = mat === "paper" ? 0.35 : 0;
         c.normalMap?.dispose();
         c.normalMap = mat === "cloth" ? cachedRelief("linen").normal.clone() : mat === "leather" ? cachedDesk("leather").normal.clone() : null;
+        if (r.binding.type === "folded") {
+            // No cover at all: the back of the fold is the outer sheet's paper.
+            c.color.set(r.paper.shade.hex);
+            c.roughness = this.bookSpec.roughness;
+            c.sheen = this.bookSpec.sheen;
+            c.sheenColor.set(1, 1, 1);
+            c.clearcoat = this.bookSpec.clearcoat;
+        }
         c.needsUpdate = true;
-        // The spine.
-        const spine = r.binding.type === "saddleStitch" ? null : (appearance.spineImage ?? null);
+        // The spine: none on a stapled or folded book.
+        const spine = r.binding.type === "saddleStitch" || r.binding.type === "folded" ? null : (appearance.spineImage ?? null);
         if (spine !== this.spineSrc) {
             this.spineSrc = spine;
             this.spineTex?.dispose();
@@ -1379,8 +1482,8 @@ export class PageFlipper {
         const tR = thick(right, extra.after);
         const binding = this.resolved.binding.type;
         // A board on top of a stack lies flat; the document's own covers
-        // replace the case.
-        const noCase = !!this.coverSpec;
+        // replace the case, and folded sheets have none.
+        const noCase = !!this.coverSpec || binding === "folded";
         const rigid = (leaf) => leaf !== undefined && this.specOf(leaf).rigidity > 0.5;
         const { left: pl, right: pr, board } = profiles(binding, this.W, k, tL, tR, {
             flatLeft: rigid(left[left.length - 1]),
@@ -1445,7 +1548,7 @@ export class PageFlipper {
             this.stacks.push(mesh);
             this.stage.add(mesh);
         }
-        if (noCase)
+        if (noCase && binding !== "folded")
             this.coverMaterial.color.copy(this.boardColor());
         // The back of the block: the folds sewn at the spine, under the line
         // where the two open pages meet (nothing shows through the gutter).
@@ -1555,6 +1658,8 @@ export class PageFlipper {
         const dpr = Math.min(window.devicePixelRatio || 1, 3);
         this.renderer.setPixelRatio(1);
         this.renderer.setSize(Math.round(cw * dpr), Math.round(ch * dpr), false);
+        this.composer.setPixelRatio(1);
+        this.composer.setSize(Math.round(cw * dpr), Math.round(ch * dpr));
         this.buffer.set(Math.round(cw * dpr), Math.round(ch * dpr));
         this.dpr = dpr;
         const spread = this.spread.getBoundingClientRect();
@@ -1567,6 +1672,9 @@ export class PageFlipper {
                 mesh.material.userData.spec = null;
         }
         this.buildBook();
+        // The videos' slots follow the size the pages are seen at.
+        if (this.videos.length)
+            this.packVideos();
         // The desk: far wider than the view, tiled at its physical scale.
         const k = this.pxPerMm();
         const size = 40 * Math.max(W, H);
@@ -1732,75 +1840,99 @@ export class PageFlipper {
             mesh.material.userData.uniforms.uPaper.value.setRGB(r, g, b, SRGBColorSpace);
         this.redraw();
     }
-    /** The video playing on a page (#477), or none. */
-    video = null;
+    /** The videos playing on the pages (#477, #507). */
+    videos = [];
+    /** Their pictures, drawn into one texture. */
+    atlas = null;
+    /** The slot sizes the atlas was packed for. */
+    atlasKey = "";
     /**
-     * Draws a video on the page whose source is `src` (see
-     * {@link PageVideoFrame}), over its painting, on whichever face of
-     * whichever leaf carries that page: lying open or turning, the picture
-     * bends with the paper. `null` takes it off. The book is drawn again at
-     * every new frame of the video.
+     * Draws videos on the pages whose sources are their `src` (see
+     * {@link PageVideoFrame}), over their paintings, on whichever face of
+     * whichever leaf carries each page: lying open or turning, a picture
+     * bends with the paper. Any number play together, up to
+     * `MAX_PAGE_VIDEOS` (8) drawn at once; an empty list takes them all off.
+     * The book is drawn again at every new frame of any of them.
      */
+    setVideos(videos) {
+        const crop = (v) => JSON.stringify(v.frame.crop ?? null);
+        // The same pictures (a page painted on a new canvas, a layout that
+        // moved one): the atlas stays as it is unless their sizes changed.
+        const same = videos.length === this.videos.length && videos.every((v, i) => v.element === this.videos[i].element && crop(v) === crop(this.videos[i]));
+        this.videos = videos.slice();
+        if (!same)
+            this.atlasKey = "";
+        this.packVideos();
+        this.dressVideos();
+        this.redraw();
+    }
+    /** One video on a page, or none (see {@link setVideos}). */
     setVideo(video) {
-        const old = this.video;
-        if (old && (!video || video.element !== old.element)) {
-            old.element.cancelVideoFrameCallback?.(old.callback);
-            old.texture.dispose();
-            this.video = null;
-        }
-        if (video) {
-            let texture = this.video?.texture;
-            if (!texture) {
-                texture = new VideoTexture(video.element);
-                texture.colorSpace = SRGBColorSpace;
-                texture.minFilter = LinearFilter;
-                texture.generateMipmaps = false;
-            }
-            this.video = { ...video, texture, callback: this.video?.callback ?? 0 };
-            if (!this.video.callback)
-                this.watchVideo();
+        this.setVideos(video ? [video] : []);
+    }
+    /** Packs the videos' pictures into the atlas, each at about the size it
+     *  is seen on screen at rest, again when the book's size changes. */
+    packVideos() {
+        const sizes = this.videos.map(({ frame }) => {
+            const w = Math.hypot(frame.across.x * this.W, frame.across.y * this.H) * this.dpr;
+            const h = Math.hypot(frame.down.x * this.W, frame.down.y * this.H) * this.dpr;
+            return { width: Math.max(16, Math.round(w)), height: Math.max(16, Math.round(h)) };
+        });
+        const key = this.videos.map((v, i) => `${sizes[i].width}x${sizes[i].height}`).join(",") + `|${this.videos.length}`;
+        if (key === this.atlasKey && (this.atlas || !this.videos.length))
+            return;
+        this.atlasKey = key;
+        if (!this.videos.length) {
+            this.atlas?.dispose();
+            this.atlas = null;
         }
-        for (const mesh of this.pageMeshes())
-            this.dressVideo(mesh);
+        else {
+            const max = Math.min(ATLAS_MAX, this.renderer.capabilities.maxTextureSize ?? ATLAS_MAX);
+            this.atlas ??= new VideoAtlas((first) => {
+                if (first)
+                    this.dressVideos();
+                this.redraw();
+            }, max);
+            this.atlas.set(this.videos.map((v, i) => ({ element: v.element, ...(v.frame.crop ? { crop: v.frame.crop } : {}), ...sizes[i] })));
+        }
+        this.dressVideos();
         this.redraw();
     }
-    /** Draws the book again at each new frame of the video (a turning book
-     *  is drawn by its own frames). */
-    watchVideo() {
-        const v = this.video;
-        if (!v)
-            return;
-        const el = v.element;
-        const next = () => {
-            if (this.video?.element !== el || this.disposed)
-                return;
-            this.redraw();
-            v.callback = el.requestVideoFrameCallback ? el.requestVideoFrameCallback(next) : requestAnimationFrame(next);
-            if (this.video)
-                this.video.callback = v.callback;
-        };
-        v.callback = el.requestVideoFrameCallback ? el.requestVideoFrameCallback(next) : requestAnimationFrame(next);
+    dressVideos() {
+        for (const mesh of this.pageMeshes())
+            this.dressVideo(mesh);
     }
     /** The meshes that show pages: the open ones, the leaves in the air and
      *  the block. */
     pageMeshes() {
         return [this.left, this.right, ...this.leaves.values(), ...(this.blockMesh ? [this.blockMesh] : [])];
     }
-    /** Sets a mesh's video uniforms: on the face that shows the video's
-     *  page, off elsewhere. */
+    /** Sets a mesh's video uniforms: the videos on the faces that show their
+     *  pages (once their pictures are in the atlas), none elsewhere. */
     dressVideo(mesh) {
         const u = mesh.material.userData.uniforms;
-        const v = this.video;
-        const face = v && v.src ? (mesh.userData.Front === v.src ? 1 : mesh.userData.Back === v.src ? 2 : 0) : 0;
-        u.uVidFace.value = face;
-        u.uVideo.value = face && v ? v.texture : null;
-        if (!face || !v)
-            return;
-        const { origin, across, down, crop } = v.frame;
-        u.uVidO.value.set(origin.x, origin.y);
-        u.uVidA.value.set(across.x, across.y);
-        u.uVidB.value.set(down.x, down.y);
-        u.uVidCrop.value.set(crop?.x ?? 0, crop?.y ?? 0, crop?.width ?? 1, crop?.height ?? 1);
+        const atlas = this.atlas;
+        let n = 0;
+        for (const v of atlas ? this.videos : []) {
+            if (n >= MAX_PAGE_VIDEOS)
+                break;
+            // A blank page ("") is no page of its own: it shows no video.
+            const face = v.src ? (mesh.userData.Front === v.src ? 1 : mesh.userData.Back === v.src ? 2 : 0) : 0;
+            const rect = face ? atlas.rectOf(v.element) : null;
+            if (!rect)
+                continue;
+            const { origin, across, down } = v.frame;
+            u.uVidOA.value[n].set(origin.x, origin.y, across.x, across.y);
+            u.uVidDF.value[n].set(down.x, down.y, face, 0);
+            u.uVidRect.value[n].set(rect.x, rect.y, rect.width, rect.height);
+            n++;
+        }
+        u.uVidCount.value = n;
+        u.uVideo.value = n ? atlas.texture : null;
+        if (n) {
+            const size = atlas.size;
+            u.uVidTexel.value.set(1 / size.width, 1 / size.height);
+        }
     }
     /** A page source drawn again in place (a canvas repainted): its
      *  texture is uploaded again and the book redrawn. */
@@ -2266,13 +2398,14 @@ export class PageFlipper {
     rigidOf(k) {
         return this.specOf(k).rigidity > 0.5;
     }
-    /** The page under the pointer: +1 the one a forward turn takes (the
-     *  recto), −1 the other, 0 none. */
+    /** The page under the pointer, by its outer part (where a hand takes
+     *  it): +1 the one a forward turn takes (the recto), −1 the other, 0
+     *  none (off the pages, or nearer the spine). */
     hit(event) {
         if (!this.surfaces)
             this.layout();
         const { x, y } = this.toWorld(event);
-        if (Math.abs(y) > this.H / 2 || Math.abs(x) > this.W * 1.05)
+        if (Math.abs(y) > this.H / 2 || Math.abs(x) > this.W * 1.05 || Math.abs(x) < GRIP * this.W)
             return 0;
         return x > 0 ? 1 : -1;
     }
@@ -2286,7 +2419,7 @@ export class PageFlipper {
         const at = this.settledAt();
         const forward = x > 0;
         const k = forward ? at : at - 1;
-        if (k < 0 || k >= this.turned.length || Math.abs(x) > this.W * 1.05 || Math.abs(y) > this.H / 2)
+        if (k < 0 || k >= this.turned.length || Math.abs(x) > this.W * 1.05 || Math.abs(x) < GRIP * this.W || Math.abs(y) > this.H / 2)
             return false;
         const G = { u: Math.max(0.15 * this.W, Math.min(this.W, Math.abs(x))), v: y };
         this.turns.set(k, { forward, G, P: { ...G }, held: { aim: { ...G }, samples: [] }, rigid: this.rigidOf(k) });
@@ -2531,7 +2664,7 @@ export class PageFlipper {
         }
         this.mirror(air.length > 0 || this.block !== null);
         this.behind(air.map((a) => a.mesh));
-        this.renderer.render(this.scene, this.camera);
+        this.composer.render();
     }
     /**
      * Thin paper lets light through (#484). While translucent leaves are in
@@ -2719,13 +2852,14 @@ export class PageFlipper {
     }
     dispose() {
         this.disposed = true;
-        this.setVideo(null);
+        this.setVideos([]);
         cancelAnimationFrame(this.raf);
         cancelAnimationFrame(this.still);
         cancelAnimationFrame(this.orbitFrame);
         for (const tex of this.ready.values())
             tex.dispose();
         this.shadowTarget?.dispose();
+        this.composer.dispose();
         this.mirrors.left?.dispose();
         this.mirrors.right?.dispose();
         this.behindTarget?.depthTexture?.dispose();