2D FMX Components

Gorilla3D supports all default 2D Firemonkey components, like TLabel, TButton, TEdit and so on.

You can add those components as child of the TGorillaViewport instance to show them on top of the rendered 3D world.

FLabel := TLabel.Create(FGorilla);
FLabel.Parent := FGorilla;
FLabel.Text := 'TEST';

You can also integrate them inside of a layer component, like TLayer3D, TTextLayer3D, … Using a layer may lead to misleading result in first place due to false default settings in FMX.

One of the most popular used layer is a transparent 3D layer where 2D FMX components are placed into.

With default FMX settings this would look simply horrible.

Here an example of a TLayer3D with a TEdit, TLabel, TButton and TRadioButton component.

We need to change a few properties to get this working. To fix the shredded 2D rendering, we need to reset the resolution to a higher value than 50.

// set resolution higher than 72 at a size of [width=8, height=4]
FLayer.Resolution := 72;

Since v0.8.1 take a look at: Transparency

For elder versions: To fix the false transparency, we have to play around with opacity. Due to original FMX rendering order list generation, the opacity influences the order.

At the moment a component can only display 2 transparent children layers correctly.

if (Left.Opacity < 1) and (Right.Opacity >= 1) then
  Result := 1 // left layer will be in front
else if (Left.Opacity >= 1) and (Right.Opacity < 1) then
  Result := -1 // right layer will be in front
 

Setup for 2 layers:

TGorillaViewport
    TDummy (Opacity = 0.999)
        TLayer3D (Opacity = 1, Transparency = true)
            TImage
        TLayer3D (Opacity = 0.999, Transparency = true)
            TLabel

If we need more transparent layers, we need work around with TDummy objects.

TGorillaViewport
    TDummy (Opacity = 1)
        TLayer3D (Opacity = 1, Transparency = true)
            TImage
        TDummy (Opacity = 0.999)
            TLayer3D (Opacity = 1, Transparency = true)
                TImage
            TLayer3D (Opacity = 0.999, Transparency = true)
                TLabel

In the end, the result should look like this: