Das Evergine-Template für React

Evergine, die leistungsstarke Rendering-Engine für die Industrie, hat soeben ein neues React-Template veröffentlicht, das die Entwicklung moderner 3D-Anwendungen im Web vereinfachen soll. In diesem Artikel zeigen wir ausführlich, wie Sie das neue Template nutzen können und welche Architektur dahintersteht.

Erste Schritte mit Evergine React

Der Einstieg mit dem Evergine-Template für React ist einfach. Wählen Sie beim Anlegen eines neuen Projekts das Template React SPA aus, geben Sie Projektname und Speicherort an – und schon kann es losgehen!

Nahtlose Zusammenarbeit mit dem Evergine-Template für React

Das Evergine-Template für React wurde gezielt so konzipiert, dass mehrere Entwicklungsteams nahtlos zusammenarbeiten können. Das Template folgt den React-Standards und enthält ein neues NPM-Paket für Evergine, das die Aktualisierung auf künftige Versionen der Engine erleichtert. So bleibt Ihre Web-UI stets auf dem Stand der neuesten Rendering-Technologie.

Sobald Sie ein neues Projekt mit dem Evergine-Template für React erstellt haben, kann das für das 3D-Rendering zuständige Team mit dem Aufbau der Szene beginnen – mit denselben Tools und Workflows, die auch auf anderen Plattformen zur Verfügung stehen, etwa

Evergine Studio. Ebenso kann das React-Entwicklungsteam sofort mit der Erstellung der Oberfläche beginnen – mit der IDE und den Tools, mit denen es am besten vertraut ist. Anschließend kann das Team die SPA-Anwendung starten und die in die Website eingebettete Szene ansehen.

Interaktion zwischen React und Evergine

Der entscheidende Vorteil des Evergine-Templates für React besteht darin, dass mehrere Entwicklungsteams nahtlos zusammenarbeiten können. Möglich wird dies durch eine Reihe von APIs, mit denen Entwickler Daten zwischen der Weboberfläche und der 3D-Rendering-Engine austauschen können. Ein Team kann sich auf die Weboberfläche konzentrieren, während ein anderes die 3D-Inhalte erstellt. Da alles in derselben Visual-Studio-Solution entsteht, lässt sich leicht sicherstellen, dass alle Teams dieselben Standards einhalten und dieselben Workflows verwenden.

Die Daten werden in Form von Ereignissen ausgetauscht, über die die gerenderte 3D-Szene und die Oberfläche bei Änderungen miteinander kommunizieren, etwa bei Mausbewegungen, Kollisionen zwischen 3D-Elementen und mehr. Es gibt zwei Arten von Ereignissen: solche, die im Web (React) entstehen, und solche, die im 3D-Rendering (Evergine) entstehen. Die zugrunde liegende Technologie funktioniert wie folgt:

Tritt im Web ein Ereignis ein, das an das 3D-Rendering übermittelt werden muss (etwa eine Farbänderung der Teekanne), nutzt die React-Komponente den webEventsProxy, um das Ereignis über die WASM-Infrastruktur vom Web an Evergine zu übermitteln. Der webEventsListener empfängt das Ereignis und leitet es an den WebEventsService weiter, der im Evergine-Renderer über den Dependency-Injection-Container verfügbar ist. Dieser Service kann von jeder Stelle der Anwendung aus verwendet werden, um seine Ereignisse zu abonnieren und die jeweils erforderliche Aktion auszuführen (z. B. die Farbe des Teekannen-Materials zu ändern).

Bei dieser Arbeitsweise müssen sich das Web-Interface-Team und das 3D-Team lediglich auf den Namen des Ereignisses (z. B. „changeColor“) und die mit jedem Ereignis übergebenen Daten (z. B. den Farbcode im Format „#RGB“) einigen. Anschließend setzt das Web-Team die Änderungen an der Weboberfläche und am webEventsProxy um, während das 3D-Team die Änderungen am webEventsListener, am webEventsService und an der übrigen 3D-Szene vornimmt.

Tritt in der 3D-Szene ein Ereignis ein, das an das Web übermittelt werden muss, etwa der Drehwinkel der Teekanne, löst eine C#-Komponente über den AppEventsService ein Ereignis aus. Auf dieses Ereignis kann über den Dependency-Injection-Container zugegriffen werden. Der appEventsProxy abonniert dieses Ereignis und übermittelt es über die WASM-Infrastruktur an den appEventsListener in React. Der appEventsListener registriert das Ereignis im entsprechenden State Store, je nachdem, ob es sich um ein Standardereignis von Evergine oder um ein benutzerdefiniertes Ereignis handelt (EvergineStore bzw. AppStore). Von dort aus kann jede React-Komponente das Ereignis über den passenden Hook, useEvergineStore oder useAppStore, abonnieren und entsprechend reagieren. Beispielsweise kann eine Komponente mit dem useEffect-Hook den Drehwinkel der Teekanne in einem Feld anzeigen.

In diesem Fall ist das 3D-Team für die Änderungen im AppEventsService, im AppEventsProxy und in der Application verantwortlich. Das Web-Interface-Team setzt dagegen die Änderungen im AppEventsListener und im Web um.

Diese Komponenten stehen im Projekt WebReact für die C#-Seite und im Projekt spa für die React/JavaScript-Seite zur Verfügung. Darüber hinaus gibt es zwei weitere Projekte: das 3D-Anwendungsprojekt von Evergine, das für alle Plattformen gemeinsam ist, sowie den Host, ein Projekt, das die Bereitstellung der Anwendung in der Produktion erleichtert und die Dateikomprimierung übernimmt.

Die im evergineStore gespeicherten Standardereignisse von Evergine sind:

•  webAssemblyLoaded: Wird auf true gesetzt, sobald alle Assemblys der Anwendung geladen sind und die WASM-Infrastruktur einsatzbereit ist. Der Anfangswert ist false.
• evergineReady: Wird auf true gesetzt, wenn die Szene gestartet wurde, und auf false, wenn die Szene geschlossen wird. Der Anfangswert ist false.

Es gibt ein NPM-Paket namens evergine-react (https://www.npmjs.com/package/evergine-react), das die Implementierung des EvergineStore und des generischen Store enthält. Mit den Funktionen createStore und useStore wird der AppStore erstellt, der sich im Projektcode befindet und die benutzerdefinierten Ereignisse des Renderers aufnimmt. Das Paket enthält außerdem eine EvergineCanvas-Komponente, mit der die 3D-Szene im Web gezeichnet wird, sowie die Teilimplementierung des webEventsProxy, um EvergineCanvas zu initialisieren, zu zerstören und seine Größe anzupassen. Schließlich implementiert es auch die Initialisierung von Evergine und Hilfsfunktionen für die Ereigniskommunikation. Künftig werden diesem Paket weitere Funktionen hinzugefügt.

Veröffentlichen der Anwendung

Das Evergine-React-Template enthält eine leistungsstarke Rendering-Engine, die auf WebAssembly-Technologie (WASM) setzt. Damit lässt sich die Website mit 3D-Renderings effizient veröffentlichen und in Webbrowsern anzeigen, ohne dass ein komplexer Server erforderlich ist.

Das Host-Projekt ist ein ASP.NET-Projekt, das als Server für die Webanwendung dient. Es wird für die Bereitstellung in der Produktion verwendet und enthält Optimierungen, um komprimierte Assets auszuliefern. Beim Veröffentlichen des Projekts entsteht eine Datei Host.exe, die auf den Ports 5000 und 5001 lauscht und das React-Web ausliefert.

*gemeinsam verfasst mit Gabriel Grajea