Flash and JavaScript 3D with Sandy-HX - Skybox

The Sandy-HX has a class called Skybox, which is a convenient way to create the 6 planes that are needed to complete the box that will become the skybox. However there are a few additional things that need to be done before the skybox is completed.

SkyBoxObject.hx

The SkyBoxObject class creates and textures the Sandy-HX Skybox primitive. First of all we create a new instance of the Skybox class. [code]

The Skybox contains 6 planes, and each needs to be textured. So we go through and apply a material to each of the 6 sides. [code]

This is a screenshot of the skybox being rendered in JavaScript. In theory each of the edges of the side of the skybox lines up exactly with its neighbour, but in practice inaccuracies in the floating point math leads to small, but very noticeable, gaps. To fix this up we need to resize each of the sides of the skybox to be slightly larger than normal. This means that edge of each of the sides extends just past the corner. The increase in scale only need to be minute, but it is enough to remove the problem seen in the screenshot. [code]

Culling is another issue we have to deal with. In order to maximize performance, Sandy-HX will not render any polygon it determines is not in the cameras current view. It uses the position of the polygon to determine its visibility, but this can lead to the problem shown in the screenshot where a polygon just on the edge of the cameras view is determined not to be visible, and is therefore not drawn. Clipping is used to fix this issue. By enabling clipping a polygon on the edge of the view of the camera is split, so the visible part of the polygon is still rendered. This does have a performance cost, but for a skybox it is necessary. [code]

The last thing we need to do is move the skybox so it is always centred on the camera. The skybox should never appear to move, which ironically means it should always be moved with the camera. The end result is that, relative to the camera, the skybox never appears to move, and always appears to be an infinite distance away. [code]

Skyboxes are an effective and popular way to show the world beyond the 3D scene that you are displaying. With Sandy’s built in Skybox class, and the few tricks described above, you can easily create a skybox for yourself.

Check out the demo here, and download the source code here.

Read more in the Flash and JavaScript 3D with Sandy-HX series