@sliiu/present-three-bake 0.0.0-stage → 0.1.1

package/dist/cjs/presets.js

@@ -0,0 +1,112 @@
+"use strict";
+// ════════════════════════════════════════════════════════════════════════════
+// PowerPoint 效果层 —— preset 数值表与默认值（唯一来源）
+//
+// ECMA-376 只定义 preset 的**名称**（camera/@prst、sp3d/@prstMaterial、lightRig/@rig），
+// **不**定义数值。下面的相机角度 / fov / 材质参数都是**逆向 PowerPoint / WPS 行为**
+// 得到的 best-effort 值，并以 samples/7.pptx slide2 棋盘（perspectiveRelaxedModerately
+// + fov 55° + 默认 bevel + threePt/dir=t）做视觉校验基准。
+//
+// 这里是整套 3D 的「PowerPoint 知识」集中地：parser 只忠实解析名称，渲染器只消费
+// resolve.ts 解析出来的具体参数。改 preset 视觉只动这一份文件。
+// ════════════════════════════════════════════════════════════════════════════
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_FOV = exports.DEFAULT_LIGHT_RIG = exports.DEFAULT_MATERIAL = exports.DEFAULT_BEVEL_PX = exports.FOV_LOCKED_PRESETS = exports.CAMERA_PRESETS = void 0;
+// 相机方位/符号约定与几何/UV 的协调见 resolve.ts + camera.ts 的注释。
+exports.CAMERA_PRESETS = {
+    // ── legacy oblique（窄 fov 斜投影）─────────────────────────────────────────
+    legacyObliqueTopLeft: { lat: -20, lon: -30, rev: 0, fov: 25 },
+    legacyObliqueTop: { lat: -20, lon: 0, rev: 0, fov: 25 },
+    legacyObliqueTopRight: { lat: -20, lon: 30, rev: 0, fov: 25 },
+    legacyObliqueLeft: { lat: 0, lon: -30, rev: 0, fov: 25 },
+    legacyObliqueFront: { lat: 0, lon: 0, rev: 0, fov: 25 },
+    legacyObliqueRight: { lat: 0, lon: 30, rev: 0, fov: 25 },
+    legacyObliqueBottomLeft: { lat: 20, lon: -30, rev: 0, fov: 25 },
+    legacyObliqueBottom: { lat: 20, lon: 0, rev: 0, fov: 25 },
+    legacyObliqueBottomRight: { lat: 20, lon: 30, rev: 0, fov: 25 },
+    // ── legacy perspective（中等 fov 透视）─────────────────────────────────────
+    legacyPerspectiveTopLeft: { lat: -20, lon: -30, rev: 0, fov: 40 },
+    legacyPerspectiveTop: { lat: -20, lon: 0, rev: 0, fov: 40 },
+    legacyPerspectiveTopRight: { lat: -20, lon: 30, rev: 0, fov: 40 },
+    legacyPerspectiveLeft: { lat: 0, lon: -30, rev: 0, fov: 40 },
+    legacyPerspectiveFront: { lat: 0, lon: 0, rev: 0, fov: 40 },
+    legacyPerspectiveRight: { lat: 0, lon: 30, rev: 0, fov: 40 },
+    legacyPerspectiveBottomLeft: { lat: 20, lon: -30, rev: 0, fov: 40 },
+    legacyPerspectiveBottom: { lat: 20, lon: 0, rev: 0, fov: 40 },
+    legacyPerspectiveBottomRight: { lat: 20, lon: 30, rev: 0, fov: 40 },
+    // ── orthographic / isometric（正交）────────────────────────────────────────
+    orthographicFront: { lat: 0, lon: 0, rev: 0, fov: 0.01 },
+    isometricTopUp: { lat: -35, lon: 45, rev: 0, fov: 0.01 },
+    isometricTopDown: { lat: 35, lon: 45, rev: 0, fov: 0.01 },
+    isometricBottomUp: { lat: -35, lon: -135, rev: 0, fov: 0.01 },
+    isometricBottomDown: { lat: 35, lon: -135, rev: 0, fov: 0.01 },
+    isometricLeftUp: { lat: -35, lon: -45, rev: 0, fov: 0.01 },
+    isometricLeftDown: { lat: 35, lon: -45, rev: 0, fov: 0.01 },
+    isometricRightUp: { lat: -35, lon: 135, rev: 0, fov: 0.01 },
+    isometricRightDown: { lat: 35, lon: 135, rev: 0, fov: 0.01 },
+    isometricOffAxis1Left: { lat: -25, lon: -50, rev: 0, fov: 0.01 },
+    isometricOffAxis1Right: { lat: -25, lon: 50, rev: 0, fov: 0.01 },
+    isometricOffAxis1Top: { lat: -45, lon: 0, rev: 0, fov: 0.01 },
+    isometricOffAxis2Left: { lat: 25, lon: -50, rev: 0, fov: 0.01 },
+    isometricOffAxis2Right: { lat: 25, lon: 50, rev: 0, fov: 0.01 },
+    isometricOffAxis2Top: { lat: 45, lon: 0, rev: 0, fov: 0.01 },
+    isometricOffAxis3Bottom: { lat: 0, lon: 45, rev: 0, fov: 0.01 },
+    isometricOffAxis3Left: { lat: 0, lon: -45, rev: 0, fov: 0.01 },
+    isometricOffAxis3Right: { lat: 0, lon: 45, rev: 0, fov: 0.01 },
+    isometricOffAxis3Top: { lat: -45, lon: 0, rev: 0, fov: 0.01 },
+    isometricOffAxis4Bottom: { lat: 30, lon: -45, rev: 0, fov: 0.01 },
+    isometricOffAxis4Left: { lat: 0, lon: -45, rev: 0, fov: 0.01 },
+    isometricOffAxis4Right: { lat: 0, lon: 45, rev: 0, fov: 0.01 },
+    isometricOffAxis4Top: { lat: -30, lon: 45, rev: 0, fov: 0.01 },
+    // ── oblique（正交斜投影）────────────────────────────────────────────────────
+    obliqueTopLeft: { lat: -20, lon: -30, rev: 0, fov: 0.01 },
+    obliqueTop: { lat: -20, lon: 0, rev: 0, fov: 0.01 },
+    obliqueTopRight: { lat: -20, lon: 30, rev: 0, fov: 0.01 },
+    obliqueLeft: { lat: 0, lon: -30, rev: 0, fov: 0.01 },
+    obliqueRight: { lat: 0, lon: 30, rev: 0, fov: 0.01 },
+    obliqueBottomLeft: { lat: 20, lon: -30, rev: 0, fov: 0.01 },
+    obliqueBottom: { lat: 20, lon: 0, rev: 0, fov: 0.01 },
+    obliqueBottomRight: { lat: 20, lon: 30, rev: 0, fov: 0.01 },
+    // ── perspective（透视）──────────────────────────────────────────────────────
+    perspectiveFront: { lat: 0, lon: 0, rev: 0, fov: 35 },
+    perspectiveLeft: { lat: 0, lon: -25, rev: 0, fov: 35 },
+    perspectiveRight: { lat: 0, lon: 25, rev: 0, fov: 35 },
+    perspectiveAbove: { lat: -20, lon: 0, rev: 0, fov: 35 },
+    perspectiveBelow: { lat: 20, lon: 0, rev: 0, fov: 35 },
+    perspectiveAboveLeftFacing: { lat: -20, lon: -25, rev: 0, fov: 35 },
+    perspectiveAboveRightFacing: { lat: -20, lon: 25, rev: 0, fov: 35 },
+    perspectiveContrastingLeftFacing: { lat: -10, lon: -50, rev: 0, fov: 60 },
+    perspectiveContrastingRightFacing: { lat: -10, lon: 50, rev: 0, fov: 60 },
+    perspectiveHeroicLeftFacing: { lat: -45, lon: -45, rev: 0, fov: 60 },
+    perspectiveHeroicRightFacing: { lat: -45, lon: 45, rev: 0, fov: 60 },
+    perspectiveHeroicExtremeLeftFacing: { lat: -55, lon: -55, rev: 0, fov: 80 },
+    perspectiveHeroicExtremeRightFacing: { lat: -55, lon: 55, rev: 0, fov: 80 },
+    // perspectiveRelaxed / perspectiveRelaxedModerately：PowerPoint 3D 旋转库里的
+    // "透视：宽松 / 适度宽松" —— 真·透视相机（不是正交！），相机在物体上方俯视，使顶边
+    // 后退、底边前凸，产生"桌面式"透视倾斜。两个关键：
+    //   1. 必须用 PerspectiveCamera：正交投影下倾斜只按 cos(angle) 缩放（15° 仅 3%，看不出），
+    //      透视收缩才让倾斜可见。
+    //   2. "relaxed" = 长焦镜头（窄 fov），透视轻柔、畸变小；配中等俯角形成柔和的梯形。
+    //      PowerPoint 写进 OOXML 的 `@fov`（棋盘 fov=55°）不是字面相机视角，PPT 内部当
+    //      zoom/参考用 —— 真正落地是窄 fov + 适度俯视，所以这两个 preset 锁定窄 fov。
+    //   - lat：俯视下倾角，负值=相机在上方（"Above" 语义，见 camera.ts eye.y 约定）。
+    perspectiveRelaxed: { lat: -13, lon: 0, rev: 0, fov: 22 },
+    perspectiveRelaxedModerately: { lat: -18, lon: 0, rev: 0, fov: 28 },
+};
+// "perspectiveRelaxed*" 锁定预设窄 fov，忽略 OOXML 里偏宽的显式 `@fov`（见上注释）。
+exports.FOV_LOCKED_PRESETS = new Set([
+    "perspectiveRelaxed",
+    "perspectiveRelaxedModerately",
+]);
+// ── 默认值（OOXML 缺省时的 PowerPoint 默认）───────────────────────────────────
+/**
+ * ECMA-376 §20.1.5.4：`<a:bevelT/>` / `<a:bevelB/>` 缺省 w/h = 76200 EMU。
+ * 76200 ÷ 9525 EMU/px = 8 px。parser 把缺省留 undefined，这里补默认。
+ */
+exports.DEFAULT_BEVEL_PX = 8;
+/** ECMA-376 §20.1.5.12 sp3d/@prstMaterial 默认 = warmMatte。 */
+exports.DEFAULT_MATERIAL = "warmMatte";
+/** ECMA-376 §20.1.5.9 lightRig 缺省（无 scene3d 时）我们用 threePt 兜底。 */
+exports.DEFAULT_LIGHT_RIG = "threePt";
+/** PerspectiveCamera 缺省 fov（无 preset 也无显式 fov 时）。 */
+exports.DEFAULT_FOV = 35;

