Creating wee planets with GDAL

In my last blog post, we projected an equirectangular photograph on a sphere using three.js. Today, we'll use the same panorama to create a wee (miniature) planet.

A wee planet is a panorama projected to look like small planets using a stereographic projection. There is a great collection of wee planets from Alexandre Duret-Lutz on Flickr.

There are image software you can use to create wee planets, but why not be a real map nerd and use GDAL instead? We already have a 360°x180° panorama in an equirectangular projection. The only difference from a world map is that the panorama is not georeferenced. Let's do it with gdal_translate:

gdal_translate -of GTiff -a_ullr -180 90 180 -90 -a_srs EPSG:4326 bergsjostolen.jpg bergsjostolen.tif

We pretend our new GeoTIFF to be the world, and use gdalwarp to create a wee planet using the stereographic projection:

gdalwarp -wo SOURCE_EXTRA=10000 -r bilinear -te -22500000 -22500000 22500000 22500000 -ts 1000 1000 -s_srs EPSG:4326 -t_srs EPSG:3031 bergsjostolen.tif bergsjostolen-planet.tif

I'm using the Antarctic Polar Stereographic projection. If we use the same projection on a world map it will look like this:

I wanted the house on the top, and copied the projection string and changed the longitude rotation to -160:

gdalwarp -wo SOURCE_EXTRA=10000 -r bilinear -te -22500000 -22500000 22500000 22500000 -ts 1000 1000 -s_srs EPSG:4326 -t_srs "+proj=stere +lat_0=-90 +lat_ts=-71 +lon_0=-160 +k=1 +x_0=0 +y_0=0 +ellps=WGS84 +datum=WGS84 +units=m +no_defs" bergsjostolen.tif bergsjostolen-planet.tif

There you go, a wee planet from a map nerd!

Snow kiters at Bergsjø.

Bergsjøstølen in the blue hour.

Comments

Creating a WebGL Earth with three.js

This blog post will show you how to create a WebGL Earth with three.js , a great JavaScript library which helps you to go 3D in the browser. I was surprised how easy it seemed when reading a blog post by Jerome Etienne . So I decided to give it a try using earth textures from one of my favourite cartographers, Tom Patterson . WebGL is a JavaScript API for rendering interactive 3D graphics in modern web browsers without the use of plug-ins. Three.js is built on top of WebGL, and allows you to create complex 3D scenes with a few lines of JavaScript. If your browser supports WebGL you should see a rotating Earth below: [ Fullscreen ] To be able to display something with three.js, you need three things: a scene, a camera and a renderer. var width = window.innerWidth, height = window.innerHeight; var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(45, width / height, 0.01, 1000); camera.position.z = 1.5; var rende...

Terrain building with three.js

In my last blog post , we converted a digital elevation model (DEM) to a WebGL-friendly format ( i.e. easy to transfer and parse by JavaScript in the browser). In this blog post, we'll use the elevation data to build a terrain mesh with three.js . First we need to transfer the terrain data to the browser. The elevation values are stored in a binary file as 16-bit unsigned integers. This page explains how you can send and receive binary data using JavaScript typed arrays. I've created a TerrainLoader by adapting the XHRLoader . You can also use this function: function loadTerrain(file, callback) { var xhr = new XMLHttpRequest(); xhr.responseType = 'arraybuffer'; xhr.open('GET', file, true); xhr.onload = function(evt) { if (xhr.response) { callback(new Uint16Array(xhr.response)); } }; xhr.send(null); } Loading elevation data with the Terrai...

Creating 3D terrains with Cesium

Previously, I’ve used three.js to create 3D terrain maps in the browser ( 1 , 2 , 3 , 4 , 5 , 6 ). It worked great for smaller areas, but three.js doesn’t have built-in support for tiling and advanced LOD algorithms needed to render large terrains. So I decided to take Cesium for a spin. Cesium is a JavaScript library for creating 3D globes and 2D maps in the browser without a plugin. Like three.js, it uses WebGL for hardware-accelerated graphics. Cesium allows you to add your own terrain data, and this blog post will show you how. Impressed by the terrain rendering in @CesiumJS - with a 10m elevation model for Norway! Farewell Google Earth. pic.twitter.com/RQKvfu2hBb — Bjørn Sandvik (@thematicmapping) October 4, 2014 Compared to the dying Google Earth plugin , it's quite complicated to get started with Cesium. The source code is well documented and the live coding Sandcastle is great, but there is a lack of tutorials and my development slows down when ...

MasterMaps

Search This Blog