Install the canonical renderer

@piggly/flip is the canonical WebGL2 package being promoted from this showcase for reader use. Three.js is a peer dependency so the host owns one copy. Cloth and mesh diagnostics live behind optional entry points and are not part of the normal reader import.

npm install @piggly/flip three

Canvas-first reader integration

PDF.js already renders into a canvas. Feed that canvas directly to CanvasTextureProvider; do not encode it to PNG/JPEG and decode it again, and do not bundle PDF.js inside pigglyFlip.

import {
  PigglyFlipRenderer,
  CanvasTextureProvider,
  PAPER_PRESETS,
} from "@piggly/flip";

const canvas = document.querySelector("canvas");
const texture = new CanvasTextureProvider().fromCanvas(pdfJsPageCanvas);

const renderer = new PigglyFlipRenderer({
  canvas,
  pageSize: { width: pdfJsPageCanvas.width, height: pdfJsPageCanvas.height },
  texture,
  paper: PAPER_PRESETS.magazine, // or .newspaper / .textbook / .manuscript
});
renderer.start();

nextPageButton.onclick = () => renderer.flipController.triggerFlip("top");

Paper feel (stiffness, mass, thickness, friction, elasticity, inertia) is a real per-call parameter, not a hardcoded animation curve -- swap PAPER_PRESETS.magazine per document type, or pass your own PaperProperties object.

Two delivery tiers

Web, desktop and hybrid Android: use the same @piggly/flip WebGL2 implementation and renderer API.

Native Android: a future native backend will implement the same renderer API and deformation specification. It is not a request to copy or manually port showcase shaders into each application.

Optional tooling stays explicit: @piggly/flip/cloth and @piggly/flip/debug. A normal PDF reader imports neither.