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?)

[cstopdown]

Overall, there is about 600M, and I have attempted to archive it in a glb file, but have achieved the same results.

[javagl]

When you say that you "achieved the same results", then it is not clear (for me) what this means.

With a single GLB file, it should not send out requests for textures, and therefore, not cause an ERR_INSUFFICIENT_RESOURCES error.
(It might still be that there are too many textures, or the textures are too large, and other rendering errors show up, for example, when the GPU is out of memory, but in this case, I'd expect a different behavior...).

How did you create that 600MB GLB file? (And does this file pass validation?)

[cstopdown]

Sorry, I didn't express myself clearly.Actually, what I mean is that I achieved the same effect as the initial one, that is, no texture was loaded.
I have not encountered a shortage of graphics memory, and the number of textures is indeed quite large, with approximately 2147 texture files.
My glb file source was obtained by modeling and exporting fbx files using 3Dsmax, and then exporting them using the open-source software mayo.
I would be happy to share with you the source files and the project link for mayo:
Due to the file being too large, I have attached it to Google Drive:https://drive.google.com/file/d/15nFKs7Fu0pu3TR2fbQZQIAJWHNPlExGo/view?usp=drive_link
Mayo Project

[ggetz]

Thanks @cstopdown for the report! I believe @javagl has summarized the issue in #11876, so I'll close this one as a duplicate. Please see #11876 for any updates.

[javagl]

Actually, what I mean is that I achieved the same effect as the initial one, that is, no texture was loaded.
...
My glb file source was obtained by modeling and exporting fbx files using 3Dsmax, and then exporting them using the open-source software mayo.

Indeed, converthing this data to GLB and trying to load it in CesiumJS causes ~"an error" (and the textures are not displayed). But... that's not an error in CesiumJS, but an error in the data. When you drag-and-drop that GLB into the https://github.khronos.org/glTF-Validator/, then it will print many errors like this:

            {
                "code": "VALUE_NOT_IN_LIST",
                "message": "Invalid value 'application/octet-stream'. Valid values are ('image/jpeg', 'image/png').",
                "severity": 1,
                "pointer": "/images/292/mimeType"
            },

The reason is that this data set includes .TGA files. These are not supported in glTF. Only PNG and JPG are supported in glTF.

You should either...

• Have a look at the export configuration settings for GLB in that 'mayo' converter, and see whether there is an option to convert TGA files to JPG or PNG when exporting
• Or manually convert the TGA files (for example, with IrvanView), and update all URLs in the glTF from .tga to .png accordingly

I just tried the latter, converted the result of this into a GLB, and it looks like it can be rendered then:

(There are some areas that look "un-textured", and when converting TGA to PNG, there are some questions about the handling or transparency, but in general, this is an approach that might work...)