Découvrez le template React d’Evergine

Evergine, le puissant moteur de rendu pour l’industrie, vient de publier un nouveau template React qui promet de simplifier le développement d’applications 3D modernes sur le Web. Dans cet article, nous allons voir plus en détail comment utiliser ce nouveau template et l’architecture sur laquelle il repose.

Premiers pas avec Evergine React

Prendre en main le template React d’Evergine est simple. Lors de la création d’un nouveau projet, sélectionnez le template React SPA, indiquez un nom et un emplacement pour le projet, et le tour est joué !

Une collaboration fluide avec le template React d’Evergine

Le template React d’Evergine a été conçu avec un objectif clair : permettre à plusieurs équipes de développement de collaborer facilement. Il suit les standards React et inclut un nouveau package NPM pour Evergine, qui simplifie la mise à niveau vers les futures versions du moteur et garantit que votre interface web reste à jour avec les dernières technologies de rendu.

Une fois le nouveau projet créé avec le template React d’Evergine, l’équipe chargée du rendu 3D peut commencer à construire la scène avec les mêmes outils et workflows que sur les autres plateformes, comme

Evergine Studio. De même, l’équipe de développement React peut commencer à construire l’interface immédiatement avec l’IDE et les outils qu’elle maîtrise le mieux. Une fois le travail terminé, l’équipe peut lancer l’application SPA et voir la scène intégrée dans le site web.

Créer l’interaction entre React et Evergine

Le principal atout du template React d’Evergine est qu’il permet à plusieurs équipes de développement de travailler ensemble sans friction. Cela repose sur un ensemble d’API qui permettent aux développeurs de partager des données entre l’interface web et le moteur de rendu 3D. Une équipe peut se concentrer sur l’interface web pendant qu’une autre travaille sur le contenu 3D. Comme tout est construit dans la même solution Visual Studio, il est facile de s’assurer que toutes les équipes respectent les mêmes standards et utilisent les mêmes workflows.

Les données sont partagées sous forme d’événements, que la scène 3D rendue et l’interface utilisent pour communiquer lorsque des changements se produisent, comme des mouvements de souris, des collisions entre éléments 3D, etc. Il existe deux types d’événements : ceux qui proviennent du Web (React) et ceux qui proviennent du rendu 3D (Evergine). La technologie sous-jacente fonctionne comme suit :

Lorsqu’un événement se produit sur le web et doit être communiqué au rendu 3D (par exemple un changement de couleur de la théière), le composant React utilise le webEventsProxy pour transmettre l’événement du web à Evergine via l’infrastructure WASM. Le webEventsListener reçoit l’événement et le transmet au WebEventsService, disponible dans le moteur de rendu Evergine via le conteneur d’injection de dépendances. Ce service peut être utilisé depuis n’importe quel endroit de l’application pour s’abonner à ses événements et effectuer l’action nécessaire (par exemple, changer la couleur du matériau de la théière).

Avec cette façon de travailler, l’équipe de l’interface web et l’équipe 3D n’ont qu’à s’accorder sur le nom de l’événement (par exemple « changeColor ») et sur les données associées à chaque événement (par exemple le code couleur au format « #RGB »). Ensuite, l’équipe web implémente les modifications dans l’interface web et dans le webEventsProxy, et l’équipe 3D implémente les modifications dans le webEventsListener, le webEventsService et le reste de la scène 3D.

Lorsqu’un événement se produit dans la scène 3D et doit être communiqué au web, comme l’angle de rotation de la théière, un composant C# déclenche un événement via l’AppEventsService. Cet événement est accessible via le conteneur d’injection de dépendances. L’appEventsProxy s’abonne à cet événement et le transmet via l’infrastructure WASM à l’appEventsListener dans React. L’appEventsListener enregistre l’événement dans le store d’état correspondant, selon qu’il s’agit d’un événement Evergine standard ou d’un événement personnalisé (EvergineStore ou AppStore). Dès lors, n’importe quel composant React peut s’abonner à l’événement à l’aide du hook approprié, useEvergineStore ou useAppStore, et agir en conséquence. Par exemple, un composant peut utiliser le hook useEffect pour afficher l’angle de rotation de la théière dans un champ.

Dans ce cas, l’équipe 3D est chargée d’implémenter les modifications dans l’AppEventsService, l’AppEventsProxy et l’Application. De son côté, l’équipe de l’interface web implémente les modifications dans l’AppEventsListener et sur le web.

Ces composants sont disponibles dans le projet WebReact pour la partie C#, et dans le projet spa pour la partie React/JavaScript. Il existe également deux autres projets : le projet de l’application 3D Evergine, commun à toutes les plateformes, et le Host, un projet fourni pour faciliter le déploiement de l’application en production, qui gère la compression des fichiers.

Les événements standard d’Evergine stockés dans l’evergineStore sont :

•  webAssemblyLoaded : passe à true lorsque tous les assemblies de l’Application ont été chargés et que l’infrastructure WASM est prête à être utilisée. Sa valeur initiale est false.
• evergineReady : passe à true lorsque la scène a démarré et à false lorsqu’elle est fermée. Sa valeur initiale est false.

Il existe un package NPM appelé evergine-react (https://www.npmjs.com/package/evergine-react) qui inclut l’implémentation d’EvergineStore et du Store générique. Les fonctions createStore et useStore servent à créer l’AppStore, présent dans le code du projet pour ajouter les événements personnalisés du moteur de rendu. Le package contient également un composant EvergineCanvas, utilisé pour dessiner la scène 3D sur le web, ainsi que l’implémentation partielle du webEventsProxy permettant d’initialiser EvergineCanvas, de le détruire et de mettre à jour sa taille. Enfin, il implémente aussi l’initialisation d’Evergine et des utilitaires pour la communication des événements. De nouvelles fonctionnalités seront ajoutées à ce package à l’avenir.

Publier l’application

Le template Evergine React intègre un puissant moteur de rendu qui s’appuie sur la technologie WebAssembly (WASM). Cette technologie nous permet de publier efficacement le site web avec des rendus 3D, affichables dans les navigateurs sans nécessiter de serveur complexe.

Le projet Host est un projet ASP.NET qui fait office de serveur pour l’application web. Il sert au déploiement en production et inclut une optimisation pour servir des ressources compressées. L’artefact généré lors de la publication du projet est un fichier Host.exe qui écoute sur les ports 5000 et 5001 et sert le site web React.

*coécrit avec Gabriel Grajea