package/dist/cjs/resolve.js

@@ -0,0 +1,98 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveCamera = resolveCamera;
+exports.resolveSp3D = resolveSp3D;
+exports.resolveLightRig = resolveLightRig;
+exports.resolveBackdrop = resolveBackdrop;
+exports.resolveScene3D = resolveScene3D;
+const presets_1 = require("./presets");
+function resolveCamera(cam) {
+    let lat = 0;
+    let lon = 0;
+    let rev = 0;
+    let fov = presets_1.DEFAULT_FOV;
+    if (cam?.prst) {
+        const p = presets_1.CAMERA_PRESETS[cam.prst];
+        if (p) {
+            lat = p.lat;
+            lon = p.lon;
+            rev = p.rev;
+            fov = p.fov;
+        }
+    }
+    // 显式 <a:rot> 覆盖角度（preset 与 rot 是覆盖而非叠加）。
+    if (cam?.rot) {
+        lat = cam.rot.lat;
+        lon = cam.rot.lon;
+        rev = cam.rot.rev;
+    }
+    // 显式 @fov 覆盖 fov——但 relaxed 系 preset 无条件用预设窄 fov（PPT 把显式 fov 当 zoom 参考）。
+    if (cam?.fov !== undefined && !(cam.prst && presets_1.FOV_LOCKED_PRESETS.has(cam.prst))) {
+        fov = cam.fov;
+    }
+    return { lat, lon, rev, fov, isOrtho: fov < 1, zoom: cam?.zoom };
+}
+function resolveBevel(b) {
+    if (!b)
+        return undefined;
+    return {
+        w: b.w ?? presets_1.DEFAULT_BEVEL_PX,
+        h: b.h ?? presets_1.DEFAULT_BEVEL_PX,
+    };
+}
+function resolveSp3D(sp3d) {
+    const bevelT = resolveBevel(sp3d?.bevelT);
+    const bevelB = resolveBevel(sp3d?.bevelB);
+    return {
+        extrusionH: sp3d?.extrusionH ?? 0,
+        contourW: sp3d?.contourW,
+        contourClr: sp3d?.contourClr,
+        extrusionClr: sp3d?.extrusionClr,
+        prstMaterial: sp3d?.prstMaterial ?? presets_1.DEFAULT_MATERIAL,
+        bevelT,
+        bevelB,
+        hasBevel: !!(bevelT || bevelB),
+    };
+}
+function resolveLightRig(lr) {
+    return { rig: lr?.rig ?? presets_1.DEFAULT_LIGHT_RIG, dir: lr?.dir };
+}
+function asVec(v) {
+    return "dx" in v ? { x: v.dx, y: v.dy, z: v.dz } : v;
+}
+function normalizeVec(v) {
+    const len = Math.hypot(v.x, v.y, v.z);
+    if (len < 1e-8)
+        return undefined;
+    return { x: v.x / len, y: v.y / len, z: v.z / len };
+}
+function nearAxis(v, x, y, z, eps = 0.02) {
+    return Math.abs(v.x - x) < eps && Math.abs(v.y - y) < eps && Math.abs(v.z - z) < eps;
+}
+/** identity / 全 0 → undefined，setupCamera 保持 preset 朝向。 */
+function resolveBackdrop(bd) {
+    if (!bd)
+        return undefined;
+    const n = bd.norm ? normalizeVec(asVec(bd.norm)) : undefined;
+    const u = bd.up ? normalizeVec(asVec(bd.up)) : undefined;
+    const identityN = !n || nearAxis(n, 0, 0, 1);
+    const identityU = !u || nearAxis(u, 0, 1, 0);
+    const a = bd.anchor;
+    const hasAnchor = !!(a && (Math.abs(a.x) > 1e-4 || Math.abs(a.y) > 1e-4 || Math.abs(a.z) > 1e-4));
+    if (identityN && identityU && !hasAnchor)
+        return undefined;
+    return {
+        target: a ?? { x: 0, y: 0, z: 0 },
+        forward: identityN ? undefined : n,
+        up: identityU ? undefined : u,
+    };
+}
+function resolveScene3D(info) {
+    const scene = info.scene3d;
+    return {
+        camera: resolveCamera(scene?.camera),
+        sp3d: resolveSp3D(info.sp3d),
+        lightRig: resolveLightRig(scene?.lightRig),
+        backdrop: resolveBackdrop(scene?.backdrop),
+    };
+}

