@flyfish-dev/dwf-viewer 0.5.1 → 0.6.1

package/CHANGELOG.md

@@ -1,20 +1,33 @@
 # Changelog
 
+## 0.6.1
+
+- Changed the public demo default sample to `Blocks and Tables · Binary W2D DWF` for a faster and clearer first load.
+- Kept Autodesk Floor Plans as an optional XPS WebGL validation sample instead of loading the large DWFx file by default.
+- Updated demo asset versioning to `dist-v0.6.1`.
+
+## 0.6.0
+
+- Added WebGL-accelerated XPS/DWFx 2D vector rendering through `WebGlXpsBackend`.
+- Added XPS ODTTF embedded font deobfuscation/loading for CAD-like text appearance.
+- Tuned demo defaults for dense CAD overview linework and lower DPR memory pressure.
+- Added curated Autodesk floor-plan DWFx demo entry with default A03 sheet.
+- Coalesced viewer render requests to avoid zoom/pan render pile-ups.
+- Kept Cloudflare demo assets versioned under `dist-v0.6.0` to prevent stale browser module caches.
+
 ## 0.5.1
 
-- Published as `dwf-viewer` and `@flyfish-dev/dwf-viewer` with AGPL-3.0-only package metadata.
 - Added CAD adaptive line-weight rendering for XPS FixedPage, W2D Canvas/WASM, and W2D WebGL paths.
-- Added overview text LOD culling to avoid black annotation blobs at fit-to-page while preserving text when zoomed in.
+- Added overview text LOD culling to avoid dense annotation blobs at fit-to-page while preserving text when zoomed in.
 - Added embedded XPS TrueType font loading for Glyphs when browsers support the FontFace API.
 - Added demo line-weight mode selector: CAD adaptive, hairline, physical.
+- Versioned demo dist assets under `dist-v0.5.1` to prevent stale browser module caches.
 
 ## 0.5.0
 
-- Prepared repository for public npm release and Cloudflare Pages demo deployment.
-- Renamed the public package metadata to `dwf-viewer`.
-- Added dual npm publishing support for `dwf-viewer` and `@flyfish-dev/dwf-viewer`.
-- Switched the project license to `AGPL-3.0-only` and added `NOTICE`.
-- Normalized GitHub repository metadata for `flyfish-dev/dwf-viewer`.
+- Prepared the repository for public npm release and Cloudflare Pages demo deployment.
+- Published normalized packages as `dwf-viewer` and `@flyfish-dev/dwf-viewer`.
+- Adopted `AGPL-3.0-only` with `NOTICE` for strict open-source distribution.
 - Added curated, de-duplicated demo example manifest.
 - Removed production-success info diagnostics from W3D/eModel pages so the Robot Arm demo renders with zero page diagnostics.
-- Added static demo build pipeline and package validation scripts.
+- Added static demo build pipeline, package validation scripts, CI, and publish helpers.

package/PRODUCTION_3D_NOTES.md

@@ -46,3 +46,7 @@ Serve the WASM file with `application/wasm`. The Cloudflare Pages demo writes `_
 ## Unsupported semantics
 
 Unsupported historical HSF opcodes, advanced CAD display-list behavior, and full Design Review parity are tracked as incremental parser work. The rendering contract is: exact-enough supported semantics are displayed, unsupported semantics are diagnosed, and known-failing 3D geometry is not hidden by image fallback.
+
+## 2D production rendering update
+
+Version 0.6.0 adds WebGL acceleration for XPS/DWFx vector geometry and keeps text/images in a Canvas overlay. This avoids CPU redraw bottlenecks when zooming dense sheets and keeps GPU memory bounded through scene cache limits. Embedded ODTTF fonts are deobfuscated and loaded through FontFace where supported, producing CAD-like text weights in the demo.

package/README.md

@@ -1,31 +1,36 @@
 # DWF Viewer
 
-Pure frontend DWF/DWFx viewer for browsers. It parses DWF/DWFx packages locally in the browser and renders common 2D and 3D content without a server-side CAD conversion service.
-
-## Status
-
-This repository is structured as a publishable npm package plus a static Cloudflare Pages demo. The same build is published under both `dwf-viewer` and `@flyfish-dev/dwf-viewer`.
+Pure frontend DWF/DWFx CAD viewer for browsers. It parses DWF/DWFx packages locally and renders common 2D and 3D content without a server-side CAD conversion service.
 
 ## Links
 
-| Target | URL |
+| Entry | URL |
 |---|---|
-| Live demo | https://dwf-viewer-demo.pages.dev/ |
-| GitHub repository | https://github.com/flyfish-dev/dwf-viewer |
-| Official documentation | https://github.com/flyfish-dev/dwf-viewer#readme |
-| npm package | https://www.npmjs.com/package/dwf-viewer |
-| Scoped npm package | https://www.npmjs.com/package/@flyfish-dev/dwf-viewer |
+| Online demo | https://dwf-viewer-demo.pages.dev/ |
+| Repository | https://github.com/flyfish-dev/dwf-viewer |
+| npm | https://www.npmjs.com/package/dwf-viewer |
+| scoped npm | https://www.npmjs.com/package/@flyfish-dev/dwf-viewer |
+
+Current version: `0.6.1`
+
+## Why
 
-Supported paths:
+DWF and DWFx are still common in manufacturing, construction, field service, engineering archives, PLM, after-sales systems, and document management products. Many web systems can preview PDF, Office files, and images, but DWF often falls back to desktop viewers, server-side conversion, or static thumbnails.
+
+DWF Viewer is built for the browser-native path: parse the package, decode the sheet/model data, and render it directly inside a web application. This keeps integration simple for private deployments and reduces conversion queues, temporary files, and infrastructure coupling.
+
+## Supported Paths
 
 | Format / content | Status |
 |---|---|
 | DWF 6+ ZIP container | Supported |
 | DWFx / OPC package | Supported |
-| XPS FixedPage 2D sheets | Supported common subset |
+| XPS FixedPage 2D sheets | Supported common subset with WebGL vector acceleration and Canvas text/image overlay |
 | Classic binary WHIP!/W2D 2D sheets | Supported for core geometry/text/images used by Autodesk samples |
+| Textual W2D pages | Supported for smoke tests and simple sheets |
 | W3D/HSF 3D eModel shell geometry | Supported: uncompressed, CS_TRIVIAL, and Edgebreaker shell meshes |
 | Three.js adapter | Supported |
+| Built-in WebGL 3D renderer | Supported through `DwfViewer` |
 | WASM raster fallback | Supported for 2D vector rasterization |
 | eModel metadata | Materials, textures, scene tree, saved views, PMI/animation data containers |
 
@@ -41,7 +46,7 @@ npm install @flyfish-dev/dwf-viewer three
 
 `three` is an optional peer dependency. It is required only when you use `createThreeGroupFromW3d()` directly. The built-in `DwfViewer` uses its own WebGL 3D renderer.
 
-## Basic browser usage
+## Basic Browser Usage
 
 ```ts
 import 'dwf-viewer/styles.css';
@@ -51,14 +56,15 @@ const viewer = new DwfViewer(document.getElementById('viewer')!, {
   wasmUrl: '/dwfv-render.wasm',
   preferWebgl: true,
   preferWasm: true,
-  maxDevicePixelRatio: 2,
-  maxCanvasPixels: 16_777_216,
-  maxGpuCacheBytes: 160 * 1024 * 1024,
-  maxCachedScenes: 2,
-
-  // CAD-viewer style overview: thin readable lines at fit-to-page,
-  // source line weights return progressively while zooming in.
-  lineWeightMode: 'adaptive'
+  maxDevicePixelRatio: 1.5,
+  maxCanvasPixels: 12_000_000,
+  maxGpuCacheBytes: 192 * 1024 * 1024,
+  maxCachedScenes: 4,
+  lineWeightMode: 'adaptive',
+  minStrokeCssPx: 0.42,
+  maxOverviewStrokeCssPx: 0.9,
+  minTextCssPx: 1.05,
+  minFilledAreaCssPx: 0.04
 });
 
 await viewer.load(file);
