Tutorial: Background

A color background can be formed be specifying a series of colors to be used for the sky and ground colors. In this case three colors have been given for the sky. The first color is a blue which is used for the color directly overhead (at 0 radians). The second color is a paler blue that is used at 1.4 radians. Since this is less than 90 degrees it is above the horizon. The last color is almost white and starts at 1.5 radians, which is somewhat above the horizon. This color continues to pi radians (or 180 degrees), which is directly below the viewer.

Background { 
  groundAngle [ 1.53, 1.57 ]
  groundColor [ 0.3 0.45 0.2, 0.25 0.4 0.15, 0.2 0.35 0.1 ]
  skyAngle [ 1.4, 1.5 ]
  skyColor [ 0.2 0.2 1, 0.5 0.5 1, 0.9 0.9 1 ]
}

The illustration at the left is the dialog in SwirlX3D that is used for for editing the colors and textures in a Background Node. The dialog has three panels for Sky Colors, Ground Colors and Textures. This dialog can be accessed by right clicking on any background node in the node tree of SwirlX3D and selecting Edit Dialog from the popup menu.

The frontUrl field of the Background Node is a list of image files that can be used as the background in front of the viewer. The browser plug-in will use the first image that is available. Similar textures can be specified in the backUrl, leftUrl, rightUrl, topUrl and bottomUrl fields. The texture can be in PNG or JPEG format. GIF is also supported by many plug-ins, but it's support is not guaranteed. In the case illustrated image file is called bkgnd1.png. The code for the Background Node is given below.

Background {
    frontUrl "bkgnd1.png"
    backUrl  "bkgnd1.png"
    leftUrl  "bkgnd1R.png"
    rightUrl "bkgnd1R.png"
}

Since the image does not appear to be distant enough, the image could be duplicated and then flip the left and right sides horizontally. Since the far left and right edges now match up, the same image could be used on four sides. Some tidying up is necessary where the bookmatched edges meet but this is a quick way of getting a reasonable background.

After the image has been extended horizontally, it is important to correct the shape of the image. If the image is not square it will be distorted. After the picture has been extended to a square, the top and bottom can be flood filled in an image editor to closely match the edges of the image.

This is the orignal image that was used for the background.

This is the image that was duplicated to give a greater sense of distance. The result is that as the user turns around there will be eight copies of the image rather than just the four at front, right, back, and left.