cesium icon indicating copy to clipboard operation
cesium copied to clipboard

why cesium load gltf so slowly?

Open CodeBoySun opened this issue 3 years ago • 25 comments

I use api load about 40 gltf files in cesium and three.js ,cesium use about 30s,but three.js just 5s.Now we use cesium for our product,This problem influence our product, Could someone help me find some way resolve it?

CodeBoySun avatar Jul 13 '22 11:07 CodeBoySun

Hi @CodeBoySun, there are many different factors that affect the load time. Would you mind giving some more information about your setup, like how you. are including Cesium.js and a code snippet? Could you link to the gltf model(s)?

Generally, Cesium is a big library which includes more features that most apps typically use. That's why when speed matters, we recommend importing ESM modules from the Source directory, and using a build tool which uses minification and tree shaking to reduce the bundle size.

ggetz avatar Jul 13 '22 13:07 ggetz

Hi @ggetz Thanks for your reply. The code is like following ,just use entity to create gltf model resp.forEach((item)=>{ viewer.entities.add({ orientation: Cesium.Transforms.headingPitchRollQuaternion(Cesium.Cartesian3.fromDegrees(Number(LONLAT.longitude), Number(LONLAT.latitude), 0), headingPitchRoll), position: Cesium.Cartesian3.fromDegrees( LONLAT.longitude, LONLAT.latitude, 0 ), model: { uri: new Cesium.Resource({ url: /GLB/data/${item}, }), scale: 1, // lightColor:new Cesium.Cartesian3(3,3,3) }, }); // } })

CodeBoySun avatar Jul 13 '22 13:07 CodeBoySun

@ggetz GLTF model is personally files,It's not convenient to show you.Do you have any time,I can remote to you.And There is a problem that it is very slow to draw gltf models. You can measure the speed of loading a large number of models in cesium internally。Please pay attention to this problem。 Whether there are other chat tools, can contact to you. I can show you

CodeBoySun avatar Jul 13 '22 13:07 CodeBoySun

@CodeBoySun have you tried using Model.fromGltf (or ModelExperimental.fromGltf, which is a rewrite of Model that we plan to put into production by August) ? The Entity API has more indirection than the Model class, so perhaps using the class directly will perform better.

j9liu avatar Jul 13 '22 14:07 j9liu

@j9liu Hi,Thanks for your advice.But I had used Model.fromGltf for gltf model.The drawing speed is the same。and we using cesium 1.72 .Not have 'ModelExperimental.fromGltf'

CodeBoySun avatar Jul 13 '22 14:07 CodeBoySun

@ggetz @j9liu I update version from 1.72 to 1.95.and Use ModelExperimental.fromGltf to load gltf.I find this api drawing is more slowly!

CodeBoySun avatar Jul 14 '22 12:07 CodeBoySun

@CodeBoySun Do you find this happens with any glTF model, or just specifically your data? And how many are you typically trying to load?

ggetz avatar Jul 14 '22 12:07 ggetz

@CodeBoySun Do you find this happens with any glTF model, or just specifically your data? And how many are you typically trying to load?

Yes,when model is little complex,like building ,I test about 40 gltfs.Cesium drawing model is very slow.but the same gltf model in three.js is fast,This will cause users to want to completely change the platform. Because we don't have any reason for it,You can test it in cesium and three.js drawing gltf model.You will find different. If you have any other chat tools?I can send you gltf files.

CodeBoySun avatar Jul 14 '22 13:07 CodeBoySun

@CodeBoySun Is there any other information about your glTF that we should know? Does it have metadata, Draco compression, or a lot of nodes / primitives?

If you aren't able to share your data over Github, is there a model in glTF Sample Models repo that is similar to your model, that we can use to compare performance? Or are your models more complex than these?

j9liu avatar Jul 14 '22 13:07 j9liu

Hi @j9liu I find and test when single gltf model load is not obvious,But when load many gltfs,It will slow. I think if Rendering mechanism is not same as three.js.I see cesium drawing gltf is one by one and not async.I find three.js when drawing lots of gltf models are liking coming out at the same time.You can test it. and my models are complex

CodeBoySun avatar Jul 14 '22 14:07 CodeBoySun

Hi @j9liu I find and test when single gltf model load is not obvious,But when load many gltfs,It will slow. I think if Rendering mechanism is not same as three.js.If cesium draw gltf is one by one and not async.I find three.js when drawing lots of gltf models are liking coming out at the same time.This will make people feel that the models come out one by one rather than at the same time and drawing time will very long.You can test it using different gltf to load .I think not my gltf will cause it,and My gltf is complex

CodeBoySun avatar Jul 14 '22 14:07 CodeBoySun

你可以设断点看看触发执行 executeCommands 函数时,frameState 对象上有多少个 DrawCommand,CesiumJS 的 DrawCommand 和 ThreeJS 设计优化专注点是不太一样的。DC 的数量和 glTF 的总 Primitive 对象是高度关联的,你可以检查一下你的数据

wewindy avatar Jul 19 '22 12:07 wewindy

你可以设断点看看触发执行 executeCommands 函数时,frameState 对象上有多少个 DrawCommand,CesiumJS 的 DrawCommand 和 ThreeJS 设计优化专注点是不太一样的。DC 的数量和 glTF 的总 Primitive 对象是高度关联的,你可以检查一下你的数据

你好,谢谢你的回答,我想问下如果专注点不一样的话,cesium能否像three.js一样渲染提升,或者有什么好的api可供参考。现在感觉渲染模型这块的速度有点慢

CodeBoySun avatar Jul 20 '22 05:07 CodeBoySun

@CodeBoySun 唯一的办法是检查数据,以及运行时相关的 DC 数量。CesiumJS 与 ThreeJS 出发点不同是根本原因,毕竟 CesiumJS 要处理的情况复杂度远超 ThreeJS,性能提升只能从它的 Renderer 设计出发,而不是向 ThreeJS 趋同,趋同要花费的代价可能远超直接写 ThreeJS

wewindy avatar Jul 20 '22 06:07 wewindy

因此,让我们来试试 google translate 处理这个问题的能力:

有许多自由度可能会影响加载时间。我刚刚在 https://github.com/KhronosGroup/glTF-Sample-Models/tree/master/2.0/ToyCar 上使用模型进行了尝试。该型号有 5.8MB。我已经从本地服务器加载了这个模型的 40 个实例。加载它们只需要 3.6 秒。 5秒后它们出现在屏幕上。

您的 GLB 文件有多大? 它们是否包含大纹理或大量几何图形? (有多少个三角形或顶点?)

javagl avatar Jul 23 '22 20:07 javagl

因此,让我们来试试 google translate 处理这个问题的能力:

有许多自由度可能会影响加载时间。我刚刚在 https://github.com/KhronosGroup/glTF-Sample-Models/tree/master/2.0/ToyCar 上使用模型进行了尝试。该型号有 5.8MB。我已经从本地服务器加载了这个模型的 40 个实例。加载它们只需要 3.6 秒。 5秒后它们出现在屏幕上。

您的 GLB 文件有多大? 它们是否包含大纹理或大量几何图形? (有多少个三角形或顶点?)

你好!这个小车可能模型复杂度不高,你可以测试一下管道模型,就是有很多个面组成的,cesium加载管道的时候,加载速度也比较慢并且浏览器会崩溃

CodeBoySun avatar Jul 25 '22 09:07 CodeBoySun

不知道你指的是哪个型号。 (翻译为 “pipeline”)

这个模型有多大?它是否包含大纹理,或许多顶点和三角形?

javagl avatar Jul 25 '22 21:07 javagl

不知道你指的是哪个型号。 (翻译为 “pipeline”)

这个模型有多大?它是否包含大纹理,或许多顶点和三角形?

不知道你指的是哪个型号。 (翻译为 “pipeline”) 就是那些所有的管道或者水管。

这个模型有多大?它是否包含大纹理,或许多顶点和三角形? 是的,管道的面比较多,包含很多面和三角形

CodeBoySun avatar Jul 26 '22 02:07 CodeBoySun

当你说它有“很多”顶点时,我不知道那是什么意思。

它有100000个顶点吗?还是100万?

我刚刚创建了一个包含大约 1000000 个顶点的球体的简单 GLB 文件。我创建了一个沙堡,它只加载了这个球体的 100 个副本。所以有100000000个顶点。而这只用了 7 或 8 秒。

Cesium glTF Loading

如果没有关于 glTF 资产的更多信息,就无法说明为什么加载它们需要很长时间。

javagl avatar Jul 26 '22 14:07 javagl

Log your glb/gltf model's info, such as triangles count, drawcall count, etc. may be better. The drawcall will directly influence the performance through create DrawCommand.

wewindy avatar Jul 26 '22 14:07 wewindy

当你说它有“很多”顶点时,我不知道那是什么意思。

它有100000个顶点吗?还是100万?

我刚刚创建了一个包含大约 1000000 个顶点的球体的简单 GLB 文件。我创建了一个沙堡,它只加载了这个球体的 100 个副本。所以有100000000个顶点。而这只用了 7 或 8 秒。

Cesium glTF Loading Cesium glTF Loading

如果没有关于 glTF 资产的更多信息,就无法说明为什么加载它们需要很长时间。

Hi,你可以看到当顶点数100万个时候,浏览器就有点卡顿了,并且需要7到8秒才能出来,你可以把这个放到three.js试试,或许是不是因为cesium需要经纬度的转换导致的。 你可以把这个gltf给我吗?我可以用cesium和three.js测试一下

CodeBoySun avatar Jul 26 '22 15:07 CodeBoySun

@javagl 我提这个问题的目的是希望cesium在渲染gltf这块的速度和性能上能提升,因为目前我已经用了很多复杂的gltf测试在不同平台上,cesium在渲染gltf的速度上不占优势,容易导致用户如果想用复杂的gltf或者glb来展示的时候有所顾虑,或许cesium加载模型的时候需要有符合cesium渲染的数据格式。cesium确实很强大,但是如果渲染gltf速度上不占优势的话,也会考虑其他方案的。虽然有3dtiles这个方案,确实速度上有所提升,但是模型的精细度上感觉没有gltf或者glb好,用户还是会考虑用gltf的。

CodeBoySun avatar Jul 26 '22 16:07 CodeBoySun

我理解你的担忧。 Cesium 一直致力于以多种方式改进 CesiumJS。性能是一个重要的话题。

但是很难客观地比较不同解决方案的性能。 Cesium 提供的不仅仅是“渲染 glTF 模型”。如果你只想渲染一个 glTF 模型,three.js 可能是一个更轻量级的解决方案。如果您想开发地理空间应用程序,Cesium 提供了许多重要的功能。

其中一种解决方案是 3D Tiles。当您的模型包含 1000000000 个顶点时,将其存储为单个 glTF 是没有意义的。它应该被分成更小的部分,可以转移给客户端。 (使用 LOD - 细节级别)。

我在这里附上“球体”模型进行第一次测试。 (我不知道如何在 three.js 中渲染这个模型的40个实例。所以我无法比较它)。

该模型包含许多顶点。但它仍然很简单:它没有纹理。它只使用一个网 (mesh) 格。而且它不使用扩展。但它可以用于第一次测试。

sphere0.zip

javagl avatar Jul 27 '22 13:07 javagl

主要我们的产品是用cesium开发的,而且基本上包含cesium很多高级功能,是一个很庞大的地理空间系统,之前一直用的是3dtiles,但是发现3dtiles的模型的精细度不高,并且是局部加载,然后就用了gltf,因为整个模型很复杂,用了很多压缩技术,但是发现cesium加载的速度并不理想,但是用three.js加载很快就能出来,所以比较烦恼。因为整个项目如果用three.js至少也要花1年时间去替换。所以想着有没有好的办法改进加载速度。 这个sphere0的模型很简单不复杂,用cesium测试加载了一下也很快,你是否有那种整一片地区包含管道,建筑物等复杂的gltf可以试试,加载起来就很慢了。

CodeBoySun avatar Jul 27 '22 13:07 CodeBoySun

当您需要地理空间功能时,这是 Cesium 的有力论据。

3D Tiles 和 glTF 有不同的用途。

并且3dtiles的模型的精细度不高,是发现加载,

模型大小总是有限制的。如果您有一个具有 1000000000 个顶点的模型,那么这将是一个 3000MB 的 glTF 文件。用户将不得不等待很长时间才能下载它。当你想显示10个这样的模型时,显卡上的内存就不够了。

使用 3D Tiles,您可以拥有层次结构 (LOD)。您可以快速加载一个顶点少、细节少的小型 glTF 模型。当用户放大时,会加载更高的细节。

但再说一遍:在这里提供真正的帮助是非常困难的。目前还不清楚为什么加载 glTF 模型很慢。 glTF 使用哪种压缩方式?它使用Draco 吗?

javagl avatar Jul 27 '22 14:07 javagl

@CodeBoySun I'm closing this issue due to inactivity. It seems like you and @javagl have had a good conversation about 3D Tiles vs glTF. Perhaps if you need to discuss further, the community forum would be the place to do so. Thanks!

ggetz avatar Aug 17 '22 16:08 ggetz