Old globe using CesiumJS

Miroslav_Cabelka · December 14, 2022, 5:36am

Hi,
I need to make a old globe presentation but I’m a beginner in CesiumJS programming.
I have two types of input data: glb model and 3D Tiles.
I tried to create presentations by modifying the code according to Sancastle and I need hepl.

1) GLB model

I tried to modify this code: Cesium Sandcastle
My result is here: Cesium Demo
How to make the model be illuminated from all sides? Remove shadow?

2) 3D Tiled model

I tried to modify this code: Cesium Sandcastle
My result is here: Cesium Demo
I’m not sure if I used a good example. It is not easy to rotate globe and it is difficult to adjust its position. I also don’t need a slider to change the height.
Can you advise me (help me) how to display the globe so that it can be rotated, zoomed and always illuminated?

I am a beginner in programming.

Thank you for your help.

Miroslav

Marco13 · December 14, 2022, 9:05pm

For the first point:

One way of making the model “completely illuminated” is to set its rending mode to UNLIT. The following is based on your sandcastle - search for UNLIT to see how this setting is applied:

(EDIT: Note that this does not run by clicking on it. You’ll have to update the URL for the glob2.glb to point to the location where you are storing it. I just served this model locally for the test)

For the second point: That tileset is a bit difficult to handle. Running it through the validator reports

    {
      "type": "BOUNDING_VOLUMES_INCONSISTENT",
      "path": "/root/content/boundingVolume",
      "message": "The content bounding volume is not contained in the tile bounding volume: box [1.6576313692536457,1.998931497380089,1.9619739159359053,1.306964486837387,0,0,0,1.3108945488929749,0,0,0,1.3078360557556152] is not within box [2.389803008,2.389803008,2.389803008,2.389803008,0,0,0,2.389803008,0,0,0,2.389803008]",
      "severity": "ERROR"
    },

(It reports many more errors for the B3DM files - but fortunately, CesiumJS can still render them, so these are not important right now).

The globe/geometry in this model seems to be slightly moved (so the center of the globe is not at the origin), and slightly rotated (so the axis of the globe is not vertical, i.e. not aligned with the actual “axis of the earth” in Cesium). It might be possible to adjust this somehow. I just tried this, by setting the modelMatrix of the tileset like this:

let modelMatrix = Cesium.Matrix4.clone(Cesium.Matrix4.IDENTITY);

const translation = new Cesium.Cartesian3(
  -0.14250405027398783,
  -0.19573526155451182,
  4.4114972896192555);
                                       
modelMatrix = Cesium.Matrix4.multiplyByUniformScale(
  modelMatrix,
  6000000,
  new Cesium.Matrix4());
                                       
modelMatrix = Cesium.Matrix4.multiplyByTranslation(
  modelMatrix,
  translation,
  new Cesium.Matrix4());

const tileset = new Cesium.Cesium3DTileset({
  url: "https://web.natur.cuni.cz/gis/glob/Apps/SampleData/Cesium3DTiles/glob/tileset.json",
  debugShowBoundingVolume: true,
  modelMatrix: modelMatrix
});

But there are some problems with that. The rotation is not correct, and there are some rendering issues (i.e. the geometry disappearing), which are probably related to the wrong bounding volumes - I’d have to spend more time to investigate this further…

Miroslav_Cabelka · December 15, 2022, 9:00pm

Thank you for your help.
For the first point:
I tried to use your code and I updated URL for the globe. But old globe on my webpage is still “loading”. It does not work.

The second point:
Thank you for inspirations. I will tied to solve the problem. But in first step I need I to solve the problem in point one - to vizualise illuminated model in glb format.

Can you still help me with the first point?

Thank you.

Miroslav

Marco13 · December 16, 2022, 2:42pm

When starting the demo that you linked to, then it does not seem to do anything (except for showing the “Loading…” message).

In such a case, you can have a look at the developer console. This can be opened with the Browser Menu Bar, or (on Firefox or Chrome) by just hitting the F12 key. It should show a window that contains a console at the bottom. There is an error message in that console. Clicking on the topmost link in that message (at window.startup (3D_glob.html:79:27) here) should cause it to show something like the following:

If this is right, then your sandcastle code seems to contain the line
Sandcastle.addToolbarMenu(options);
but the options object does not exist.

You probably copied this line from the original “3D Models” sandcastle. There these “options” have been the list of objects that you could select from the dropdown menu. But … you only want to load a single model, and therefore, don’t really have any “options” there.

Removing this line should fix this problem.

Miroslav_Cabelka · December 19, 2022, 4:46pm

Thank you,
I really forgot this part of code Sandcastle.addToolbarMenu(options); in my ceode.
I removed it and the globe model is now displayed.
But the original problem still remains. Model is not completely illuminated.
Do you have some idea, how to completely illuminated it or how to remove shadow from half of model?

Thank you.
Miroslav

Marco13 · December 20, 2022, 3:27pm

Just to confirm: When you run the following sandcastle (with the URL in the last line updated to point to your glob2.glb)

const viewer = new Cesium.Viewer("cesiumContainer", {
  infoBox: false,
  selectionIndicator: false,
  shadows: false,
  shouldAnimate: false,
});

