Melbourne example tileset not loading with Webpack example

CesiumJS
1

If I take the code from Sandcastle for the Melbourne example (first link below) and use it as the contents of src/index.js from the Webpack example (second link below), then the tileset does not load. The Cesium OSM Buildings tileset does load.

If I add a console log for allTilesLoaded, then no log statement appears for Melbourne, but one does appear for the Cesium OSM Buildings.

For clarity about the exact steps that I’m taking: I’m cloning the Webpack example, replacing src/index.js with the contents of the first link below, adding the imports pasted just below here, and running npm install and npm start.

var Cesium = require('cesium/Cesium');
require('./css/main.css');
require('cesium/Widgets/widgets.css');
2

Hi @remoteoptix,

Thank you for your forum post and welcome to the community! I wonder if the issue that you are facing is related to not having the correct access tokens. Are you sure that you have access to the Melbourne dataset in your Cesium ion account? What errors are you receiving in your developer console?

To the best of my knowledge, your index.js file should look something like this:

import { defined, CesiumTerrainProvider, Cesium3DTileset, IonResource, Ion, Viewer, Cesium3DTileStyle } from "cesium";
import "cesium/Widgets/widgets.css";
import "../src/css/main.css"

Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJlYWE1OWUxNy1mMWZiLTQzYjYtYTQ0OS1kMWFjYmFkNjc5YzciLCJpZCI6NTc3MzMsImlhdCI6MTYyNzg0NTE4Mn0.XcKpgANiY19MC4bdFUXMVEBToBmqS8kuYpUlxJHYZxk";

var viewer = new Viewer("cesiumContainer", {
  terrainProvider: new CesiumTerrainProvider({
    url: IonResource.fromAssetId(1),
  }),
});
viewer.scene.globe.depthTestAgainstTerrain = true;

var tileset = viewer.scene.primitives.add(
  new Cesium3DTileset({
    url: IonResource.fromAssetId(354307),
  })
);

tileset.readyPromise
  .then(function () {
    viewer.zoomTo(tileset);

    // Apply the default style if it exists
    var extras = tileset.asset.extras;
    if (
      defined(extras) &&
      defined(extras.ion) &&
      defined(extras.ion.defaultStyle)
    ) {
      tileset.style = new Cesium3DTileStyle(extras.ion.defaultStyle);
    }
  })
  .otherwise(function (error) {
    console.log(error);
  });

Also, be sure to build your files before running npm run start. Users often run the following three commands in succession:

  1. npm install
  2. npm run build
  3. npm run start

I also took the time to create a branch in the cesium-webpack-example repository for your use case. The branch Melbourne-dataset should have all of the functionality that you need.

Best,
Sam

6

Hi Sam,

Thank you very much for the reply!

With the branch that you mention, I’m able to build and see the tileset, but it’s not the Melbourne data. It’s somewhere in the US.

If I checkout the branch that you mention (Melbourne-dataset) and simply replace the access token with our token and replace the asset ID with the asset ID for our Melbourne dataset, then I don’t see any tiles. The same access token and asset ID combo works correctly in Sandcastle. How would you recommend that I debug this situation?

The Melbourne dataset is in the account (I see it under the “My Assets” tab) and no errors in the browser’s developer console except for a 404 on /ThirdParty/draco_decoder.wasm.

Thanks!

7

Hi @sam.rothstein

I forgot to tag you in my most recent comment in this thread and just wanted to follow up on it.

Thanks!

8

@remoteoptix

Ahh interesting. Well, hopefully, the branch that I created can at least provide a framework for the correct dataset.

Upon further testing, I also received the 404 on /ThirdParty/draco_decoder.wasm error. I suspect that this is a Webpack related issue. Essentially, our configuration does not have the draco decoder necessary to process the dataset that we have provided. Does that seem reasonable to you?

Unfortunately, I do not know of a solution for this issue. Any input from the rest of the community?

A few relevant threads:

Looking forward to learning more.

Best,
Sam

9

Hi @sam.rothstein

Thank you very much for the reply. It does sound like the issue and would explain why Sandcastle works with the same code. Would it make sense for me to include a package for the Draco decoder as a dependency in the package.json file?

Thanks!

1 Like
10

@sam.rothstein

I looked again and realized that it may not be related to the Draco decoder. If I use the Webpack example directly with the included access key and asset ID, then I see the Draco 404 log message as well but the tileset is visible. If I use our access key and asset ID, then the tileset not visible. Because the Draco 404 log message shows up in both cases, I think it may not be the cause of the issue. Is there another reason that you think may be worth considering that would cause that access key / asset ID combo to work in Sandcastle but not with Webpack?

11

@remoteoptix,

That is an interesting observation. I am happy to see that you found a workaround. However, I wish there was a more robust solution that didn’t produce a 404 error at runtime. You should be able to use your own access token to view the dataset.

I’m guessing that Sandcastle and the Webpack example have different development environments with different dependencies. This is likely causing the discrepancy. I am unsure what exactly the differences are, however, this might be worth investigating moving forwards.

Best,
Sam

12

@sam.rothstein

I should clarify that I did not find a work around. What I found was that the 404 appears regardless of whether the tileset is visible. With the token and the asset ID for Melbourne from the Webpack example on GitHub, the 404 appears and the tileset is visible. With our token and our asset ID for Melbourne, the 404 appears and the tileset is not visible.

Therefore, I think the 404 is a red herring and the real issue is something about the access token (which works fine on Sandcastle). What do you think I should try next?

Thanks!

13

@remoteoptix

I apologize for the confusion, I meant a workaround for actually viewing the tileset.

I think the next thing to try would be to create a custom access token that includes all datasets used in your scene (including Melbourne). I’m curious to see if this resolves the issue.

Best,
Sam

14

@sam.rothstein

Thank you for the idea about making a custom access token. What specifically should I select when creating the token? By default, the scopes of “assets:read” and “geocode” are on with every other scope off. Also, by default, the “Allowed Urls” setting is set to “All Urls” and the “Resources” setting is set to “All assets”. The token that I had previously tested without success was using these default scopes and settings. I don’t see an option to include datasets beside the “Resources” option. Should I try something different?

15

@sam.rothstein

I wanted to follow up on my last message. Thank you in advance for the help/advice!

16

@sam.rothstein

I think I figured out the issue. I think it may be related to point cloud assets. If I use “Aerometrex Denver Photogrammetry”, then the tileset appears. Do you think it could be the same as this post?: Help: Melbourne Point Cloud doesn't show! - #2 by Nithin_Pranesh

17

Hi @remoteoptix,

Sorry for the late response! I just got back from a very relaxing holiday break :grinning:

For some context, CesiumJS does provide support for point clouds. Cesium for Unreal currently does not. Thus, the thread that you are referring to is not necessarily relevant here.

Best,
Sam

18

@sam.rothstein

No worries and thanks for the reply!

In that case, do you have any guess why the tileset for “Aerometrex Denver Photogrammetry” shows up but others do not with CesiumJS in the WebPack example?

Thanks!

19

Hi @remoteoptix,

I am able to successfully load the Aerometrex Denver Photogrammerty dataset on my local CesiumJS and Webpack build. I would double-check that you have the correct Cesium ion access token and that you are importing the right asset ID number for the Melbourne example. In addition, it would be helpful if you could share the error message that you are receiving when the Melbourne dataset fails to load.

Best,
Sam

20

I just took some additional time to read up on this thread. I am not sure if I have much more to add than what is outlined here:

The Draco decoder would be probably be added to your package.json file. You would likely have to update your Webpack configuration as well.

-Sam