Example 3D Tiles

[hh-hang]

#3378 (reply in thread)

Add a 3D Tiles example.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 92.44%. Comparing base (fafc343) to head (b647c90).
⚠️ Report is 8 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #7198      +/-   ##
==========================================
- Coverage   92.71%   92.44%   -0.28%     
==========================================
  Files         289      289              
  Lines       24073    24073              
  Branches     5108     5108              
==========================================
- Hits        22320    22255      -65     
- Misses       1753     1818      +65     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[jo-chemla]

I'm not part of maplibre team, just a user, but you might want to avoid adding b3dm binary data files (the obj2tiles directory) to this PR and instead rely on open-data OGC 3d-tiles datasets, remotely accessible on public endpoints, listed eg here CesiumGS/3d-tiles/RESOURCES open-data.

Also, looking at the screenshot, it looks like the tileset is not correctly georeferenced on top of the maplibre globe. The open-data section shares georeferenced datasets, so you probably can tweak your transform code to handle matching origins/coordinate systems - also could rely on NASA-AMMOS/3DTilesRendererJS ReorientationPlugin , see this example

	tiles.registerPlugin( new ReorientationPlugin( { lat: 35.6586 * MathUtils.DEG2RAD, lon: 139.7454 * MathUtils.DEG2RAD } ) );

[HarelM]

Thanks for taking the time to open this PR.
I agree that using an existing 3D tiles source would be better than adding these files here.

[hh-hang]

I'm not part of maplibre team, just a user, but you might want to avoid adding b3dm binary data files (the obj2tiles directory) to this PR and instead rely on open-data OGC 3d-tiles datasets, remotely accessible on public endpoints, listed eg here CesiumGS/3d-tiles/RESOURCES open-data.

Our company actually has many online 3D Tiles datasets, but due to data confidentiality we can’t upload them to the example. So I downloaded a representative public dataset and will switch the example’s 3D Tiles to Cesium’s official online data.I will directly reference Cesium’s official public datasets for the example. Thank you for your suggestion.

Also, looking at the screenshot, it looks like the tileset is not correctly georeferenced on top of the maplibre globe.

Regarding the issue: my understanding is that 3D Tiles generally include a transform matrix. For photogrammetry models that matrix encodes rotation and translation from the model origin into specific Cartesian coordinates. In my example I convert those Cartesian coordinates to latitude/longitude, use that lat/lon as the origin in three.js, then translate the 3D Tiles coordinates to the origin and apply the inverse rotation matrix so the 3D Tiles are placed correctly. Because the example doesn’t load terrain and 3D Tiles themselves include elevation, the model ends up floating above the map and does not snap to the ground.

he open-data section shares georeferenced datasets, so you probably can tweak your transform code to handle matching origins/coordinate systems - also could rely on NASA-AMMOS/3DTilesRendererJS ReorientationPlugin

This approach ensures accurate placement and is simpler, but I don’t think it’s very representative, since most users will use their own data.

[hh-hang]

Thanks for taking the time to open this PR.
I agree that using an existing 3D tiles source would be better than adding these files here.

Got it — I'll switch to using the existing 3D tiles source. Thanks for the suggestion.

[hh-hang]

I noticed that Cesium's official sample datasets often lack the transform property in the tileset.json. Does this imply that these 3D Tiles are already stored in world-fixed Cartesian coordinates (ECEF)? If so, my current method—which likely relies on explicit matrix information—might not be compatible with datasets that don't provide it.Because I am unable to apply the proper inverse matrix

[jo-chemla]

Those are correctly georeferenced 3D-tiles tileset, indeed usually expressed in ECEF EPSG:4978 - although the spec now accepts broader coordinate system, which is present in the tileset root metadata.

See eg this sandcastle that loads one of the open-data samples (it can be useful to use an allow-cors plugin on chrome/firefox

Also see this example based on 3DTilesRendererJS which does accept passing a tileset url as hash. If you use any of these tileset urls into eg qgis, you see they are correctly georeferenced and can be displayed on top of eg Google 3D Cities 3Dtiles tileset.

[HarelM]

I've added some minor comments, looks great otherwise, thanks!!

[hh-hang]

I've added some minor comments, looks great otherwise, thanks!!

Thanks, I’ve made the changes and am preparing to update.

[HarelM]

Please fix the cspell file and I'll merge this, thanks.

[hh-hang]

Please fix the cspell file and I'll merge this, thanks.

I’m not quite sure exactly which parts of the cspell file need to be modified. Could you please point them out? Thank you.

[HarelM]

I would recommend downloading the previous version and modify it without changing formatting. You can see how it looks in GitHub diff page.

[HarelM]

Can you sort this alphabetically? Sorry for the extra work...

[hh-hang]

Not at all, it's done!

[hh-hang]

See eg this sandcastle that loads one of the open-data samples (it can be useful to use an allow-cors plugin on chrome/firefox

Also see this example based on 3DTilesRendererJS which does accept passing a tileset url as hash. If you use any of these tileset urls into eg qgis, you see they are correctly georeferenced and can be displayed on top of eg Google 3D Cities 3Dtiles tileset.

Thanks for the explanation, I'll look into it.