Des temps de chargement WebGL et une commercialisation plus rapides

Comment Marxent s'est associé aux services professionnels de Unity pour optimiser les performances de son application.

Marxent : un exemple de bonne collaboration avec les services professionnels de Unity

How do you get two sophisticated software programs and a diverse collection of browser technologies to work together for the best user experience? Marxent augmented its team of world-class developers to optimize a 360°, 3D interior-design tool for the web that lets customers and sales associates create and modify rich visualizations. They brought a better product to market faster by leveraging Unity Professional Services.

Beck and Barry Besecker started Marxent in 2011 to help retailers, particularly in home furnishings and home improvement, increase sales and reduce returns by taking advantage of emerging 3D technologies. Initially, the brothers built one-off AR and VR applications, but with the increased performance demands and necessity of integrated content management, they soon switched from OpenGL to the Unity real-time engine. This enabled them to push the Marxent® 3D Cloud platform to the forefront of the industry, where they are now a global leader in omnichannel 3D design and visualization.

  • Le projet

    Des visualisations rapides et interactives qui améliorent les ventes des boutiques de décoration intérieure et réduisent le nombre de retours

  • L'objectif

    Optimiser les temps de chargement dans divers navigateurs et configurations

  • Plateformes

    WebGL, iOS, Android

  • Membres de l'équipe

    80

  • Lieu

    Miamisburg, Ohio – Austin Landing

Le moteur en temps réel de Unity est un élément complet

Marxent’s 3D Room Designer is a browser-based, interior-design tool that lets customers and sales associates mix-and-match furniture, colors, wall treatments, and dimensions in a rich 3D environment. Its simple, responsive interface encourages buyers to configure and price design projects visually. The Unity real-time engine is an integral component.

When Marxent was demoing a recent WebGL implementation of the 3D Room Designer, a new client mentioned that the longer loading times were an issue. While Marxent engineers had recently made major optimizations overall, the reason for this particular issue wasn’t obvious. Still, they committed to resolving it, which would help the customer deliver better end-user experience and ultimately increase sales.

One missing element was deep insight into the Unity real-time engine and how rendering programs behaved with sometimes-idiosyncratic code formats such as WebAssembly. Marxent got in touch with Unity Professional Services to help investigate and troubleshoot what was going on – with the Unity code, the Marxent code, the way .dlls and frameworks were structured – whatever was impacting launching and loading times, particularly on the WebGL platform.

The results:

  • An enhanced customer experience through a faster, more streamlined 3D program
  • Increased in-house expertise working with the Unity platform
  • A stronger, more collaborative partnership between two world-class software companies

L'objectif : réduire les temps de chargement

L'interface utilisateur du Concepteur de pièce en 3D est conçue en HTML et JavaScript natifs. Ces formats communiquent avec le lecteur WebGL de Unity via des appels JavaScript externes. Il utilise une suite de bibliothèques de contenu conçu par Marxent et partagé sur l'ensemble des applications en 3D sur le cloud de Marxent®.

Une fois que les développeurs de Marxent ont donné aux équipes Unity tous les détails sur l'architecture du projet, ses systèmes, son processus de déploiement, sa configuration et ses bibliothèques, les deux entreprises ont cherché à réduire la taille des données du lecteur de l'application et son code de base, ainsi qu'à optimiser le flux de l'application. Ces opérations impliquaient plus précisément :

  • D'implémenter WebAssembly
  • De retirer les ressources inutiles de la compilation du lecteur, tout en optimisant la taille des ressources plus lourdes indispensables
  • De retirer les packages Unity inutiles (modules)
  • D'optimiser la taille du code en améliorant les fonctionnalités de réduction de la taille et en supprimant des parties des bibliothèques de code
  • De minimiser le temps de compilation du shader et les temps de chargement de la première scène
  • D'éliminer les goulots d'étranglement du processeur

Accorder l'application avec WebAssembly s'est avéré être l'un des principaux points de ce projet d'optimisation des performances. WebAssembly est un format de texte à exécution rapide pour le code développé par le World Wide Web Consortium afin de complémenter JavaScript. Selon Vince Kilian, responsable du développement produit chez Marxent, « l'intégration de WebAssembly est l'une des fonctionnalités de la version 2018.3 de Unity les plus importantes pour nous. »

On peut tous faire la différence

L'un des ingénieurs support en chef de Unity a passé une semaine sur site aux côtés de l'équipe du client. Barry Besecker, technicien en chef et cofondateur de Marxent, indique que « La profondeur et l'étendue de ses connaissances techniques étaient impressionnantes. Mais, plus important encore, il s'est très bien entendu avec l'équipe, ce qui a donné lieu à une remarquable collaboration. » En plus d'être un expert du dépannage et de bénéficier d'une grande expérience sur la plateforme Unity à l'échelle de l'entreprise, ses compétences en communication ne laissent pas à désirer. Il sait parfaitement s'adresser à d'autres développeurs et ingénieurs Unity, qui pourraient aider à trouver une solution. Il contactait parfois directement un spécialiste Unity en WebGL lors des séances de travail, pour qu'il participe à la réflexion et aide à résoudre les problèmes les plus épineux.

Souvent, son rôle était de dispenser des conseils pratiques pour travailler sur la « boîte noire » de Unity, tout en protégeant la propriété intellectuelle de l'entreprise. Selon Vince Kilian, « Parfois, on a besoin de certaines informations sur la conception du système pour pouvoir diagnostiquer les problèmes au niveau le plus profond. Celle de Unity comprend des déclarations imbriquées complexes et certaines traces d'appels sont vraiment délicates ! Pouvoir bénéficier de son expertise était vraiment important pour nous. »

Une collaboration terriblement productive

After the APO, Marxent informed its customer that there was a quick solve to the front-end loading issue and that it could be implemented promptly. Besecker said, “We hear from clients pretty quickly if there are issues, and in this case, we had a new client using a prototype in a test environment, so it was easy to show them the improvement.” Overall, Marxent estimated a 30% loading-speed improvement, which they feel is quite significant.

With this experience under their belt, Marxent is currently working on a statement of work for Development Assistance to expand the extensibility of the shader system – the shader pipelines and rendering-system pipelines introduced in Unity 2018.3.

Looking ahead, Marxent anticipates taking advantage of Unity’s commitment to enhancing dynamic and user-generated environments and objects. “I’ve seen Unity projects at developer conferences where there are millions of instances on the screen and way-fewer call counts, and that’s a huge jump forward. But that’s for legions of soldiers shooting arrows. At Marxent, we’re not simultaneously spawning thousands of couches!” according to Kilian.

They are, however, helping sell thousands of couches. Globally, Marxent is leading the development of AR/VR tools for commerce, and collaborations such as the Professional Services engagement work two ways – a product is optimized, and Unity gains profound insight into enhancing and shaping its own product and roadmap. For example, working with Marxent reinforced the importance of the Memory Profiler as a general diagnostic tool and the importance of real-time lighting in the shader system for dynamic retail apps.

« Nous n'avons même pas envisagé de contacter d'autres fournisseurs, nous avons tout de suite pensé à Unity. Ils ont validé notre technologie et le R&D dont nous étions si fiers. Nous savions que Unity était la meilleure façon d'optimiser notre application. Et leurs experts ont pu s'attaquer de suite au projet. »

Barry Besecker, CTO and Co-Founder, Marxent

Ce site utilise des cookies dans le but de vous offrir la meilleure expérience possible. Consultez notre politique de cookies pour en savoir plus.

Compris