Creating a Cesium virtual globe with v1.36

As blogs come, this has to be (for me) one of the longest. You see, I’ve been playing with Cesiumjs since its beginning and following the exciting beginnings of the “3D Tile” for the last 3yrs, I’ve waited patiently, waiting for the moment I could share with the world how fantastic this new technology is.

Although the 3D Tile is nothing new, Cesium were the first to integrate the quadtree style rendering for vector data through a web portal. I am sure that we all sat in awe, looking at those amazing CyberCity 3D models of whole cities rendering in incredible detail. The only problem was that it wasn’t easy to replicate, by that I mean that it required specific builds of Cesium (including dev build) and then it required Cesium to convert your 3D data.

All this changed a few months ago with the release of Cesium 1.35. In this release, the 3D Tile capability was included with the release, making it possible, should you be able to convert your data to the tile format, to easily add your data and render it on the web. It is then, with some luck that a few 3D tile converters have become available, one of the easiest being the converter within FME 2017.1, though there are open ways, such as this: https://www.npmjs.com/package/3d-tiles-tools

In this piece, I aim to show you, the reader, through adding a 3D Tile dataset to the Cesium sandcastle, this can then easily be moved over to a production version should you wish to using your own data. Please note that I will be showing you through performing this on your own webhost. It is possible to do this on your localhost (personal machine) and the instructions for creating Cesium on your localhost can be found here: https://cesiumjs.org/tutorials/cesium-up-and-running/ You then only need follow instruction from the post of adding and coding the 3D tileset.

Disclaimers

I think it is only safe to say at this point, that this is not done in conjunction with Cesium, AGI or any other affiliate of Cesium and this is created from my own findings. Furthermore, I am providing some 3D tile data which I have created in ESRI multipatch format and then converted to 3D Tiles using FME 2017.1 without any textures or materials as this is for demonstration purposes only. Feel free to create your own shiny data and replace my shoddy demo data 🙂

Let’s begin

For this, you will require the Cesium 1.36  – Link to download: Here

 

3D Tile dataset: Here

I am using Filezilla for the ftp transfer to my webhost, feel free to use whatever works best for you…I find Windows 10 folder ftp quite good.

So, disclaimers and data done….hold on tight, here we go….

  1. Extract the Cesium zip file and call the folder “cesium” – note that there should just be a folder called cesium with files inside it, no more folder structure than that.                                                                                                      
  2. Extract the 3D tileset to a folder, inside this folder should be a folder called “data” which has a lot of .b3dm files (these are the quadtree, each .d3dm being a different level of detail) and above/ outside this data folder should be a single file called tileset.json.                                                                                                                                
  3. Navigate to where you wish to run Cesium from, and copy the Cesium folder to it. It must be your web facing folder, so for me, it is in my root web folder of my website, http://dragons8mycat.net/cesium …yes, it really is that easy!                                                                                                                                                                                        
  4. Check that your webpage is running the instance okay…for me, I just go to the address (http://dragons8mycat.net/cesium) and it pops up.                                                                                                            
  5. We are going to run the 3D tiles in the sandcastle on Cesium, for the easiest ride it is best to put the 3D Tileset I’ve given you in the folder which the 3D Tiles demonstrations use, this is within the “Specs” folder of your Cesium installation (webhost or localhost/cesium/Specs/Data/Cesium3DTiles/) – Put the “data” folder and the “tileset.json” file in here, make sure that they are not inside another folder.                                                                  
  6. Open your Cesium instance (http://Your host/cesium) and select the “Sandcastle”, click on the 3D Tiles tab in the bottom left. Select the “3D Tiles BIM” option. This should provide a split screen of your Cesium on the right and code on the left. You will note that if you adjust the code it reflects on the right.
  7. So, we are going to get it to read our data and not theirs…Change the URL to ‘../../../Specs/Data/Cesium3DTiles/tileset.json’ and hit “RUN” in the top left (or F8)
  8.                                          
  9. Celebrate that you now have a working demo!

…but wait, this is just stuck within the Sandcastle, if you want to impress the boss, you want to really put it in its own Cesium instance and show off….So lets do it!

Let’s do this properly!

The Cesium viewer can be found in your webhost or localhost location/cesium/Apps – in here you will see a file called “HelloWorld.html”. If you go to yourhost/cesium/Apps/HelloWorld.html you will see that it brings up a blank Cesium viewer, so let’s add our own html file…

  1. Copy the text below in notepad and save it as “3D_demo.html”
<!DOCTYPE html>
 <html lang=”en”>
 <head>
 <meta charset=”utf-8″>
 <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
 <meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no”>
 <meta name=”description” content=” 3D Tiles Demo”>
 <title>Nicks 3D Tile Demo</title>
http://”../Build/Cesium/Cesium.js” 
</head>
 <body>
<style>
 @import url(./Sandcastle/templates/bucket.css);
 </style>
var viewer = new Cesium.Viewer(‘cesiumContainer’);
var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
 url : ‘../Specs/Data/Cesium3DTiles/tileset.json’
 }));
 tileset.readyPromise.then(function() {
 var boundingSphere = tileset.boundingSphere;
 viewer.camera.viewBoundingSphere(boundingSphere, new Cesium.HeadingPitchRange(0.5, -0.2, boundingSphere.radius * 4.0));
 viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
 }).otherwise(function(error) {
 throw(error);
 });
</body>
 </html>

2. Copy the html file to yourhost/cesium/Apps/ ….yes right alongside that “HelloWorld” file.

3. Refresh (F5)

4. Open yourhost/cesium/Apps/3D_demo.html in your browser….Woohoo!!

5. Change line 9 to a title that suits you….change the URL in line 21 to your own data!

Hooray!

Congratulations, pretty easy wasn’t it?….Now the great thing is that you can go on to add lots of really cool effects simply, like shadows, atmosphere, colouring and many more, just look up the Cesium manual here: https://cesiumjs.org/Cesium/Build/Documentation/Scene.html

I’d love to know how you’ve got on and what you’ve created from this, send your images on Twitter, to @dragons8mycat

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s