FireMonkey in 3D

FireMonkey user interface controls offer a powerful multi-platform and multi-device development solution based on a single source code, with Delphi offering you the ability to build a native app for each target operating system. There are other solutions in this space, some of them more popular, even if not as powerful. What is unique to Delphi is having a component library, similar to the 2D one, for 3D programming. With FireMonkey, we can create fully cross-platform GPU-powered GUIs, based on a specific 3D API on each platform.

In this chapter, we are going to add the third dimension to our FireMonkey projects. We will cover the following points:

• Cross-platform 3D rendering
• Direct use of Context3D
• Ready-to-use 3D objects
• Mixing 3D and 2D

The objective of this chapter is to learn FireMonkey 3D programming and how to build interactive cross-platform 3D GUIs. As usual, we’ll do this by going over demos – showcasing different...

Technical requirements

The examples in this chapter work in any version of Delphi. Their complete source is available at the following link: https://github.com/PacktPublishing/Expert-Delphi_Second-edition

Cross-platform 3D rendering

Similar to the 2D side, abstracting away the underlying 3D API from the programmer is the foundation of FireMonkey 3D graphics architecture. On top of this basis, there is the second pillar: rapid application development with components. The FireMonkey framework comes with pre-built reusable 3D components that make it easy to write complex 3D applications.

In FireMonkey, it is very easy to create sophisticated, GPU-powered 3D user interfaces using reusable visual components that let you focus on your business application logic instead of spending time on writing low-level 3D API code.

There are different 3D APIs available on different operating systems supported by the FireMonkey library. The standard API for rendering 3D graphics on mobile targets is a cut-down version of the OpenGL library, called OpenGL ES. On desktop targets, FireMonkey supports DirectX on Windows and full OpenGL on Mac. All these APIs have different interfaces and abstractions...

Direct use of Context3D

Similar to FireMonkey 2D architecture, there are two possible approaches to 3D rendering. We can render in code or use reusable components. The first path is what is used by many other programming languages and development environments, and it is what we are going to cover in the first part of this chapter. The main issue is that the more complex and sophisticated our 3D visualization is, the more complex our 3D rendering code becomes.

Using rapid application development with components very quickly pays off as we typically do not need to write too much code to build a great user experience with interactive 3D worlds. This is what we are going to focus on later in the chapter.

As mentioned, the main interface for calling 3D APIs in a cross-platform way in FireMonkey is the TContext3D class. For this reason, let’s start by building a simple project that is going to use the TContext3D class directly in code.

The starting point is to create a new...

Ready-to-use 3D objects

In the first part of this chapter, we looked into some of the low-level and direct APIs for building 3D apps in FireMonkey. Now let’s start looking in more detail into the ready-to-use components.

There are different 3D objects that we can use in our Delphi FireMonkey apps, from really simple ones, such as TStrokeCube or TGrid3D, that just render a few lines in 3D space, to more complex components that maintain their own vertex and index buffers for drawing complex geometries with triangles. This is a typical approach for rendering arbitrary geometries in 3D apps such as mobile games and it requires quite a lot of coding.

At the lowest level, all 3D objects inherit from the TControl3D class, which introduces location and transformations in 3D space. This class also adds interactivity to all 3D controls by implementing different mouse events that are translated to touch events on mobile targets. These user events have different parameters that provide...

Mixing 3D and 2D

In FireMonkey, you can mix 2D with 3D. In a 3D form, we can use 2D user interface controls, or we can embed the special TViewport3D component in a standard FireMonkey 2D form to do some 3D rendering.

In this example, we are going to add some special visual effects by building a 2D user interface in the 3D space. This will allow the user to interact with the app in a traditional way, but we could do some extra things such as rotating or moving the whole user interface in 3D space for a surprising user experience.

On the Tool palette, we can find the 3D Layers category with different 3D controls for using normal 2D controls. In this demo, we will use the TLayer3D component to pretend that the user interface is 2D, but at any moment in time, we can do something in 3D.

These are the steps for building the app:

1. Create a new multi-device Delphi project and select Blank Application as the application type.
2. Save the main form’s unit as uFormTwistMe...

Summary

In this chapter, we have explored the world of FireMonkey 3D programming.

With components, FireMonkey parenting architecture, and cross-platform rendering, it is possible to build stunning 3D interactive visualizations with little or no code that can be compiled for all major mobile and desktop platforms. That’s a unique capability in the market today!

In the next chapter, we are going back to 2D controls, and we’ll delve into one of the most important aspects of FireMonkey architecture: styling!