leafthrough 0.1.6 → 0.1.7

package/README.md

@@ -190,6 +190,10 @@ renderer.setAnimationLoop((now) => {
   `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.
+- **Several magazines.** Magazines drawn by the same renderer share the built-in grain's
+  texture and the sheet geometry of each layout and page aspect: made for the first, freed
+  with the last. The grain itself is drawn once per page, and the wrinkles are sampled once
+  per aspect.
 - **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.
@@ -311,14 +315,14 @@ The magazine fills the element you give it and keeps its proportions, centred.
 | `formatPageLabel` | `(detail) => string`             | `"Pages 14–15 of 28"`                             | What screen readers hear when pages change.                                                                |
 | `onPageChange`    | `(detail) => void`               |                                                   | Same as the `pagechange` event.                                                                            |
 | `onReady`         | `() => void`                     |                                                   | The first pages are loaded and on screen.                                                                  |
-| `onPageLoad`      | `(page) => void`                 |                                                   | A page's image loaded. Same as the `pageload` event.                                                       |
+| `onPageLoad`      | `(page) => void`                 |                                                   | A page's image is loaded and on the GPU. Same as the `pageload` event.                                     |
 | `onError`         | `(error, page?) => void`         |                                                   | A page failed to load. It stays blank paper until `retry()`.                                               |
 
 **`paper`**
 
 |                           | Default                     |                                                                                                              |
 | ------------------------- | --------------------------- | ------------------------------------------------------------------------------------------------------------ |
-| `grain`                   | `true`                      | `false` turns it off. You can also pass a tiling greyscale image or its URL; only its brightest specks show. |
+| `grain`                   | `true`                      | `false` turns it off. You can also pass a tiling greyscale image or its URL; only its brightest specks show. The built-in one is drawn once per page, however many magazines there are. |
 | `grainScale`              | `1.46`                      | Tiles across a page.                                                                                         |
 | `grainStrength`           | `0.17`                      | How much the grain darkens.                                                                                  |
 | `showThrough`             | spread `0.04`, single `0.3` | How much of the other side shows through the paper.                                                          |
@@ -411,11 +415,17 @@ pages: [
   front page's outline (draw the back page as its mirror image).
 - **Cross-origin URLs.** URLs on another origin need CORS headers, because the images are
   uploaded to WebGL.
-- **Textures.** A three.js `Texture` you pass in is never disposed, but the magazine sets its
-  `colorSpace`, `premultiplyAlpha` and `anisotropy`. Give it a texture of its own if you
-  use the same one elsewhere.
+- **Textures.** A three.js `Texture` you pass in is taken as it is: never disposed, and its
+  `colorSpace`, `premultiplyAlpha` and `anisotropy` are left alone, so one that's on the
+  GPU already, or that your own material uses too, isn't uploaded again. Pages the magazine
+  loads itself are sRGB and premultiplied; for yours to look the same, set `colorSpace` to
+  `THREE.SRGBColorSpace`, and `premultiplyAlpha` to `true` if it has transparent parts (the
+  shader lays it over the paper as premultiplied colour).
 - **Load order.** Pages load nearest the reader first, four at a time, and the order follows
-  the reader as they turn or jump. Pages that haven't arrived show blank paper.
+  the reader as they turn or jump. Pages that haven't arrived show blank paper. Once decoded,
+  the pages in view and next to them go to the GPU at once; the rest go one per frame, or
+  more in idle time, so a dozen arriving together don't drop a frame. `pageload` fires for
+  each as it's on the GPU.
 - **Memory.** Pages within `preload` of the visible ones load; pages more than twice that
   far away unload, freeing their GPU memory, and load again when the reader comes back.
   Visible means anything on screen: pages still turning in a quick riffle, and in `single`

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

@@ -250,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);
 }
@@ -426,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;
@@ -443,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
@@ -491,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) {
@@ -509,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();
@@ -523,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))
@@ -541,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);
@@ -558,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);
@@ -567,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) {
@@ -815,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;
@@ -865,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);
@@ -893,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);
@@ -909,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;
@@ -940,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();
   }
@@ -1210,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) },
@@ -1310,6 +1413,7 @@ var SingleEngine = class {
   metrics;
   requestFrame;
   geometry;
+  releaseGeometry;
   sheets;
   count;
   radiusSpacing;
@@ -1342,7 +1446,9 @@ var SingleEngine = class {
     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);
@@ -1426,7 +1532,7 @@ var SingleEngine = class {
     this.cancelHold();
     this.abort.abort();
     for (const sheet of this.sheets) disposeSheetMesh(sheet.mesh);
-    this.geometry.dispose();
+    this.releaseGeometry();
   }
   // --- helpers ----------------------------------------------------------------
   randomWobble() {
@@ -1476,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);
   }
@@ -1778,11 +1888,13 @@ 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);
-      const depth = i < this.current ? this.current - 1 - i : i - this.current;
+      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));
@@ -1815,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;
@@ -1861,7 +1970,7 @@ var SingleEngine = class {
     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;
+    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
@@ -2003,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 },
@@ -2087,6 +2205,7 @@ var SpreadEngine = class {
   metrics;
   requestFrame;
   geometry;
+  releaseGeometry;
   sheets;
   abort = new AbortController();
   shading;
@@ -2114,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];
@@ -2183,7 +2304,7 @@ var SpreadEngine = class {
     this.cancelHold();
     this.abort.abort();
     for (const sheet of this.sheets) disposeSheetMesh(sheet.mesh);
-    this.geometry.dispose();
+    this.releaseGeometry();
   }
   // --- helpers ----------------------------------------------------------------
   randomWobble() {
@@ -2876,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,
@@ -2928,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);
@@ -2951,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();
   }
@@ -3122,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;
   }
@@ -3158,9 +3280,10 @@ export {
   Riffle,
   bindKeyboard,
   PageLoader,
+  sharedResources,
   PaperTextures,
   SingleEngine,
   SpreadEngine,
   LeafThrough
 };
-//# sourceMappingURL=chunk-QFOGCGJJ.js.map
+//# sourceMappingURL=chunk-KCIOFDSW.js.map