Tempo de carregamento WebGL e de comercialização mais rápidos

Como Marxent utilizou os serviços profissionais Unity para otimizar o desempenho do aplicativo.

Marxent: um estudo de caso de serviços profissionais Unity

Como fazer para que dois programas de software sofisticados e uma vasta coleção de tecnologias de navegadores trabalhem em conjunto em prol de uma melhor experiência do usuário? Marxent aumentou sua equipe de desenvolvedores especialistas para otimizar uma ferramenta de design de interiores em 3D e 360° para a web, permitindo que clientes e vendedores criem e modifiquem visualizações detalhadas. Eles levaram um produto melhor para o mercado de maneira mais rápida ao utilizar os serviços profissionais Unity.

Beck e Barry Besecker fundaram a Marxent em 2011 com o intuito de ajudar os revendedores, principalmente as lojas de móveis e decoração, a aumentar as vendas e reduzir as devoluções, utilizando-se de tecnologias 3D emergentes. Inicialmente, os irmãos desenvolveram somente aplicativos de RA e RV, mas com o aumento na demanda de desempenho e necessidade de gestão de conteúdo integrado, eles trocaram rapidamente de OpenGL para a engine em tempo real Unity. Isso possibilitou que levassem a plataforma em nuvem 3D da Marxent® para a vanguarda da indústria, onde atualmente são líderes globais de design e visualização em 3D multicanal.

O projeto

Visualizações rápidas e interativas aumentam as vendas de design de interiores e reduzem as devoluções

O objetivo

Otimizando o tempo de carregamento do aplicativo em diversos navegadores

Plataformas

WebGL, iOS, Android

Membros da equipe

80

Lugar

Miamisburg, OH – Austin Landing

A engine em tempo real de Unity é um componente integral

3D Room Designer  da Marxent é uma ferramenta de design de interiores baseada em navegadores que permite que clientes e vendedores façam combinações de mobílias, cores, revestimentos de paredes e dimensões em um ambiente 3D detalhado. Sua interface simples e responsiva incentiva os compradores a configurar e precificar projetos de design visualmente. A engine em tempo real Unity é um componente integral.

Quando a Marxent estava fazendo uma demonstração de uma implementação recente do 3D Room Designer em WebGL, um novo cliente comentou que o longo tempo de espera para carregamento era um problema. Apesar dos engenheiros da Marxent terem feito otimizações significativas recentemente, no geral, a razão para este problema em particular não era óbvia. Ainda assim, eles se comprometeram a resolvê-lo, o que ajudaria o cliente a entregar uma melhor experiência ao usuário final e, no fim, aumentar as vendas.

Um elemento que faltava era o profundo conhecimento da engine em tempo real Unity e também como os programas de renderização se comportavam com alguns formatos de códigos, às vezes idiossincráticos, tais como WebAssembly. Marxent entrou em contato com os serviços profissionais Unity para ajudá-la a buscar e solucionar o problema - como o código do Unity, o código da Marxent, o modo .dlls e os frameworks estavam estruturados - tudo que estivesse impactando o tempo de início e de carregamento das páginas, principalmente na plataforma WebGL.

Os resultados:

  • Melhora na experiência do cliente, com um programa 3D mais simples e rápido
  • Aumento no conhecimento interno sobre como trabalhar com a plataforma Unity
  • Parceria mais forte e colaborativa entre duas das empresas de software mais importantes do mundo

A meta: reduzir o tempo de carregamento

O front end do 3D Room Designer é construído com HTML e JavaScript nativos que se comunicam com o leitor WebGL de Unity via conexões externas com JavaScript. Ele utiliza um conjunto de bibliotecas criadas e gerenciadas por eles próprios que são compartilhadas em todos os aplicativos 3D em nuvem da Marxent®.

Depois que os desenvolvedores da Marxent explicaram a arquitetura, os sistemas, o processo de implantação, a configuração e as bibliotecas do projeto, as equipes Marxent e Unity buscaram reduzir o tamanho dos dados do leitor do aplicativo WebGL e o seu código de base, e buscaram otimizar o fluxo do aplicativo. Mais precisamente, isso incluiu:

  • Implementação de WebAssembly
  • Remoção de assets desnecessários na construção do leitor, enquanto otimizavam o tamanho de grandes assets que eram necessários
  • Remoção de pacotes Unity desnecessários (módulos)
  • Otimização do tamanho do código gestionado, melhorando suas funcionalidades e eliminando partes das bibliotecas de código gestionado
  • Minimização dos tempos de compilação de Shader e do tempo de carregamento das primeiras cenas
  • Eliminação de outros gargalos de CPU

Sincronizar o aplicativo com o WebAssembly acabou ocupando boa parte deste projeto de otimização de desempenho do aplicativo (Application Performance Optimization, APO, em inglês). WebAssembly é um formato de texto com execução rápida para o código desenvolvido pelo World Wide Web Consortium (W3C) para complementar o JavaScript. De acordo com Vince Kilian, líder de desenvolvimento de produto da Marxent, “a integração com WebAssembly é uma das funcionalidades mais importantes para nós no lançamento do Unity 2018.3.”

A diferença que uma pessoa só pode fazer

Um dos engenheiros líderes de suporte de Unity passou uma semana com a equipe do cliente. Barry Besecker, CTO e cofundador da Marxent disse, “a profundidade e abrangência dos seus conhecimentos técnicos eram impressionante, mas talvez o mais importante de tudo tenha sido ele se dar muito bem com a equipe. A colaboração foi significativa devido à presença deste recurso fantástico.” Além de ser um mestre na resolução de problemas e ter um profundo conhecimento da plataforma Unity sendo utilizada em escala corporativa, ele também era um ponto de contato com outros desenvolvedores e engenheiros de Unity, que puderam ajudar a encontrar a solução. Em particular, ele trocava mensagens frequentemente com um dos gurus em WebGL de Unity durante as sessões de trabalho, para ajudar a identificar e resolver problemas mais difíceis.

Frequentemente, sua função era fornecer orientação prática e útil quando trabalhávamos com a "caixa preta" do Unity e, ao mesmo tempo, proteger a propriedade intelectual do Unity. De acordo com Kilian, “algumas vezes são necessárias determinadas informações sobre a construção do sistema para conseguir diagnosticar problemas em um nível mais profundo. O Unity tem alguns comandos muito aninhados e encontrar vestígios deles não é fácil! Ter este tipo de experiência e conhecimento é muito importante para a gente.”

Uma colaboração altamente produtiva

Depois do projeto de otimização (APO), a Marxent informou aos seus clientes que havia uma solução rápida para o problema de carregamento do front end e que ela poderia ser implementada prontamente. Besecker disse, “nossos clientes avisam rapidamente quando há algum problema e, neste caso, havia um cliente novo usando um protótipo em um ambiente de teste, então foi fácil mostrar a melhoria.” No geral, a Marxent estima uma melhora de 30% na velocidade de carregamento, o que é um aumento significativo.

Com esta experiência adquirida, a Marxent está trabalhando atualmente com um descritivo de serviços (statement of work) de Ajuda ao Desenvolvimento para expandir a extensibilidade do sistema de shader – os pipelines de shader e pipelines do sistema de renderização introduzidos no Unity 2018.3.

Pensando no futuro, a Marxent já antecipa que se beneficiará do comprometimento de Unity para melhorar ambientes e objetos dinâmicos e gerados pelo usuário. “Eu já vi projetos Unity em conferências de desenvolvedores com milhões de instâncias em uma tela e infinitamente menos contagens de chamadas, e isso é um grande avanço. Mas, isso é útil para uma legião de soldados atirando flechas. Na Marxent, não vamos criar milhares de sofás simultaneamente!” diz Kilian.

Entretanto, eles estão ajudando a vender milhares de sofás. Globalmente, a Marxent é líder de desenvolvimento de ferramentas de RA/RV para comércio, e colaborações como a com os serviços profissionais Unity funcionam de duas maneiras: um produto é otimizado e Unity ganha uma visão mais ampla na melhoria e configuração de seus produtos e roteiros. Por exemplo, trabalhar com a Marxent reforça a importância do Memory Profiler como uma ferramenta de diagnóstico geral, e importância da iluminação em tempo real no sistema de shader para aplicativos de venda dinâmicos.

“Nós não consideramos outros fornecedores, fomos direto para Unity. Eles validaram a tecnologia e P&D dos quais temos imenso orgulho, e sabíamos que Unity seria o parceiro ideal para a otimização do aplicativo. E, honestamente, eles tinham especialistas disponíveis para entrar de cabeça no projeto.”

Barry Besecker, CTO and Co-Founder, Marxent

We use cookies to ensure that we give you the best experience on our website. Click here for more information.