Papervision3D clouded planet Earth tutorial and source
PDFHere’s a tutorial about a possible way to create planets and indeed Earth. I’ll briefly explain the main textures used and from then on go through the code step-by-step to explain what I did and why.
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 😛
1 | /wp-content/uploads/2016/02/Planettutorial.swf, 500, 250 |
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:
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:
If anyone has suggestion on how to improve performance, please let me know!
Tags: actionscript • clouds • earth • game design • Papervision3D • perlin noise • planet
Lincoln
This is very cool stuff, Benny!
PS. Do you have twitter? I bet people would be interested in this stuff… also… do you post your articles on DZone.com? That’s a good way to get noticed!
Pingback: [Flash CS4] - Hallo Leute - Flashforum
Chris
Benny!
Great job on this animation! I love it! I just have one concern… the Earth rotates the other direction…
Benny Bottema Post author
Haha! Point taken Chris…
Pingback: Papervision3D DisplayObject3D helper baseclass for realtime updates « Benny’s Blog
josh
Excellent work Benny, and a very well-documented post. Regarding the fresnell glow, you might avoid compositing the additional layers/masks as well as the GLOWSIZE quandary by simply applying inner/outter GlowFilters to planetLayer.
Benny Bottema Post author
Hadn’t thought of that. Sounds logical! I’ll have to try and benchmark that sometime.
leo
Very nice! Sorry for the noob question but how do you make the source code work?
Richard
Could you provide the licenses required to use this demo in commercial products?