3D model does not display shades

CesiumJS
1

Hi, thanks in advance for the your time.

I uploaded a “.glb” model to cesium.
This is how the model should have been rendered:

image
image890×586 134 KB

And this is how cesium is rendering it
image
basically, it does’nt render shades and the model looks flat

I’m using SahrpGltf to generate the model from some topographic data.
In my code i’m using MetallicRoughnessShader.

hope you can help me, thanks in advance

2

Good day.

In my case something similar happens, I have a 3DTILES model that is loaded using the Cesium JS SDK and it is not showing the shades, a flat model is shown.
I am using a Cesium3DTileset to Load It

In the documentation I saw that there is a customShader property: CustomShader but it is experimental and it is not recommended to use it in production because it is subject to change.

I hope you can help me, thank you

3

@Jorge_Luis_Lemus_Ram

I uploaded a “.glb” model to cesium.

Does this mean that you uploaded this to ‘Cesium ion’ and it went through a tiling process?

In general, it might be that the model is using something special (like a special extension or another glTF feature) that is not supported by Cesium ion or CesiumJS.

Can you share this model (as an atachment here, if it it’s not too large and not proprietary)? If not: When you drag-and-drop this model into glTF Validator , it should print a report that might already give some hints here.

4

cono.glb (1013.3 KB)
this is the “.glb” file that i have been using for testing

5

image
image680×640 20.3 KB

and valdiator says its valid.

6

image
image1287×861 62.7 KB

also, the report do show a warning refering extra data after the end of the gltf object, but i do not know what that meens

7

maybe you have an idea which may be the problem.

8

thank you, very much for your time

9

looks like there is nothing wrong with the model, but it’s something in the visualisation/lights.

sample with debugWireframe: https://bertt.github.io/cesium_issues/shadows/

image
image1353×896 380 KB

10

thanks for the help,
Yes, the mothel does sims to be ok.
My cuestion is: is it a problem in the .glb, o is there somthing mising that should be done in the front in order to display it corectly.

I’m not an expert on cessiumJs, there is another colleague in charge of the front-end.
i’m in charge of the model generation.

11

The reason for that is that the mesh does not have normals. CesiumJS should compute flat normals automatically in this case, but … does not. This is an issue in CesiumJS, and tracked in Generate normals automatically for glTF 2.0 models · Issue #6506 · CesiumGS/cesium · GitHub

Here is a version of your model with normals:

cono-v1.zip (273.9 KB)

To create this, in case you have to do this for other models as well:

  1. Drag-and-drop the model into https://gltf.report/
  2. Select the “Script” tab in the left toolbar (the "<>" icon)
  3. Insert this script:
    import { normals } from '@gltf-transform/functions';
await document.transform(
  normals({overwrite: true})
);
  4. Press “Run” (in the upper right of the “Script” window)
    It should print a message in the Console at the bottom, about the computation of the normals
  5. Press “Export” (at the bottom of the main controls that are shown at the right of the screen)

It will offer a cono-v1.glb for download, which now contains normals.

The resulting model (as also attached above) should be displayed properly in CesiumJS:

Cesium ComputedNormals

2 Likes
12

@dguevara87 You might want to try to apply the workaround described above to your model as well. If this does not solve the issue, I suggest opening a new thread, in the CesiumJS section, with all the relevant details.

13

Thank you very much, I’m going to get to work right away, there should be a proper way to generate the normals with SharpGLTF to.

you have been of great help.