Page 4: Exercise 3: Sky Boxes (or: Not-Really-Sky-Boxes and THREE)

A Sky Box is a big object that surrounds the world on which you put a texture, so the background isn’t just a solid color. The idea is that it is infinitely far away (so all regular objects are in front of it).

A Sky Box is not just a big box (or Sphere) around the objects in the world! It needs to do special things to be “infinitely far away”. We discussed this in the lecture (video) about SkyBoxes.

Warning: some of this may not make sense if we haven’t talked about Z-Buffers in detail in lecture yet.

1. A SkyBox moves with the camera (so you can never get close to/pass through the wall). Think about it: if something is “infinitely far away” then moving towards it doesn’t make it get any closer.
2. A SkyBox is drawn with its depth values (for Z-Buffering) to be infinitely far away, so any object drawn is closer than it. Think about it: if something is “infinitely far away” everything that is finite is closer.
3. A SkyBox isn’t too huge (because then it might be beyond the far plane of the camera), but it works as if it is infinitely far because it is drawn first and #2. Think about it: “infinitely far” is beyond the “far” distance of the camera, so it wouldn’t be drawn unless we did something special.

A real skybox does three things, which aren’t obvious how to do in THREE:

1. Make the box always be centered around the camera.
2. Make it have infinite Z-buffer values (typically this is done by just turning off Z-writing when drawing it, and drawing it first so the clear values are kept).
3. Drawing the object first (with #2) so it appears huge (behind everything) even though it isn’t.

Unfortunately, #2 and #3 aren’t easy to do in THREE. #2 can be done by writing a custom shader (which we won’t get to until next week, or using a hidden parameter), and #3 requires controlling the order of drawing (which goes against the retained mode model).

Unfortunately, most of the example code for THREE simply makes a big cube (or sphere) - what I called a “fake skybox” in lecture. The first five tutorials we found online for “three.js skybox” all did this. But, it turns out that the “correct” approach is built into THREE.

Proper sky boxes are built into three! It does all of the three things for you. All you need to do is assign a CubeTexture to be the background of the Scene. For the CS559 Framework, we can refer to it with world.scene, given world is of class GrWorld.

Of course, confirming that the built in SkyBoxes are really SkyBoxes is hard because it’s not well documented. You can look at the THREE.JS source code (/libs/CS559-Three/src/renderers/webgl/WebGLBackground.js, around line 59).

Spheres and Cubes

If you’re putting “a box” around the world, you can choose the shape of the box. Since it’s infinitely far away (in principle) and covered with texture and not lit, the shape doesn’t matter that much. Both spheres and cubes work well. Cylinders are a less common alternative (but were common 20 years ago). There are pros and cons to each shape. But the differences generally do not outweigh the convenience: if your texture is for a cube or sphere, then use that appropriate geometry. It is possible to change textures from one form to another.

(Note: when we use THREE’s built in Sky Box feature via scene.background it seems that we must use a cube)

By the way, the texture for a shape (like the cube or sphere) that is designed to look right if your head is at the center of the shape (looking outward) in any direction is called an environment map because that is the most common usage of such textures. We’ll do environment mapping on the next page. However, for now, don’t be confused when we call the texture on the inside of a skybox an “Environment Map.” And, hopefully you aren’t confused that we still call it a box even if it is a sphere or cylinder.

As you might guess, an environment map for a cube is called a cubic environment map, an environment map for a sphere is called a spherical environment map, etc.

Since you should be curious…

• Cubic Environment Maps are a popular choice because they are easy to author. You just take 6 regular pictures that fit together. You can do this in the real world by getting a camera with a 90 degree field of view lens, and rotating it on a tripod (getting the up and down views can be hard). It is really easy in computer graphics to point the camera in 6 directions. Another advantage of cubic environment maps is that it just uses 12, usual triangles (albeit big ones). The down side is that the corners are father away than the centers of the sides which creates sampling issues, so if you’re not careful you can see the seams. Sometimes, all 6 faces are put into one image (see Figure 11.25 of FCG), while other times, the 6 faces are made into 6 separate square images.

• Spherical Environment Maps are a popular choice because all points are the same distance, so the sampling is more uniform. However, there are issues in putting texture coordinates on spheres (things tend to bunch up at the poles if you’re not careful). Spherical textures are actually easier than cubic ones to take with a regular camera: you just take a picture of a mirrored ball. Drawing a cubic environment map by approximating the sphere as lot of triangles has some issues - special algorithms exist for spheres. With THREE, you can use a sphere with the correct texture coordinates.

• Cylindrical Environment Maps (sometimes called Panoramic Maps) are an old choice, that was used in Apple’s Quicktime VR product in the mid-1990s. The intuition is that the top of the cylinder (ceiling) and bottom (floor) are usually boring, so we treat them as separate pieces. Then the interesting part of the world you get just by turning on one axis. Cylindrical panoramas are easy to capture (just place the camera on a tripod and turn) and don’t have the sampling issues of spheres (there are no poles). However, they don’t deal with the top and bottom in a uniform way.

In practice, you probably want to use cubic maps if you are making it yourself (since they look like pictures and are easy to understand). But in THREE, it’s easy enough to use spheres or cubes (the sphere primitive sets up texture coordinates so that equirectangular maps generally work OK). Understanding the differences between the map types can help you build your intuitions about texturing in general.

The most common form of images for environments are “equirectangular” images. This is basically unfolding a sphere map into a rectangle. There used to be a great converter on the web, but it seems to have disappeared. Here is another one I found: Panorama Converter on GitHub. It seems to work, but I haven’t tested it extensively. It doesn’t give much control over the resulting size of the cube faces, so you might have to resize them. If you find a better tool for converting formats, please post it on Piazza!

Note: THREE.JS’s CubeTextureLoader takes 6 separate images (one for each face of the cube), but be careful because sometimes the images are named incorrectly (front can be the bottom, etc.).

If you want to understand the conversion process, see page from Paul Bourke. His site has tons of information of panoramic imaging.

The Not-Really-A-SkyBox Exercise

Enough things on the web use the term “Sky Box” (but aren’t really “Sky Boxes”), that we will let you make “A Big Box with a texture on it that surrounds your world” for this exercise. Just make sure you realize why this isn’t really a sky box (which will make for a good exam question).

This is strange because real SkyBoxes are built in (maybe it’s a newer feature?). And really easy - just use a CubeTextureLoader and connect it to the Scene.background.

So, in this exercise, we make you do it both ways. Do a “fake skybox”, then do a correct skybox (preferably, using the same environment map). That way you can experiment with the difference. With the fake one, you should be able to fly up close to the wall (maybe even go through it). Put the fake skybox into box 4-1. Put the real skybox into 4-2.

What you must do:

1. Put some objects onto the ground plane. You can use stuff from other exercises, or just some primitives.
2. Put a big box (or sphere) around your world (4-1), or use Scene.background (4-2).
3. Find (or create) a cubic texture appropriate for a SkyBox, and place it on your big box. Preferably without lighting.

The big part of this (for the assignment) is #3. As described previously, these textures are commonly called Environment Maps. The idea is they should seamlessly wrap around so if you are in the box, it is what you would see as you looked around from the center. We recommend that if you find something meant for a Sphere, you convert it to a box.

Don’t forget to add the texture to the repo!

The code goes into 09-04-01.js ( 09-04-01.html) and 09-04-02.js ( 09-04-02.html). These two boxes should look really similar (or the same) until you fly up to a wall.

A Hint: Finding Environment Maps

To make an environment map, you need to make a full 360 picture - one that covers all directions. Taking these with a camera can be tricky (even if you have a special lens, you have to worry about having your feet in the picture). You can try painting one. Or you can find them on the web.

Often, if you find an environment map on the web, you will find them in an “HDR” format (high-dynamic range). We’ll discuss HDR later in the semester, but basically, the colors go from 0 to big numbers, rather than from 0-255. If you find one of these, you’ll need to convert it. I use PhotoShop, but there are other “HDR conversion tools” that are free.

My recommended web converter has gone away. As mentioned above, Panorama Converter on GitHub seems like a possible alternative.

We can also make environment maps using THREE. If you have a scene in THREE, you can make a special CubeCamera that takes the pictures in all directions you need. The tricky part is saving the images - however, generally you don’t have to. You can use them right away. We’ll do that later when we do dynamic texture maps.

Of course, if you get an image from the web, be sure to give proper attribution in 09-workbook.txt.

Summary: Cube Textures

In this exercise, you made a skybox (or a kind-of skybox). You also learned to use cube textures. This will be very useful for environment maps on Next: Exercise 4: Environment Maps .