13 April 2015

A How-To Guide For Exploring 3D Buildings in Cesium

Cesium is a great way to explore models of 3D buildings in their actual locations on Earth. Cesium is also an easy (and free) means to embed 3D models on a web page so they can be explored by users on nearly any platform. Here's a quick How-To on loading a building model from SketchUp into Cesium.

Step 1
Create a new model or open an existing model in SketchUp. To find a model of a real building use Trimble's 3D Warehouse. Download the model in SketchUp format. For this example we've shared our model of the Shanghai World Financial on the 3D Warehouse.

Trimble's 3D Warehouse
Step 2
Export a Collada (.dae) file from SketchUp. When doing so its best to create a new folder and export both the .dae file and Collada assets into the new folder. For this example we've exported the file to a folder called WFC.

Compress the Collada folder containing the export into a new file. We now have WFC.zip.

click to expand
Step 3
Use the Cesium-to-glTF Converter tool on the Cesiumjs.org website to generate a .gltf file from the compressed model folder. Simply drag the WFC.zip into the box and the Converter will return a glTF file. The model will be displayed on the page once it's successfully converted.

Cesium-to-glTF Converter page

Step 4
Copy the glTF file to a webserver where you will be running an instance of Cesium. We'll assume Cesium is already deployed on the webserver.

Step 5
Both the .glTF file and the model's coordinates need to be pointed to in the Cesium startup script.

Remember that Collada models are not geolocated. This means that the latitude and longitude of the model needs to be included in the Cesium loading script. If the model has already been geolocated we can find the latitude and longitude in SketchUp from the Model Info window.

Finding geolocation in SketchUp 15.2

SketchUp reports the model has Latitude: 31.236433N and Longitude: 121.502979E

The directional 'N' and 'E' can be omitted and we can record the values into the Cesium script in the following format:

var viewer = new Cesium.Viewer('cesiumContainer');var entity = viewer.entities.add({
    position : Cesium.Cartesian3.fromDegrees(121.502979, 31.236433),
    model : {
        uri : 'WFC.gltf'

viewer.trackedEntity = entity;

Step 6
Open and explore the model in Cesium! Click here to see our example page for the Shanghai World Financial Center. Note the page opens directly to a correct birds-eye view of the building model. Remember that because Cesium is amazing and uses WebGL this page will open and behave identically in current web browsers on Mac, PC, iOS or Android.

Shanghai Financial World Center, 100 Century Avenue, Pudong, Shanghai, China
Keep in mind that you can use the Base Map Picker to see different maps around your model no matter where its located on Earth. Imagery providers include Bing Maps, ESRI, OpenStreet-Map and more.

Base Map Picker in Cesium
Contact us with any questions or for help setting up your own 3D building model in Cesium.

9 April 2015

The Density of the 'XYZ' Buildings at Rockefeller Center

The 'XYZ' Buildings
These three enormous buildings in midtown are collectively known as the 'XYZ' buildings, each sharing a similar slab-design that maximizes floor area. The Exxon Building (1971), McGraw-Hill Building (1969) and Time-Life Building (1958) represent the expansion of Rockefeller Center in the 1960s. Harrison, Abramovitz & Harris was the architectural firm that designed each building.

Combined with 1211 Avenue of Americas, which was built in 1973 and also designed by Harrison's firm, these four massive buildings comprise nearly 8.7 million square feet of office and retail space. 

McGraw-Hill: 2,500,000 sqft
Exxon Building: 2,300,000 sqft
Time-Life Building: 1,970,000 sqft
1211 Avenue of the Americas: 1,925,425 sqft
Total = 8,698,425 sqft

When standing in Times Square or on Sixth Avenue anywhere from 47th to 49th Street, these buildings project a feeling of commercial power and corporate establishment.

The imagery below illustrates these buildings in their midtown context with the background buildings of midtown visible in the last image.

8.7M sqft
(click to expand)

5 April 2015

260 & 261 Madison Avenue + 1 Vanderbilt massing

The Cesium mapping software makes it easy to load and manipulate high quality photo textured (Collada) models of office buildings and articulate them with property data. The imagery below showcase these Grand Central-district buildings that were both built in 1953. Web applications that illustrate buildings in this method and can reveal floor level data are products provided by Cube Cities.

260 & 261 Madison Avenue
Floor information highlighted on 261 Madison Avenue

The imagery below compares the scale of 260 & 261 Madison Avenue with One Vanderbilt, the supertall skyscraper proposed West of Grand Central Terminal on 42nd Street.

For comparison purposes, the rooftop heights of 260 & 261 Madison are 300 and 347 feet, the proposed height of 1 Vanderbilt is 1,514 feet. SL Green Realty is the developer behind 1 Vanderbilt.

One Vanderbilt = Orange
260 & 261 Madison Avenue = Blue

31 March 2015

The Future Central Park South Skyline

The Central Park South skyline will change dramatically in the years to come. Supertall skyscrapers along the 57th street corridor in Midtown will rise to great heights and reorient eyes upwards. The imagery below shows the view today and the 3D map shows the heights of the buildings now under construction.

Today's Midtown Skyline

Tomorrow's Midtown Skyline
Here's a quick video of a Cesium-based application that exposes floor level data in the Nordstrom Tower and One57.

18 March 2015

New York Supertalls: 432 Park Avenue

We're particularly interested in visualizing the new super tall developments along 57th Street in Midtown. Here is imagery of 432 Park Avenue, the 1,396 foot tower that topped out late last year. Red floors indicate the suites remaining on the market in this luxury residential building developed by CIM Group.

We'll share more visualizations of the other mega developments under construction in Manhattan soon.

432 Park Avenue, background buildings colourized by building type.

The GM Building, 432 Park Avenue, and 745 Fifth Avenue from Grand Army Plaza
Cesium / Reality

13 March 2015

Examining Hollywood's 3D Cities

We've been paying attention to the 3D city visualizations found in recent Hollywood movies. They can be described as immersive, wireframe building models that illustrate data across large urban areas. Military or emergency services actors typically utilize these wireframe city models to gain awareness of local activity in tactical scenarios. 

Floor-level building visualizations are found in these visualizations, used as the best way of understanding cities in these sci-fi visuals. Color choices are monotone and clean, simplistic geometric models populate the map to provide for transparency and insight.

Examples from the movies Transformers 3 and Hunger Games: Mockingjay are seen below.

Floor-level view of Chicago's Loop from Transformers 3

Transformers 3

Computerized view of The Capitol from The Hunger Games: Mockingjay

When considering the software options available today to recreate the sophisticated interfaces we see in cinema, there are few off-the-shelf products. It would be very difficult to deliver such high quality, real time city visualization systems without significant investment in proprietary technologies.
We're imagining these kind of visualization concepts as we build applications at Cube Cities. Below are examples of the Market Street corridor in San Francisco and the US Bank Tower in downtown Los Angeles, visualized with our wireframe styles calibrated for tactical location finding.

San Francisco
Floors of the US Bank Tower in Downtown Los Angeles