So today we gonna learn how to display the earth in webgl. That will be a nice introduction to material and textures. I got the idea while coding threex.planets, a three.js extension to easily display all the planets from the solar system based on planetpixelemporium. With this post, you will be able to feel like astronauts conquering the outer space for the day and creating your own galaxy. :)
So we want to render the earth with three.js… It is surprisingly easy to code. We gonna use the textures from planetpixelemporium and proceed step by step. But first let me show you the demo we gonna write below.
First the geometry with a sphere, then each texture and their various effects. We will even add animations to make it more realistic and put it in context with a star field background.
Let’s Do a Plain Sphere
Well we first create a geometry for the sphere, then
we add a phong material,
create a mesh from them
and add it to the scene.
The first parameter,
0.5 is the radius.
The second parameter,
32, is the segments in width
32, is the segments in height.
We make it quite detailed for it to be nicer.
THREE.MeshPhongMaterial to get
It provides specular reflection
which will be used to get a shiny sea.
1 2 3 4
Cool but rather flat… What about a diffuse texture to add some colors to our sphere.
Let’s Add a Diffuse Texture
Hmm rather cool but more relief on the earth would be cool. What about a bump texture now ?
Let’s Add a Bump Texture
Above is the bump map we use. According to wikipedia definition, a bump map “perturbates the surface normals of the object using the perturbed normal during lighting calculations”. Each of its pixels acts as a height on the surface. See the result on the right. The mountains appear more clearly thanks to their shadow.
It is possible to change how much the map affects lighting with
Play with it to fit your needs. Now that we change the heights on various parts of the
earth, let’s change its shininess with a specular texture.
Let’s Add a Specular Texture
Above is the specular map we use.
Each pixel determines the intensity of
In this case, only the sea is specular because water reflects water more than earth.
You can see it on the left with the white halo in the Gulf of Mexico.
You can control the specular color with
Yeah but all this water, where does it go when it is hot ? It evaporates in the sky and becomes clouds.
Let’s Add a Cloud Layer
canvasCloud and use it as texture.
It is based on the jpg images you see above:
one for the color and the other for the transparency.
We do that because
doesn’t handle an alpha channel.
So you need to make the code to build the texture based on those images.
1 2 3 4 5 6 7 8 9 10
We attach the cloudMesh to the earthMesh, thus they will move together.
Notice the parameters of the material.
depthWrite and set
transparent to warn three.js the
cloud mesh is transparent.
DoubleSide thus both sides will be visible.
This avoids artefacts to be on the edge of the earth.
Finaly we set
opacity to make them more translucide.
The output is quite convincing but rather static. Let’s see what we can do about that!
“And Yet it Moves”
1 2 3
As a last step, we gonna animate the cloud layer too, to make it more realistic.
1 2 3
Definitely better, but still we feel there is something missing. What do we see in space ? Stars! duh :)
Let’s Add a Star Field
We will see how to render the galaxy starfield. The star field as you see it in the demo is an “environment sphere”, aka it is a large sphere, we are in the center and we see what’s inside. So we ask three.js to show the backside of the faces. And we use the texture above as diffuse. The above image is smaller than the actual one so you barely see the stars.
1 2 3 4 5 6 7 8
threex.planets - All Solar System’s Planets Done For You
While i was at it, i made threex.planets, a threex extension for three.js. It provides all the planets from the solar system to be easily usable in your own demo or games. It is based on planetpixelemporium textures using the same technics described in this post. You can see it live here. First, the mythical sun, mercury and venus.
In this post, we saw how to make a nice looking earth with animated clouds with a star field in the background. I think it is a nice result for the amount of work. I hope it was useful to discuver the various roles of textures. Now you can use this to make even nicer demos, like this one. It shows the same Earth, that we just saw how to do, with the moon close to it. We add shadow casting and a nice atmosphere shader and the result is quite convincing.
That’s all for today folks. Have Fun!