Schnellere WebGL-Ladezeiten und Zeit bis zur Markteinführung

Wie Marxent mit Unity Professional Services zusammenarbeitete, um die Anwendungsleistung zu optimieren.

Marxent: Eine Fallstudie zu Unity Professional Services

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.

  • Das Projekt

    Schnelle, interaktive Visualisierungen steigern den Umsatz in der Innenarchitektur und reduzieren die Retouren.

  • Das Ziel

    Ladezeiten von Apps in verschiedenen Browserumgebungen optimieren

  • Plattformen

    WebGL, iOS, Android

  • Teammitglieder

    80

  • Standort

    Miamisburg, Ohio, USA – Austin Landing

Die Echtzeit-Engine von Unity ist ein integraler Bestandteil

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

Das Ziel: Ladezeiten reduzieren

Das Frontend des 3D-Raumdesigners besteht aus nativem HTML und JavaScript, das über externe JavaScript-Aufrufe mit dem Unity-WebGL-Player kommuniziert. Es wird von einer Bibliotheken-Suite bereitgestellt, die von Marxent erstellt und verwaltet und von allen Marxent® 3D-Cloud-Anwendungen gemeinsam genutzt wird.

Nachdem die Marxent-Entwickler die Architektur, die Systeme, den Bereitstellungsprozess, das Setup und die Bibliotheken des Projekts erläutert hatten, setzten sich die Teams von Marxent und Unity als Ziel, die Größe der Player-Daten und der Codebase der WebGL-Anwendung zu reduzieren und den Anwendungsfluss zu optimieren. Genauer gesagt gehörte dazu:

  • Implementieren von WebAssembly
  • Entfernen nicht mehr benötigter Assets aus dem Player-Build bei gleichzeitiger Optimierung der Größe umfangreicherer benötigter Assets
  • Entfernen von nicht benötigten Unity-Paketen (Modulen)
  • Optimieren der Größe des verwalteten Codes durch verbessertes Stripping und durch das Entfernen von Teilen verwalteter Codebibliotheken
  • Minimieren der Shader-Kompilierungszeiten und der Vorab-Ladezeiten der ersten Szene
  • Beseitigen weiterer CPU-Engpässe

Die Anpassung der App an WebAssembly erwies sich als wesentlicher Bestandteil dieses APO-Projekts (Application Performance Optimization). WebAssembly ist ein schnell ausführendes Textformat für Code, das vom World Wide Web Consortium (W3C) als Ergänzung zu JavaScript entwickelt wurde. Laut Vince Kilian, Produktentwicklungsleiter von Marxent, „ist die Integration von WebAssembly für uns eine der wichtigsten Funktionen von Unity in der Version 2018.3.“

Der Unterschied, den ein Individuum ausmachen kann

Einer der führenden Support-Techniker von Unity verbrachte eine Woche beim Kundenteam vor Ort. Barry Besecker, Marxents CTO und Mitbegründer, sagte: „Der Umfang seines technischen Fachwissens war beträchtlich, aber was noch wichtiger ist, er hat sich großartig in unserer Team eingefügt – die Zusammenarbeit war aufgrund dieser fantastischen Ressource bemerkenswert.“ Er war ein versierter Problemlöser und mit der Unity-Plattform, die unternehmensweit läuft, sehr erfahren und zudem ein Kommunikationsknotenpunkt, der Verbindungen zu anderen Entwicklern und Technikern bei Unity herstellte, die zur Lösung beitragen konnten. Oft hat er während Arbeitssitzungen einen der WebGL-Gurus von Unity direkt angeschrieben, um zu brainstormen und hartnäckige Probleme zu beheben.

Häufig bestand seine Aufgabe darin, hilfreiche und praktische Orientierungshilfen für die Arbeit mit Unitys „Black Box“ bereitzustellen und gleichzeitig das geistige Eigentum von Unity zu schützen. Kilian erklärte: „Manchmal muss man bestimmte Dinge über die Herstellung des Systems wissen, um Probleme wirklich tiefgehend diagnostizieren zu können. Unity besitzt ein paar massiv verschachtelte Anweisungen und mit einigen der Stacktraces ist nicht zu spaßen! Diese Art von Expertise und Einblick zu haben war für uns sehr wichtig.“

Eine hochproduktive Zusammenarbeit

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.

„Wir haben andere Anbieter nicht wirklich in Betracht gezogen – wir sind direkt zu Unity gegangen. Sie validierten die Technologie sowie die Forschung und Entwicklung, auf die wir ziemlich stolz waren, und so wussten wir, dass wir mit Unity auf dem richtigen Weg waren, die App zu optimieren. Und offen gesagt hatten sie kompetente Mitarbeiter, die sofort am Projekt arbeiten konnten.“

Barry Besecker, CTO and Co-Founder, Marxent

Wir verwenden Cookies, damit wir Ihnen die beste Erfahrung auf unserer Website bieten können. In unseren Cookie-Richtlinien erhalten Sie weitere Informationen.

Verstanden