D3 Globe with Canvas, WebGL, and Three.js

Last updated on July 29, 2015 in Development

D3js Sphere with Image Tiles

D3.js comes with a lot of geographical projections and there are many cool demos that let you explore different ways of visualizing a map of our earth. I really like the orthographic projection as it gives you a perspective (or azimuthal) projection where earth is a sphere or globe as it appears from outer space. D3 already has some great examples of this projection, and I have also made my own basic D3 Globe with very little code. But today, I want to expand on this concept and try to incorporate an image of the earth into the globe projection to create a more realistic view of earth. First, I will attempt to make this happen with just HTML5 Canvas and then I will explore other technologies like WebGL and Three.js to make the globe more responsive.

Rendering a D3 map on Canvas is easy, even in an orthographic projection. Just take a look at the source code in this D3 Canvas example. But how do you overlay an actual image in a spherical projection? Loading the image into a Canvas object lets you play around with the individual pixels and D3 projection.invert(point) function allows you to projects cartesian coordinates (in pixels) to spherical coordinates (in degrees). So, with a little math and a lot of processing, you can wrap any image around a sphere. Check out this D3 Globe with Natural Earth Image wrapped around using Canvas. I have added a mouseover event that enables you to move the globe (source code also has auto rotate function commented out) but the performance costs are huge.

Jason Davies has a different approach to make Canvas work with a D3 projection and map images, but it still feels very slow. It is a nice proof of concept, but it’s clear that we need more advanced technology to be able to really interact and play with an actual globe on a web page. Fortunately, the web is moving forward, and more and more browsers are supporting WebGL, a new web technology for hardware-accelerated 3D graphics. On top of that, JavaScript libraries like Three.js let you quickly implement all kinds of ideas with WebGL and 3D graphics. Three.js also has many examples and this earth demo is put together with not much code. I swapped the image with Natural Earth to create my own version of a globe rendered with WebGL and Three.js.

This example, however, is no longer using D3 or geographical projections, so you would not be able to lay down some latitude and longitude markers. How do you integrate D3 with Three.js? There is a in-progress d3-threeD project that hooks d3.js with Three.js (with a demo) and Jos Dirksen has a good post that uses d3-threeD to render geo data in 3D with Three.js and D3.js. You could mess around with that and try to create a globe, but if you are only using D3 to translate lat and lon into x and y position on a sphere, I would consider dropping d3 and trying things like the WebGL Globe Project or other webGL Globe libraries:

Open webGL Globe Demo
Cesium Viewer
WebGL Earth and Demo
NASA’s Interactive Satellite Viewer

D3 Globe with Canvas, WebGL, and Three.js

External Links for More Research: