Faster WebGL load times and time to market

How Marxent teamed with Unity Professional Services to optimize application performance

Marxent: A Unity Professional Services case study

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.

The project

Fast, interactive visualizations increase interior design sales and reduce returns

The goal

Optimizing app loading times in various browser environments

Platforms

WebGL, iOS, Android

Team members

80

Location

Miamisburg, OH – Austin Landing

Unity’s real-time engine is an integral component

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

The goal: Reduce loading times

The 3D Room Designer’s front end is built-in native HTML and JavaScript that communicates with the Unity WebGL Player through external JavaScript calls. It’s powered by a suite of Marxent-authored managed libraries shared across all of Marxent® 3D Cloud applications.

After Marxent developers explained the project’s architecture, systems, deployment process, setup, and libraries, the Marxent and Unity teams targeted reducing the size of the WebGL application’s player data and codebase and optimizing the application flow. More precisely, this included:

  • Implementing WebAssembly
  • Removing unneeded assets from the player build while optimizing the size of larger required assets
  • Removing unneeded Unity packages (modules)
  • Optimizing managed code size by improving stripping and by eliminating parts of managed code libraries
  • Minimizing Shader compilation times and first-scene upfront load times
  • Eliminating other CPU bottlenecks

Getting the app in tune with WebAssembly turned out to be a major part of this application performance optimization (APO) project. WebAssembly is a fast-executing text format for code developed by the World Wide Web Consortium (W3C) to complement JavaScript. According to Vince Kilian, Marxent’s Product Development Lead, “WebAssembly integration is one of the most important capabilities for us in the Unity 2018.3 release.”

The difference an individual can make

One of Unity’s lead support engineers spent a week onsite with the client team. Barry Besecker, Marxent’s CTO and Co-Founder, said, “The depth and breadth of his technical expertise was extensive, but perhaps more importantly, he was a great mesh with our team – the collaboration was remarkable due to this fantastic resource.” In addition to being an adept troubleshooter and highly experienced with the Unity platform running at enterprise scale, he was also a communications hub, connecting with other developers and engineers at Unity who could contribute to the solution. In particular, he would often direct-message one of Unity’s WebGL gurus during work sessions to help brainstorm and troubleshoot sticky issues.

Often, his role was to provide helpful, practical guidance on working with Unity’s “black box,” while protecting Unity’s intellectual property. According to Kilian, “Sometimes you’ve got to know certain things about the manufacture of the system to be able to diagnose problems at a really deep level. Unity’s got some serious nested statements in there and some of the stack traces are no joke! Having that kind of expertise and insight was really important for us.”

A highly productive collaboration

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.

“We really didn’t consider other vendors – we went right to Unity. They validated the technology and R&D that we were quite proud of, and we just knew Unity was the right path to help us optimize the app. And, quite frankly, they had expert staff available to jump on the project.”

Barry Besecker, CTO and Co-Founder, Marxent

We use cookies to ensure that we give you the best experience on our website. Visit our cookie policy page for more information.

Got it