图形学音视频跨平台【免费下载链接】libpagThe official rendering library for PAG (Portable Animated Graphics) files that renders After Effects animations natively across multiple platforms.项目地址https://gitcode.com/gh_mirrors/li/libpag点击查看免费下载导读PAGX Viewer 是 libpag 仓库 playground/pagx-viewer 目录下的一个轻量级 WebAssembly SDK它将 libpag 的 PAGX 渲染引擎C 核心编译为 WebAssembly并通过极简的 TypeScript API 暴露给浏览器端加载 PAGX 文件、注册回退字体、处理缩放/平移、驱动canvas渲染循环。读完本文你将掌握 PAGX Viewer 的完整接入流程含外部资源两步加载法、四种构建方式debug/release × 多线程/单线程的取舍以及渲染循环、双缓冲、自适应瓦片细化等底层实现原理可直接在项目中落地一个浏览器端 PAGX 预览器。PAGX Viewer 是什么PAGX Viewer 是 libpag 官方仓库内面向浏览器场景的 PAGX 文件查看器 SDK。它复用 libpag 的 PAGX 渲染管线src/pagx下的文档解析、场景构建、时间线驱动等模块把 C 渲染核心经 Emscripten 编译成 WebAssembly再用一层薄薄的 TypeScript 胶水封装出易用的 API。构建完成后 SDK 只包含两个文件pagx-viewer.esm.js另有.cjs.js/.umd.js/.min.js变体—— JavaScript 胶水代码pagx-viewer.wasm—— WebAssembly 二进制它依赖零第三方运行库宿主页面只需一个canvas元素即可运行。从源码结构看TS 侧的核心类是 src/ts/pagx-view.ts 中的PAGXViewC 侧对应 src/cpp/PAGXView.cpp两侧通过 src/cpp/binding.cpp 的EMSCRIPTEN_BINDINGS绑定层桥接。快速开始在浏览器中渲染 PAGX初始化 WASM 模块并创建视图import { PAGXInit } from pagx-viewer; // Initialize the WASM module. const PAGX await PAGXInit({ locateFile: (file) /lib/${file}, }); // Create a view from a canvas element. const view PAGX.PAGXView.init(#pagx-canvas);PAGXInit接收一个ModuleOption除locateFile外还支持mainScriptUrlOrBlob多线程构建在代码被打包时用于正确派生 worker 的脚本地址与wasmBinary预取好的 WASM 二进制提供后不再走网络拉取定义见 src/ts/pagx.ts。PAGXView.init的入参可以是 CSS 选择器字符串也可以是HTMLCanvasElement元素——传入元素时必须带非空id属性因为底层 WebGL 绑定需要用该 id 拼出选择器创建失败时返回null并打印错误见 pagx-view.ts。设置背景色与注册字体// Optional: set a custom background color (defaults to a checkerboard pattern). // The color supports #RGB / #RGBA / #RRGGBB / #RRGGBBAA, and an optional alpha // parameter (0.0 - 1.0) can override the transparency. view.setBackgroundColor(#ffffff); // Register fallback fonts for text rendering. view.registerFonts(fontData, emojiFontData);默认背景是棋盘格图案调用setBackgroundColor后改为纯色。颜色格式与可选 alpha 覆盖参数的实际解析逻辑在 pagx-view.ts 的parseColor中实现支持#RGB、#RGBA、#RRGGBB、#RRGGBBAA四种格式分别按 3/4/6/8 位十六进制展开为 0.0–1.0 的 RGBA 分量格式非法时警告并回退为不透明白色。合法用法示例view.setBackgroundColor(#ff0000); // Opaque red view.setBackgroundColor(#f00); // Opaque red (shorthand) view.setBackgroundColor(#ff000080); // 50% transparent red view.setBackgroundColor(#ffffff, 0.5); // 50% transparent white view.setBackgroundColor(#fff, 0.8); // 80% opaque whiteregisterFonts需要两个Uint8Array主字体数据如 NotoSansSC与 emoji 字体数据如 NotoColorEmoji。C 侧 PAGXView.cpp 会把它们依次加入FontConfig的 fallback 字体链用于文本渲染的兜底匹配。两步加载解析文档与注入外部资源// Step 1: Parse PAGX data without building layers. view.parsePAGX(pagxData); // Step 2: Get external file paths (e.g., images) referenced by the document. const paths view.getExternalFilePaths(); // Step 3: Download each external file and inject it back into the view. for (const filePath of paths) { const response await fetch(baseUrl filePath); const fileData new Uint8Array(await response.arrayBuffer()); view.loadFileData(filePath, fileData); } // Step 4: Build the layer tree after all external files are loaded. view.buildLayers(); // Update canvas size to match the current canvas dimensions. view.updateSize(); // Optional: update the zoom scale and content offset when the user zooms or pans. // view.updateZoomScaleAndOffset(zoom, offsetX, offsetY); // Start the render loop. view.start();这一“解析 → 枚举外部文件 → 注入数据 → 建树”的四步流程专门面向带外部资源的 PAGX 文档如引用了图片素材的动效。底层实现上parsePAGX调用PAGXImporter::FromXML生成PAGXDocumentPAGXView.cppgetExternalFilePaths返回文档引用的外部文件路径列表L124-L129loadFileData按路径把二进制注入文档L131-L140最后buildLayers执行applyLayout、创建PAGScene、取默认时间线并套用显示选项L142-L163。对于不含外部资源的 PAGX 文件可以用一步view.loadPAGX(pagxData)替代上述parsePAGXbuildLayers组合——它内部就是“解析 建树”的合并调用PAGXView.cpp。渲染循环与播放控制view.start()启动基于requestAnimationFrame的渲染循环每帧调用一次原生_draw()再调度下一帧pagx-view.ts。配套的播放控制 API 包括play()/pause()/isPlaying()、currentTimeMicros()/durationMicros()/frameRate()、setCurrentTimeMicros(micros)拖动进度条时可用暂停态下会强制重绘当前帧、setLoop(bool)/isLoop()覆盖文件内循环模式true 时每个循环周期重复播放并保留 PingPong 镜像false 时播完一遍回到首帧停止以及stop()/destroy()用于停止循环与释放资源。PAGXView 完整 API 一览除文档示例中的方法外PAGXView还暴露了以下常用接口完整定义见 pagx-view.ts方法说明contentWidth/contentHeightPAGX 内容的原始宽高像素isRunning/isDestroyed渲染循环是否运行 / 视图是否已销毁clear()清空当前 PAGX 内容并释放相关资源视图恢复为空draw()立即绘制当前帧不依赖渲染循环clearBackgroundColor()清除自定义背景色恢复默认棋盘格updateZoomScaleAndOffset(zoom, offsetX, offsetY)设置缩放倍率1.0 100%与内容偏移像素其中updateZoomScaleAndOffset在 C 侧不只是改坐标缩放 ≤ 1.0 时把子树缓存上限设为 1024放大时设为 0 以换取更精细的瓦片渲染PAGXView.cpp。构建指南前置条件与依赖安装首先按项目根目录 README.md 的 Development 章节安装全部工具与依赖包括 Emscripten 工具链。随后在playground/pagx-viewer目录执行# ./playground/pagx-viewer npm install两种顶层构建命令SDK 提供两条顶层构建命令二者都经由 Emscripten 把 C 源码编译为 WebAssembly、再用 Rollup 打包 TypeScript区别仅在优化级别与调试信息# ./playground/pagx-viewer # Debug build: no minification, keeps source maps and DWARF debug info. # Use this during development so you can step through C and TS in DevTools. npm run build:debug # Release build: minified JS, stripped WASM, optimized for production. # Use this when integrating the SDK into a shipping product. npm run build:release # Single-threaded variants (no pthread / SharedArrayBuffer requirement). # Useful when the hosting page cannot enable cross-origin isolation. npm run build:debug:st npm run build:release:st多线程mt与单线程st两套产物共存于lib/目录多线程构建保留规范文件名pagx-viewer.*单线程构建增加.st中缀pagx-viewer.st.*。多线程构建依赖 pthread / SharedArrayBuffer需要宿主页面开启跨域隔离若页面无法满足例如无法配置 COOP/COEP 响应头请选用单线程变体。产物明细如下lib/目录下FileFormatUsagepagx-viewer.esm.js/pagx-viewer.st.esm.jsESMimport { PAGXInit } from pagx-viewer(mt) /pagx-viewer/st(st)pagx-viewer.cjs.js/pagx-viewer.st.cjs.jsCJSconst { PAGXInit } require(pagx-viewer)(mt) /require(pagx-viewer/st)(st)pagx-viewer.umd.js/pagx-viewer.st.umd.jsUMDBrowserscripttagpagx-viewer.min.js/pagx-viewer.st.min.jsUMD (minified)Production usepagx-viewer.wasm/pagx-viewer.st.wasmWebAssemblyRuntime dependencyESM/CJS 双入口的导出映射定义在 package.json主入口.指向多线程产物./st子路径指向单线程产物二者共享同一份类型声明。调试 C 侧代码若需在浏览器 DevTools 中直接对 C 源码下断点先安装 Chrome 的 C/C DevTools Support (DWARF) 扩展然后打开 DevTools → Settings → Experiments启用 “WebAssembly Debugging: Enable DWARF support”。这要求 debug 构建保留了 DWARF 调试信息——build:debug系命令在编译链接阶段使用-O0 -g3并开启-sSAFE_HEAP1见 CMakeLists.txt。单独构建目标如果只需要流水线的某个环节例如只重编 WASM 而不重建 JS bundle可单独执行CommandDescriptionnpm run build:wasmBuild only the WebAssembly binary (multi-threaded, release)npm run build:wasm:debugBuild only the WebAssembly binary (multi-threaded, debug)npm run build:wasm:stBuild only the WebAssembly binary (single-threaded, release)npm run build:wasm:st:debugBuild only the WebAssembly binary (single-threaded, debug)npm run build:jsBuild only the JavaScript bundles (multi-threaded, debug)npm run build:js:releaseBuild only the JavaScript bundles (multi-threaded, release)npm run build:js:stBuild only the JavaScript bundles (single-threaded, debug)npm run build:js:st:releaseBuild only the JavaScript bundles (single-threaded, release)npm run build:typesEmit TypeScript declaration filesnpm run cleanRemove build artifacts and caches从脚本定义看WASM 环节统一走node script/cmake.js多线程传-a wasm-mt单线程传-a wasmJS 环节由 Rollup 按ARCH环境变量区分架构随后生成类型声明并执行fix-wasm-imports.js修正 WASM 导入见 package.json。与 PAGX Playground 配合使用配套的 pagx-playground 项目直接消费pagx-viewer/lib下的编译产物。在pagx-viewer目录执行npm run build:release后即可切到 playground 目录运行其自身的构建/发布脚本。二者构成“SDK 编译 → 示例页面消费”的开发闭环playground 页面pages/*.html与scripts/*.js可作为真实接入时的参考实现。浏览器环境要求PAGX Viewer 需要 WebGL2 与 WebAssembly 支持支持的浏览器版本为Chrome 69Firefox 79Safari 15Edge 79需注意多线程构建还要求页面启用跨域隔离以使用 SharedArrayBuffer 与 worker 线程池无法满足时请改用.st单线程构建。源码级实现原理渲染管线的三层结构从 PAGXView.h 的成员看一次绘制经由三层tgfx::WebGLWindow承载 WebGL 上下文→tgfx::SurfaceGPU 离屏表面→pagx::PAGSurfacePAG 场景的输出目标。draw()每帧先推进时间线再同步画布尺寸随后对场景执行Record并submit给 GPUPAGXView.cpp。脏检查门控与双缓冲帧循环中有两道性能开关其一当presentImmediately为假、无滞留录制且场景hasContentChanged()为假时直接跳过绘制L376-L378让静止画面零开销其二非立即呈现时采用双缓冲——本帧录制存入lastRecording、提交上一帧滞留的录制给 GPU 多一帧完成时间L396-L404。加载、缩放、背景变更等操作会置presentImmediately强制刷新。动画与静态场景的渲染模式切换applySceneDisplayOptions按是否有默认时间线切换渲染模式有动画时用PAGRenderMode::Partial局部重绘脏区域动画帧保持流畅无动画时用PAGRenderMode::Tiled并配合Smooth瓦片更新模式、maxTileCount512L290-L305。自适应瓦片细化与性能监控静态场景的瓦片细化数量是动态调整的缩放过程中每帧最多细化 1 个瓦片并快速降级缩放结束放大超时 300ms、缩小超时 800ms后先保持 1再按 200ms 初始延迟、300ms 重试间隔逐步升级到目标值目标值在放大时取 3缩小时按zoom / 0.33 1计算并夹取到 1–3calculateTargetTileRefinement。性能监控以 32ms 为慢帧阈值结合 2000ms 滑动窗口的帧时长均值判断是否恢复静态需连续 20 帧、缩放结束后需 10 帧相关常量定义在 PAGXView.cpp。PingPong 循环边界与已知限制播放逻辑对 PingPong 模式做了专门处理以线性playbackPositionPingPong 下周期为 2 × 时长而非折叠的currentTime判断单次播放是否结束保证一次往返才算完整一遍currentTimeMicros/durationMicros也据此返回完整周期使进度条在返回半程不会倒走L165-L221。已知限制setCurrentTimeMicros的 seek 只作用于顶层动画场景内嵌套的自动播放合成由增量驱动、无绝对时间入口scrub 后其画面会滞后于主时间线源码注释中明确说明了这一点。LicensePAGX Viewer 以 Apache-2.0 协议开源。赞分享图形学音视频跨平台【免费下载链接】libpagThe official rendering library for PAG (Portable Animated Graphics) files that renders After Effects animations natively across multiple platforms.项目地址https://gitcode.com/gh_mirrors/li/libpag点击查看免费下载相关推荐PAGX Viewer 开发指南基于 WebAssembly 的 PAGX 文件浏览器 SDK 集成与构建PAGX Viewer 开发指南基于 WebAssembly 的 PAGX 文件浏览器 SDK 集成与构建 导读 本文围绕 libpag 仓库中 playgr图形学音视频跨平台libpag PAGX Playground浏览器端 PAGX 文件交互式预览 Demo 的构建、运行与发布指南libpag PAGX Playground浏览器端 PAGX 文件交互式预览 Demo 的构建、运行与发布指南 PAGX Playground 是 libp图形学音视频跨平台在微信小程序中渲染 PAGX 动画PAGX Viewer 小程序预览工具 wx_demo 完整实战指南在微信小程序中渲染 PAGX 动画PAGX Viewer 小程序预览工具 wx_demo 完整实战指南 本指南以 libpag 仓库中 pagx/wechat图形学音视频跨平台上一篇Syncthing-Android终极权限管理与安全策略完全指南下一篇构建智能金融交易系统Hermes Agent市场分析与自动交易全指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考