Förderjahr 2023 / Projekt Call #18 / ProjektID: 6745 / Projekt: weBIGeo
Entwarnung: Das ist kein Beitrag zum Thema MEAN vs LAMP, wie sie bereits zahlreich online existieren, sondern wir werfen einen Blick hinter die Kulissen von weBIGeo und sehen wie sich die Anforderungen zu einem klassischen Webprojekt unterscheiden.
C++ im Web
weBIGeo ist kein klassisches Web-Projekt, welches in JavaScript oder Typescript geschrieben wird. Vielmehr setzen wir für unser Projekt auf C++, eine Programmiersprache welche bereits viele Jahre als Platzhirsch für Echtzeitgraphik-Anwendungen gilt. Obgleich diese Entscheidung mit Nachteilen verbunden ist, überwiegen die Vorteile. Der Prominenteste davon ist die Möglichkeit große Teile unseres Open Source AlpineMaps.org Projekts wiederzuverwenden.
Das große Herausforderung: C++ ist nicht direkt im Browser ausführbar und war dementsprechend viele Jahre für das Web-Development uninteressant. Abhilfe hierfür schaffte im Jahr 2017 Emscripten und WebAssembly. Emscripten ist ein Compiler, welcher ermöglicht C++ Code in eine binäre Form überzuführen, die der Browser versteht. Diese binäre Darstellung folgt einem bestimmten Format: WebAssembly (kurz WASM). WASM-Code wird mittlerweile von allen gängigen Browsern unterstützt.
C++ selbst ist eine maschinennahe Sprache, welche im Standard zwar bereits einiges an Funktionalität bietet, aber für große Projekte oftmals um Bibliotheken und Frameworks erweitert werden muss. Ein solches Framework, welches auch von AlpineMaps.org Projekts verwendet wird ist Qt.
Über Qt
Qt ist ein C++ Framework zum Entwickeln von plattformübergreifenden Anwendungen. Es ermöglicht uns das Alpine-Maps.org Projekt nativ auf Desktop- und Android-Geräten sowie auch im Web laufen zu lassen - und das mit nur minimalen Anpassungen und Änderungen im Source-Code. Weiters bietet uns Qt eine Vielzahl an standardisierten Funktionalitäten, welche die Entwicklung erleichtern.
Was Qt so besonders und auch für AlpineMaps.org relevant macht: Es bietet die Möglichkeit plattformübergreifend Graphical User Interfaces (GUI) zu modellieren. Seit 2009 zusätzlich in einer eigens entwickelten Sprache: QML.
Quick Modelling Language (QML): QML ist ein Bestandteil des Qt-Frameworks und eine mächtige deklarative Programmiersprache, um moderne User-Interfaces zu gestalten. In ihrer Syntax gleicht sie einer Kombination aus JSON und JavaScript, in ihrem Umfang ist sie vergleichbar mit einem (reduzierten) Set aus HTML, CSS und JavaScript. Sie kann direkt mit Qt Paradigmen wie Properties, Signals und Slots interagieren und fügt sich dementsprechend nahtlos in die Qt-Entwicklungsumgebung ein.
Die Problematik: GUI für weBIGeo
Nach diesem kurzen Ausflug in die Welt von C++, Emscripten und Qt, wird das Verständnis für unsere eigentliche Problematik, die wir in diesem Post besprochen wollen einfacher: Wie bereits mehrmals angekündigt, soll weBIGeo einige Funktionalitäten von AlpineMaps.org, wie z.B. die Kamera oder das Tile-Fetching bekommen. Dementsprechend war es für uns naheliegend auch das User-Interface (geschrieben in QML) zu übernehmen und für unsere Zwecke zu adaptieren.
Hier wurden allerdings drei prominente Nachteile von dem Emscripten/Qt/QML Workflow sichtbar:
Dateigröße: Für native Anwendungen vernachlässigbar, allerdings im Web durchaus relevant: Unter Benutzung von Qt kann die generierte WASM-Datei schnell sehr groß werden, vor allem durch Benutzung von QML. Um die Dateigröße und somit auch die Ladezeit der Website möglichst gering zu halten, werden wir für das weBIGeo-Projekt nach Möglichkeit auf große Bibliotheken verzichten. Bestenfalls schaffen wir es die Abhängigkeit von Qt auf das QtCore-Modul zu reduzieren.
Flexibilität: Obgleich die grafischen Module aus dem Qt-Framework bereits viele Backends wie Vulkan, Metal oder DirectX unterstützen, gibt es leider (noch?) keinen direkten Support für WebGPU. Wir bräuchten also verschiedene Grafik-Schnittstellen für GUI und Visualisierung.
Lösungen für dieses Problem:
- Transparenter WebGL-Canvas für das QML GUI mit dahinterliegendem WebGPU-Canvas für die Visualisierung
- Dear ImGui als Framework mit WebGPU-Backend
- HTML/CSS -GUI welches über Emscripten-Bindings und Javascript mit dem C++ Kern der Anwendung kommuniziert.
Linkgeschwindigkeit: Die Erstellung von WASM-Dateien mit Emscripten ist wesentlich zeitaufwendiger als mit nativen Compilern wie GCC oder MSVC. Dieser Prozess wird durch große Bibliotheken wie Qt zusätzlich verlangsamt. Das Kompilieren vor allem im Release-Mode dauert für AlpineMaps.org - aber auch bereits für das kleine Clocks-Beispiel von Qt - mehrere Minuten! Das kann während der Entwicklungsphase besonders störend sein und die Effizienz erheblich beeinträchtigen.
Als Lösung haben wir uns zum Ziel gesetzt weBIGeo auch nativ kompilieren zu können. Um das zu erreichen, werden wir Dawn verwenden. Dawn ist die Implementierung des WebGPU-Standards für den Google Browser Chrome.
Fazit
Um schnelle Entwicklung zu gewährleisten, werden wir weBIGeo, vor allem in der Anfangsphase, so einrichten, dass wir sowohl in das Web als auch nativ kompilieren können. Für das User-Interface verwenden wir Dear ImGui, weil es out-of-the-box WebGPU als Rendering-Backend unterstützt. ImGui ist ein kleines, performantes Framework, das perfekt für Rapid Development geeignet ist. Im Umfang ist es allerdings nicht mit den großen Playern wie QML oder HTML/CSS vergleichbar. Sollten wir während unseres Projekts an dessen Grenzen stoßen, werden wir neu evaluieren, ob in Zukunft weBIGeo hinter einem QML- oder einem HTML/CSS-Interface strahlen wird.
___________________________________________________________________________________________________________________
Für die besonders interessierte LeserIn:
Im Rahmen unsers Projekts haben wir mehrere Demos implementiert. Den folgenden zwei Beispielen haben wir dabei besondere Aufmerksamkeit geschenkt (Für die Demos sind Chrome oder Firefox Nightly mit aktiviertem WebGPU erforderlich):
WebGPU hinter QML: Ein modifiziertes QML Clocks Beispiel, kombiniert mit dem WebGPU cross-platform tutorial. Es zeigt einen WebGL-Canvas mit QML und einem dahinterliegenden WebGPU-Canvas zeigt. Draw-Commands für beide Canvas werden über C++ abgesetzt.
WebGPU mit ImGui hinter HTML/CSS: Diese Demo zeigt eine modifizierte Version des WebGPU C++ Guide wo wir sowohl ImGui, aber auch ein VUE-Frontend als GUI benutzen.
Eine genaue Erläuterung der Unterschiede und dem Aufbau der Demos würde den Umfang dieses Blog-Eintrags sprengen. Gibt es allerdings spezielle Fragen zur Implementierung stehen wir jederzeit und gerne zur Verfügung.
___________________________________________________________________________________________________________________
