Controlling 3D Tiles quality

Hi everyone. I just uploaded my first 3D model of a church (made in RealityCapture with 1400 drone images) and I must be doing something wrong. I uploaded a large 10M tris - 8k textures version (440MB zipped) and it looks even worse than a simplified 1M tris version (.obj) does in Meshlab. Far worse. I wanted to share screenshots, but as a new user I’m not allowed to, apparently. But maybe somebody can shed some light on this anyway?

Welcome to the Cesium community!

I’m looking into why new members can’t upload images - in the meantime I’ve manually increased your “trust level” so you should be able to post images now I think.

How are you viewing the mesh? Are you using Cesium Stories, or a custom CesiumJS app?

Generally, when you upload a large model and tile it into 3D Tiles, it’ll stream in the model based on how close the camera is, how large the screen resolution is etc so you can view models of any scale without overwhelming the device memory/resources.

If you’re viewing the 3D Tileset in CesiumJS, you can tweak the quality setting using the maximumScreenSpaceError parameter. If you click on “Open code example” under the asset preview window in Cesium ion, that’ll open the online coding environment, where you can test this, like this:

var tileset = new Cesium.Cesium3DTileset({
  url: Cesium.IonResource.fromAssetId(YOUR_ASSET_ID),
  maximumScreenSpaceError: 8// The defaults to 16. Lower is higher quality.
});
1 Like

Hi @omar,

Thanks for replying so soon! I’m totally new to this, so I don’t even know what this CesiumJS you speak of is. I just uploaded my model from RealityCapture into My Assets (https://cesium.com/ion/assets/138589). This is how it looks in my Cesium dashboard, zoomed in on a certain piece (this is the 10M tris, 8k textures version, created in RC):

And this is the simplified, 1M tris model, when viewed with Meshlab:

If you look at the asset preview on the right, and then scroll down, you’ll see this “Open complete code example” link:

That’ll open the asset loaded in the online coding/testing environment. This is where you can pass in the maximumScreenSpaceError parameter to tweak the quality.

Is your goal to embed this model on a web-page? Or build an app around it/load other data on top?

Hi @omar,

The goal is to a) embed this model in my website and b) create a sharing link, so people can look at it as well, in the Cesium portal (but I think the latter is only possible when you have a paid version, right?)

The easiest way to do that is probably using Cesium Stories. This is how the Reality Capture model on this page is embedded: https://www.capturingreality.com/Mapping. You can find a tutorial on this here: https://cesium.com/docs/tutorials/stories-introduction/.

The “share” button in Cesium Stories can also give you the HTML code you need to embed this in your page.

It is possible with the free account! The paid account gives you a license to use Cesium ion commercially and more bandwidth/storage.

1 Like

Cool :slight_smile: I changed the quality to 1 here:

But I can’t save it anywhere; if I create a share link for this model in Stories, the quality remains poor:

https://cesium.com/ion/stories/viewer/?id=954f0112-f258-4a4e-97af-eed52c3cfbe2

Ok, so you would need to set up a custom app and embed that on your web-page, since Cesium Stories doesn’t allow you to override the maximum screen space error parameter.

This guide has a template for how to embed it on your page (and you’d just need to copy the code from Sandcastle there into it).

I can’t get it to work on my website unfortunately. I downloaded the code from here:

Which looks like this:

I copied the first part (head) to the head section of my own website’s HTML code and the second part (body) to the location where I want to display the model on that same website page. All I see is this now:

Loading…

@EagleDrone I wouldn’t use the “Save As” button there. You should set up a basic Cesium app on your website using this guide first:

And when you have that working, then copy/paste the snippet that adds the 3D Tileset to the scene with your maximumScreenSpaceError setting.