NeHe Lesson 23 – Sphere Mapping

Sphere Mapping

Spherical Mapping

Sphere Mapping

This post on sphere mapping is part of ongoing series on implementing the legacy NeHe lessons (originally done in C++ with OpenGL 1.x) using the three.js library. This post covers  Lesson 23.

In computer graphics, sphere mapping (or spherical environment mapping) is a type of reflection mapping that approximates reflective surfaces by considering the environment to be an infinitely far-away spherical wall. This environment is stored as a texture (image) depicting what a mirrored sphere would look like if it were placed in that environment.

So how does this magic happen? Once again, three.js does almost all the heavy lifting. However, there are a couple  interesting wrinkles, notably how the texture gets mapped onto the sphere and how the background is rendered.

Please see the article linked above on the Geo-F/X website for all the details.

Mapping on to the Sphere

In earlier lessons (like Lesson 9 and Lesson 17) we covered UV coordinates and how they are used to map a texture onto a shape.  But in those cases, the texture was flat and the target shape was flat as well.  In this case, we use a texture that has a “fake” curvature to it. See the lesson for details on how this was done.  Here is the spherized image:

A spherized image.

You can most clearly see the effect of the spherical filter in the “halo” in the sky above  El Capitan.  The details on the math used to map the spherized image are in the article.

Rendering the Background

We map the texture onto a sphere which appears to be in the foreground and can be spun and moved independently of the background.  So how is this done?  The answer is that the demo contains two scenes, a foreground scene containing the sphere and a second scene which is the background. Then the background is a second scene that has a single plane geometry covering the entire view of the second scene.  Finally, the properties of the scene are set such that it is always rendered behind the first scene.  Details of all this are in the lesson itself.

The Lessons and Source

More information and a live demo of this lesson can be found at Geo-F/X here.  As always, the sources are on github here. Feel free to contact me at rkwright@geofx.com or comment on this article directly below.

NeHe Lesson 21 – Orthographic Projection

Orthographic Projection

Orthographic Projection

Orthographic Projection

This post is part of ongoing series on implementing the legacy NeHe lessons (originally done in C++ with OpenGL 1.x) using the three.js library. This post covers  Lesson 21 – Orthographic Projection. This is a relatively complex topic though three.js does most of the heavy lifting. Still, we’ll only hit the high points here.  Please see the article linked above on the Geo-F/X website for all the details.

Projections

Orthographic projection is a means of representing a three-dimensional object in two dimensions. It is a form of parallel projection, where all the projection lines are orthogonal to the projection plane. This results in every plane of the scene appearing in an affine transformation on the viewing surface.

There are many types of projections.  Two of the most common are perspective projections and orthographic projections.  In addition, there are many more.  You are probably familiar with many of the geographic projections.  These map the surface of sphere (such as the earth) onto a flat surface. Mercator is the most common, but many others exist.  A projections section on the Geo-F/X site covers many of these.

Orthographic Projection and GfxScene

As the lesson outlines, the GfxScene object has been expanded for this lesson to support orthographic projections.  The lesson shows how to use the new functionality.  It allows one to switch back and forth between orthographic and perspective projections for the same scene, like this:

An orthographic projections

A perspective projection

In a later lesson (Lesson 42) we’ll demonstrate how to use both projections in a single scene. This isn’t very commonly used, but it’s a cool technique.

The Lessons and Source

More information and a live demo of this lesson can be found at Geo-F/X here. As always, the sources are on github here. Feel free to contact me at rkwright@geofx.com or comment on this article directly below.