bachelor-thesis-flutter-elinux/chapters/06_implementierung_der_features/02_benchmark.md

## Benchmark Feature

Das Benchmark Feature zeigt auf der Startseite einen
Raster aus Karten mit den verschiedenen Benchmark Tests,
welche ausgewählt werden können (siehe Abbildung \ref{benchmark}).
Im folgenden wird jeder Benchmark Test genauer beschrieben.

\pagebreak

\begin{multicols}{2}

\begin{figure}[H]
\caption{Die Startseite des Benchmark Features}
\label{benchmark}
\centering
\shadowimage[width=7cm]{./assets/screenshots/benchmark.png}
\end{figure}

\begin{figure}[H]
\caption{Flame Sprite Rendering Benchmark mit Ergebnis}
\label{benchmarkSpriteFinished}
\centering
\shadowimage[width=7cm]{./assets/screenshots/benchmarkSpriteFinished.png}
\end{figure}

\end{multicols}

### Flame Sprite Rendering Benchmark

Der "Flame Sprite Rendering Benchmark" testet die Fähigkeit der
Engine, eine große Anzahl von Sprites zu rendern. Der Test basiert
auf einen offiziellen Benchmark der Flame Engine, welcher auf
GitHub verfügbar ist [@FlameExamplesLib]. In diesem kann der Nutzer
auf eine beliebige Position auf dem Bildschirm klicken und pro
Klick werden 100 weitere animierte Sprites hinzugefügt. Dabei kann
die Framerate beobachtet werden. Das Problem bei diesem Test ist,
dass der Test nicht automatisiert ist und 100 Animationen pro Klick
eine hohe Anzahl ist, besonders für leistungsschwache Geräte wie
dem Raspberry Pi. Daher wurde der Test so angepasst, dass mit einer
Verzögerung von 50 Millisekunden automatisch für 30 Minuten ein
weiterer Sprite immer dann hinzugefügt wird, wenn die Framerate
über 59 liegt. Am Ende des Tests wird die Anzahl der Animationen
ausgegeben, die in den 30 Minuten hinzugefügt werden konnten. Dies
ist in Abbildung \ref{benchmarkSpriteFinished} zu sehen.

Der Benchmark Test ist aus verschiedenen Gründen nach mehreren
Versuchen so entstanden. Ohne die Verzögerung von 50 Millisekunden
werden zu viele Sprites zu schnell hinzugefügt, was dazu führt,
dass das Ergebnis immer wieder große Schwankungen aufweist. Ein
Grund dafür ist, dass in der kurzen Zeit so schnell Sprites hinzugefügt
werden, dass die Framerate Anzeige nicht mehr hinterherkommt und
zufällig an verschiedenen Stellen das Limit erreicht. Mit der Verzögerung
fiel dann auf, dass die Render Engine sich immer wieder
nach einer gewissen Zeit von wenigen Sekunden oder manchmal bis zu ungefähr einer Minute wieder
einfangen kann. Das bedeutet, dass die Framerate dann wieder für einen
kurzen Moment über 59 Bilder pro Sekunden erreicht. Der Test
wurde deswegen auf 30 Minuten gesetzt, da in diesem Zeitraum
sicherer der tatsächlich höchste Wert erreicht wird. In den
Ergebnissen konnte auch bewiesen werden, wie der Test
sehr genau immer sehr ähnliche Ergebnisse liefert und so die
Leistung der Render Engine von Flutter gut getestet werden kann.

### Rogue Shooter Benchmark

Der "Rogue Shooter Benchmark" ist ein weiterer Leistungstest mit der
Flame Engine, welcher auch auf einen offiziellen Benchmark der Flame
Engine basiert und auf GitHub verfügbar ist [@FlameExamplesGames].

Dieser Test ist ein Demo Spiel, welches nicht weiter im Code
verändert wurde von seiner Quelle. Im Spiel bewegt man das Raumschiff
per Touch Steuerung und schießt auf eine hohe Anzahl von anderen Raumschiffen,
dabei wird nur bei der Bewegung geschossen. Mit dem Test wird
kein Ergebnis automatisch ausgegeben, sondern man kann interaktiv
die Reaktionszeit und die Framerate beobachten. Das Ergebnis ist
so nicht ganz genau, aber das muss es hier nicht sein, da es
nur um einen groben Stresstest geht bei dem visuell beobachtet
werden kann, ob die Framerate stabil bleibt und ob das Raumschiff
flüssig bewegt werden kann (siehe Abbildung \ref{benchmarkFlame}).

