Mesh Layers Example¶

deck.gl provides two main options for 3D mesh rendering:

1. SimpleMeshLayer - For simple geometry primitives (spheres, cubes, etc.) created programmatically
2. ScenegraphLayer - For loading and rendering glTF/GLB 3D models (recommended for external model files)

This notebook demonstrates ScenegraphLayer which is the recommended approach for rendering 3D models from GLB/glTF files.

In [ ]:

# %pip install anymap-ts

# %pip install anymap-ts

In [ ]:

from anymap_ts import DeckGLMap

from anymap_ts import DeckGLMap

Define mesh data positions¶

In [ ]:

# Sample mesh data positions (locations for mesh instances)
mesh_data = [
    {"position": [-122.4, 37.8], "color": [255, 140, 0, 255]},
    {"position": [-122.38, 37.79], "color": [0, 200, 255, 255]},
    {"position": [-122.42, 37.78], "color": [255, 100, 100, 255]},
    {"position": [-122.39, 37.81], "color": [100, 255, 100, 255]},
    {"position": [-122.41, 37.77], "color": [200, 100, 255, 255]},
]

# Sample mesh data positions (locations for mesh instances) mesh_data = [ {"position": [-122.4, 37.8], "color": [255, 140, 0, 255]}, {"position": [-122.38, 37.79], "color": [0, 200, 255, 255]}, {"position": [-122.42, 37.78], "color": [255, 100, 100, 255]}, {"position": [-122.39, 37.81], "color": [100, 255, 100, 255]}, {"position": [-122.41, 37.77], "color": [200, 100, 255, 255]}, ]

Create map with ScenegraphLayer¶

Using a GLB model from deck.gl examples. ScenegraphLayer is the recommended way to render glTF/GLB models.

In [ ]:

# GLB model URL - using Khronos glTF sample models
MODEL_URL = "https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/Duck/glTF-Binary/Duck.glb"

m = DeckGLMap(center=[-122.4, 37.79], zoom=13, pitch=60, bearing=-17)
m.add_basemap("CartoDB.DarkMatter")

# Use ScenegraphLayer for GLB/glTF models
m.add_scenegraph_layer(
    data=mesh_data,
    scenegraph=MODEL_URL,
    get_position="position",
    get_color="color",
    size_scale=500,
    pickable=True,
)
m

# GLB model URL - using Khronos glTF sample models MODEL_URL = "https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/Duck/glTF-Binary/Duck.glb" m = DeckGLMap(center=[-122.4, 37.79], zoom=13, pitch=60, bearing=-17) m.add_basemap("CartoDB.DarkMatter") # Use ScenegraphLayer for GLB/glTF models m.add_scenegraph_layer( data=mesh_data, scenegraph=MODEL_URL, get_position="position", get_color="color", size_scale=500, pickable=True, ) m

Export to HTML¶

If the widget doesn't render in the notebook, export to HTML and open in a browser.

In [ ]:

m.to_html("mesh_layer_example.html")

m.to_html("mesh_layer_example.html")