@@ -70,32 +76,47 @@ Copy the WASM asset from the package into your public assets directory:
 cp node_modules/dwf-viewer/public/dwfv-render.wasm public/dwfv-render.wasm
 ```
 
-## CAD line-weight rendering
+For the scoped package:
+
+```bash
+cp node_modules/@flyfish-dev/dwf-viewer/public/dwfv-render.wasm public/dwfv-render.wasm
+```
+
+## WebGL 2D Rendering
+
+Version `0.6.x` adds WebGL-accelerated XPS/DWFx 2D vector rendering through `WebGlXpsBackend`, alongside the existing W2D WebGL path.
 
-The default 2D rendering mode is `lineWeightMode: 'adaptive'`. This follows the behavior users expect from CAD viewers: at fit-to-page, linework is normalized toward screen-space hairlines so drawings remain readable; as zoom increases, the original DWF/XPS line weights are allowed to grow progressively. This prevents overview pages from becoming black while still preserving heavy line intent when inspecting details.
+The built-in viewer uses WebGL for Classic W2D and DWFx/XPS vector geometry when `preferWebgl` is enabled. Geometry is uploaded to GPU buffers and cached by page and zoom bucket; pan operations update shader uniforms. Text, images, and XPS image brushes stay on the transparent Canvas overlay so browser font rendering and bitmap decoding remain reliable.
+
+For dense architectural sheets, the demo defaults are tuned for CAD review: 1.5 maximum DPR, a 12M-pixel canvas cap, adaptive thin-line overview, and render coalescing during wheel/pointer interaction.
+
+## CAD Line-Weight Rendering
+
+The default 2D rendering mode is `lineWeightMode: 'adaptive'`. At fit-to-page, linework is normalized toward screen-space hairlines so dense drawings remain readable; as zoom increases, original DWF/XPS line weights return progressively.
 
 Available modes:
 
 | Mode | Behavior |
 |---|---|
 | `adaptive` | Default. Overview thin-line rendering with zoom-aware recovery of source line weights. |
-| `hairline` | Force all strokes to one visible CSS-pixel hairline. Useful for dense plans and review thumbnails. |
-| `physical` | Preserve source stroke widths exactly. Useful for print-fidelity comparisons, but dense sheets can look heavy when zoomed out. |
+| `hairline` | Force strokes to a visible CSS-pixel hairline. Useful for dense plans and review thumbnails. |
+| `physical` | Preserve source stroke widths. Useful for print-fidelity comparisons; dense sheets can look heavy when zoomed out. |
 
 Related options:
 
 ```ts
 new DwfViewer(el, {
   lineWeightMode: 'adaptive',
-  minStrokeCssPx: 0.55,
-  maxOverviewStrokeCssPx: 1.15,
-  minTextCssPx: 3.5
+  minStrokeCssPx: 0.42,
+  maxOverviewStrokeCssPx: 0.9,
+  minTextCssPx: 1.05,
+  minFilledAreaCssPx: 0.04
 });
 ```
 
-XPS/DWFx `Glyphs` use embedded TrueType fonts when the browser allows `FontFace` loading. Very small text is skipped in adaptive overview mode and appears normally when zoomed in; this avoids unreadable black blobs in architectural sheets.
+XPS/DWFx `Glyphs` use embedded TrueType fonts when the browser allows `FontFace` loading. Very small text is skipped in adaptive overview mode and appears normally when zoomed in; this avoids unreadable annotation blocks in dense architectural sheets.
 
-## Three.js integration
+## Three.js Integration
 
 ```ts
 import * as THREE from 'three';