package/dist/cjs/runtime.js

@@ -0,0 +1,146 @@
+"use strict";
+// 高层 runtime helper：把 bakeSp3d 接到任意持有 Scene 的离屏光栅消费者
+// （thumbnail=SvgBackend / snapshot+pdf=CanvasBackend）上。bake 完成后通过 `applyBaked`
+// 回调把结果交给 caller 写入**副通道**（meta3D.bakedSrc 等），由那些后端读取显示。
+// player/editor 的实时视图不走这里，改用 packages/renderer 的 WebGLShapeBackend。
+//
+// 触发条件见 needs3DRender：相机 rot 非平凡 / extrusionH>0 / 声明了 bevel。
+// 性能：bake 是 OffscreenCanvas + WebGLRenderer 的一次性渲染，per-shape 30-100 ms。
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.needs3DRender = needs3DRender;
+exports.needs3DBake = needs3DBake;
+exports.createBake3DRuntime = createBake3DRuntime;
+const bake_sp3d_1 = require("./bake-sp3d");
+const shape_path_1 = require("./shape-path");
+/**
+ * 该 3D 信息是否需要 3D 渲染（实时 or 烘焙）。parser 现在对 `<a:bevelT/>` 留空 w/h，
+ * 所以用「是否声明了 bevel 元素」判断，而非 h>0。
+ */
+function needs3DRender(meta) {
+    if (!meta)
+        return false;
+    const rot = meta.scene3d?.camera?.rot;
+    const hasRot = !!rot && Math.abs(rot.lat) + Math.abs(rot.lon) + Math.abs(rot.rev) > 0.01;
+    const ext = meta.sp3d?.extrusionH ?? 0;
+    const hasBevel = !!(meta.sp3d?.bevelT || meta.sp3d?.bevelB);
+    return hasRot || ext > 0 || hasBevel;
+}
+function readMeta(s) {
+    return (0, shape_path_1.shape3DInfo)(s);
+}
+// 烘焙输出的几何/参数签名：bakeSp3d 的全部输入（bbox / fill / stroke / sp3d / scene3d /
+// src / cropRect）。任一变化 → 签名变化 → 需要重烘。id 是身份不入签名。
+function bakeKeyOf(s) {
+    const meta = readMeta(s);
+    return JSON.stringify({
+        k: s.kind,
+        b: s.bbox ?? null,
+        f: s.fill ?? null,
+        st: s.stroke ?? null,
+        sp: meta?.sp3d ?? null,
+        sc: meta?.scene3d ?? null,
+        src: s.kind === "image" ? s.src ?? null : null,
+        cr: s.kind === "image" ? s.cropRect ?? null : null,
+        d: s.kind === "path" ? s.d : s.kind === "polygon" ? s.points : null,
+        tx: s.kind === "text" ? s.paragraphs : null,
+    });
+}
+// 该 shape 当前是否需要（重新）烘焙：image / 自选形状 / 带 body3D 的文字，
+// 需要 3D 渲染，且"当前几何签名"与上次烘焙记录的 bakedKey 不一致
+// （首次烘焙时 bakedKey 为 undefined，必然不一致）。
+function needs3DBake(s) {
+    if (!(0, shape_path_1.shapeSupports3D)(s))
+        return false;
+    const meta = readMeta(s);
+    if (!meta || !needs3DRender(meta))
+        return false;
+    return meta.bakedKey !== bakeKeyOf(s);
+}
+function shouldBake(s) {
+    return needs3DBake(s);
+}
+function walkShapes(slide, fn) {
+    for (const layer of slide.layers) {
+        const stack = [[layer.shapes, 0]];
+        while (stack.length) {
+            const top = stack[stack.length - 1];
+            const [arr, i] = top;
+            if (i >= arr.length) {
+                stack.pop();
+                continue;
+            }
+            const s = arr[i];
+            top[1] = i + 1;
+            fn(s);
+            if (s.kind === "group")
+                stack.push([s.children, 0]);
+        }
+    }
+}
+function createBake3DRuntime() {
+    // markBaked 强制跳过集合（外部显式声明"别再烘这个 id"）。
+    const forceSkip = new Set();
+    const inFlight = new Map();
+    const bakeOne = async (s, applyBaked, frontImageSrc) => {
+        const meta = readMeta(s);
+        if (!meta)
+            return;
+        // 在烘焙前快照签名：bake 是异步的，期间用户可能又动了 shape；用快照写回 bakedKey
+        // 保证"已烘的就是这个签名"，若烘焙期间又变了，下一轮 kick 的签名不一致会再烘。
+        const key = bakeKeyOf(s);
+        const front = s.kind === "text" ? frontImageSrc?.(s) : undefined;
+        const isPicture = s.kind === "image" || !!front;
+        try {
+            const result = await (0, bake_sp3d_1.bakeSp3d)({
+                id: s.id,
+                bbox: s.bbox,
+                pathD: isPicture ? undefined : (0, shape_path_1.shape3DPathD)(s),
+                fill: s.fill,
+                stroke: s.stroke,
+                sp3d: meta.sp3d ?? {},
+                scene3d: meta.scene3d,
+                imageSrc: s.kind === "image" ? s.src : front,
+                cropRect: s.kind === "image" ? s.cropRect : undefined,
+            });
+            // baked/bakedKey 仅作 dedupe；不改 shape.src/bbox/cropRect，让 live 视图保持原始几何。
+            meta.baked = true;
+            if (result)
+                applyBaked(s, result);
+        }
+        catch {
+            // 烘焙失败不致命，仍能看到 2D 图。
+        }
+        finally {
+            // 成功或失败都记录签名（避免失败时无限重试）；下次几何变化签名变了再烘。
+            meta.bakedKey = key;
+        }
+    };
+    return {
+        kick(slide, applyBaked, opts) {
+            const front = opts?.frontImageSrc;
+            walkShapes(slide, (s) => {
+                if (forceSkip.has(s.id) || inFlight.has(s.id))
+                    return;
+                if (!shouldBake(s))
+                    return;
+                const p = bakeOne(s, applyBaked, front).then(() => {
+                    inFlight.delete(s.id);
+                });
+                inFlight.set(s.id, p);
+            });
+        },
+        async waitForAll() {
+            while (inFlight.size > 0) {
+                await Promise.all(Array.from(inFlight.values()));
+            }
+            if (typeof requestAnimationFrame !== "undefined") {
+                await new Promise((r) => {
+                    requestAnimationFrame(() => requestAnimationFrame(() => r()));
+                });
+            }
+        },
+        markBaked(id) {
+            forceSkip.add(id);
+        },
+    };
+}