http://www.swirlx3d.com/tutorial003.htm
3/9/2016
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
Background Colors
below the viewer.
Click on image to start 3D demo.
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 ground color starts at (0.3 0.45 0.2) directly below the viewer, and changes to (0.25 0.4 0.15) at 1.53
radians, which is below the horizon. The color then changes to (0.2 0.35 0.1), which is almost at the
horizon. When painting the horizon, the ground color is considered to be in front of the sky color.
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.
106757142
1/3
http://www.swirlx3d.com/tutorial003.htm
3/9/2016
Background Textures
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 Texture
Background Node is given below.
Click on image to start 3D demo.
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.
106757142
2/3
http://www.swirlx3d.com/tutorial003.htm
3/9/2016
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.
106757142
3/3