CesiumJS

[CesiumJS]Cesium Getting Started 10 - 3D Tiles

Our team sometimes describes Cesium as a 3D game engine for real-world data. However, working with real-world data is much more difficult than working with typical video game assets, because real data can be incredibly high-resolution and requires precise visualization. Fortunately, Cesium has collaborated with the open-source community to develop 3D Tiles, an open specification for streaming massive heterogeneous 3D geospatial datasets.

Using streaming technology conceptually similar to Cesium’s terrain and imagery, 3D Tiles makes it possible to view enormous models that would otherwise be impossible to interactively view, including building datasets, CAD (or BIM) models, point clouds, and photogrammetry models.

Here are some demos showcasing different 3D Tiles formats:

In our application, we’ll use Cesium3DTileset to add realism to our visualization by displaying full 3D models of all buildings in New York! This NYC tileset is hosted on Cesium Ion, and we can add it using IonResource.fromAssetId:

1
2

// Load the NYC buildings tileset
var city = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({ url: Cesium.IonResource.fromAssetId(3839) }));

You may notice that the buildings are not correctly positioned on the ground plane. Fortunately, this is easy to fix. We can adjust the tileset’s position by modifying the model matrix (modelMatrix).

We can find the current offset of the model modelMatrix from the ground by converting the tileset’s bounding sphere to Cartographic, then adding the desired offset and resetting the model matrix.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

// Adjust the tileset height so its not floating above terrain
var heightOffset = -32;
city.readyPromise.then(function(tileset) {
    // Position tileset
    var boundingSphere = tileset.boundingSphere;
    var cartographic = Cesium.Cartographic.fromCartesian(boundingSphere.center);
    var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0);
    var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, heightOffset);
    var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());
    tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
});

Now we have 1.1 million building models streaming in our scene.

3D Tiles also allows us to adjust our styling using the 3D Tiles styling language. A 3D Tiles style defines expressions for evaluating the color (RGB and transparency) and display of a Cesium3DTileFeature, which is part of the tileset, such as an individual building in the city. Styles are typically based on feature properties stored in the tile’s batch table. Feature properties can be height, name, coordinates, construction date, or anything else built into the tileset asset. Styles are defined in JSON, and expressions are written in a small subset of JavaScript designed for styling. Additionally, the styling language provides a set of built-in functions to support common math operations.

An example of Cesium3DTileStyle:

1
2
3
4

var defaultStyle = new Cesium.Cesium3DTileStyle({
    color : "color('white')",
    show : true
});

The above code makes our NYC tileset white and always visible. To actually set the tileset’s style, we set city.style:

1

city.style = defaultStyle;

We can also define as many styles as we like. For example, making the buildings transparent:

1
2
3
4

var transparentStyle = new Cesium.Cesium3DTileStyle({
    color : "color('white', 0.3)",
    show : true
});

Applying the same style to every feature in our tileset is just scratching the surface. We can also use properties specific to each feature to determine styling. Here’s an example of coloring buildings based on their height:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

var heightStyle = new Cesium.Cesium3DTileStyle({
    color : {
        conditions : [
            ["${height} >= 300", "rgba(45, 0, 75, 0.5)"],
            ["${height} >= 200", "rgb(102, 71, 151)"],
            ["${height} >= 100", "rgb(170, 162, 204)"],
            ["${height} >= 50", "rgb(224, 226, 238)"],
            ["${height} >= 25", "rgb(252, 230, 200)"],
            ["${height} >= 10", "rgb(248, 176, 87)"],
            ["${height} >= 5", "rgb(198, 106, 11)"],
            ["true", "rgb(127, 59, 8)"]
        ]
    }
});

To switch between styles, we can add more code to listen to HTML input:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

var tileStyle = document.getElementById('tileStyle');
function set3DTileStyle() {
    var selectedStyle = tileStyle.options[tileStyle.selectedIndex].value;
    if (selectedStyle === 'none') {
        city.style = defaultStyle;
    } else if (selectedStyle === 'height') {
        city.style = heightStyle;
    } else if (selectedStyle === 'transparent') {
        city.style = transparentStyle;
    }
}

tileStyle.addEventListener('change', set3DTileStyle);

For more examples of 3D Tiles, how to use and adjust styles, check out the 3D Tiles sandcastle demos.

3D Tiles examples:

If you have data and need help converting it to 3D Tiles, stay tuned for updates on the Cesium Ion platform! Subscribe for updates here.

Cesium Chinese Community QQ Group: 807482793

Original link: http://cesiumcn.org/topic/163.html | China fast access: http://cesium.coinidea.com/topic/163.html