WebGL Earth Model with Earth Map

Introduction Download the Spherical Earth Texture Map Download the WebGL Earth Model WebGL 3D Earth Example: Simple Lighting 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

WebGL Earth Model

Earth.js includes the entire Earth model source code including vertices, texels, and indices. Seven Thunder Software created a simple sphere with 3DS Max, then exported the model as a Collada DAE file. Seven Thunder Software's 3D Translator app converted the DAE data which displays below. Either copy the listing below, or download the JavaScript Earth model with the button below.

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. The Earth model concludes with an offset into the vertex-texel array and the length of the index array. The 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 more entries and meshes may be added to the model. The following listing shows the end of the Earth model JavaScript file.

//Offset into
//the buffer 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.

Have fun and love learning! See more WebGL examples.

More WebGL Examples

Copyright © 2015 Seven Thunder Software. All Rights Reserved.