Environment Maps

1. Mirrors and other reflective surfaces can’t be directly rendered in the WebGL pipeline.
1. The model only allows for direct illumination
2. To approximate this, a two phase process can be used
1. Render scene without mirror, camera at the mirror and pointing normal to the mirror
2. Use rendered scene as a texture
3. Difficulties
1. Mirror is missing from the scene in the first pass
2. If the mirror is to move, then we need more in the texture, perhaps the whole enviornment
4. Project to a sphere
1. Project the scene to the surface of a sphere
2. This will stand in for the environment
3. A reflective surface will get painted with texture from the sphere, determined by following lines of reflection from the camera to the mirror to the sphere
5. Using a sphere is computationally intensive.
1. WebGL supports using a cube map
1. The image to the left shows
1. the view vector $\vec{v}$ from a point to the camera
2. The normal vector $\vec{n}$ at the point of interest
3. The reflected vector $\vec{r}$
2. Supply textures for each side
6. Video Demonstration
1. Photos taken in my back yard