Permalink
Browse files

more work

  • Loading branch information...
1 parent 49315a1 commit ef390a9e4dd133b6c9e04ca8cde602f012579ea5 @jeromeetienne committed Sep 2, 2013
Showing with 42,174 additions and 1 deletion.
  1. +1 −1 source/_posts/2013-08-02-how-to-do-a-procedural-city-in-100lines.markdown
  2. +208 −0 source/_posts/2013-08-16-how-to-make-the-earth-in-webgl.markdown
  3. +13 −0 source/data/2013-08-16-how-to-make-the-earth-in-webgl/demo/Makefile
  4. +12 −0 ...e/data/2013-08-16-how-to-make-the-earth-in-webgl/demo/bower_components/threex.planets/.bower.json
  5. +13 −0 source/data/2013-08-16-how-to-make-the-earth-in-webgl/demo/bower_components/threex.planets/Makefile
  6. +97 −0 source/data/2013-08-16-how-to-make-the-earth-in-webgl/demo/bower_components/threex.planets/README.md
  7. +123 −0 ...-to-make-the-earth-in-webgl/demo/bower_components/threex.planets/examples/atmospherematerial.html
  8. +130 −0 ...013-08-16-how-to-make-the-earth-in-webgl/demo/bower_components/threex.planets/examples/basic.html
  9. +143 −0 ...013-08-16-how-to-make-the-earth-in-webgl/demo/bower_components/threex.planets/examples/earth.html
  10. BIN ...make-the-earth-in-webgl/demo/bower_components/threex.planets/examples/images/galaxy_starfield.png
  11. +161 −0 ...13-08-16-how-to-make-the-earth-in-webgl/demo/bower_components/threex.planets/examples/select.html
  12. +724 −0 ...e-earth-in-webgl/demo/bower_components/threex.planets/examples/vendor/three.js/build/three.min.js
  13. +94 −0 ...bgl/demo/bower_components/threex.planets/examples/vendor/three.js/examples/js/libs/dat.gui.min.js
  14. BIN ...08-16-how-to-make-the-earth-in-webgl/demo/bower_components/threex.planets/images/ash_uvgrid01.jpg
  15. BIN ...-08-16-how-to-make-the-earth-in-webgl/demo/bower_components/threex.planets/images/earthbump1k.jpg
  16. BIN ...8-16-how-to-make-the-earth-in-webgl/demo/bower_components/threex.planets/images/earthcloudmap.jpg
  17. BIN ...how-to-make-the-earth-in-webgl/demo/bower_components/threex.planets/images/earthcloudmaptrans.jpg
  18. BIN ...3-08-16-how-to-make-the-earth-in-webgl/demo/bower_components/threex.planets/images/earthmap1k.jpg
  19. BIN ...-08-16-how-to-make-the-earth-in-webgl/demo/bower_components/threex.planets/images/earthspec1k.jpg
  20. BIN ...3-08-16-how-to-make-the-earth-in-webgl/demo/bower_components/threex.planets/images/jupitermap.jpg
  21. BIN ...3-08-16-how-to-make-the-earth-in-webgl/demo/bower_components/threex.planets/images/marsbump1k.jpg
  22. BIN ...13-08-16-how-to-make-the-earth-in-webgl/demo/bower_components/threex.planets/images/marsmap1k.jpg
  23. BIN ...-08-16-how-to-make-the-earth-in-webgl/demo/bower_components/threex.planets/images/mercurybump.jpg
  24. BIN ...3-08-16-how-to-make-the-earth-in-webgl/demo/bower_components/threex.planets/images/mercurymap.jpg
  25. BIN ...3-08-16-how-to-make-the-earth-in-webgl/demo/bower_components/threex.planets/images/moonbump1k.jpg
  26. BIN ...13-08-16-how-to-make-the-earth-in-webgl/demo/bower_components/threex.planets/images/moonmap1k.jpg
  27. BIN ...3-08-16-how-to-make-the-earth-in-webgl/demo/bower_components/threex.planets/images/neptunemap.jpg
  28. BIN ...-08-16-how-to-make-the-earth-in-webgl/demo/bower_components/threex.planets/images/plutobump1k.jpg
  29. BIN ...3-08-16-how-to-make-the-earth-in-webgl/demo/bower_components/threex.planets/images/plutomap1k.jpg
  30. BIN ...13-08-16-how-to-make-the-earth-in-webgl/demo/bower_components/threex.planets/images/saturnmap.jpg
  31. BIN ...16-how-to-make-the-earth-in-webgl/demo/bower_components/threex.planets/images/saturnringcolor.jpg
  32. BIN ...-how-to-make-the-earth-in-webgl/demo/bower_components/threex.planets/images/saturnringpattern.gif
  33. BIN .../2013-08-16-how-to-make-the-earth-in-webgl/demo/bower_components/threex.planets/images/sunmap.jpg
  34. BIN ...13-08-16-how-to-make-the-earth-in-webgl/demo/bower_components/threex.planets/images/uranusmap.jpg
  35. BIN ...6-how-to-make-the-earth-in-webgl/demo/bower_components/threex.planets/images/uranusringcolour.jpg
  36. BIN ...16-how-to-make-the-earth-in-webgl/demo/bower_components/threex.planets/images/uranusringtrans.gif
  37. BIN ...13-08-16-how-to-make-the-earth-in-webgl/demo/bower_components/threex.planets/images/venusbump.jpg
  38. BIN ...013-08-16-how-to-make-the-earth-in-webgl/demo/bower_components/threex.planets/images/venusmap.jpg
  39. +8 −0 ...2013-08-16-how-to-make-the-earth-in-webgl/demo/bower_components/threex.planets/package.require.js
  40. +42 −0 ...16-how-to-make-the-earth-in-webgl/demo/bower_components/threex.planets/threex.atmospheredatgui.js
  41. +54 −0 ...-how-to-make-the-earth-in-webgl/demo/bower_components/threex.planets/threex.atmospherematerial.js
  42. +381 −0 .../2013-08-16-how-to-make-the-earth-in-webgl/demo/bower_components/threex.planets/threex.planets.js
  43. +76 −0 source/data/2013-08-16-how-to-make-the-earth-in-webgl/demo/index.html
  44. +2,019 −0 source/data/2013-08-16-how-to-make-the-earth-in-webgl/demo/vendor/require.js/require.js
  45. +37,875 −0 source/data/2013-08-16-how-to-make-the-earth-in-webgl/demo/vendor/three.js/build/three.js
  46. BIN source/data/2013-08-16-how-to-make-the-earth-in-webgl/screenshots/earth-bump-small.png
  47. BIN source/data/2013-08-16-how-to-make-the-earth-in-webgl/screenshots/earth-bump.png
  48. BIN source/data/2013-08-16-how-to-make-the-earth-in-webgl/screenshots/earth-color.png
  49. BIN source/data/2013-08-16-how-to-make-the-earth-in-webgl/screenshots/earth-diffuse-small.png
  50. BIN source/data/2013-08-16-how-to-make-the-earth-in-webgl/screenshots/earth-diffuse.png
  51. BIN source/data/2013-08-16-how-to-make-the-earth-in-webgl/screenshots/earth-specular-small.png
  52. BIN source/data/2013-08-16-how-to-make-the-earth-in-webgl/screenshots/earth-specular.png
