My "3D Data Visualization" Skill Sprint

The New Year 2016 has just begun and we are all at Embarcadero busy with new ideas and activities. This week I have the privilege to kick off the new series of "Developer Skill Sprint" webinars with "3D Data Visualization" session. This time every week we have one theme with two webinars. Each Tuesday there is Delphi skill sprint and each Thursday there is its C++Builder version. The full schedule of 2016 Spring Skill Sprints until March 31st is available at www.embarcadero.com/landing-pages/skill-sprints

I have always considered myself Delphi and Object Pascal developer and this where my key skills are, but I must admit coding in C++ is fun as well and today I have three 3D Data Modelling sessions purely using C++ language and Embarcadero C++Builder IDE.

The webinar is prerecorded and run at different hours to allow developers from all around the world to join and be able to participate in a live Q&A session.

Skill sprints are short, typically under 30 minutes long presentations for developers focusing on just one feature or topic and with focus on live demos. My "3D Data Visualization" session is no different. After just 5 minutes of introduction to basic FireMonkey 3D programming concepts I'm jumping directly to live demos. The first demo is "Earth and Mars" interactive visualization app that is built from scratch in either Delphi and C++Builder. The source code for both Delphi and C++ version of this demo can be downloaded from Code Central. The second demo is already prebuilt and it is "Molecule Hero" 3D interactive chemical molecules viewer with source code available from GitHub and also available from Google PlayStore to install directly on an Android device. I'm still working to get it uploaded to Apple AppStore.

FireMonkey 3D Architecture

The beauty of FireMonkey 3D programming is that you do not need to be expert in low level 3D API calls and arcane matrix calculations to be able to quickly build stunning interactive 3D apps with high-level reusable components. You can use either C++Builder or Delphi and from the very same project source code you can natively build your app for Android, iOS, Windows and Mac! FireMonkey provides an object-oriented abstraction layer, so you write your code once and it is translated to either DirectX calls on Windows or to OpenGL on other platforms. That's a big deal.

One of the key strengths of Delphi and C++Builder is the fact that it comes with the full source code, so you can look under the hood to see how things are implemented. In FireMonkey 3D the key class is "TContext3D" that provides abstract common model of different 3D APIs and depending for which platform you compile there is a different implementation class that does the actual job of calling into 3D APIs.

If you want to go low-level you can call "TContext3D" class methods directly, but most of the time it is easier and more productive to use high-level 3D object components provided by FireMonkey, like spheres, cubes, planes etc, to model your 3D worlds.

In addition to 3D objects there are also other specialised components like camera, light, model3d, dummy and proxy object that are useful in programming interactive 3D data visualisation.

"Earth and Mars" Demo

In the skill sprint I'm starting demo part from building a simple interactive 3D app from scratch. First you need to create a new "Multi-Device Application" in C++ or Delphi. Go for the "Blank Application" template and add to the form "TViewport3D" component and align it to "Client" so it occupies the whole screen. Add a TDummy component and two TSphere components to it that will represent Earth and Mars. Now add two "TTextureMaterialSource" components. There are many free textures for different planets in the Internet. Just download ones that you like and load them into texture components. The next step is to set "MaterialSource" properties of both spheres to point proper texture material source components. At this stage you should see a static visualization of two planets. In the demo I'm adding TFloatAnimation component to Earth and I'm animating its "RotationAngle.Y" property, so the planet nicely spins. The next step is to add some interactivity. FireMonkey 3D objects have user events so you can for example implement "OnClick" event on Earth sphere component to move it closer and further from the viewer. In the last step I'm adding camera component and code to change the point of view into the visualization.

The full source code of this demo is available from CodeCentral and you can also watch the skill sprint replay for the actual steps to build this demo with additional explanations.

"Molecule Hero" interactive 3D chemical molecule viewer

The last demo in the skill sprint is a 3D chemical molecule viewer that I have built as an example of a complete Delphi app that is available from an app store with all source code provided on GitHub under MIT open source license so it is effectively completely free for reuse.

In the previous 2015 Developer Skill Sprint series I have been showing how to publish this app to an AppStore without really going into the implementation details. This time the focus is on the actual code. The visualization code has the same structure as explained in the "Earth and Mars" demo. The only difference is that the chemical molecule model is built dynamically with spheres and cylinder based on information read from a PDB file, which is standard file format for exchanging molecule structure data.

In this very first version of "Molecule Hero" app PDB data for different molecules is hardcoded. The next step for me is to provide code to load arbitrary PDB from an URL, but this will require adding some more logic into PDB parsing code.

sd

The C++ 3D Data Visualization skill sprint starts soon, so I need to finish this post quickly:-)

I hope that you will enjoy every single Embarcadero Skill Sprint session in coming weeks. The full schedule of upcoming skill sprints is available at www.embarcadero.com/landing-pages/skill-sprints

The YouTube recording of my "3D Data Visualization" presentation is available at https://www.youtube.com/watch?v=8Nxykr0TAuc