I had to tone down the size and fps, and leave out the bumpmap for this demo because my Opera browser was halting when I added the other images and clouds swf demo :P

(notice the dynamic clouds and the glow around the globe)

• Download Clouded planet Earth source

On my core 2 duo laptop I get about 20-25 fps whith a slightly larger stage size and the movie set to 30 fps. Although the planet looks very nice to me, I also realize it isn’t very practical for games or other realtime simulations. To get better fps, you can remove the bumpmap texture, replace the realtime clouds with a fixed texture, user fewer segments in the spheres, zoom out more, or use lower resolution textures for land- and cloud materials. A combination of two or more of these suggestions should easily get you above 35 fps.

Used Ingredients

I’ll get into the explanations later, but here are the ingredients used in this example:

- A sphere for geological data (land texture)
- Another sphere for clouds
- two planes that mask a perfect circle for the spheres
- a plane that contains the fresnell glow on top

On the spheres I’ve used two phongshaded materials of which one has the land texture with a bumpmap for mountains and stuff, and the other contains the clouds texture with a runtime maintained perlin noise map applied to the alpha channel.

On the masking planes I’ve used a simple gradient circle shaped fill on the alpha channel.

On the glow plane I’ve used a gradient circle fill with a blue color and alpha channel for nice fading.

There’s also a pointlight in there that represents the sun (hits earth top-right).

Main textures

Earth surface

I took the public Earth surface texture (Blue Marble) from NASA, which I used on the sphere. On the rightside you can see it applied to the sphere with phongshader.

The shown image is about the half of the size I used for the used texture. One thing I’ve noticed is how large the texture needs to be to get some decent quality when applied to a sphere. Maybe there’s some room for optimization there…

Clouds surface

For the clouds I initially started with the public clouds texture from NASA, but when I applied the dynamic visibility map it turned out I didn’t get enough cloud coverage, because in effect now two visibly maps were applied: nature’s own, hardcoded in the texture, and my own applied in runtime.

So I ended up mirroring the original clouds texture in both dimensions to get much more cloud coverage, so that when I apply my own runtime visibility map I get about as much cloud coverage as in the original image. When applied to the sphere, it is also subject to the Phong shader I’ve used.

 

I’ve increased overall brightness to get more out of the less dense clouds, but I’ve also increased contrast to get the clear shapes of the clouds. Then I’ve applied the image itself as its own alpha channel and played around with its visibility until it became what you see above.

For the runtime visibility map I’ve used the ever amazing perlin noise effect. Since perlin noise works with a phase, I can use that to animate perlin noise and apply the results to the alpha channel of the clouds texture. On a straight texture, it looks like the following example:

(click to see in action)

You can probably imagine how hard this must be to render each frame: a large clouds texture with alpha channel modified each frame by a new perlin noise map, with a phong shader applied. I see how this won’t work in a game, so I’ll probably use a fixed clouds texture in the future, but right now I’m satisfied with the effect.

Code walkthrough

Aside from the actual structuring of the code and Papervision3D usage, there are some interesting aspects to this demo. For example, there’s the Earth’s light glow, and the use of masking discs to disguise the low quality of the spheres. I’ve explained everything in details on this on the following page:

• Read the Earth code walkthrough

If anyone has suggestion on how to improve performance, please let me know!

trackback