@@ -143,7 +143,7 @@ This is what we call
This concept may be implemented in various ways:
for example in screen space with [screen space ambient occlusion or ssao](http://en.wikipedia.org/wiki/Screen_space_ambient_occlusion)
or in this
-[minecraft example from three.js](threejs.org/examples/webgl_geometry_minecraft_ao.html)
+[minecraft example from three.js](http://threejs.org/examples/webgl_geometry_minecraft_ao.html)
{% img left /data/2013-08-02-how-to-do-a-procedural-city/screenshots/screenshot-building-without-vertexcolor-small.png %}
@@ -0,0 +1,208 @@
+---
+layout: post
+title: "How To Make The Earth In WebGL?"
+date: 2013-08-16 10:13
+comments: true
+published: true
+categories:
+---
+
+So today we gonna learn how to display the earth in webgl.
+That's will be a nice introduction on material and textures.
+First let me show you the demo we gonna do
+
+<iframe width="425" height="349" src="http://www.youtube.com/embed/huTF047XVvQ" frameborder="0" allowfullscreen></iframe>
+
+<!-- more -->
+
+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>
+
+
+### 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 %}
+
+```javascript
+var geometry = new THREE.SphereGeometry(0.5, 32, 32)
+var material = new THREE.MeshPhongMaterial()
+var mesh = new THREE.Mesh(geometry, material)
+```
+
+TODO make a blabla on the geometry
+
+<br clear='both'/>
+
+### How To Do 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).
+When we apply it to a sphere, we got the image on the right.
+Here is the code to produce it.
+
+<br clear='both'/>
+
+```javascript
+material.map = THREE.ImageUtils.loadTexture('images/earthmap1k.jpg'),
+```
+
+### How To Do a Bump Map ?
+
+{% 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),
+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.
+Play with it to fit your needs.
+
+```javascript
+material.bumpMap = THREE.ImageUtils.loadTexture('images/earthbump1k.jpg')
+material.bumpScale = 0.05
+```
+
+### specular
+
+{% 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 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
+
+```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 ?
+
+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.
+
+```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
+})
+// create the mesh based on geometry and material
+var mesh = new THREE.Mesh(geometry, material)
+```
+
+### How To Render The Clouds
+
+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.
+So you need to make the code to build the texture based on those images.
+
+```javascript
+var geometry = new THREE.SphereGeometry(0.51, 32, 32)
+var material = new THREE.MeshPhongMaterial({
+ map : new THREE.Texture(canvasCloud),
+ side : THREE.DoubleSide,
+ opacity : 0.8,
+ transparent : true,
+ depthWrite : false,
+})
+var moonMesh = new THREE.Mesh(geometry, material)
+// add it to the earth mesh thus they move together
+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.
+This avoid artefacts on the edge of the earth.
+and finnaly we set ```opacity``` to make them more translucide.
+
+### How to Make It Rotate ?
+
+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
+```
+
+Now let's make the earth rotates!
+Now that we got the cloud mesh, we need to animate it thus they looks more realistic.
+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;
+})
+```
+
+### Here is the moon
+
+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;
+```
+
+### 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,0 +1,13 @@
+# makefile to automatize simple operations
+
+server:
+ python -m SimpleHTTPServer
+
+deploy:
+ # assume there is something to commit
+ # use "git diff --exit-code HEAD" to know if there is something to commit
+ # so two lines: one if no commit, one if something to commit
+ git commit -a -m "New deploy" && git push -f origin HEAD:gh-pages && git reset HEAD~
+
+install:
+ git submodule update --init
@@ -0,0 +1,12 @@
+{
+ "name": "threex.planets",
+ "homepage": "https://github.com/jeromeetienne/threex.planets",
+ "_release": "adce79d103",
+ "_resolution": {
+ "type": "branch",
+ "branch": "master",
+ "commit": "adce79d10346517012f9e37eaa17107ddc5ea623"
+ },
+ "_source": "git://github.com/jeromeetienne/threex.planets.git",
+ "_target": "*"
+}
@@ -0,0 +1,13 @@
+# makefile to automatize simple operations
+
+server:
+ python -m SimpleHTTPServer
+
+deploy:
+ # assume there is something to commit
+ # use "git diff --exit-code HEAD" to know if there is something to commit
+ # so two lines: one if no commit, one if something to commit
+ git commit -a -m "New deploy" && git push -f origin HEAD:gh-pages && git reset HEAD~
+
+install:
+ git submodule update --init
@@ -0,0 +1,97 @@
+threex.planets.js
+=================
+
+It is a three.js extension to display planets
+based on the data from [planetpixelemporium](http://planetpixelemporium.com/).
+It is a cool site, go check it out.
+It provides all the planets from the solar system.
+As a cherry on the cake, it has a 'atmosphere material'.
+It is released under MIT license.
+Here is some demos to show off
+
+* [earth demo](http://jeromeetienne.github.io/threex.planets/examples/earth.html)
+and check its
+[source](https://github.com/jeromeetienne/threex.planets/blob/master/examples/earth.html).
+It display a nice earth with cloud and even the moon.
+* [select demo](http://jeromeetienne.github.io/threex.planets/examples/select.html)
+and check its
+[source](https://github.com/jeromeetienne/threex.planets/blob/master/examples/select.html).
+Display all the planets available
+* [atmospherematerial demo](http://jeromeetienne.github.io/threex.planets/examples/atmospherematerial.html)
+and check its
+[source](https://github.com/jeromeetienne/threex.planets/blob/master/examples/atmospherematerial.html). a simple demo to show ```THREEx.createAtmosphereMaterial()```
+* [basic demo](http://jeromeetienne.github.io/threex.planets/examples/basic.html)
+and check its
+[source](https://github.com/jeromeetienne/threex.planets/blob/master/examples/basic.html).
+Good for educational purpose
+
+## How To install it
+
+You can install it manually or with
+[bower](http://bower.io/).
+for the manual version, first include ```threex.planets.js``` with the usual
+
+```html
+<script src='threex.planets.js'></script>
+```
+
+or with
+[bower](http://bower.io/)
+you type the following to install the package.
+
+```bash
+bower install -s threex.planets=https://github.com/jeromeetienne/threex.planets/archive/master.zip
+```
+
+then you add that in your html
+
+```html
+<script src="bower_components/threex.planets/threex.planets.js"></script>
+```
+
+
+## Usage
+
+to create uranus with its ring
+
+```javascript
+var mesh = THREEx.Planets.createUranus()
+scene.add(mesh)
+var mesh = THREEx.Planets.createUranusRing()
+scene.add(mesh)
+```
+
+to create the earth plus the clouds moving around
+
+```javascript
+var mesh = THREEx.Planets.createEarth()
+scene.add(mesh)
+var mesh = THREEx.Planets.createEarthCloud()
+scene.add(mesh)
+updateFcts.push(function(delta, now){
+ mesh.rotation.y += 1/8 * delta;
+})
+```
+
+## API
+
+Here is the list of all the functions.
+They all return a ```THREE.Object3d```.
+You can tune it to fit your need
+
+* ```THREEx.Planets.createSun()``` return the mesh of the Sun
+* ```THREEx.Planets.createMercury()``` return the mesh of Mercury
+* ```THREEx.Planets.createVenus()``` return the mesh of Venus
+* ```THREEx.Planets.createMoon()``` return the mesh of the Moon
+* ```THREEx.Planets.createEarth()``` return the mesh of the Earth
+* ```THREEx.Planets.createEarthCloud()``` return the mesh of the Earth Cloud
+* ```THREEx.Planets.createMars()``` return the mesh of Mars
+* ```THREEx.Planets.createJupiter()``` return the mesh of Jupiter
+* ```THREEx.Planets.createSaturn()``` return the mesh of Saturn
+* ```THREEx.Planets.createSaturnRing()``` return the mesh of Saturn's ring
+* ```THREEx.Planets.createUranus()``` return the mesh of Uranus
+* ```THREEx.Planets.createUranusRing()``` return the mesh of Uranus's ring
+* ```THREEx.Planets.createNeptune()``` return the mesh of Neptune
+* ```THREEx.Planets.createPluto()``` return the mesh of Pluto
+
+
Oops, something went wrong.

0 comments on commit ef390a9

Please sign in to comment.