mapbox / mapbox/mapbox-gl-js

Compressed glTF Model Fails to Load in Mapbox Model Layer

Open
#13,416 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

auto-triaged feature :green_apple:
Dominant language
TypeScript
Stars
12.4k
Forks
2.4k
PR merge metrics
No merged PRs in 30d

Description

I am trying to render a building model onto the map using Mapbox's model layer. The original .glb file is 86.4MB, so I used glTF Transform to optimize and compress it, which is a standard approach for reducing model size.

The compressed model loads successfully in other WebGL 3D libraries, such as Babylon.js and Three.js. I tested the file using:

Babylon.js Sandbox
Three.js Editor (File > Import)
However, when attempting to load the compressed model in Mapbox's model layer, it fails with the following error. Notably, the uncompressed .glb file loads without issues.

**Error Message**
```
texture.ts:62 Uncaught TypeError: Cannot read properties of undefined (reading 'width')
at dm.update (texture.ts:62:119)
at new dm (texture.ts:58:14)
at iy (model.ts:317:30)
at ay (model.ts:346:23)
at sy (model.ts:365:24)
at t.aO.upload (model.ts:295:13)
at co.upload (model_manager.ts:180:51)
at Object.model (draw_model.ts:254:34)
at Xa.prepareLayer (painter.ts:1380:33)
at Xa.render (painter.ts:825:18)
```
## Reproduction
Repository with reproducible code:
https://github.com/weilantian/mapbox-gltf-compressed

### Steps to Reproduce
- Clone the repository
- Host the folder and launch index.html
- Observe the console output
### Expected Behavior
The model should load correctly in the Mapbox model layer.
### Actual Behavior
The model fails to load, producing the above TypeError.

## Additional Details
Compression Command Used:
```
gltf-transform optimize building.glb output.glb --texture-compress webp
```
I initially suspected Draco compression might be the issue, but disabling Draco still results in the same error.
The error suggests an issue related to texture handling (texture.ts:62:119).

Mapbox GL JS Version: v3.10.0
Browser: Chrome 133.0.6943.127

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Clone and run the linked reproduction, then compare the compressed and uncompressed models while tracing the reported calls in texture.ts, model.ts, model_manager.ts, and draw_model.ts. Determine why the compressed asset reaches an undefined texture dimension and verify that the model loads in the Mapbox model layer without the TypeError.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
computer-graphics, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.