WebGL Earth Model & Texture

Download 3D Model & Texture Map

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

Introduction

This page includes the model source code and texture map to display the earth with WebGL. The earth model includes interleaved vertices and texels. The texels wrap the earth texture map around a sphere.

Spherical Earth Texture Map

Seven Thunder Software modified the earth image with Photoshop. The original image came from NASA.

$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. The free WebGL Translator app was used to convert DAE data into Float32Array and Uint16Array data for 3D rendering with WebGL. 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.

Use the search icon, above, to play the Numbers Game. The game's prepared with one texture that maps a set of sprites along with the background.

The GPU and source code usually process more efficiently with one vertex buffer object (VBO) and one texture map. Some 3D models use small portions of a texture, allowing room for more 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 VBO to
//begin drawing operations.
this.aOffset = [0];

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

Summary

This page included the model source code and texture map to display the earth with WebGL. The earth model includes interleaved vertices and texels. The texels wrap the earth texture map around a sphere.

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.