Earth & Climate Map

Download 3D Model & Texture Map

Introduction Array Format Download the Spherical Earth Texture Map Download the WebGL Earth Model Earth Surface Temperature:Swipe to Spin 3D Earth Example: Simple Lighting Glow Effect on Earth Example Summary

Introduction

This page includes a 3D Earth model and texture map representing temperature by color, prepared for display with WebGL arrays. The texture map's stunning colors provide a beautiful visual effect. The earth model's a sphere with interleaved vertices and texels for efficient upload to the GPU.

Earth Texture Map: Temperature by Color

The original image came from NASA. The map's color coded representing average temperature around the globe for the month of December 2001.

$Earth Map for Sphere$

Download the WebGL Earth Model

Either select the Earth.js button, below, or the earth image link to download the 3D model.

Earth.js includes the entire Earth model source code with vertices, texels, and indices. Seven Thunder Software created a simple sphere with 3ds Max, then exported the model as a Collada DAE file. Tap the Earth.js button, below, or the Earth image link, to download the JavaScript Earth model.

Array Format

View the JavaScript file at Earth.js. The format of the model begins with an interleaved array of vertices and texels. The following short listing demonstrates the start of the earth model. The first entry in the array named, aVertices, is a set of X,Y,Z vertex coordinates, 0,0,1. The second line in the array named, aVertices, is a set of S,T texel coordinates 0.5,0.5. Lines alternate between a set of vertex coordinates and a set of texture coordinates.

var Earth = function(){

this.aVertices = [
0,0,1,
0.5,0.5,
0,0.098017,0.995185,
0.5,0.53125,
...

The earth model has an array named aIndices which includes element array indices in the order they should render.

Arrays for count and offset are used for models which include multiple elements, sprites or backgrounds. The earth model concludes with an offset into the vertex-texel array and the length of the index array. Earth's first, and only, entry in array aOffset is the offset into the vertex-texel array. The first, and only, entry in array aIndices, is the length of the element array. However developers may add more sprites with entries to the aOffset and aIndices arrays. For example multiple sprites, including the background and a set of digits, render with a similar model in the Numbers Game. Find and play the free game with the search icon, above.

The GPU and source code usually process more efficiently with one vertex buffer object (VBO) and one texture map. Other 3D models, apply small portions of an image, for the texture, allowing room for other sprites within the same texture map. The following listing shows the end of the earth model JavaScript file. WebGL developers might consider adding more offsets and elements.

//Offset into
//the buffer to
//begin drawing operations.
this.aOffset = [0];

//Number of elements
//to draw.
this.aCount = [this.aIndices.length];

Summary

This page includes a 3D Earth model and texture map representing temperature by color, prepared for display with WebGL. The texture map's stunning colors provide a beautiful visual effect. Earth's model's a sphere with interleaved vertices and texels for efficient upload to the GPU.

3D Models & Texture Maps

Seven Thunder Software creates three dimensional interactive online content from blueprints, photographs, ideas, and actual objects, with Adobe Photoshop, 3ds Max, Eclipse, HTML5, CSS3, WebGL, and JavaScript.