VR/AR mogelijkheden van Mendix met WebXR
Met de release van Mendix 10.10 hebben we nu de mogelijkheid om de ‘WebXR’ module te gebruiken in Studio Pro. Deze module stelt ons in staat om een reeks widgets te gebruiken die zijn ontworpen voor toepassingen in Augmented Reality (AR) en Virtual Reality (VR), aangeduid als ‘XR’. Laten we kijken wat deze widgets kunnen doen en of we hiermee veel impact kunnen maken met weinig code.
WebXR
Mendix maakt gebruik van de WebXR Device API. Hiermee kun je immersive XR-ervaringen creëren vanuit een webbrowser. Dit betekent dat elke Mendix applicatie die hier gebruik van maakt, werkt op meerdere apparaten, waaronder de HoloLens, Oculus, Apple Vision Pro en zelfs Google Cardboard. Met andere woorden: je kunt 3D-objecten tonen in een virtuele of augmented reality omgeving. Een bijkomend voordeel is dat de rendering wordt afgehandeld door WebGL, dat wordt ondersteund door alle grote web browsers.
Ontwikkeling
Laten we eens kijken naar Studio Pro en hoe snel we een immersive ervaring kunnen creëren. Het startpunt is altijd de Container (XR) widget (zie figuur 1), die alle XR widgets op die pagina moet bevatten. Binnen deze widget kunnen we onze eigen 3D modellen plaatsen of gebruikmaken van één van de standaardvoorbeelden die Mendix kant-en-klaar aanbiedt. Deze standaard opties omvatten een kubus, configureerbare tekst (je eigen data invoegen!) en 3D objecten geladen via een URL. Laten we beginnen met een standaard sphere gadget.
Op dit punt heb ik alleen de WebXR-module toegevoegd en twee widgets op een pagina geplaatst, dus nog geen configuratie! Laten we snel kijken hoe dit eruit ziet in de browser:
Zoals je in figuren 2 en 3 kunt zien, hebben we binnen enkele minuten een verplaatsbare 3D sphere! Als we deze webapplicatie openen op een AR/VR apparaat, kunnen we deze sphere direct in een immersive omgeving bekijken. Houd er rekening mee dat het XR pictogram voor de immersive modus niet beschikbaar is in figuren 2 en 3, omdat dit lokaal via HTTP draait – hiervoor is een https verbinding nodig.
Configuratie
In de configuratie opties kunnen we onze ervaring verder uitbreiden, zoals het aanpassen van enkele basisinstellingen zoals de beginpositie en kleur:
Maar het wordt pas echt interessant bij de tabbladen ‘Interaction’ en ‘Events’. Hier komt de Mendix magie tot leven!
In het tabblad ‘Interaction’ kunnen we aangeven wat er moet gebeuren wanneer de gebruiker met het object interacteert. We kunnen hierbij onze eigen logica aanroepen, wat betekent dat we de XR mogelijkheden kunnen integreren met onze applicatie data en eigen logica!
Dezelfde mogelijkheden zijn beschikbaar voor on click acties en zelfs voor hover enter/exit acties. Dit betekent dat we een (eenvoudig) 3D object kunnen tonen en binnen enkele minuten interacties kunnen instellen. Volledig low-code!
Laten we afsluiten met een eenvoudige on click actie: het wisselen van de kleur van de sphere tussen blauw en terracotta. Hiervoor moeten we eerst iets voorbereiden in Mendix. We maken een non-persistent object aan dat de kleurinformatie opslaat in een hexadecimale kleurcode. Dit object wordt het hoofdobject van de pagina en de AR container wordt binnen een DataView geplaatst:
We kunnen nu de on click actie configureren zodat deze een Nanoflow aanroept:
Wanneer we nu op de sphere klikken, schakelt deze tussen blauw en terracotta:
Voorbeeld uit de praktijk
Een sphere die van kleur verandert is natuurlijk geen toepassing met veel zakelijke toegevoegde waarde. Dus laten we een specifieker voorbeeld bedenken waarin Mendix wél zakelijke waarde toevoegt. In mijn ogen is dit het duidelijkst wanneer we de AR mogelijkheden combineren met de data in je applicatie.
Een eenvoudig voorbeeld: stel je een applicatie voor die bijhoudt welke bestellingen met de hand moeten worden verzameld in een magazijn. Wanneer een medewerker inlogt, ziet hij of zij een lijst met bestellingen die die dag moeten worden opgehaald. Met behulp van de configureerbare text gadget kunnen we deze items tonen. Misschien zelfs inclusief hun exacte locatie in het magazijn of door specifieke items visueel te markeren.
Interactie met de bestellijst in de AR omgeving geeft ons dezelfde opties als in een reguliere applicatie. Een gebruiker kan bijvoorbeeld een item afvinken dat is verzameld of aangeven dat een item ontbreekt. Dit opent mogelijkheden om direct actie te ondernemen, bijvoorbeeld een bericht sturen naar het onderliggende magazijnbeheersysteem dat bepaalde artikelen moeten worden bijbesteld. Of simpelweg de volgende bestelling tonen die moet worden opgehaald.
We zouden ook gedetailleerde 3D modellen kunnen tonen van auto’s, machines of andere apparatuur. Misschien zelfs met visuele defecten in het 3D model of een voorbeeld van hoe iets eruit zou moeten zien, zodat de gebruiker beide kan vergelijken. Ik denk dat de mogelijkheden hier eindeloos zijn. Wat zou jouw idee zijn?
Conclusie
Het is bijzonder hoe snel we een 3D object kunnen maken waarmee we interactie kunnen hebben. En bovendien kunnen we daarbij alle standaard Mendix acties gebruiken tijdens die interacties.
Maar zelfs dit simpele voorbeeld laat al een klein deel van de mogelijkheden zien. En belangrijker nog: dit alles kan volledig low-code!
No items found.
