Permalink
Browse files

more work

  • Loading branch information...
jeromeetienne committed Sep 7, 2013
1 parent ef390a9 commit ee4099f2319db3d1df20a5bdf0dd844a50c37088
@@ -129,6 +129,13 @@ Then how high it is.
buildingMesh.scale.y = (Math.random() * Math.random() * Math.random() * buildingMesh.scale.x) * 8 + 8;
```
+What's the deal with all those multiplication of ```Math.random()``` ?
+Well it is a way to change the statistic distribution of the result
+and center it closer to 0. ```Math.random()``` is between 0 and 1
+and got an average of 0.5. ```Math.random() * Math.random()``` is
+between 0 and 1 but got an average of 0.25. ```Math.random() * Math.random() * Math.random()```
+got an average of 0.125 and so on.
+That's it :)
We got the position/rotation/scale of our building all set.
Now let's set its color, and how to use it to simulate shadows.
@@ -3,8 +3,8 @@ layout: post
title: "How To Make The Earth In WebGL?"
date: 2013-08-16 10:13
comments: true
-published: true
-categories:
+published: false
+categories: three.js
---
So today we gonna learn how to display the earth in webgl.
@@ -19,34 +19,51 @@ You can see the demo live here
<iframe width="100%" height="349" src="/data/2013-08-16-how-to-make-the-earth-in-webgl/demo/bower_components/threex.planets/examples/earth.html" frameborder="0" allowfullscreen></iframe>
+So we want to render a earth with three.js... It is surprisingly easy to code.
+We gonna use the textures
+from [planetpixelemporium](http://planetpixelemporium.com/planets.html)
+and proceed step by step.
+First the geometry with a sphere, then each texture and their various effects.
+We will even add animations to make it more realistic, a star background and
+obviously the moon which is the sidekick of the earth :)
+
+## Let's Do a Plain Sphere
+
+{% img right /data/2013-08-16-how-to-make-the-earth-in-webgl/screenshots/earth-color.png 320 240 %}
+
+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
+and
+the third, ```32```, is the segments in height.
+We make it quite detailed to be nicer.
+We pick ```THREE.MeshPhongMaterial``` to get
+[phong shading](http://en.wikipedia.org/wiki/Phong_shading).
+It provides [specular reflection](http://en.wikipedia.org/wiki/Specular_reflection)
+which will be used to get shiny sea.
-### to render the earth itself
-
-* TODO show only map, then add bumpMap, then add specular
-
-### How To Do a Sphere ?
-
-{% img right /data/2013-08-16-how-to-make-the-earth-in-webgl/screenshots/earth-color.png 160 120 %}
+<br clear='both'/>
```javascript
var geometry = new THREE.SphereGeometry(0.5, 32, 32)
var material = new THREE.MeshPhongMaterial()
var mesh = new THREE.Mesh(geometry, material)
+scene.add(mesh)
```
-TODO make a blabla on the geometry
-
-<br clear='both'/>
-
-### How To Do a Diffuse Texture ?
+## Let's Add a Diffuse Texture
{% img right /data/2013-08-16-how-to-make-the-earth-in-webgl/screenshots/earth-diffuse.png 320 240 %}
{% img left /data/2013-08-16-how-to-make-the-earth-in-webgl/demo/bower_components/threex.planets/images/earthmap1k.jpg 410 240 %}
Above you can see the
[diffuse texture](http://wiki.splashdamage.com/index.php/Basic_Texture_Overview)
from
-[planetpixelemporium](http://planetpixelemporium.com/planets.html).
+[planetpixelemporium](http://planetpixelemporium.com/planets.html) to set the main color
+of the surface.
When we apply it to a sphere, we got the image on the right.
Here is the code to produce it.
@@ -56,91 +73,82 @@ Here is the code to produce it.
material.map = THREE.ImageUtils.loadTexture('images/earthmap1k.jpg'),
```
-### How To Do a Bump Map ?
+## Let's Add a Bump Texture
{% img right /data/2013-08-16-how-to-make-the-earth-in-webgl/screenshots/earth-bump.png 320 240 %}
{% img left /data/2013-08-16-how-to-make-the-earth-in-webgl/demo/bower_components/threex.planets/images/earthbump1k.jpg 410 240 %}
Above is the bump map we use.
-According to
-[wikipedia definition](http://en.wikipedia.org/wiki/Bump_mapping),
+According to [wikipedia definition](http://en.wikipedia.org/wiki/Bump_mapping),
a bump map "perturbate the surface normals of the object
and using the perturbed normal during lighting calculations".
Each of its pixel acts as a height on the surface.
See the result on the right.
The montains appear more clearly thanks to their shadow.
-It is possible to change how much the map affects lighting with
-```bumpScale``` parameter.
+It is possible to change how much the map affects lighting with ```bumpScale``` parameter.
Play with it to fit your needs.
```javascript
material.bumpMap = THREE.ImageUtils.loadTexture('images/earthbump1k.jpg')
material.bumpScale = 0.05
```
-### specular
+## Let's Add a Specular Texure
{% img right /data/2013-08-16-how-to-make-the-earth-in-webgl/screenshots/earth-specular.png 320 240 %}
{% img left /data/2013-08-16-how-to-make-the-earth-in-webgl/demo/bower_components/threex.planets/images/earthspec1k.jpg 410 240 %}
Above is the specular map we use.
Each pixel determines the intensity of specularity.
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 gulf of mexico.
You can control the specular color with ```.specular``` parameter.
<br clear='both'/>
-
```javascript
material.specularMap = THREE.ImageUtils.loadTexture('images/earthspec1k.jpg')
material.specular = new THREE.Color('grey')
```
-### The end result
-
-* TODO show only map, then add bumpMap, then add specular
+## Let's Add a Star Field
-```javascript
-var geometry = new THREE.SphereGeometry(0.5, 32, 32)
-var material = new THREE.MeshPhongMaterial({
- map : THREE.ImageUtils.loadTexture('images/earthmap1k.jpg'),
-
- bumpMap : THREE.ImageUtils.loadTexture('images/earthbump1k.jpg'),
- bumpScale : 0.05,
-
- specularMap : THREE.ImageUtils.loadTexture('images/earthspec1k.jpg'),
- specular : new THREE.Color('grey'),
-})
-var mesh = new THREE.Mesh(geometry, material)
-```
-
-
-### How To Do Stars ?
+{% img right /data/2013-08-16-how-to-make-the-earth-in-webgl/demo/bower_components/threex.planets/examples/images/galaxy_starfield.png 320 240 %}
We will see how to render the galaxy starfield.
The star field as you see it in the demo is a "environment sphere",
aka it is a large sphere, we are in the center and we see what is 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.
+Here is the
+[full size image](/data/2013-08-16-how-to-make-the-earth-in-webgl/demo/bower_components/threex.planets/examples/images/galaxy_starfield.png).
```javascript
// create the geometry sphere
var geometry = new THREE.SphereGeometry(90, 32, 32)
// create the material, using a texture of startfield
-// - NOTE the ```THREE.BackSide``` to show the interior of the sphere
-var material = new THREE.MeshBasicMaterial({
- map : THREE.ImageUtils.loadTexture('images/galaxy_starfield.png'),
- side : THREE.BackSide
-})
+var material = new THREE.MeshBasicMaterial()
+material.map = THREE.ImageUtils.loadTexture('images/galaxy_starfield.png')
+material.side = THREE.BackSide
// create the mesh based on geometry and material
var mesh = new THREE.Mesh(geometry, material)
```
-### How To Render The Clouds
+## Let's Add a Cloud Layer
+
+{% img left /data/2013-08-16-how-to-make-the-earth-in-webgl/demo/bower_components/threex.planets/images/earthcloudmap.jpg 320 240 %}
+{% img right /data/2013-08-16-how-to-make-the-earth-in-webgl/screenshots/earth-cloud.png 320 240 %}
+{% img left /data/2013-08-16-how-to-make-the-earth-in-webgl/demo/bower_components/threex.planets/images/earthcloudmaptrans.jpg 320 240 %}
-we build ```canvasCloud``` and use it as texture.
-It is based on 2 jpg images:
-one for the color
-and the other for the transparency.
-It is because [jpg](http://en.wikipedia.org/wiki/JPEG) doesn't handle an alpha channel.
+<br clear='both'/>
+
+We build ```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
+[jpg](http://en.wikipedia.org/wiki/JPEG)
+doesn't handle an alpha channel.
So you need to make the code to build the texture based on those images.
```javascript
@@ -157,20 +165,37 @@ var moonMesh = new THREE.Mesh(geometry, material)
earthMesh.add(moonMesh)
```
+
Notice the parameters of the material.
-We set ```transparent``` to warn three.js.
-we set ```side``` to ```DoubleSide``` thus both sides will be visible.
+We set ```transparent``` to warn three.js this is transparent and disable ```depthWrite```.
+We set ```side``` to ```DoubleSide``` thus both sides will be visible.
This avoid artefacts on the edge of the earth.
and finnaly we set ```opacity``` to make them more translucide.
-### How to Make It Rotate ?
+## Let's Add a Moon
+
+**TODO**
+As we already did the earth, it is pretty straighforward to the moon. We reuse
+the same technics with [moon textures](http://planetpixelemporium.com/earth.html).
+
+```javascript
+var geometry = new THREE.SphereGeometry(0.5, 32, 32)
+var material = new THREE.MeshPhongMaterial();
+var moonMesh = new THREE.Mesh(geometry, material)
+material.map = THREE.ImageUtils.loadTexture('images/moonmap1k.jpg');
+material.bumpMap = THREE.ImageUtils.loadTexture('images/moonbump1k.jpg');
+material.bumpScale = 0.002;
+```
+
+## Let's Do a Little Dance
First let's orientate the earth by 23.4 degree.
In reality, the earth got a little tilt in the solar system plane,
and this tilt is of 23.4 degree :)
```javascript
earthMesh.rotation.z = -23.4 * Math.PI/180
+moonMesh.rotation.z = -23.4 * Math.PI/180
```
Now let's make the earth rotates!
@@ -179,26 +204,30 @@ For example in your render loop, you do this
```javascript
onRenderFcts.push(function(delta, now){
- earthMesh.rotation.y += 1/32 * delta;
- moonMesh.rotation.y += 1/8 * delta;
+ earthMesh.rotation.y += 1/32 * delta
+ moonMesh.rotation.y += 1/8 * delta
})
```
-### Here is the moon
+## The end result
-As we already did the earth, it is pretty straighforward to the moon. We reuse
-the same technics with [moon textures](http://planetpixelemporium.com/earth.html).
+* TODO show only map, then add bumpMap, then add specular
```javascript
var geometry = new THREE.SphereGeometry(0.5, 32, 32)
-var material = new THREE.MeshPhongMaterial();
-var moonMesh = new THREE.Mesh(geometry, material)
-material.map = THREE.ImageUtils.loadTexture('images/moonmap1k.jpg');
-material.bumpMap = THREE.ImageUtils.loadTexture('images/moonbump1k.jpg');
-material.bumpScale = 0.002;
+var material = new THREE.MeshPhongMaterial({
+ map : THREE.ImageUtils.loadTexture('images/earthmap1k.jpg'),
+
+ bumpMap : THREE.ImageUtils.loadTexture('images/earthbump1k.jpg'),
+ bumpScale : 0.05,
+
+ specularMap : THREE.ImageUtils.loadTexture('images/earthspec1k.jpg'),
+ specular : new THREE.Color('grey'),
+})
+var mesh = new THREE.Mesh(geometry, material)
```
-### Conclusion
+## Conclusion
After that, we add a atmosphere shader to reproduce the halo created by the atmosphere,
a moon and some shadow casting. and you got the following.

0 comments on commit ee4099f

Please sign in to comment.