@@ -108,7 +129,6 @@ if (page?.kind === 'w3d-model') {
   const group = createThreeGroupFromW3d(page, THREE, {
     showFeatureEdges: true,
     textureResolver(texture) {
-      // Return a THREE.Texture if your app wants to bind DWFx texture resources.
       return undefined;
     }
   });
@@ -116,7 +136,7 @@ if (page?.kind === 'w3d-model') {
 }
 ```
 
-## Local development
+## Local Development
 
 ```bash
 npm install
@@ -131,14 +151,15 @@ Then open:
 http://127.0.0.1:8080/
 ```
 
-## Example set
+## Example Set
 
 The demo examples are listed in `examples/manifest.json` and are intentionally de-duplicated:
 
 | Example | Purpose |
 |---|---|
-| `robot-arm.dwfx` | 3D W3D/HSF eModel with shell meshes, scene tree, materials, textures, saved views |
-| `blocks-and-tables.dwf` | Binary WHIP!/W2D 2D ePlot sample |
+| `blocks-and-tables.dwf` | Default demo. Binary WHIP!/W2D ePlot sample with fast loading and a clear first impression |
+| `autodesk-floor-plans.dwfx` | Multi-page architectural DWFx/XPS sample, using A03 First Floor Plan for WebGL XPS, embedded font, and thin-line overview validation |
+| `robot-arm.dwfx` | 3D W3D/HSF eModel with shell meshes, scene tree, materials, textures, and saved views |
 | `minimal-xps.dwfx` | Small DWFx/XPS FixedPage sample |
 | `text-w2d.dwf` | Textual W2D smoke-test sample |
 
@@ -148,30 +169,19 @@ Run:
 npm run check:examples
 ```
 
-## NPM publishing checklist
+## NPM Publishing Checklist
 
 ```bash
 npm run clean
-npm run publish:all -- --dry-run
+npm run build
+npm run validate:production
+npm run check:package
 npm run publish:all
 ```
 
-`publish:all` builds once, validates the production examples, checks the package tarball, then publishes both `dwf-viewer` and `@flyfish-dev/dwf-viewer`. Add npm options when needed:
-
-```bash
-npm run publish:all -- --dry-run
-npm run publish:all -- --otp=123456
-```
-
-GitHub release publishing can use provenance through the included workflow and `NPM_TOKEN`.
-
-## Cloudflare Pages demo
+The package is published as both `dwf-viewer` and `@flyfish-dev/dwf-viewer`.
 
-Live demo:
-
-```text
-https://dwf-viewer-demo.pages.dev/
-```
+## Cloudflare Pages Demo
 
 The repository includes `wrangler.toml` with:
 
@@ -194,9 +204,7 @@ Direct upload:
 npm run deploy:pages
 ```
 
-`build:demo` produces a static directory containing only demo HTML/JS, `dist`, `public/dwfv-render.wasm`, `styles`, and the curated examples.
-
-GitHub Actions builds the demo for every pull request. On pushes to `main`, it deploys to Cloudflare Pages when the repository secrets `CLOUDFLARE_API_TOKEN` and `CLOUDFLARE_ACCOUNT_ID` are present.
+`build:demo` produces a static directory containing demo HTML/JS, a versioned `dist-v*` directory, `public/dwfv-render.wasm`, `styles`, and curated examples. Versioned dist assets prevent stale browser module caches after releases.
 
 ## Public API
 
@@ -207,6 +215,7 @@ openDwfDocument(input, options?)
 DwfViewer
 PageRenderer
 WebGlW2dBackend
+WebGlXpsBackend
 ThreeW3dRenderer
 createThreeGroupFromW3d(page, THREE, options?)
 ```
@@ -216,6 +225,7 @@ Types:
 ```ts
 LoadedDwfDocument
 PageData
+XpsPageData
 W3dPageData
 W3dModelData
 W3dMeshData
@@ -224,15 +234,20 @@ Diagnostic
 RenderStats
 ```
 
-## Production behavior
+## Production Behavior
 
-The production validation target is strict for the bundled Robot Arm eModel:
+The production validation target is strict for the bundled samples:
 
 ```text
+Robot Arm:
 page kind: w3d-model
 meshes >= 30
 triangles >= 40,000
-page diagnostics: 0
+non-info diagnostics: 0
+
+Autodesk Floor Plans:
+page kind: xps-fixed-page
+pages >= 18
 non-info diagnostics: 0
 ```
 
@@ -242,10 +257,12 @@ Run:
 npm run validate:production
 ```
 
-## Known boundaries
+## License
 
-This is a pure frontend implementation, not Autodesk Design Review or HOOPS Exchange. The parser is intentionally fail-closed for unsupported historical HSF/W2D opcode semantics: it should show explicit diagnostics instead of silently drawing incorrect geometry. Current production coverage includes the core 2D/3D rendering paths needed by the bundled samples and the extension points for materials, textures, PMI, animation and selection tree metadata.
+DWF Viewer is licensed under `AGPL-3.0-only`. See `LICENSE` and `NOTICE`.
 
-## License
+Commercial use, private forks, and second-development integrations must comply with the license and preserve attribution. Contributions are welcome through Issues and Pull Requests.
+
+## Known Boundaries
 
-AGPL-3.0-only. See `LICENSE` and `NOTICE`.
+This is a pure frontend implementation and is not affiliated with Autodesk Design Review or HOOPS Exchange. The parser is intentionally fail-closed for unsupported historical HSF/W2D opcode semantics: it should show explicit diagnostics instead of silently drawing guessed geometry. Current production coverage includes the core 2D/3D rendering paths needed by the bundled samples and extension points for materials, textures, PMI, animation, and selection tree metadata.

package/dist/format/types.d.ts

@@ -58,7 +58,7 @@ export interface PageRenderOptions {
     maxCachedScenes?: number;
 }
 export interface RenderStats {
-    backend: 'canvas2d' | 'wasm-raster' | 'webgl' | 'threejs-webgl' | 'image' | 'unsupported';
+    backend: 'canvas2d' | 'wasm-raster' | 'webgl' | 'webgl-xps' | 'threejs-webgl' | 'image' | 'unsupported';
     commands: number;
     warnings: Diagnostic[];
 }

package/dist/index.d.ts

@@ -6,6 +6,7 @@ export type { DwfViewerOptions, LoadOptions } from './viewer/DwfViewer.js';
 export { PageRenderer } from './render/PageRenderer.js';
 export { WasmRasterBackend } from './wasm/WasmRasterBackend.js';
 export { WebGlW2dBackend } from './render/WebGlW2dBackend.js';
+export { WebGlXpsBackend } from './render/WebGlXpsBackend.js';
 export { ThreeW3dRenderer } from './render/ThreeW3dRenderer.js';
 export { createThreeGroupFromW3d } from './render/ThreeJsSceneAdapter.js';
 export type { LoadedDwfDocument, PageData, XpsPageData, W2dTextPageData, ImagePageData, UnsupportedPageData, W3dPageData, W3dModelData, W3dMeshData, W2dPrimitive } from './format/document.js';

package/dist/index.js

@@ -5,5 +5,6 @@ export { DwfViewer } from './viewer/DwfViewer.js';
 export { PageRenderer } from './render/PageRenderer.js';
 export { WasmRasterBackend } from './wasm/WasmRasterBackend.js';
 export { WebGlW2dBackend } from './render/WebGlW2dBackend.js';
+export { WebGlXpsBackend } from './render/WebGlXpsBackend.js';
 export { ThreeW3dRenderer } from './render/ThreeW3dRenderer.js';
 export { createThreeGroupFromW3d } from './render/ThreeJsSceneAdapter.js';

package/dist/render/PageRenderer.js

@@ -30,6 +30,7 @@ export class PageRenderer {
         return this.renderUnsupported(page, canvas, options);
     }
     dispose() {
+        this.xps?.dispose();
         this.w2d?.dispose();
         this.w3d?.dispose();
     }

package/dist/render/WebGlXpsBackend.d.ts

@@ -0,0 +1,38 @@
+import type { Diagnostic } from '../format/types.js';
+import type { XpsPageData } from '../format/document.js';
+import { type CadLineStyleOptions } from './cadLineStyle.js';
+export interface WebGlXpsRenderOptions extends CadLineStyleOptions {
+    zoom?: number;
+    panX?: number;
+    panY?: number;
+    background?: string;
+    maxGpuCacheBytes?: number;
+    maxCachedScenes?: number;
+    compositeToTarget?: boolean;
+}
+export interface WebGlXpsRenderResult {
+    commands: number;
+    warnings: Diagnostic[];
+    gpuBytes: number;
+    vertexCount: number;
+    pathCount: number;
+    cacheHit: boolean;
+}
+export declare class WebGlXpsBackend {
+    private readonly canvas;
+    private readonly gl;
+    private readonly program;
+    private readonly aPos;
+    private readonly aColor;
+    private readonly uMatrix;
+    private readonly uViewport;
+    private readonly scenes;
+    private gpuBytes;
+    private tick;
+    constructor(canvas?: HTMLCanvasElement);
+    render(page: XpsPageData, root: Element, targetCanvas: HTMLCanvasElement, options?: WebGlXpsRenderOptions): WebGlXpsRenderResult;
+    dispose(): void;
+    private resize;
+    private compileScene;
+    private evictIfNeeded;
+}

package/dist/render/WebGlXpsBackend.js

@@ -0,0 +1,541 @@
+import { diag } from '../format/types.js';
+import { childElements, getAttr, localName, parseNumberList } from '../format/util.js';
+import { flattenPath, parsePathData } from './xpsPath.js';
+import { colorToRgba32, multiplyMatrix, parseBrushColor, parseMatrix, transformPoint } from './style.js';
+import { adaptiveStrokeUserWidth, canvasDpr, estimateMatrixScale, shouldDrawFilledBounds } from './cadLineStyle.js';
+import { fitPageMatrix } from './viewport.js';
+const VERTEX_STRIDE = 12;
+const DEFAULT_MAX_GPU_CACHE_BYTES = 128 * 1024 * 1024;
+const DEFAULT_MAX_CACHED_SCENES = 4;
+const IDENTITY_MATRIX = { a: 1, b: 0, c: 0, d: 1, e: 0, f: 0 };
+export class WebGlXpsBackend {
+    constructor(canvas) {
+        this.scenes = new Map();
+        this.gpuBytes = 0;
+        this.tick = 0;
+        this.canvas = canvas ?? document.createElement('canvas');
+        const gl = this.canvas.getContext('webgl', {
+            alpha: false,
+            antialias: true,
+            depth: false,
+            stencil: false,
+            preserveDrawingBuffer: true,
+            powerPreference: 'high-performance'
+        });
+        if (!gl)
+            throw new Error('WebGLRenderingContext is not available.');
+        this.gl = gl;
+        this.program = createProgram(gl, VERTEX_SHADER, FRAGMENT_SHADER);
+        this.aPos = gl.getAttribLocation(this.program, 'a_pos');
+        this.aColor = gl.getAttribLocation(this.program, 'a_color');
+        const matrix = gl.getUniformLocation(this.program, 'u_matrix');
+        const viewport = gl.getUniformLocation(this.program, 'u_viewport');
+        if (this.aPos < 0 || this.aColor < 0 || !matrix || !viewport)
+            throw new Error('Failed to resolve WebGL shader locations.');
+        this.uMatrix = matrix;
+        this.uViewport = viewport;
+    }
+    render(page, root, targetCanvas, options = {}) {
+        const warnings = [];
+        if (targetCanvas.width <= 0 || targetCanvas.height <= 0) {
+            return { commands: 0, warnings, gpuBytes: this.gpuBytes, vertexCount: 0, pathCount: 0, cacheHit: true };
+        }
+        this.resize(targetCanvas.width, targetCanvas.height);
+        const pageMatrix = fitPageMatrix({
+            canvasWidth: this.canvas.width,
+            canvasHeight: this.canvas.height,
+            pageWidth: page.width,
+            pageHeight: page.height,
+            zoom: options.zoom,
+            panX: options.panX,
+            panY: options.panY
+        });
+        const runtime = { dpr: canvasDpr(targetCanvas), zoom: options.zoom ?? 1 };
+        const key = sceneKey(page, pageMatrix, options);
+        let scene = this.scenes.get(key);
+        const cacheHit = !!scene;
+        if (!scene) {
+            const vectors = collectVectorPaths(root);
+            scene = this.compileScene(page, key, vectors, pageMatrix, options, runtime);
+            this.scenes.set(key, scene);
+            this.gpuBytes += scene.gpuBytes;
+            this.evictIfNeeded(options);
+            scene = this.scenes.get(key) ?? scene;
+        }
+        scene.lastUsed = ++this.tick;
+        const gl = this.gl;
+        const bg = rgba01(options.background ?? '#ffffff');
+        gl.viewport(0, 0, this.canvas.width, this.canvas.height);
+        gl.disable(gl.DEPTH_TEST);
+        gl.disable(gl.CULL_FACE);
+        gl.enable(gl.BLEND);
+        gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+        gl.clearColor(bg[0], bg[1], bg[2], bg[3]);
+        gl.clear(gl.COLOR_BUFFER_BIT);
+        gl.useProgram(this.program);
+        gl.bindBuffer(gl.ARRAY_BUFFER, scene.buffer);
+        gl.enableVertexAttribArray(this.aPos);
+        gl.vertexAttribPointer(this.aPos, 2, gl.FLOAT, false, VERTEX_STRIDE, 0);
+        gl.enableVertexAttribArray(this.aColor);
+        gl.vertexAttribPointer(this.aColor, 4, gl.UNSIGNED_BYTE, true, VERTEX_STRIDE, 8);
+        gl.uniform4f(this.uMatrix, pageMatrix.a, pageMatrix.b, pageMatrix.c, pageMatrix.d);
+        gl.uniform4f(this.uViewport, pageMatrix.e, pageMatrix.f, this.canvas.width, this.canvas.height);
+        gl.drawArrays(gl.TRIANGLES, 0, scene.vertexCount);
+        if (options.compositeToTarget ?? true) {
+            const ctx = targetCanvas.getContext('2d');
+            if (!ctx)
+                throw new Error('CanvasRenderingContext2D is not available for WebGL compositing.');
+            ctx.save();
+            ctx.setTransform(1, 0, 0, 1, 0, 0);
+            ctx.clearRect(0, 0, targetCanvas.width, targetCanvas.height);
+            ctx.drawImage(this.canvas, 0, 0);
+            ctx.restore();
+        }
+        if (scene.vertexCount === 0) {
+            warnings.push(diag('warning', 'WEBGL_XPS_EMPTY_SCENE', 'WebGL XPS scene contained no drawable vector geometry; Canvas/WASM fallback may be required.', page.sourcePath));
+        }
+        return {
+            commands: scene.pathCount,
+            warnings,
+            gpuBytes: this.gpuBytes,
+            vertexCount: scene.vertexCount,
+            pathCount: scene.pathCount,
+            cacheHit
+        };
+    }
+    dispose() {
+        for (const scene of this.scenes.values())
+            this.gl.deleteBuffer(scene.buffer);
+        this.scenes.clear();
+        this.gpuBytes = 0;
+    }
+    resize(width, height) {
+        if (this.canvas.width !== width || this.canvas.height !== height) {
+            this.canvas.width = width;
+            this.canvas.height = height;
+        }
+    }
+    compileScene(page, key, vectors, pageMatrix, options, runtime) {
+        const writer = new VertexWriter();
+        let pathCount = 0;
+        for (const vector of vectors) {
+            pathCount++;
+            appendVectorPath(writer, vector, pageMatrix, options, runtime);
+        }
+        const bufferBytes = writer.byteLength;
+        const maxBytes = options.maxGpuCacheBytes ?? DEFAULT_MAX_GPU_CACHE_BYTES;
+        if (bufferBytes > maxBytes) {
+            throw new Error(`WebGL XPS scene buffer would require ${formatBytes(bufferBytes)}, exceeding maxGpuCacheBytes=${formatBytes(maxBytes)}.`);
+        }
+        const gl = this.gl;
+        const buffer = gl.createBuffer();
+        if (!buffer)
+            throw new Error('Failed to allocate WebGLBuffer.');
+        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+        gl.bufferData(gl.ARRAY_BUFFER, writer.toArrayBuffer(), gl.STATIC_DRAW);
+        const err = gl.getError();
+        if (err !== gl.NO_ERROR) {
+            gl.deleteBuffer(buffer);
+            throw new Error(`WebGL XPS buffer upload failed: 0x${err.toString(16)} for ${page.sourcePath}.`);
+        }
+        return { key, buffer, vertexCount: writer.vertexCount, gpuBytes: bufferBytes, pathCount, lastUsed: ++this.tick };
+    }
+    evictIfNeeded(options) {
+        const maxBytes = options.maxGpuCacheBytes ?? DEFAULT_MAX_GPU_CACHE_BYTES;
+        const maxScenes = options.maxCachedScenes ?? DEFAULT_MAX_CACHED_SCENES;
+        while (this.scenes.size > Math.max(1, maxScenes) || this.gpuBytes > maxBytes) {
+            let oldest;
+            for (const scene of this.scenes.values())
+                if (!oldest || scene.lastUsed < oldest.lastUsed)
+                    oldest = scene;
+            if (!oldest)
+                break;
+            this.scenes.delete(oldest.key);
+            this.gl.deleteBuffer(oldest.buffer);
+            this.gpuBytes -= oldest.gpuBytes;
+        }
+    }
+}
+function collectVectorPaths(root) {
+    const out = [];
+    walk(root, IDENTITY_MATRIX, 1, out);
+    return out;
+}
+function walk(el, matrix, opacity, out) {
+    const name = localName(el);
+    const local = elementMatrix(el);
+    const composed = multiplyMatrix(matrix, local);
+    const ownOpacity = opacity * parseOpacity(getAttr(el, 'Opacity'));
+    if (name === 'Path') {
+        const commands = extractPathCommands(el);
+        if (commands.length > 0) {
+            const fill = extractBrush(el, 'Fill', ownOpacity);
+            const stroke = extractBrush(el, 'Stroke', ownOpacity);
+            const thickness = Number(getAttr(el, 'StrokeThickness') ?? 1);
+            if (fill || (stroke && thickness > 0)) {
+                out.push({
+                    commands,
+                    matrix: composed,
+                    opacity: ownOpacity,
+                    fill,
+                    stroke,
+                    thickness: Number.isFinite(thickness) ? thickness : 1,
+                    lineStyle: extractLineStyle(el),
+                    fillRule: fillRule(el),
+                    bounds: pathBounds(commands)
+                });
+            }
+        }
+    }
+    for (const child of childElements(el)) {
+        const childName = localName(child);
+        if (childName.includes('.'))
+            continue;
+        walk(child, composed, ownOpacity, out);
+    }
+}
+function appendVectorPath(writer, vector, pageMatrix, options, runtime) {
+    const fullMatrix = multiplyMatrix(pageMatrix, vector.matrix);
+    const localScale = estimateMatrixScale(vector.matrix);
+    const sourceWidth = Math.max(0.000001, vector.thickness || 1);
+    const width = Math.max(0.01, adaptiveStrokeUserWidth(sourceWidth, fullMatrix, options, runtime) * localScale);
+    const subs = flattenPath(vector.commands, 0.5);
+    const fill = vector.fill ? rgbaBytes(vector.fill) : undefined;
+    const stroke = vector.stroke ? rgbaBytes(vector.stroke) : undefined;
+    if (fill && shouldDrawFilledBounds(vector.bounds, fullMatrix, options, runtime)) {
+        for (const sub of subs) {
+            if (sub.closed || sub.points.length >= 6)
+                appendPolygonFan(writer, transformPointsArray(sub.points, vector.matrix), fill);
+        }
+    }
+    if (stroke && vector.thickness > 0) {
+        for (const sub of subs) {
+            const pts = transformPointsArray(sub.points, vector.matrix);
+            const drawPts = sub.closed ? closePoints(pts) : pts;
+            if (vector.lineStyle.dash.length > 0)
+                appendDashedPolyline(writer, drawPts, width, vector.lineStyle, stroke);
+            else
+                appendPolyline(writer, drawPts, width, stroke);
+        }
+    }
+}
+class VertexWriter {
+    constructor() {
+        this.buffer = new ArrayBuffer(64 * 1024);
+        this.view = new DataView(this.buffer);
+        this.vertexCount = 0;
+    }
+    get byteLength() { return this.vertexCount * VERTEX_STRIDE; }
+    push(x, y, color) {
+        if (!Number.isFinite(x) || !Number.isFinite(y))
+            return;
+        const offset = this.byteLength;
+        this.ensure(VERTEX_STRIDE);
+        this.view.setFloat32(offset, x, true);
+        this.view.setFloat32(offset + 4, y, true);
+        this.view.setUint8(offset + 8, color.r);
+        this.view.setUint8(offset + 9, color.g);
+        this.view.setUint8(offset + 10, color.b);
+        this.view.setUint8(offset + 11, color.a);
+        this.vertexCount++;
+    }
+    toArrayBuffer() { return this.buffer.slice(0, this.byteLength); }
+    ensure(extraBytes) {
+        const needed = this.byteLength + extraBytes;
+        if (needed <= this.buffer.byteLength)
+            return;
+        let next = this.buffer.byteLength;
+        while (next < needed)
+            next *= 2;
+        const newBuffer = new ArrayBuffer(next);
+        new Uint8Array(newBuffer).set(new Uint8Array(this.buffer, 0, this.byteLength));
+        this.buffer = newBuffer;
+        this.view = new DataView(this.buffer);
+    }
+}
+function appendPolygonFan(writer, pts, color) {
+    if (pts.length < 3)
+        return;
+    const p0 = pts[0];
+    for (let i = 1; i + 1 < pts.length; i++) {
+        const p1 = pts[i];
+        const p2 = pts[i + 1];
+        if (triangleAreaAbs(p0, p1, p2) < 1e-6)
+            continue;
+        writer.push(p0.x, p0.y, color);
+        writer.push(p1.x, p1.y, color);
+        writer.push(p2.x, p2.y, color);
+    }
+}
+function appendPolyline(writer, pts, width, color) {
+    if (pts.length < 2)
+        return;
+    const half = Math.max(0.05, width * 0.5);
+    for (let i = 0; i + 1 < pts.length; i++)
+        appendLineSegment(writer, pts[i], pts[i + 1], half, color);
+}
+function appendDashedPolyline(writer, pts, width, style, color) {
+    if (pts.length < 2 || style.dash.length === 0)
+        return;
+    const pattern = style.dash.map(v => Math.max(0.01, v * width));
+    const total = pattern.reduce((a, b) => a + b, 0);
+    if (total <= 0.01) {
+        appendPolyline(writer, pts, width, color);
+        return;
+    }
+    let patternIndex = 0;
+    let remaining = pattern[0];
+    let draw = true;
+    let offset = ((style.dashOffset * width) % total + total) % total;
+    while (offset > remaining) {
+        offset -= remaining;
+        patternIndex = (patternIndex + 1) % pattern.length;
+        remaining = pattern[patternIndex];
+        draw = !draw;
+    }
+    remaining -= offset;
+    for (let i = 0; i + 1 < pts.length; i++) {
+        const a = pts[i];
+        const b = pts[i + 1];
+        const dx = b.x - a.x;
+        const dy = b.y - a.y;
+        const len = Math.hypot(dx, dy);
+        if (len <= 1e-9)
+            continue;
+        let consumed = 0;
+        while (consumed < len - 1e-9) {
+            const step = Math.min(remaining, len - consumed);
+            if (draw && step > 1e-9) {
+                const t0 = consumed / len;
+                const t1 = (consumed + step) / len;
+                appendLineSegment(writer, { x: a.x + dx * t0, y: a.y + dy * t0 }, { x: a.x + dx * t1, y: a.y + dy * t1 }, Math.max(0.05, width * 0.5), color);
+            }
+            consumed += step;
+            remaining -= step;
+            if (remaining <= 1e-9) {
+                patternIndex = (patternIndex + 1) % pattern.length;
+                remaining = pattern[patternIndex];
+                draw = !draw;
+            }
+        }
+    }
+}
+function appendLineSegment(writer, p0, p1, half, color) {
+    const dx = p1.x - p0.x;
+    const dy = p1.y - p0.y;
+    const len = Math.hypot(dx, dy);
+    if (len <= 1e-9)
+        return;
+    const nx = -dy / len * half;
+    const ny = dx / len * half;
+    const ax = p0.x + nx, ay = p0.y + ny;
+    const bx = p0.x - nx, by = p0.y - ny;
+    const cx = p1.x - nx, cy = p1.y - ny;
+    const dx2 = p1.x + nx, dy2 = p1.y + ny;
+    writer.push(ax, ay, color);
+    writer.push(bx, by, color);
+    writer.push(cx, cy, color);
+    writer.push(ax, ay, color);
+    writer.push(cx, cy, color);
+    writer.push(dx2, dy2, color);
+}
+function transformPointsArray(points, m) {
+    const out = [];
+    for (let i = 0; i + 1 < points.length; i += 2) {
+        const [x, y] = transformPoint(m, points[i] ?? 0, points[i + 1] ?? 0);
+        out.push({ x, y });
+    }
+    return out;
+}
+function closePoints(pts) {
+    if (pts.length < 2)
+        return pts;
+    const first = pts[0];
+    const last = pts[pts.length - 1];
+    if (first.x === last.x && first.y === last.y)
+        return pts;
+    return [...pts, { x: first.x, y: first.y }];
+}
+function triangleAreaAbs(a, b, c) {
+    return Math.abs((b.x - a.x) * (c.y - a.y) - (b.y - a.y) * (c.x - a.x));
+}
+function sceneKey(page, pageMatrix, options) {
+    const mode = options.lineWeightMode ?? 'adaptive';
+    const scaleBucket = mode === 'physical' ? 'physical' : String(Math.round(Math.log2(Math.max(1e-12, estimateMatrixScale(pageMatrix))) * 8));
+    return `${page.id}|${page.sourcePath}|${page.width}x${page.height}|lw:${mode}:${scaleBucket}`;
+}
+function elementMatrix(el) {
+    let m = parseMatrix(getAttr(el, 'RenderTransform') ?? getAttr(el, 'Transform'));
+    for (const child of childElements(el)) {
+        const name = localName(child);
+        if (name.endsWith('.RenderTransform') || name.endsWith('.Transform')) {
+            const matrixEl = childElements(child).find(c => localName(c) === 'MatrixTransform');
+            if (matrixEl)
+                m = multiplyMatrix(m, parseMatrix(getAttr(matrixEl, 'Matrix')));
+        }
+    }
+    const left = Number(getAttr(el, 'Canvas.Left') ?? 0);
+    const top = Number(getAttr(el, 'Canvas.Top') ?? 0);
+    if (left || top)
+        m = multiplyMatrix({ a: 1, b: 0, c: 0, d: 1, e: left, f: top }, m);
+    return m;
+}
+function extractPathCommands(pathEl) {
+    const data = getAttr(pathEl, 'Data');
+    if (data)
+        return parsePathData(data);
+    for (const prop of childElements(pathEl)) {
+        if (localName(prop) !== 'Path.Data')
+            continue;
+        for (const geom of childElements(prop)) {
+            const figures = getAttr(geom, 'Figures');
+            if (figures)
+                return parsePathData(figures);
+        }
+    }
+    return [];
+}
+function extractBrush(el, prop, opacity) {
+    const direct = getAttr(el, prop);
+    if (direct)
+        return parseBrushColor(direct, opacity);
+    const solid = findPropertyBrush(el, prop, 'SolidColorBrush');
+    if (solid)
+        return parseBrushColor(getAttr(solid, 'Color'), opacity * parseOpacity(getAttr(solid, 'Opacity')));
+    return undefined;
+}
+function findPropertyBrush(el, prop, brushLocalName) {
+    const propName = `${localName(el)}.${prop}`;
+    for (const child of childElements(el)) {
+        if (localName(child) !== propName)
+            continue;
+        return childElements(child).find(c => localName(c) === brushLocalName);
+    }
+    return undefined;
+}
+function parseOpacity(value) {
+    if (!value)
+        return 1;
+    const n = Number(value);
+    return Number.isFinite(n) ? Math.max(0, Math.min(1, n)) : 1;
+}
+function fillRule(el) {
+    const data = getAttr(el, 'Data') ?? '';
+    return /F0/.test(data) ? 'nonzero' : 'evenodd';
+}
+function extractLineStyle(el) {
+    const start = (getAttr(el, 'StrokeStartLineCap') ?? '').toLowerCase();
+    const end = (getAttr(el, 'StrokeEndLineCap') ?? '').toLowerCase();
+    const dashCap = (getAttr(el, 'StrokeDashCap') ?? '').toLowerCase();
+    const cap = start === 'round' || end === 'round' || dashCap === 'round'
+        ? 'round'
+        : start === 'square' || end === 'square' || dashCap === 'square'
+            ? 'square'
+            : 'butt';
+    const joinAttr = (getAttr(el, 'StrokeLineJoin') ?? '').toLowerCase();
+    const join = joinAttr === 'round' ? 'round' : joinAttr === 'bevel' ? 'bevel' : 'miter';
+    const miter = Number(getAttr(el, 'StrokeMiterLimit') ?? 10);
+    return {
+        cap,
+        join,
+        miterLimit: Number.isFinite(miter) && miter > 0 ? miter : 10,
+        dash: parseNumberList(getAttr(el, 'StrokeDashArray') ?? '').filter(v => Number.isFinite(v) && v > 0),
+        dashOffset: Number(getAttr(el, 'StrokeDashOffset') ?? 0) || 0
+    };
+}
+function pathBounds(commands) {
+    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+    const add = (x, y) => {
+        if (!Number.isFinite(x) || !Number.isFinite(y))
+            return;
+        minX = Math.min(minX, x);
+        minY = Math.min(minY, y);
+        maxX = Math.max(maxX, x);
+        maxY = Math.max(maxY, y);
+    };
+    for (const c of commands) {
+        if (c.type === 'M' || c.type === 'L')
+            add(c.x, c.y);
+        else if (c.type === 'C') {
+            add(c.x1, c.y1);
+            add(c.x2, c.y2);
+            add(c.x, c.y);
+        }
+        else if (c.type === 'Q') {
+            add(c.x1, c.y1);
+            add(c.x, c.y);
+        }
+        else if (c.type === 'A') {
+            add(c.x - c.rx, c.y - c.ry);
+            add(c.x + c.rx, c.y + c.ry);
+        }
+    }
+    return Number.isFinite(minX) ? { minX, minY, maxX, maxY } : undefined;
+}
+function rgbaBytes(css) {
+    const packed = colorToRgba32(css, 0xff000000);
+    return { r: packed & 255, g: (packed >>> 8) & 255, b: (packed >>> 16) & 255, a: (packed >>> 24) & 255 };
+}
+function rgba01(css) {
+    const c = rgbaBytes(css);
+    return [c.r / 255, c.g / 255, c.b / 255, c.a / 255];
+}
+function formatBytes(bytes) {
+    if (bytes < 1024)
+        return `${bytes} B`;
+    if (bytes < 1024 * 1024)
+        return `${(bytes / 1024).toFixed(1)} KiB`;
+    return `${(bytes / 1024 / 1024).toFixed(1)} MiB`;
+}
+function createProgram(gl, vertexSource, fragmentSource) {
+    const vertex = compileShader(gl, gl.VERTEX_SHADER, vertexSource);
+    const fragment = compileShader(gl, gl.FRAGMENT_SHADER, fragmentSource);
+    const program = gl.createProgram();
+    if (!program)
+        throw new Error('Failed to create WebGLProgram.');
+    gl.attachShader(program, vertex);
+    gl.attachShader(program, fragment);
+    gl.linkProgram(program);
+    gl.deleteShader(vertex);
+    gl.deleteShader(fragment);
+    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+        const log = gl.getProgramInfoLog(program) ?? 'unknown link error';
+        gl.deleteProgram(program);
+        throw new Error(`WebGL program link failed: ${log}`);
+    }
+    return program;
+}
+function compileShader(gl, type, source) {
+    const shader = gl.createShader(type);
+    if (!shader)
+        throw new Error('Failed to create WebGLShader.');
+    gl.shaderSource(shader, source);
+    gl.compileShader(shader);
+    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+        const log = gl.getShaderInfoLog(shader) ?? 'unknown shader compile error';
+        gl.deleteShader(shader);
+        throw new Error(`WebGL shader compile failed: ${log}`);
+    }
+    return shader;
+}
+const VERTEX_SHADER = `
+attribute vec2 a_pos;
+attribute vec4 a_color;
+uniform vec4 u_matrix;
+uniform vec4 u_viewport;
+varying vec4 v_color;
+void main() {
+  float x = u_matrix.x * a_pos.x + u_matrix.z * a_pos.y + u_viewport.x;
+  float y = u_matrix.y * a_pos.x + u_matrix.w * a_pos.y + u_viewport.y;
+  vec2 clip = vec2((x / u_viewport.z) * 2.0 - 1.0, 1.0 - (y / u_viewport.w) * 2.0);
+  gl_Position = vec4(clip, 0.0, 1.0);
+  v_color = a_color;
+}
+`;
+const FRAGMENT_SHADER = `
+precision mediump float;
+varying vec4 v_color;
+void main() {
+  gl_FragColor = v_color;
+}
+`;

package/dist/render/XpsRenderer.d.ts

@@ -5,16 +5,26 @@ export interface XpsRenderOptions extends CadLineStyleOptions {
     zoom?: number;
     panX?: number;
     panY?: number;
+    preferWebgl?: boolean;
     preferWasm?: boolean;
     wasmUrl?: string;
+    webglCanvas?: HTMLCanvasElement;
+    maxGpuCacheBytes?: number;
+    maxCachedScenes?: number;
     background?: string;
 }
 export declare class XpsRenderer {
     private readonly document;
     private wasm?;
+    private webgl?;
+    private webglCanvas?;
     private readonly fontCache;
+    private readonly xmlCache;
     constructor(document: LoadedDwfDocument);
     render(page: XpsPageData, canvas: HTMLCanvasElement, options?: XpsRenderOptions): Promise<RenderStats>;
+    private getWebGlBackend;
+    private getXmlDocument;
+    dispose(): void;
     private renderElementToCanvas;
     private renderElementToWasm;
     private drawGlyphs;

package/dist/render/XpsRenderer.js

@@ -5,18 +5,19 @@ import { multiplyMatrix, parseBrushColor, parseMatrix } from './style.js';
 import { adaptiveStrokeUserWidth, canvasDpr, shouldDrawFilledBounds, shouldDrawTextByPixelSize } from './cadLineStyle.js';
 import { fitPageMatrix } from './viewport.js';
 import { WasmRasterBackend } from '../wasm/WasmRasterBackend.js';
+import { WebGlXpsBackend } from './WebGlXpsBackend.js';
 export class XpsRenderer {
     constructor(document) {
         this.document = document;
         this.fontCache = new Map();
+        this.xmlCache = new Map();
     }
     async render(page, canvas, options = {}) {
         const opc = this.document.opc;
         if (!opc)
             throw new Error('XPS page requires an OPC package view.');
         const warnings = actionableDiagnostics(page.diagnostics);
-        const xml = await opc.readText(page.sourcePath);
-        const doc = parseXml(xml, page.sourcePath);
+        const doc = await this.getXmlDocument(page.sourcePath);
         const root = doc.documentElement;
         const ctx = canvas.getContext('2d');
         if (!ctx)
@@ -25,6 +26,29 @@ export class XpsRenderer {
         const runtime = { dpr: canvasDpr(canvas), zoom: options.zoom ?? 1 };
         const pageMatrix = fitPageMatrix({ canvasWidth: canvas.width, canvasHeight: canvas.height, pageWidth: page.width, pageHeight: page.height, zoom: options.zoom, panX: options.panX, panY: options.panY });
         let commands = 0;
+        if (options.preferWebgl ?? true) {
+            try {
+                const backend = this.getWebGlBackend(options.webglCanvas);
+                if (options.webglCanvas)
+                    options.webglCanvas.style.visibility = 'visible';
+                const stats = backend.render(page, root, canvas, { ...options, compositeToTarget: !options.webglCanvas });
+                ctx.save();
+                ctx.setTransform(1, 0, 0, 1, 0, 0);
+                ctx.clearRect(0, 0, canvas.width, canvas.height);
+                ctx.restore();
+                commands += stats.commands;
+                commands += await this.renderElementToCanvas(root, ctx, page.sourcePath, pageMatrix, 1, warnings, { vectors: false, overlays: true }, options, runtime);
+                warnings.push(...stats.warnings);
+                return { backend: 'webgl-xps', commands, warnings };
+            }
+            catch (err) {
+                if (options.webglCanvas)
+                    options.webglCanvas.style.visibility = 'hidden';
+                warnings.push(diag('warning', 'WEBGL_XPS_BACKEND_FALLBACK', `WebGL XPS vector path failed, falling back to ${options.preferWasm ? 'WASM raster' : 'Canvas2D'}: ${String(err)}`, page.sourcePath));
+            }
+        }
+        if (options.webglCanvas)
+            options.webglCanvas.style.visibility = 'hidden';
         if (options.preferWasm) {
             try {
                 this.wasm ?? (this.wasm = new WasmRasterBackend({ wasmUrl: options.wasmUrl }));
@@ -48,6 +72,30 @@ export class XpsRenderer {
         commands += await this.renderElementToCanvas(root, ctx, page.sourcePath, pageMatrix, 1, warnings, { vectors: true, overlays: true }, options, runtime);
         return { backend: 'canvas2d', commands, warnings };
     }
+    getWebGlBackend(canvas) {
+        if (!this.webgl || this.webglCanvas !== canvas) {
+            this.webgl?.dispose();
+            this.webgl = new WebGlXpsBackend(canvas);
+            this.webglCanvas = canvas;
+        }
+        return this.webgl;
+    }
+    getXmlDocument(part) {
+        let cached = this.xmlCache.get(part);
+        if (!cached) {
+            const opc = this.document.opc;
+            cached = opc.readText(part).then(xml => parseXml(xml, part));
+            this.xmlCache.set(part, cached);
+        }
+        return cached;
+    }
+    dispose() {
+        this.webgl?.dispose();
+        this.webgl = undefined;
+        this.webglCanvas = undefined;
+        this.xmlCache.clear();
+        this.fontCache.clear();
+    }
     async renderElementToCanvas(el, ctx, pagePath, matrix, opacity, warnings, mode, options, runtime) {
         const name = localName(el);
         const local = elementMatrix(el);
@@ -192,8 +240,9 @@ export class XpsRenderer {
         if (!uri)
             return undefined;
         const part = resolvePart(pagePath, uri.replace(/^\//, ''));
-        if (/\.odttf$/i.test(part))
-            return undefined;
+        // XPS/DWFx often stores embedded TrueType fonts as ODTTF.
+        // Deobfuscate and load them so overview text matches CAD viewers instead
+        // of falling back to thick system fonts.
         let cached = this.fontCache.get(part);
         if (!cached) {
             cached = this.loadFontFace(part).catch(err => {
@@ -209,14 +258,26 @@ export class XpsRenderer {
         const fontSet = document.fonts;
         if (!FontFaceCtor || !fontSet)
             return undefined;
-        const bytes = await this.document.opc.readBytes(part);
+        let bytes = await this.document.opc.readBytes(part);
+        let mime = mimeFromPath(part) ?? 'font/ttf';
+        if (/\.odttf$/i.test(part)) {
+            bytes = deobfuscateOdttf(part, bytes);
+            mime = 'font/ttf';
+        }
         const family = `dwfv_xps_${hashString(part)}`;
-        const blob = new Blob([bytes], { type: mimeFromPath(part) ?? 'font/ttf' });
+        const blob = new Blob([bytes], { type: mime });
         const url = URL.createObjectURL(blob);
         const face = new FontFaceCtor(family, `url("${url}")`);
-        await face.load();
-        fontSet.add(face);
-        return family;
+        try {
+            await face.load();
+            fontSet.add(face);
+            URL.revokeObjectURL(url);
+            return family;
+        }
+        catch (err) {
+            URL.revokeObjectURL(url);
+            throw err;
+        }
     }
     async drawImageResource(ctx, pagePath, source, matrix, opacity, el) {
         const opc = this.document.opc;
@@ -330,6 +391,54 @@ function drawGlyphRunWithIndices(ctx, text, indices, x, y, emSize) {
     if (charIndex < text.length)
         ctx.fillText(text.slice(charIndex), cursor, y);
 }
+function deobfuscateOdttf(part, bytes) {
+    const name = part.split('/').pop() ?? '';
+    const guid = name.replace(/\.odttf$/i, '').replace(/[^0-9a-fA-F]/g, '');
+    if (guid.length !== 32 || bytes.length < 32)
+        return bytes;
+    const key = new Uint8Array(16);
+    for (let i = 0; i < 16; i++)
+        key[i] = parseInt(guid.slice(i * 2, i * 2 + 2), 16);
+    // XPS font obfuscation uses the GUID bytes in reverse order, repeated over
+    // the first 32 bytes of the font payload.
+    const out = new Uint8Array(bytes);
+    for (let i = 0; i < Math.min(32, out.length); i++)
+        out[i] = (out[i] ?? 0) ^ key[15 - (i % 16)];
+    if (!looksLikeSfnt(out)) {
+        // A few producers use the GUID binary/little-endian representation.  Try it
+        // as a guarded fallback rather than silently returning a broken font.
+        const altKey = guidLittleEndianBytes(guid);
+        const alt = new Uint8Array(bytes);
+        for (let i = 0; i < Math.min(32, alt.length); i++)
+            alt[i] = (alt[i] ?? 0) ^ altKey[15 - (i % 16)];
+        if (looksLikeSfnt(alt))
+            return alt;
+    }
+    return out;
+}
+function guidLittleEndianBytes(hex) {
+    const b = new Uint8Array(16);
+    const raw = new Uint8Array(16);
+    for (let i = 0; i < 16; i++)
+        raw[i] = parseInt(hex.slice(i * 2, i * 2 + 2), 16);
+    b[0] = raw[3];
+    b[1] = raw[2];
+    b[2] = raw[1];
+    b[3] = raw[0];
+    b[4] = raw[5];
+    b[5] = raw[4];
+    b[6] = raw[7];
+    b[7] = raw[6];
+    for (let i = 8; i < 16; i++)
+        b[i] = raw[i];
+    return b;
+}
+function looksLikeSfnt(bytes) {
+    if (bytes.length < 4)
+        return false;
+    const tag = String.fromCharCode(bytes[0], bytes[1], bytes[2], bytes[3]);
+    return tag === 'OTTO' || tag === 'true' || tag === 'typ1' || tag === 'ttcf' || (bytes[0] === 0 && bytes[1] === 1 && bytes[2] === 0 && bytes[3] === 0);
+}
 function hashString(s) {
     let h = 2166136261;
     for (let i = 0; i < s.length; i++) {

package/dist/viewer/DwfViewer.d.ts

@@ -51,6 +51,8 @@ export declare class DwfViewer {
     private yaw;
     private pitch;
     private pendingRender?;
+    private rendering;
+    private renderAgain;
     private renderRaf;
     private renderSeq;
     private currentDpr;

package/dist/viewer/DwfViewer.js

@@ -10,6 +10,8 @@ export class DwfViewer {
         this.panY = 0;
         this.yaw = -0.78;
         this.pitch = 0.55;
+        this.rendering = false;
+        this.renderAgain = false;
         this.renderRaf = 0;
         this.renderSeq = 0;
         this.currentDpr = 1;
@@ -107,44 +109,58 @@ export class DwfViewer {
     async render() {
         if (!this.renderer || !this.doc)
             return undefined;
-        this.resizeCanvasToDisplaySize();
-        const page = this.doc.pageData[this.pageIndex];
-        if (!page)
-            return undefined;
-        const seq = ++this.renderSeq;
-        const task = this.renderer.render(this.pageIndex, this.canvas, {
-            zoom: this.zoom,
-            panX: this.panX,
-            panY: this.panY,
-            preferWebgl: this.preferWebgl,
-            preferWasm: this.preferWasm,
-            wasmUrl: this.wasmUrl,
-            background: this.background,
-            maxGpuCacheBytes: this.maxGpuCacheBytes,
-            maxCachedScenes: this.maxCachedScenes,
-            webglCanvas: this.webglCanvas,
-            yaw: this.yaw,
-            pitch: this.pitch,
-            lineWeightMode: this.lineWeightMode,
-            minStrokeCssPx: this.minStrokeCssPx,
-            maxOverviewStrokeCssPx: this.maxOverviewStrokeCssPx,
-            minTextCssPx: this.minTextCssPx,
-            minFilledAreaCssPx: this.minFilledAreaCssPx
-        });
-        this.pendingRender = task;
+        if (this.rendering) {
+            this.renderAgain = true;
+            return this.pendingRender;
+        }
+        this.rendering = true;
         try {
-            const stats = await task;
-            if (this.pendingRender === task && seq === this.renderSeq) {
-                const warnCount = stats.warnings.filter(w => w.level !== 'info').length;
-                const dprText = this.currentDpr > 1 ? ` · DPR ${this.currentDpr.toFixed(2)}` : '';
-                this.setStatus(`${this.doc.kind.toUpperCase()} · ${page.kind} · ${stats.backend} · ${stats.commands} ops${dprText}${warnCount ? ` · ${warnCount} 警告` : ''}`, warnCount > 0);
+            this.resizeCanvasToDisplaySize();
+            const page = this.doc.pageData[this.pageIndex];
+            if (!page)
+                return undefined;
+            const seq = ++this.renderSeq;
+            const task = this.renderer.render(this.pageIndex, this.canvas, {
+                zoom: this.zoom,
+                panX: this.panX,
+                panY: this.panY,
+                preferWebgl: this.preferWebgl,
+                preferWasm: this.preferWasm,
+                wasmUrl: this.wasmUrl,
+                background: this.background,
+                maxGpuCacheBytes: this.maxGpuCacheBytes,
+                maxCachedScenes: this.maxCachedScenes,
+                webglCanvas: this.webglCanvas,
+                yaw: this.yaw,
+                pitch: this.pitch,
+                lineWeightMode: this.lineWeightMode,
+                minStrokeCssPx: this.minStrokeCssPx,
+                maxOverviewStrokeCssPx: this.maxOverviewStrokeCssPx,
+                minTextCssPx: this.minTextCssPx,
+                minFilledAreaCssPx: this.minFilledAreaCssPx
+            });
+            this.pendingRender = task;
+            try {
+                const stats = await task;
+                if (this.pendingRender === task && seq === this.renderSeq) {
+                    const warnCount = stats.warnings.filter(w => w.level !== 'info').length;
+                    const dprText = this.currentDpr > 1 ? ` · DPR ${this.currentDpr.toFixed(2)}` : '';
+                    this.setStatus(`${this.doc.kind.toUpperCase()} · ${page.kind} · ${stats.backend} · ${stats.commands} ops${dprText}${warnCount ? ` · ${warnCount} 警告` : ''}`, warnCount > 0);
+                }
+                return stats;
+            }
+            catch (err) {
+                if (seq === this.renderSeq)
+                    this.setStatus(`渲染失败：${String(err)}`, true);
+                throw err;
             }
-            return stats;
         }
-        catch (err) {
-            if (seq === this.renderSeq)
-                this.setStatus(`渲染失败：${String(err)}`, true);
-            throw err;
+        finally {
+            this.rendering = false;
+            if (this.renderAgain) {
+                this.renderAgain = false;
+                this.requestRender();
+            }
         }
     }
     getDocument() {

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@flyfish-dev/dwf-viewer",
-  "version": "0.5.1",
+  "version": "0.6.1",
   "private": false,
   "type": "module",
-  "description": "Pure frontend DWF/DWFx viewer with W2D WebGL rendering, W3D/HSF Three.js 3D rendering, DWFx/XPS support, and optional WASM raster fallback.",
+  "description": "Pure frontend DWF/DWFx CAD viewer with WebGL-accelerated XPS/W2D 2D rendering, W3D/HSF 3D rendering, embedded XPS fonts, and optional WASM fallback.",
   "license": "AGPL-3.0-only",
   "author": "flyfish-dev",
   "homepage": "https://github.com/flyfish-dev/dwf-viewer#readme",
@@ -24,6 +24,7 @@
     "cad",
     "lineweight",
     "line-width",
+    "xps-webgl",
     "viewer",
     "webgl",
     "threejs",