Blue Marble

Blue Marble began as a foundation for visualizing various kinds of global data in a format that is arresting and therefore elicits deeper investigation and interaction; however, after discovering NASA's collection of Blue Marble: Next Generation digital images composited from month-long periods of satellite data, it quickly morphed into an exploration of realism, the highlight of which is the combination of and smooth transition between Earth's natural and artificial lighting.

Implementation Details

Three.js, a high-level Javascript library for WebGL, makes the creation of spheres and the mapping of textures onto them very easy. This model consists of a base sphere showing topography and bathymetry for the month of August, which was chosen for its lack of ice in the Northern Hemisphere. This layer also includes bump and specular maps from the Natural Earth III collection to enhance the appearance of elevated areas and the reflectivity of water respectively. International boundaries are mapped onto a slightly larger sphere, while a third sphere displaying nighttime lights encompasses them. A fourth larger sphere displays our clouds, doctored in Photoshop so as not to excessively mask landmasses. Finally, a starfield is projected onto the interior of a very large sphere used to represent the universe. All the earth spheres are tilted 23.4° and rotated in tandem in order to simulate Earth's daily rotation around its axis, with the cloud layer rotating slightly faster as a simple way to suggest the force of wind.

Though this project was on the whole fairly simple, the most gratifying aspect was discovering a way to display the nighttime lights layer in a convincing manner, hiding and revealing these lights as half the Earth's surface progressively moves into and out of the Sun's rays. Because textures are normally displayed in an all-or-nothing manner, I got the chance to write my first custom vertex and fragment (aka pixel) shaders for this layer. Within these shaders we take the dot product between each of the Earth's vertex normals and the Sun's position, leveraging the fact that the dot product is directly related to the cosine of the angle between two vectors. If a given vertex normal on the Earth is pointing towards the Sun (i.e., has a dot product approaching -1), then we make the nighttime lights layer at this pixel transparent, whereas we make it opaque if the normal is pointing away from the Sun (i.e., has a dot product approaching 1). This simple calculation is sufficient to create quite a realistic lighting transition; however, I would like to experiment with adding noise to the equation in order to make lighting near the transitional shadow boundary a little more dynamic and thus more natural.

  1. Kinetic Light Sculpture #1

  2. Blue Marble

  3. Chicago

  4. One Clock

  5. Lexon e8 Watchband