How to get the New York City 3d tiles example work on my local machine?

CesiumJS
1

Hi I am new to this library, and I think the New York City 3d tiles demo is pretty cool.
I downloaded the New York data source from https://cesiumjs.org/NewYork/3DTiles/NewYork.zip
And I added to “3d-tiles-samples-master\tilesets” and started it run on “http://localhost:8003/” and in my cesium 3d HTML file I tried to do something like:
<!DOCTYPE html>
<html lang=“en”>
<head>
  <!-- Use correct character set. -->
  <meta charset=“utf-8”>
  <!-- Tell IE to use the latest, best version. -->
  <meta http-equiv=“X-UA-Compatible” content=“IE=edge”>
  <!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
  <meta name=“viewport” content=“width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no”>
  <title>Hello World!</title>
  <script src="../Build/Cesium/Cesium.js"></script>
  <style>
      @import url(../Build/Cesium/Widgets/widgets.css);
      html, body, #cesiumContainer {
          width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
      }
  </style>
</head>
<body>
  <div id=“cesiumContainer”></div>
  <script>
    var viewer = new Cesium.Viewer(‘cesiumContainer’);
var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
    url : ‘http://localhost:8003/tilesets/NewYork/’
}));

  </script>
</body>
</html>

And I run it on "http://localhost:8080/Apps/HelloWorld.html", but nothing is shown there.

Any idea?

Thanks!

2

Hi there,

This really should be better documented – Hello World uses the built version of Cesium, so locally you need to run npm run minifyRelease to build it (see our build guide for more details: https://github.com/AnalyticalGraphicsInc/cesium/blob/master/Documentation/Contributors/BuildGuide/README.md).

Otherwise it looks like you’re on the right track! For a running local code example, look at http://localhost:8003/Apps/Sandcastle/index.html?src=3D%20Tiles.html&label=Showcases

This is the 3D Tiles Sandcastle example.

Hope that helps!

  • Rachel
3

Thanks for your suggestion Rachel!
I did run "npm run minifyRelease" to build for HelloWorld. I think the issue might be the New York city 3d tiles data source. It seems the tilesets.json file is encoded as I downloaded from https://cesiumjs.org/NewYork/3DTiles/NewYork.zip.
I know the data is converted from CityGML data from http://www1.nyc.gov/site/doitt/initiatives/3d-building.page. Do you know how to convert the CityGML to the data source I can use in Cesium 3d tiles?

Thanks!

4

Are you zoomed into the New York area? It will only load once you are within range. Does the following code help?

tileset.readyPromise.then(function(tileset) {
viewer.camera.viewBoundingSphere(tileset.boundingSphere, new Cesium.HeadingPitchRange(0, -0.5, 0));

viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);

});

``

5

Actually this ended up being a problem with the server inside 3d-tiles-samples. There is a PR open here https://github.com/AnalyticalGraphicsInc/3d-tiles-samples/pull/18 which should be merged soon.

6

Thanks Sean! I have the "zoom" code. I think it is the data source issue. I guess after this PR is merged. I don't have extract the New York City .zip data file. I can include it directly. As for now, after I extract the data file, the tilesets.json is encoded. I think this is the issue.

7

Maybe I misunderstood gzip here. i saw the PR just merged 3 hours ago. Does that mean the tileset.json file in New York City data source is gzipped?

8

I think I got it work. Thanks!

9

Hello, how do you solve this problem? I also downloaded that zip，but showed nothing. I replaced the tileset.json with https://cesiumjs.org/NewYork/3DTilesGml/tileset.json, but failed too.

在 2017年5月31日星期三 UTC+8下午10:29:14，hell…@gmail.com写道：

10

You cannot just simply replace the tileset.json file. You need to include the whole data folder. Make sure you update to the latest 3d-tiles branch, and then check the syntax here https://github.com/AnalyticalGraphicsInc/3d-tiles-samples

11

Here’s the 3d-tiles branch if you need to update: https://github.com/AnalyticalGraphicsInc/cesium/tree/3d-tiles

12

Hello,

I would like to experiment on my local machine as well but it seems the NYC 3d tiles are no longer available. Does anybody have any info on this> Thanks!

13

Hi Horia,

If you have access to the internet, you can request the tileset with this URL:

var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({

url: ‘https://beta.cesium.com/api/assets/1461?access_token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkYWJmM2MzNS02OWM5LTQ3OWItYjEyYS0xZmNlODM5ZDNkMTYiLCJpZCI6NDQsImFzc2V0cyI6WzE0NjFdLCJpYXQiOjE0OTkyNjQ3NDN9.vuR75SqPDKcggvUrG_vpx0Av02jdiAxnnB1fNf-9f7s’

}));

``

The zip file ishttps://s3.amazonaws.com/cesiumjs/3DTiles/NewYork.zip if you need to download.

Thanks,

Gabby

14

Hi Gabby,

Thanks. And thanks for …“If you have access to the internet”.

Horia

15

Thanks Gabby for the download link. My main goal to have those files is to understand the tileset.json file, and the difference between the properties used to style the features and the properties that can be accessed using the Viewer.scene.pick function.

It seems that those “properties” are two different things. Can anyone point me to how to 1) get both the properties, and 2) add those properties in to the 3D Tiles?

Frankly, I find it quite frustrating for having to look for the sample NYC 3D Tiles in this way. The Cesium Workshop webpage does a good job explaining many of the features, but when it comes to providing resources I find it quite lacking. For example, at the section about loading 3D Tiles, the url (https://beta.cesium.com/api/assets/1461?access_token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkYWJmM2MzNS02OWM5LTQ3OWItYjEyYS0xZmNlODM5ZDNkMTYiLCJpZCI6NDQsImFzc2V0cyI6WzE0NjFdLCJpYXQiOjE0OTkyNjQ3NDN9.vuR75SqPDKcggvUrG_vpx0Av02jdiAxnnB1fNf-9f7s) points to a json file telling very little about the 3D Tiles, and there is no way to actually get the .b3dm files. Why can’t Cesium make those available on the website or GitHub?

Also, though the file from Gabby’s link does have them all, for some reasons I cannot read the files (they are all a bunch of strange characters, no matter I tried ANSI or UFT-8 encoding). Is there anything I can do to better understand them?

Pardon me for sounding like I’m ranting. I really like Cesium and am very impressed with what it does. But I’m having a hard time understanding how to add interactivity to it and use the 3D Tiles properly.

Any help would be appreciated! Thanks.

-victor

16

Hey Victor,

The properties that are used to style and that are accessed by a picked Cesium3DTileFeature object are the same. They are bundled in the b3dm files within the batch table section. Additionally Cesium3DTileFeature.setProperty can let you add properties at runtime.

As for the tileset itself, all the files are gzipped. You can use 3d-tiles-tools ungzip to get the original view of the data. I’ll also see if we can replace that download link with the ungzipped version, as well as include it in the workshop.

Thanks for the feedback, these are all reasonable points.

17

Hi Victor,

Thanks Sean for your answers! I’ve updated the files at that link I provided above. They are now the uncompressed files and should be readable for your purposes.

The Cesium Workshop tutorial was aimed at providing a high level overview of the Cesium API rather than an exploration of the 3D Tiles format or the New York dataset itself. I think you are fair in pointing out our learning materials could indeed use information on the topic of 3D Tiles and interactivity. I will create an issue to create for materials that are more targeted to developers interested in learning the same.

Thanks!

Gabby

18

Hey Sean,

Thanks for your understanding and the explanations. I’ve been trying to understand both the tileset.json file and those .b3dm files being referred to. In particular I’m looking at how properties can be inserted when we generate the 3D Tiles using FME 2017, and how we can later retrieve them in Cesium (an example of such property is a search key). The Cesium3DTileFeature.setProperty doesn’t seem to be what I need for this purpose because I’m not adding anything dynamic (which will be lost when the tiles are unloaded).

I hit a strange roadblock when following those files though. My main source of information are these 2 GitHub readme’s:

https://github.com/AnalyticalGraphicsInc/3d-tiles/blob/master/README.md

https://github.com/AnalyticalGraphicsInc/3d-tiles/blob/master/TileFormats/BatchTable/README.md

The first one contains information on how tileset.json is defined and what its content means. And one of the objects there is called “properties”, which describes the per-feature properties in the tileset. The strange thing, however, is that the tileset.json of the New York files does NOT have this property. Instead this property is only present in the .d3dm files (aka Batch Table according to the second readme) as part of the JSON Header (as you described in your previous post). So are the properties in the .json file just for indicating the min and max?

And Hi Gabby,

Thanks for updating the files. I can see the “height” properties now. Now I need to learn more about how batchID is set and used to index elements in the property array (https://github.com/AnalyticalGraphicsInc/3d-tiles/blob/master/TileFormats/BatchTable/README.md). Any other resources are welcome.

I agree that the Cesium Workshop is a high level overview and it does quite a good job to help people get started. I however feel that 3D Tiles is one of Cesium’s stronger features (pun intended), and it’d be great if there are more in-depth discussion on how to generate and incorporate them in to Cesium. I know that I’m still new to it, but if there is any way I can contribute to the creation of the materials that you mentioned targeting developers interested in learning the same, let me know.

-victor

19

Yes, the properties section in tileset.json is just for the min and max values of the b3dm properties.

A quick overview of how batch ids work is each vertex in the glTF (embedded in the b3dm) contains a batchId attribute associated with it. This value is anywhere between 0 and BATCH_LENGTH - 1, and determines which feature a vertex belongs to (there are BATCH_LENGTH number of features). This value is used to index into the property arrays in the batch table. This presentation goes into a little more detail: https://cesium.com/presentations/#3d-tiles-streaming-massive-heterogeneous-3d (slides 114-117 in particular). Note that some of the diagrams may be out-of-date, but the concepts are still the same.

Our goal is for the spec to be a good starting point for developers to dive into 3D Tiles. It might not be the best for beginners, but it’s where our energy is going at the moment. Maybe in the future we can devote more time to beginner resources.

Another project that might be useful to check out is our code base for generating sample 3D tilesets: https://github.com/AnalyticalGraphicsInc/3d-tiles-tools/tree/master/samples-generator.

20

know that I’m still new to it, but if there is any way I can contribute to the creation of the materials that you mentioned targeting developers interested in learning the same, let me know.

Contributions would be greatly appreciated! When you feel like you’ve learned enough to start writing learning resources, reach out to Sarah at schow@agi.com. She could help you in publishing tutorials or blog posts on the subject. Thanks!