### VSync Test

Der "VSync Test" testet aus, ob es so genannte "Tearing" Effekte
gibt, welche entstehen, wenn die Framerate nicht mit der Bildwiederholrate
des Bildschirms synchronisiert ist. Im Test werden schwarze Rechtecke
von rechts nach links über den Bildschirm bewegt (siehe Abbildung \ref{benchmarkVsync}). Falls es zu
Tearing Effekten kommt, kann man das an den Rechtecken beobachten,
dass diese dann nicht mehr flüssig bewegt werden. Der Test nutzt
zur Grafikkartenbeschleunigung einen Shader, welcher auf der bekannten
Shader Toy Webseite verfügbar ist [@beautypiShadertoy]. Dadurch
wird der Test durch die Grafikkarte beschleunigt. Flutter
erlaubt es normalen GLSL Shader Code in der Engine zu verwenden, der Code
muss dazu nur manchmal leicht angepasst werden [@googleinc.WritingUsingFragment].
Der Shader Code von Shader Toy musste nur leicht angepasst werden.

\pagebreak

\begin{multicols}{2}

\begin{figure}[H]
\caption{Der Rogue Shooter Benchmark}
\label{benchmarkFlame}
\centering
\shadowimage[width=7cm]{./assets/screenshots/benchmarkFlame.png}
\end{figure}

\begin{figure}[H]
\caption{Der VSync Test}
\label{benchmarkVsync}
\centering
{\shadowimage[width=7cm]{./assets/screenshots/benchmarkVsync.png}}
\end{figure}

\end{multicols}

### Video Benchmark

Im Video Benchmark kann ein Video in den Auflösungen 720p, 1080p und 4K
abgespielt werden. Dieser Test funktioniert nur mit dem Flutter-Pi
Embedder, da zum Zeitpunkt der Implementierung nur für Flutter-Pi eine einfache Video Unterstützung
durch das _flutterpi_gstreamer_video_player_ Paket verfügbar war
[@Flutter_packagesPackagesFlutterpi_gstreamer_video_player]. Im Test
kann man visuell beobachten, ob das Video flüssig abgespielt werden
kann.

### Simple Tiles Map Benchmark

Der "Simple Tiles Map Benchmark" testet die Fähigkeit der Engine,
eine Karte mit einer hohen Anzahl von Bildern zu rendern, welche als Kacheln
in einem Raster aneinandergesetzt werden. Es wurde hierfür
das bestehendes Paket _simple_tiles_map_ verwendet, der Code ist
auf GitHub verfügbar [@danielquisbertDanielquisbertSimple_tiles_map2023].
Im Test kann man visuell beobachten, ob die Karte flüssig bewegt
werden kann und wie schnell die Tiles aus dem Internet geladen werden können
(siehe Abbildung \ref{benchmarkMap}).

\pagebreak

\begin{multicols}{2}

\begin{figure}[H]
\caption{Der Video Benchmark}
\label{benchmarkVideo}
\centering
\shadowimage[width=7cm]{./assets/screenshots/benchmarkVideo.png}
\end{figure}

\begin{figure}[H]
\caption{Der Map Benchmark}
\label{benchmarkMap}
\centering
\shadowimage[width=7cm]{./assets/screenshots/benchmarkMap.png}
\end{figure}

\end{multicols}

<!-- \begin{figure}[h]
\caption{Example caption}
\centering
\begin{minipage}{7cm}
\dirtree{%
.1 benchmark/.
.2 business/.
.3 flame/.
.4 rogue\char`\_shooter/.
    .4 sprite\char`\_renderer/.
.2 data/.
.3 models/.
.4 benchmark.dart.
.4 ember.dart.
.3 benchmarks\char`\_list.dart.
    .2 presentation/.
    .3 widgets/.
    .4 benchmark\char`\_card.dart.
.3 benchmark\char`\_screen.dart.
    .3 map\char`\_benchmark\char`\_screen.dart.
    .3 rogue\char`\_shooter\char`\_screen.dart.
    .3 sprite\char`\_benchmark\char`\_screen.dart.
    .3 video\char`\_benchmark\char`\_screen.dart.
    .3 vsync\char`\_benchmark\char`\_screen.dart.
}
\end{minipage}
\end{figure} -->