Loading a skybox

A skybox is a method of creating backgrounds to make a computer and video games level look bigger than it really is. When a skybox is used, the level is enclosed in a cuboid. The sky, distant mountains, distant buildings, and other unreachable objects are projected onto the cube's faces (using a technique called cube mapping), thus creating the illusion of distant three-dimensional surroundings. A skydome employs the same concept but uses either a sphere or a hemisphere instead of a cube.

Processing of 3D graphics is computationally expensive, especially in real-time games, and poses multiple limits. Levels have to be processed at tremendous speeds, making it difficult to render vast skyscapes in real-time. Additionally, real-time graphics generally have depth buffers with limited bit-depth, which puts a limit on the amount of details that can be rendered at a distance.

To compensate for these problems, games often employ skyboxes. Traditionally, these are simple cubes with up to 6 different textures placed on the faces. By careful alignment, a viewer in the exact middle of the skybox will perceive the illusion of a real 3D world around it, made up of those 6 faces.

As a viewer moves through a 3D scene, it is common for the skybox to remain stationary with respect to the viewer. This technique gives the skybox the illusion of being very far away, since other objects in the scene appear to move, while the skybox does not. This imitates real life, where distant objects such as clouds, stars and even mountains appear to be stationary when the viewpoint is displaced by relatively small distances. Effectively, everything in a skybox will always appear to be infinitely distant from the viewer. This consequence of skyboxes dictates that designers should be careful not to carelessly include images of discrete objects in the textures of a skybox, since the viewer may be able to perceive the inconsistencies of those objects' sizes as the scene is traversed.

The source of a skybox can be any form of texture, including photographs, hand-drawn images, or pre-rendered 3D geometry. Usually, these textures are created and aligned in 6 directions, with viewing angles of 90 degrees (which covers up the 6 faces of the cube).

[source: https://en.wikipedia.org/wiki/Skybox_(video_games)]

Creating a skybox at runtime

If you need to create the Gorilla3D viewport at runtime, you can do it the following way:

Form1.pas
uses
  FMX.UITypes,
  Gorilla.Viewport,
  Gorilla.Context.Texturing;
 
// in our form (TForm1) we added a field named "FGorilla"
// in our form (TForm1) we added a field named "FSkyBox"
procedure TForm1.FormCreate(Sender: TObject);
var LBmp : TBitmap;
    LCMPath : String;
begin
  FGorilla := TGorillaViewport.Create(Self);
  FGorilla.Parent := Form1;
  FGorilla.Color  := TAlphaColorRec.Black;
 
  FSkyBox := TGorillaSkyBox.Create(FGorilla);
  FSkyBox.Parent := FGorilla;
  FSkyBox.Size   := Point3D(100, 100, 100);
 
  LCMPath := ExtractFilePath(ParamStr(0)) + 'cubemap\';
  LBmp := TBitmap.CreateFromFile(LCMPath + 'negz.jpg');
  try
    FSkyBox.Textures[TGorillaCubeMapFace.NegativeZ] := LBmp;
    LBmp.LoadFromFile(LCMPath + 'posz.jpg');
    FSkyBox.Textures[TGorillaCubeMapFace.PositiveZ] := LBmp;
    LBmp.LoadFromFile(LCMPath + 'negy.jpg');
    FSkyBox.Textures[TGorillaCubeMapFace.NegativeY] := LBmp;
    LBmp.LoadFromFile(LCMPath + 'posy.jpg');
    FSkyBox.Textures[TGorillaCubeMapFace.PositiveY] := LBmp;
    LBmp.LoadFromFile(LCMPath + 'negx.jpg');
    FSkyBox.Textures[TGorillaCubeMapFace.NegativeX] := LBmp;
    LBmp.LoadFromFile(LCMPath + 'posx.jpg');
    FSkyBox.Textures[TGorillaCubeMapFace.PositiveX] := LBmp;
  finally
    FreeAndNil(LBmp);
  end;  
end;

Since v0.8.1.2510 skyboxes are rendered as 3D box with a real cubemap texture. (before only by 6 planes with simple 2D textures)

DesignTime

Drag and drop the TGorillaSkyBox component onto your viewport and start by uploading the cubemap texture. This is done by loading all 6 faces of a box.

When downloading a precomputed skybox texture set, you will get 6 textures, which can be associated the following way:

PropertyFaceCommon TextureName
FrontSideTGorillaCubeMapFace.NegativeZnegz.jpg
BackSideTGorillaCubeMapFace.PositiveZposz.jpg
TopSideTGorillaCubeMapFace.NegativeYnegy.jpg
BottomSideTGorillaCubeMapFace.PositiveYposy.jpg
LeftSideTGorillaCubeMapFace.NegativeXnegx.jpg
RightSideTGorillaCubeMapFace.PositiveXposx.jpg

Next step: Volume-Rendering