No texture loaded when adding GLTF model

[cstopdown]

What happened?

Summary

Hello! I am a beginner building my own app using Cesium for the first time
When I use the Entities API to load the GLTF2.0 Model which converted by Mayo, the model is showed, but no any textures were loaded. I try to use Online 3D Viewer to validate my model and find all well. And I find no any error log info in console.
Please help me to solve the problem, thanks!

Situation

Here is the file tree and code:

503449812008477127
├── I005_013.glb
├── I005_013_textures
│ ├── 0.jpg
│ ├── 1.jpg
│ ├── 2.jpg
│ ├── …

const loadGltfModel = async () => {
  const url = `/citygis-backend/api/3d/getAsset/503449812008477127/I005_013.glb`
  const position = Cesium.Cartesian3.fromDegrees(0.0, 0.0, 0.0)
  const heading = 89.5354
  const pitch = 0
  const roll = 0
  const hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll)
  const orientation = Cesium.Transforms.headingPitchRollQuaternion(
    position,
    hpr
  )
  const entity = await viewer.entities.add({
    name: url,
    position: position,
    orientation: orientation,
    model: {
      uri: url,
    }
  })
  viewer.zoomTo(entity)
}

screenshots:

validate scene:

Cesium scene:

Reproduction steps

...

Sandcastle example

No response

Environment

Browser:Microsoft Edge Version:122.0.2365.66
CesiumJS Version:1.112
Operating System:Windows 11
CPU:13th Gen Intel(R) Core(TM) i9-13900HX 2.20 GHz
GPU:NVDIA Geforce RTX 4060 Laptop
GPU Driver:546.65
Memory:64.0 GB

[syzdev]

https://registry.khronos.org/glTF/specs/2.0/glTF-2.0.html#images

Images referred to by textures are stored in the images array of the asset. Each image contains one of:

1. a URI (or IRI) to an external file in one of the supported image formats, or
2. a Data URI with embedded data, or
3. a reference to a bufferView; in that case mimeType MUST be defined.

Your model should be #1, I'm not sure if Cesium supports this type (Or it could be a path issue with the image) . Perhaps you can try embedding the texture into the file first.

[syzdev]

Alternatively, you can use the viewer below to check if your glTF asset can be rendered correctly:

1. https://gltf-viewer.donmccurdy.com/
2. https://sandbox.babylonjs.com/

[ggetz]

Hi @cstopdown, would you be able to provide the glTF file in question?

We also recommend the official validator from Khronos. That would be glTF-Validator.

[cstopdown]

Thank you for your reply! Please review more information:
The summary of the results of data validation is as follows (similar sections have been omitted):
{
"uri": "I005_013.glb",
"mimeType": "model/gltf-binary",
"validatorVersion": "2.0.0-dev.3.8",
"validatedAt": "2024-03-06T03:11:12.097Z",
"issues": {
"numErrors": 2147,
"numWarnings": 0,
"numInfos": 2150,
"numHints": 0,
"messages": [
{
"code": "URI_GLB",
"message": "URI is used in GLB container.",
"severity": 2,
"pointer": "/images/0/uri"
},
{
"code": "URI_GLB",
"message": "URI is used in GLB container.",
"severity": 2,
"pointer": "/images/1/uri"
},
......
{
"code": "URI_GLB",
"message": "URI is used in GLB container.",
"severity": 2,
"pointer": "/images/2145/uri"
},
{
"code": "URI_GLB",
"message": "URI is used in GLB container.",
"severity": 2,
"pointer": "/images/2146/uri"
},
{
"code": "IO_ERROR",
"message": "Resource not found (I005_013_textures/0.jpg).",
"severity": 0,
"pointer": "/images/0/uri"
},
{
"code": "IO_ERROR",
"message": "Resource not found (I005_013_textures/1.jpg).",
"severity": 0,
"pointer": "/images/1/uri"
},
......
{
"code": "ACCESSOR_INDEX_TRIANGLE_DEGENERATE",
"message": "Indices accessor contains 1 degenerate triangles (out of 639).",
"severity": 2,
"pointer": "/meshes/196/primitives/0/indices"
},
{
"code": "ACCESSOR_INDEX_TRIANGLE_DEGENERATE",
"message": "Indices accessor contains 1 degenerate triangles (out of 361).",
"severity": 2,
"pointer": "/meshes/200/primitives/0/indices"
}
],
"truncated": false
},
"info": {
"version": "2.0",
"generator": "Open CASCADE Technology 7.7 [dev.opencascade.org]",
"resources": [
{
"pointer": "/buffers/0",
"mimeType": "application/gltf-buffer",
"storage": "glb",
"byteLength": 29692012
},
{
"pointer": "/images/0",
"storage": "external",
"uri": "I005_013_textures/0.jpg"
},
......
{
"pointer": "/images/2145",
"storage": "external",
"uri": "I005_013_textures/2145.jpg"
},
{
"pointer": "/images/2146",
"storage": "external",
"uri": "I005_013_textures/2146.jpg"
}
],
"animationCount": 0,
"materialCount": 4834,
"hasMorphTargets": false,
"hasSkins": false,
"hasTextures": true,
"hasDefaultScene": true,
"drawCallCount": 4834,
"totalVertexCount": 851537,
"totalTriangleCount": 406839,
"maxUVs": 1,
"maxInfluences": 0,
"maxAttributes": 3
}
}

And, the metadata is below (it is not provided because there are too many texture files)：
I005_013.zip

[cstopdown]

According to the information, there seems to be some texture loss. If this is the reason why rendering is not possible, I would like to inquire whether other textures cannot be rendered when a small amount of texture loss occurs. This also seems incorrect because if only a few textures are lost, the model is still usable in business, and it is usually unacceptable to abandon all textures directly.

[syzdev]

You can drag-and-dropping all of the related files on the validator at once, not just the one .glb file.

[javagl]

@syzdev

Your model should be #1, I'm not sure if Cesium supports this type (Or it could be a path issue with the image) .

In principle, CesiumJS does support this: You can refer to external textures from a GLB. (At least, I tried it out with the sample asset from KhronosGroup/glTF-Sample-Assets#111 that was basically created to test exactly this case, and CesiumJS displayed it properly).

@cstopdown You explicitly said

And I find no any error log info in console.

Can you check this again, and maybe also look at the "Network" tab whether you see any ERR_INSUFFICIENT_RESOURCES messages? Also, iff you have FireFox installed: Can you try loading the model in FireFox?

(The reason for asking this is that I just tested your model with dummy textures, and received this error message, and eventually summarized this in #11876 - so this might now be a duplicate...)

[cstopdown]

@javagl Thank you for your reply!
I tried again and got this error named ERR_INSUFFICIENT_RESOURCES. What does this mean? Is there a document that can be referenced to solve this problem?

[cstopdown]

@javagl Sorry, I just saw your reference link and my question is consistent with what you mentioned.

[cstopdown]

I tried loading on firefox and lost some textures, but I was still able to load some textures instead of losing everything like Chrome and Edge.
Here is the result by loading the model by the Firefox:

[javagl]

@cstopdown The easiest and quickest solution in this case might be to convert the model into one that does not refer to (so many) external images, but includes the images directly in the GLB itself.

But... whether this a "good" solution is hard to say without more context. For example, when many different GLBs are referring to these textures, then including them in each GLB would cause them to be "duplicated" (i.e. stored many times), and the data may load more slowly. The directory structure looks like the textures directly belong to this one model (and are therefore not used by any other model). Still, the file size may become an issue. The GLB that you posted already has 33MB. Do you happen to know how large to model is in total (i.e. what is the size of the GLB file plus the size of the textures?)