Presentamos la plantilla React Evergine

Evergine, el potente motor de renderizado para la industria, acaba de lanzar una nueva plantilla React que promete simplificar el desarrollo de aplicaciones 3D modernas en la web. En este artículo, profundizaremos en cómo puedes utilizar la nueva plantilla y la arquitectura que hay detrás.

Primeros pasos con Evergine React

Comenzar a utilizar la plantilla Evergine React es muy sencillo. Al crear un nuevo proyecto, asegúrate de seleccionar la plantilla React SPA, proporciona un nombre de proyecto y una ubicación, ¡y ya estás listo!

Colaboración impecable con la plantilla React de Evergine

La plantilla Evergine React está diseñada con un claro enfoque en permitir que múltiples equipos de desarrollo colaboren sin problemas. La plantilla sigue los estándares de React e incluye un nuevo paquete NPM para Evergine, que facilita la actualización a futuras versiones del motor, lo que garantiza que tu IU web se mantenga actualizada con la última tecnología de renderizado.

Una vez creado un nuevo proyecto con la plantilla Evergine React, el equipo encargado del renderizado 3D puede empezar a construir la escena utilizando las mismas herramientas y flujos de trabajo disponibles en otras plataformas como Evergine Studio.

Del mismo modo, el equipo de desarrollo de React puede comenzar a construir la interfaz de inmediato utilizando el IDE y las herramientas con las que se sientan más cómodos. Cuando haya terminado, el equipo puede lanzar la aplicación SPA y ver la escena incrustada dentro del sitio web.

Construyendo interacción entre React y Evergine

La principal ventaja de la plantilla React de Evergine es su capacidad para permitir que varios equipos de desarrollo trabajen juntos sin problemas. Esto se consigue mediante un conjunto de API que permiten a los desarrolladores compartir datos entre la interfaz web y el motor de renderizado 3D. Un equipo puede centrarse en la construcción de la interfaz web, mientras que otro trabaja en la construcción del contenido 3D. Como todo se construye sobre la misma solución de Visual Studio, es fácil asegurarse de que todos los equipos se adhieren a las mismas normas y utilizan los mismos flujos de trabajo.

Los datos se comparten en forma de eventos, que la escena 3D renderizada y la interfaz utilizan para comunicarse cuando se producen cambios, como movimientos del ratón, colisiones entre elementos 3D y otros. Hay dos tipos de eventos: los originados en la web (React) y los originados en el render 3D (Evergine). La tecnología detrás de esto funciona de la siguiente manera:

Cuando se produce un evento en la web que necesita ser comunicado al renderizador 3D (como un cambio en el color de la tetera), el componente React utiliza el webEventsProxy para comunicar el evento desde la web a Evergine utilizando la infraestructura WASM. El webEventsListener recibe el evento y lo comunica al WebEventsService, que está disponible en el renderizador Evergine a través del contenedor de inyección de dependencia. Este servicio puede ser utilizado desde cualquier parte de la aplicación para suscribirse a sus eventos y realizar cualquier acción que sea necesaria (por ejemplo, cambiar el color del material de la tetera).

Trabajando de este modo, el equipo de la interfaz web y el equipo 3D sólo tienen que ponerse de acuerdo sobre el nombre del evento (por ejemplo, «changeColor») y los datos adjuntos a cada evento (por ejemplo, el código de color en «#RGB»). A partir de ahí, el equipo web implementa las modificaciones en la interfaz web y en el webEventsProxy, y el equipo 3D implementa las modificaciones en el webEventsListener, el webEventsService y el resto de la escena 3D.

Cuando se produce un evento en la escena 3D que necesita ser comunicado a la Web, como el ángulo de rotación de la tetera, un componente C# desencadena un evento a través del AppEventsService. Se puede acceder a este evento a través del contenedor de inyección de dependencias. El appEventsProxy se suscribe a este evento y lo comunica a través de la infraestructura WASM al appEventsListener en React. El appEventsListener registra el evento en el almacén de estado correspondiente, dependiendo de si se trata de un evento Evergine estándar o un evento personalizado (EvergineStore o AppStore). A partir de ahí, cualquier componente React puede suscribirse al evento usando el hook apropiado, useEvergineStore o useAppStore, y actuar en consecuencia. Por ejemplo, un componente puede usar el hook useEffect para pintar el ángulo de rotación de la tetera en un campo.

En este caso, el equipo 3D es responsable de implementar las modificaciones en el AppEventsService, el AppEventsProxy y la Aplicación. Por su parte, el equipo de la interfaz Web implementa las modificaciones en el AppEventsListener y en la Web.

Estos componentes están disponibles en el proyecto WebReact para el lado C#, y el proyecto spa para el lado React/Javascript. También hay dos proyectos más: el proyecto de aplicación 3D de evergine, que es común a todas las plataformas, y el Host, un proyecto proporcionado para ayudar al despliegue de la aplicación en producción, gestionando la compresión de archivos.

Los eventos estándar de Evergine que se almacenan en el evergineStore son:

•  webAssemblyLoaded: Se pone a true cuando todos los ensamblados de la Aplicación han sido cargados, y la infraestructura WASM está lista para ser utilizada. Inicialmente es false.
• evergineReady: Se pone a true cuando se ha iniciado la escena y a false cuando se cierra. Inicialmente es false.

Existe un paquete NPM llamado evergine-react que incluye la implementación de EvergineStore y el Store genérico. Las funciones createStore y useStore se utilizan para crear la AppStore, que se encuentra en el código del proyecto para añadir los eventos personalizados del renderizador.

El paquete también contiene un componente EvergineCanvas que se utiliza para dibujar la escena 3D en la web y la implementación parcial de webEventsProxy para inicializar EvergineCanvas, destruirlo y actualizar su tamaño. Por último, también implementa la inicialización de Evergine y utilidades para la comunicación de eventos. Nuevas funcionalidades serán añadidas a este paquete en el futuro.

Publicando la aplicación

La plantilla Evergine React incluye un potente motor de renderizado que aprovecha la tecnología Web Assembly (WASM). Esta tecnología nos permite publicar el sitio web con renders 3D de forma eficiente, para que se muestren en los navegadores web sin necesidad de un servidor complejo.

El proyecto anfitrión es un proyecto ASP.NET que actúa como servidor de la aplicación web. Se utiliza para desplegar en producción e incluye optimización para servir activos comprimidos. El artefacto generado al publicar el proyecto es un archivo Host.exe que comienza a escuchar en los puertos 5000 y 5001 y sirve la Web React.

*Co-escrito con Gabriel Grajea