ARTICLE DETAIL

资讯详情

深耕郑州网站建设与运营推广的一线实战洞察。

CESIUM_binary_glTF 基准测试全解:glTF 五种交付格式的加载性能对比与复现指南

CESIUM_binary_glTF 基准测试全解:glTF 五种交付格式的加载性能对比与复现指南 图形学【免费下载链接】glTFglTF – Runtime 3D Asset Delivery项目地址https://gitcode.com/gh_mirrors/gl/glTF点击查看免费下载本指南以 glTF 仓库中extensions/0.8/Vendor/CESIUM_binary_glTF/BenchData下的基准测试文档为核心完整讲解其测试方法论、五种 glTF 交付格式的定义以及 8 个典型测试模型在加载时间、压缩体积与文件数量上的实测数据。读完本文你将掌握普通 glTF、base64 内嵌与 Binary glTFbgltf之间的性能差异规律理解不同应用场景单文件交付、多请求最小化、贴图外置的格式选型依据并可直接复现附录中的 Cesium 计时加载代码与 gzip 静态服务配置。基准测试的背景为什么需要 Binary glTF该基准测试服务于CESIUM_binary_glTF扩展曾用于 Cesium 1.10 至 1.14其历史定位与容器格式的完整说明见 扩展 README。当时的 glTF 提供两种交付方式glTF JSON 通过uri指向外部二进制资源几何、关键帧、骨骼以及图片和着色器代价是大量独立的 HTTP 请求glTF JSON 将资源以 base64 编码的数据 URI 内嵌代价是编码开销——base64 会使被编码资源体积增大约 33%虽然 gzip 能缓解体积增长但解压与解码仍显著拖慢加载。Binary glTF 正是为同时解决“请求数过多”与“base64 体积膨胀”而引入的容器格式它将 JSON、.bin、图片和着色器全部存入一个二进制 blob在 JavaScript 中表现为ArrayBuffer用TextDecoder提取 glTF JSON用JSON.parse正常解析再把整个 arraybuffer 当作 glTF 的buffer使用。非正式地说就是把 JSON、图片和着色器都“塞进 .bin 文件里”。BenchData目录下的基准测试文档就是围绕“二进制内嵌究竟比 base64 内嵌与外置资源快多少、省多少”这一核心问题用真实模型跑出的第一手实验数据。测试流程与方法论数据准备从 COLLADA 到五种交付格式BenchData中每个模型子目录如Cesium_Air/、LargeTex/、TenTex/、100kTris/、BinaryTree/、SpinningTree/、1200_12th/、EauClaire/都包含一个 COLLADA.dae源文件。测试时每个.dae被分别转换为以下五种 glTF 交付格式glTF所有资源独立成文件glTF贴图独立其余资源以数据 URI 内嵌glTF所有资源以数据 URI 内嵌Binary glTF贴图独立其余资源以二进制内嵌Binary glTF所有资源以二进制内嵌。除独立成文件的贴图外所有文件都预先 gzip 压缩并以Content-Encoding: gzip提供给客户端。注意当前仓库的BenchData各子目录中保留的是 COLLADA 源文件与贴图例如Cesium_Air/下的Cesium_Air.dae与两张 PNG转换后的多格式产物用于原始测试并未归档在仓库内。测试环境与统计口径测试在以下环境中执行文档明确记录的事实加载器Cesium 1.11使用最小化的 HelloWorld 示例应用加载与计时代码见原文附录 Listing A1服务方式所有数据与应用均在本地提供服务浏览器Google Chrome 43.0启用设备仿真分辨率 1920×1080网络仿真WiFi30 Mbps 带宽、2 ms RTT统计方法每个测试运行 5 次报告 5 次结果的均值。五种被测格式速查格式说明gltf标准 glTFbgltfBinary glTFseparate所有资源均为独立文件tex-separate仅贴图为独立文件其余资源内嵌all-embedded所有资源全部内嵌内嵌方式的差异在于标准 glTF 内嵌时使用 base64 编码的数据 URIBinary glTF 内嵌时直接以二进制形式存放不经过 base64 编码。详细测试结果8 个模型 × 5 种格式下表为文档记录的完整实测数据。表中“Size (gzip*)”一列除独立贴图外均为 gzip 压缩后的体积“# files”为请求文件数量加粗项为该模型下对应指标的最优值。模型模型名格式加载时间体积 (gzip*)文件数Cesium_AirCesium Airgltf, separate0.32 s538 KiB8gltf, tex-separate0.30 s559 KiB3gltf, all-embedded0.41 s540 KiB1bgltf, tex-separate0.30 s538 KiB3bgltf, all-embedded0.29 s513 KiB1LargeTexLarge Texgltf, separate3.07 s8.48 MiB5gltf, tex-separate3.08 s8.48 MiB2gltf, all-embedded4.62 s8.41 MiB1bgltf, tex-separate3.04 s8.48 MiB2bgltf, all-embedded3.05 s8.31 MiB1TenTexTen Texgltf, separate1.58 s4.91 MiB16gltf, tex-separate1.48 s4.91 MiB11gltf, all-embedded2.48 s4.95 MiB1bgltf, tex-separate1.51 s4.91 MiB11bgltf, all-embedded1.63 s4.90 MiB1100kTris100k Trisgltf, separate0.97 s2.98 MiB4gltf, tex-separate1.39 s3.25 MiB1gltf, all-embedded^^^bgltf, tex-separate0.91 s2.98 MiB1bgltf, all-embedded^^^BinaryTreeBinary Treegltf, separate0.70 s184 KiB4gltf, tex-separate0.87 s184 KiB1gltf, all-embedded^^^bgltf, tex-separate0.69 s184 KiB1bgltf, all-embedded^^^SpinningTreeSpinning Treegltf, separate0.64 s1.24 MiB4gltf, tex-separate0.73 s1.34 MiB1gltf, all-embedded^^^bgltf, tex-separate0.59 s1.24 MiB1bgltf, all-embedded^^^1200_12th1200 12th Avegltf, separate0.85 s1.25 MiB31gltf, tex-separate0.87 s1.31 MiB22gltf, all-embedded1.25 s1.30 MiB1bgltf, tex-separate0.84 s1.25 MiB22bgltf, all-embedded1.02 s1.23 MiB1EauClaireEau Claire Towergltf, separate0.55 s609 KiB23gltf, tex-separate0.52 s610 KiB16gltf, all-embedded0.66 s539 KiB1bgltf, tex-separate0.53 s608 KiB16bgltf, all-embedded0.56 s538 KiB1结果表附带的两个关键说明^无贴图模型100kTris、BinaryTree、SpinningTree的“all-embedded”与“tex-separate”结果完全相同因为“除贴图外全部内嵌”与“全部内嵌”对无贴图模型本就等价故排除*除独立成文件的贴图外所有文件均经 gzip 压缩。模型统计与逐模型解读各模型源文件与贴图可在 BenchData 目录 下查看如Cesium_Air/、LargeTex/。以下统计针对的是“先优化、再转换为各 glTF 格式”的模型模型类型图片数Draw calls渲染三角面存储三角面节点网格材质动画Cesium Air典型模型255,984~5,9847222LargeTex大尺寸贴图1112122110TenTex多贴图101020201110100100kTris高三角形数0599,37299,3722510BinaryTree大量对象0819198,292128,192110SpinningTree大量动画与关键帧031372123211931200 12th Ave复杂建筑数据21382730,235—171,197260Eau Claire Tower较简单建筑数据1561387—4547170其中 Cesium Air 与 1200 12th Ave 的模型预览如下缩略图位于 BenchData/thumb这 8 个模型覆盖了真实场景中会遇到的各类特征从数据表可以归纳出如下规律Cesium Air典型模型5,984 三角形、2 张贴图图集、简单无蒙皮动画bgltf 全内嵌拿到了全场最优的 0.29 s 加载时间与最小的 513 KiB gzip 体积且只需 1 个文件而 gltf 的 base64 全内嵌0.41 s、540 KiB反而比资源全分离0.32 s、538 KiB更慢——base64 解码开销在此显现。LargeTex1 张 4096×4096 大贴图这是最典型的“贴图主导”场景所有格式加载时间都在 3 s 以上贴图解码是绝对瓶颈。base64 全内嵌4.62 s比分离格式3.07 s慢了约 50%bgltf 全内嵌3.05 s则几乎无损失且体积最小8.31 MiB。TenTex10 张 512×512 贴图内嵌格式把文件数从 16 降到 1但 gltf 的 base64 内嵌加载时间显著恶化2.48 s vs 1.58 s而 bgltf 内嵌仅小幅上升1.63 s。100kTris99,372 三角形、无贴图bgltf tex-separate0.91 s快于 gltf 分离0.97 s与 gltf tex-separate1.39 s且体积同为最优 2.98 MiB。BinaryTree8,192 个节点、8,191 次 draw call、无贴图请求数从 4 降到 1bgltf tex-separate 0.69 s 为最快体积 184 KiB 不变。SpinningTree93 个动画、无贴图bgltf tex-separate 0.59 s 为最快体积 1.24 MiB。1200 12th Ave复杂建筑30,235 三角形、21 张贴图、1,197 个网格文件数从 31 降至 1bgltf 全内嵌体积最小1.23 MiB加载时间上分离格式更快0.85 s vs 1.02 s因为 21 张贴图的解压成本不可忽略。Eau Claire Tower较简单建筑15 张贴图gltf tex-separate0.52 s最快bgltf 全内嵌0.56 s、538 KiB在体积与文件数上最优。从体积压缩性角度看文档给出了两点数据观察JSON、网格数据与动画数据高度可压缩已压缩的贴图PNG/JPEG几乎不可再压缩——把已压缩贴图再嵌入会被 gzip 的文件中只会增加 CPU 解压开销而体积收益甚微。不同场景下的格式选型建议结合以上实测扩展 README 的 Performance Results 一节基于 Cesium 1.10 与同一批基准数据给出了工程建议追求最小体积与最少文件数使用 gzip 的 Binary glTF并将压缩图片PNG/JPEG 等作为外部文件保留避免显著的解压开销必须单文件交付使用 gzip 的 Binary glTF 并全资源内嵌非贴图数据占比很小的模型各格式加载时间差异不大但 Binary glTF 可以在不增加开销的前提下大幅减少请求数。以 Cesium Air 为例扩展 README 汇总了从 COLLADA 到各交付格式的完整对比体积均为 gzip 后除独立贴图外全部压缩Cesium Air文件数体积体积 (gzip*)加载时间COLLADA3922 KiB591 KiB—glTF8608 KiB538 KiB0.32 sglTF, base64 内嵌 bin/jpg/png/glsl1808 KiB540 KiB0.41 sBinary glTF, 内嵌贴图1609 KiB513 KiB0.29 sBinary glTF, 贴图分离3609 KiB538 KiB0.30 s同样的规律在 1200 12th Ave 上再次成立base64 内嵌使体积从 2.99 MiB 膨胀到 3.64 MiB 且加载最慢1.25 s而 Binary glTF 内嵌贴图后 gzip 体积反而最小1.23 MiB、单文件交付加载 1.03 s若要最快加载0.84 s则用 Binary glTF 配 22 个独立贴图文件。这正是“bgltf 内嵌二进制无需 base64 体积税”的直接证据。附录复现基准测试的代码以下代码来自文档附录可直接用于在自己的环境中复现计时测量与 gzip 服务配置。Listing A1Cesium 计时加载代码将以下代码加入 Cesium HelloWorld 应用的HelloWorld.html。其思路是用performance.now()记录从发起Cesium.Model.fromGltf到readyPromise兑现的耗时并在模型就绪后循环播放全部动画// Add to HelloWorld.html. var viewer new Cesium.Viewer(cesiumContainer, {globe: false, skyBox: false, skyAtmosphere: false}); var scene viewer.scene; var timeModelLoad function(url) { var origin Cesium.Cartesian3.fromDegrees(0.0, 0.0, 0.0); var modelMatrix Cesium.Transforms.headingPitchRollToFixedFrame(origin, 0.0, 0.0, 0.0); var timings []; var f function() { var t0 performance.now(); var model scene.primitives.add(Cesium.Model.fromGltf({ url : url, modelMatrix : modelMatrix, asynchronous : true, minimumPixelSize : 128 })); model.readyPromise.then(function(model) { var t1 performance.now(); console.log(t1 - t0); model.activeAnimations.addAll({ loop : Cesium.ModelAnimationLoop.REPEAT }); }); }; f(); }; timeModelLoad(/BenchData/Cesium_Air/fmt/CesiumAir.gltf);服务端Node.js gzip 响应头配置由于所有被测文件除独立贴图外都已预压缩服务端只需为对应扩展名声明Content-Encoding: gzip客户端即可透明解压// Add to server.js when using Node.js. app.get(*.bin , function(req, res, next) { res.header(Content-Encoding, gzip); next(); }); app.get(*.glsl , function(req, res, next) { res.header(Content-Encoding, gzip); next(); }); app.get(*.gltf , function(req, res, next) { res.header(Content-Encoding, gzip); next(); }); app.get(*.bin , function(req, res, next) { res.header(Content-Encoding, gzip); next(); }); app.get(*.bgltf, function(req, res, next) { res.header(Content-Encoding, gzip); next(); });延伸从 0.8 实验到 1.0 标准化需要强调的是CESIUM_binary_glTF是历史性扩展官方明确标注“Do not use this extension”仅在 Cesium 1.10 至 1.14 使用其容器设计被 glTF 1.0 的 KHR_binary_glTF 扩展 继承并标准化后者将二进制容器划分为 20 字节 header、结构化 content 与二进制 body 三部分文件扩展名为.glb、MIME 类型为model/gltf.binary到 glTF 2.0GLB 直接并入核心规范不再需要扩展。本基准测试的数据正是在该容器格式尚未标准化前用.bgltf测得其结论二进制内嵌优于 base64 内嵌对理解 GLB 的取舍依然适用。如果想深入理解二进制容器中内嵌图片的 schema 细节可查看 KHR_binary_glTF 的 image 扩展 schema它要求bufferView、mimeType、width、height四个必填字段运行时据此从 arraybuffer 中定位图片数据并正确解码——这正是基准测试中“bgltf 内嵌贴图”得以绕过 base64 解码的直接原因。小结这份 BenchData 基准文档给出了一个清晰且可复现的结论在 gzip 传输的前提下Binary glTF 以二进制内嵌资源可以同时做到单文件、最小体积和最低加载开销而标准 glTF 的 base64 内嵌虽然也能合并请求却要付出约 33% 的体积膨胀与客户端解码成本对以贴图为主的模型尤为明显。实测还表明已压缩贴图不适合再嵌入 gzip 容器应根据模型特征三角形数、贴图数量、动画数量在“文件数、体积、加载时间”三者之间取舍。参考模型数据由 Cube Cities 提供与复现代码均可在仓库的 BenchData 目录下找到。赞分享图形学【免费下载链接】glTFglTF – Runtime 3D Asset Delivery项目地址https://gitcode.com/gh_mirrors/gl/glTF点击查看免费下载相关推荐如何快速下载B站视频三分钟掌握BilibiliDown完整使用指南如何快速下载B站视频三分钟掌握BilibiliDown完整使用指南 在当今数字内容时代B站已成为学习、娱乐和创作的重要平台。然而你是否经常遇到网络不稳定时音视频桌面应用图片格式性能终极测试5种常见格式加载速度与质量对比指南图片格式性能终极测试5种常见格式加载速度与质量对比指南 在当今数字化时代图片加载速度直接影响用户体验和网站性能。本指南将通过GitHub加速计划le/le教程示例工程MediaInfoLib高级技巧如何高效处理大型媒体文件的元数据MediaInfoLib高级技巧如何高效处理大型媒体文件的元数据 MediaInfoLib是一款强大的开源工具专为便捷统一显示视频和音频文件的关键技术与标签音视频上一篇DLSS Swapper 完全解析不更新游戏也能切换 DLSS / FSR / XeSS 版本下一篇Taishan-oslab核心功能解析一站式云端操作系统实验解决方案创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表