Partager via

Details on the 3D Earth Rendering Sample

  • Article

Yesterday I posted a some screenshots of a 3D earth sample involving a mix of materials to achieve interesting visual effects.

Attached is the sample application(Requires V3.5 to run), and the essential core source code, which can be placed in a new WPF project, in conjunction with a set of suitable textures. It is built to run on WPF V3.5 as it incorporates the new ContainerUIElement3D type, to allow for interactivity over the 3D content such as ModelVisual3D objects. This provides a good opportunity to get a practical understanding of WPF's Material types(described in detail on the post linked here).

This scene was built from a set of 5 images:

  • Cloud map image with alpha channel or a Cloud Opacity map applied onto the OpacityMask
  • Earth daytime map
  • Earth nighttime map
  • Earth Specular map

The Geometry as you may expect was composed of a pair of spheres centered on the same point. The inner sphere model is used for the earth's surface, and has:

  • A daytime map applied on a diffuse material. This image is set to full opacity, so no blending of objects behind it will occur, and it will be softly illuminated by external lighting.
  • The nighttime map is applied on an emissive material. This material has an additive effect where it is rendered, with lighting having no impact(emissive materials render at full intensity). To cut the lighting out of the daytime surface, a moving OpacityMask can be applied.
  • A map of the earth's watery, reflective surfaces applied using a specular material. Specular materials, like emissive materials have an additive rendering effect, providing bright highlights on the ocean surfaces, while having no contribution over land.

The Cloud Model uses the same geometry as the earth, with a minor scale transform applied to make the clouds slightly extend beyond the radius of the earth. The clouds are rendered as a Diffuse Material, with the clouds applied. When used with the opacity mask, this produces a mixed effect of fully obscured cloud regions and fully transparent areas. This effect could be carried further with a series of low opacity, blueish diffuse materials to represent the Earth's atmosphere.

Finally, I placed these two models within a ContainerUIElement3D, applied an animated Rotation Transform to represent the Earth's daily spin. You may have heard - with UIElement behavior on 3D, we can now easily develop 3D UI behaviors, without worrying about hit testing and eventing plumbing. Here, I connected mouse event handlers from XAML and prepared corresponding 3D behavior in response to the events.

3D Earth Demo w-Source.zip

Comments