Projecting flags on Matterhorn mountain - behind the scenes

[omar]

I posted a digital recreation of Switzerland’s event projecting country flags on Matterhorn mountain here:

Projecting country flags on Matterhorn mountain

I saw this tweet last week that Switzerland was projecting country flags on Matterhorn mountain in show of solidarity during this pandemic: [image] I was curious to see what this would look like in Cesium. It was a lot of fun putting this together and projecting different country flags on the mountain, I think it turned out pretty well! [image] Here’s another screenshot I really liked: [image] You can play with this yourself in a live demo here: https://cesium-matterhorn.glitch.me/. Try…

It was a lot of fun putting this together, so I wanted to post the source code here with instructions on how to customize this. Let me know if you have any questions or do something cool with it!

The source code for this app is hosted on Glitch where you can remix it/edit it: Glitch :･ﾟ✧.

Changing the projected image

Step 1, create a copy of this project you can edit by clicking in the top left corner, then clicking Remix Project:

Step 2, select index.html from the leftside menu:

Line 34 is where the flag image URL is set:

let flagImageUrl = images.us_flag;

This is using an image that’s uploaded to this Glitch project. There’s a few more images that are already uploaded here. For example, try replacing that line with the following to change the US flag to a heart image:

let flagImageUrl = images.heart;

Then to see this change, click Show at the top then click In New Window:

Try any of the other 6 defined images in the code above this line.

Uploading your own image

To upload your own image, click on assets in the leftside menu, and then drag and drop an image here.

Once the image is uploaded, click on it, and then click copy to copy its URL:

Paste that URL back in the code in index.html as the new flagImageUrl:

let flagImageUrl = 'https://cdn.glitch.com/a9421797-d058-463b-96ab-0f84b670d9c4%2F0af58b60-bf6b-4c70-be79-4713d1780d69.image.png?v=1587344392641'

Re-run the app by clicking on Show at the top to see your custom image on Matterhorn mountain!

You can edit flagImageAngle to rotate the image to make sure it’s displayed correctly.

Projecting on different mountains

Projecting your image on a different mountain in a new location is a little more involved, but completly possible since our Cesium app uses Cesium World Terrain which has global 3D data.

Step 1, find the location you want to use. Use the search button to search for landmarks, like by typing in Fuji to find Mount Fuji:

It also helps to activate the layer with labels to help locate what you’re looking for:

Step 2, save this new location as the default by opening the browser console and typing in getCameraFlyTo(). Copy the result and use it to replace the default camera details at the very bottom of index.html:

Step 3, define the area that will be projected on by clicking on the bounds of the mountain, then copying the list of positions from the console:

Replace the positions in index.html around line 61 with your new position. Make sure to remove any extranous console output (like the (index):326 at the beginning of each line):

Finally, step 4, set a new point for the camera to orbit around by clicking on the center of the mountain, and replacing the summit point with your new point:

let summitPoint = Cesium.Cartesian3.fromRadians(0.13365588726472535, 0.8024416225760423, 3300);

And copy this longitude and latitude to Line 139 to set the new orbit path as shown below. The third argument is the radius.

let flightPath = computeCircularFlight(
	0.13365588726472535 * (180 / Math.PI),
	0.8024416225760423 * (180 / Math.PI),
	0.07
);

That’s it! Re-run your app by clicking Show.