Making-Of anatomische 3D Modelle Browser

Tools zur Darstellung von anatomischen 3D Modelle und medizinischen Sachverhalten im Web-browser per webGL.

Dieser Artikel beschreibt zwei weitere Tools um per webGL im normalen Web-browser anatomische 3D Modelle zu präsentieren. WebGL ermöglicht dies völlig ohne weitere Plugins im Browser installiern zu müssen.

Ausgangslage webGL für medizinische Themen:

Die Darstellung von 3D Modellen im Browser war lange Zeit nur durch spezielle Plugins möglich (wie z.B. Shockwave, Flash etc.). Generell war die mangelnde Verbreitung und Akzeptanz bei einer möglichen Produktion immer eines der Hauptprobleme. Mit der Implementierung von webGL in die aktuellen Versionen der gängigen Browser (weitere Informationen zu Browsern die webGL unterstützen) entfällt diese Problematik und ein Einsatz von medizinischen oder anatomischen 3D Modellen in Webseiten wird eine interessante Option.

Zu dem Thema webGL haben wir bereits in anderen Artikel einige Überlegungen angestellt:

  • Einmal haben wir in einem Artikel die Möglichkeiten der Verwendung von Sketchfab untersucht. Dieses setzt auch auf webGL, liefert web-taugliche Dateigrößen, hat aber den Nachteil das die Daten ausschließlich auf dem Sketchfab Server gehostet werden. Außerdem ist es ein reiner 3D Object Viewer, weitere Funktionalitäten bietet es nicht.
  • Ein weiterer Artikel befasste sich mit den Möglichkeiten aus Unity3D webGL Anwendungen zu generieren. Hier ist der Vorteil das die Inhalte selber gehostet werden können und grundsätzlich einer umfangreichen Funktionalität durch den hervorragenden Editor und der Unt erstützung von C# und JavaScript für Erweiterungen nichts im Wege steht. Leider waren die erzeugten Dateigrößen eine Enttäuschung: die getestete Datei kam in der webGL Anwendung auf 40mb und ist damit nicht sinnvoll im Internet einzusetzen. Hier wäre eine erneute Evaluierung jedoch sinnvoll, da der oben beschriebene Test der Anwendung sich auf eine veraltete Version bezieht und mittlerweile vielleicht weiter Optimierungen möglich sind.
  • Ein weiterer Artikel beschreibt die Möglichkeiten von 3d-PDFs und die Verwendung eines Tools um webGL Anwendung direkt zu erstellen. Bei letzterem handelt es sich um Finalmesh, diese stelle ich im folgenden ausführlicher und an einem konkreten Projekt vor.
webGL Verge3D
webGL Modell – Editierung der Logik mit Verge3D

Einsatz Finalmesh:

Die Software Finalmesh importiert 3D Modelle in verschiedenen Formaten und bietet in seinen Editoren dann die Möglichkeit das 3D Modell mit Informationen (Markups) zu versehen, die Materialien (Shader) zu editieren und das finale Modell dann als webGL Modell (oder auch als 3D-PDF) zu exportieren. Die Möglichkeit weitere Funktionalität zu implementieren bietet das Tool leider nicht. Für ein Projekt für ein webbasierendes Lernprogramm zu medizinischen Grundkenntnissen der Anatomie und Erkrankungen des Bewegungsapparates war genau diese Funktionalität gewünscht. Wir erstellten anatomische Modelle zur Hand, zum Ellenbogen und zur Schulter, mit denen der Nutzer im Rahmen des Lernprogramms seine anatomischen Kenntnisse interaktiv und räumlich vertiefen konnte.

finalmesh hand anatomie
Ansicht aus dem Editor von Finalmesh – webGL-App zur Anatomie der Hand

Neben (wirklich seltenen) abstürzen und Problemen mit transparenten Strukturen bewährte sich Finalmesh in diesem Projekt und erzeugte eine webtaugliche Anwendung was Ladezeiten und Performanz betraf. Das 3D Modell verfügt über 150.000 Flächen. Die Dateigröße war angesicht des komplexen Modells mit 3,6 MB gut, wobei 1,3 MB auf die 3D Daten und 2,6 MB auf die Texturen entfielen.

 

WebGL Anwendung eines 3D Modells der Anatomie der Hand:

starten webgl anwendung hand

Linke Maustaste: drehen. Rechte Maustaste/Mausrad: zoom. Klick auf blaue Punkte: Info zur Struktur

Experimente mit Verge3D:

Die Software Verge3D wurde von den gleichen Entwicklern erstellt die bereits Blend4web entwickelten. Im Gegensatz zu Blend4Web, welches nur für Blender verfügbar ist und wo die Logik der Anwendung in Blender selber erstellt wird, bietet Verge3D Schnittstellen zu Blender und 3DS MAX. Die Logik wird hier in einem browser-basierenden Node-Editor (Puzzles genannt) erstellt und dann mit dem aus der Software als im glTF Format exportierten 3D Daten verknüpft. Puzzles kann auch auf die umgebende Webseite welche das 3D Modell enthält zugreifen und ermöglicht damit eine nahtlose Integration in normalen Webcontent.

herz webGL verge3d
Anwendung Herzanatomie webGL

Das gezeigte Beispiel des interaktiven Herzens wurde mit der Test-Version der Software erzeugt. Damit ist es leider nicht gestattet das Endergebnis der webGL Anwendung zu zeigen. Dateigrößen und Performance waren vergleichbar mit der von Finalmesh. Die Editierung der Interaktivität mittels des Node-Editors bietet deutlich mehr Möglichkeiten – bei sehr komplexer Logik stellt sich sich jedoch die Frage nach der Übersichtlichkeit und Wartbarkeit der Logik.
 

editor verge3d
Editierung der Interaktivität von Schaltflächen in Verge3D:

Ausblenden von Teilen des Herzens für einen Blick in Ventrikel und Vorhöfe. Beschriftung an und aus.