function createModel(url, height) {
  viewer.entities.removeAll();

  const position = Cesium.Cartesian3.fromDegrees(-320.0744619, 120, height);
  const heading = Cesium.Math.toRadians(-30);
  const pitch = 20.6;
  const roll = 10;
  const hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
  const orientation = Cesium.Transforms.headingPitchRollQuaternion(
    position,
    hpr
  );

const modelGraphics = new Cesium.ModelGraphics({
    uri: url,
    minimumPixelSize: 128,
    maximumScale: 20000,
    customShader: new Cesium.CustomShader({
      lightingModel: Cesium.LightingModel.UNLIT
    })
  });
 const entity = viewer.entities.add({
    name: url,
    position: position,
    orientation: orientation,
    model: modelGraphics,
  });
  viewer.trackedEntity = entity;
}

createModel("http://localhost:8003/glob2.glb", 5000.0);

then it does not look like this for you:

Cesium OldGlobe

(Note that setting globe:false can cause some issues - I recently opened Can not zoom to entities when globe is not displayed · Issue #10957 · CesiumGS/cesium · GitHub for that. But the point for now is that your “old globe” should look like in the above screen capture, namely “unlit”, which means “without the shadows” here)

Miroslav_Cabelka · December 20, 2022, 9:00pm

Thank you,
I used your code, but I dont know, why it does not work. Half of the globe is still in the shadow.

My site code is:


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
    />
    <meta name="description" content="Create 3D models using glTF.">
    <meta name="cesium-sandcastle-labels" content="Tutorials,Showcases">
    <title>Cesium Demo</title>
    <script type="text/javascript" src="../Sandcastle-header.js"></script>
    <script
      type="text/javascript"
      src="../../../Build/CesiumUnminified/Cesium.js"
      nomodule
    ></script>
    <script type="module" src="../load-cesium-es6.js"></script>
  </head>
  <body
    class="sandcastle-loading"
    data-sandcastle-bucket="bucket-requirejs.html"
  >
<style>
      @import url(../templates/bucket.css);
    </style>
    <div id="cesiumContainer" class="fullSize"></div>
    <div id="loadingOverlay"><h1>Loading...</h1></div>
    <div id="toolbar"></div>
    <script id="cesium_sandcastle_script">
window.startup = function (Cesium) {
    'use strict';

//Sandcastle_Begin

const viewer = new Cesium.Viewer("cesiumContainer", {
  infoBox: false,
  selectionIndicator: false,
  shadows: false,
  shouldAnimate: false,
});

function createModel(url, height) {
  viewer.entities.removeAll();

  const position = Cesium.Cartesian3.fromDegrees(-320.0744619, 120, height);
  const heading = Cesium.Math.toRadians(-30);
  const pitch = 20.6;
  const roll = 10;
  const hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
  const orientation = Cesium.Transforms.headingPitchRollQuaternion(
    position,
    hpr
  );

const modelGraphics = new Cesium.ModelGraphics({
    uri: url,
    minimumPixelSize: 128,
    maximumScale: 20000,
    customShader: new Cesium.CustomShader({
      lightingModel: Cesium.LightingModel.UNLIT
    })
  });
 const entity = viewer.entities.add({
    name: url,
    position: position,
    orientation: orientation,
    model: modelGraphics,
  });
  viewer.trackedEntity = entity;
}

createModel("../../SampleData/models/CesiumAir/glob2.glb", 5000.0);




//Sandcastle_End
    Sandcastle.finishedLoading();
};
if (typeof Cesium !== 'undefined') {
    window.startupCalled = true;
    window.startup(Cesium);
}
</script>
</body>
</html>

Marco13 · December 21, 2022, 3:06pm

Maybe I should have mentioned that earlier:

I can not open the demo that you’re linking to. When trying to load that page, it causes many “403 Access Forbidden” errors in the console, whole trying to load some files from https://web.natur.cuni.cz/gis/glob/Source.... It seems like that “instance” of Cesium is not properly deployed or so. (If there are questions about that, I’d have to ping someone who knows more about how to host Cesium on a local server. I’ve only done these tests with a locally running Sandcastle).

And I now looked at the version that you are hosting there: It appears to be Cesium 1.95. But the functionality for the “Unlit” models that I suggested was only introduced in Cesium 1.97. Apologies for that.

I can try to see whether it’s possible to do the “unlit” rendering with version 1.95, but will have to allocate some time for that.

Miroslav_Cabelka · December 21, 2022, 4:42pm

Thanks,
I tried upload Cesium 1.100 to another directory on my server and your code here works.
Look at it here:

For my presentation it would be better to show only the old globe itself. Without the Earh.
I need to present only the old globe.
Do you have some idea, how to do it?

Marco13 · December 21, 2022, 6:16pm

First a quick : The new site seems to work for me (it takes a while to download that ~250MB GLB file, but that’s probably the reason for why you tried to convert it to 3D Tiles, related to the second part of your original question).

Not displaying the globe should be possible by the globe: false setting, but there seems to be an issue with that. I’ll try to find a workaround…