Trazendo o virtual para a realidade com AR no Shopify

A Realidade Aumentada é algo que vimos surgindo cada vez mais, mas o que exatamente é e como é feito? Todos estão familiarizados com a Realidade Virtual graças a videogames e filmes como o Ready Player One. Em Realidade Virtual você coloca um headset de RV e vivencia uma realidade completamente sintética, removendo você do mundo físico e permitindo que você mergulhe em um mundo totalmente diferente. Enquanto isso, a Realidade Aumentada borra a linha entre o virtual e o real. Ele permite que o usuário experimente conteúdo artificial como parte de seu ambiente físico e está pronto para dominar o comércio eletrônico, já que Shopify está adotando a tecnologia para permitir AR para seus proprietários de lojas.

Recentemente Shopify integrou o uso do ARKit da Apple para fornecer conteúdo AR para seus usuários e nós da Eastside Co temos experimentado isso desde então. Mais recentemente, trabalhamos com a Lazy Oaf para entregar versões de realidade aumentada de sua nova linha de sapatos desenvolvida em parceria com a lendária Doc Martens. Trazer a estética única dos designs de Lazy Oaf para a realidade aumentada por meio da modelagem 3D foi um desafio divertido e, acredito, acrescentou um nível de interatividade às compras online próximo ao que antes só estava disponível em lojas de varejo.

Então, o que é necessário para criar um produto virtual para AR e quais são os problemas que surgem ao longo do caminho?

Configurando

A Lazy Oaf teve a gentileza de nos enviar o pré-lançamento dos produtos reais, para que eu pudesse ter uma boa ideia de como eram os produtos. Isso pode ser extremamente benéfico, pois às vezes as fotos simplesmente não conseguem capturar os tipos ou a sensação dos materiais usados ​​no produto e isso pode ser importante para fazer com que o produto pareça mais adiante. Nosso fotógrafo e cinegrafista, Dave, gentilmente fotografou cada um dos sapatos Doc Marten de frente, de trás, de ambos os lados, de cima e de baixo, bem como de vários ângulos para ajudar a capturar alguns detalhes das superfícies antes de iniciar o processo de modelagem 3D.

Depois de recortar e dimensionar as fotos para serem precisas umas às outras, coloquei-as como plantas no 3DS Max 2018.

Modelagem Básica

A partir daqui a modelagem começa com formas simples. O sapato começou a vida como um único plano que foi extrudado e manipulado para se ajustar à forma da sola.

Concluída a forma básica, cortei as bordas que formariam a banda de rodagem da sola e extrudei-as seguidas do restante da sola, aplicando alguns modificadores para obter o fundo arredondado da sola como um todo. Depois de algumas modelagens básicas, a sola estava pronta para ser levada ao ZBrush para fazer o trabalho de alta resolução.

Modelagem 3D de alta resolução

Pegar um modelo de baixa resolução e aumentar o número de polígonos suaviza o modelo. Esse processo foi feito em alguns níveis, dando uma superfície muito mais lisa, o que me permitiu adicionar pontos ao longo da borda da sola e esculpir manualmente os orifícios dos pontos na superfície para parecer que eram pontos adequados.

Uma vez que a sola foi alisada e polida comecei na parte superior do sapato, criando uma forma básica que seguia o contorno do próprio sapato.

Usando essa versão grosseira como base consegui extrair as formas de todas as peças que compunham o detalhe do sapato. Todas as peças sobrepostas de material que formaram a forma foram retiradas dessa forma e organizadas de acordo. A área rendada na frente do dedo do pé foi esculpida.

A partir desta etapa foi o caso de acrescentar os acessórios como as fivelas e os cadarços na biqueira e claro mais pequenos detalhes como os pontos para os painéis.

A Parte Difícil

Com alguma cor esse modelo certamente está finalizado, certo? Infelizmente não. O modelo 3D do sapato Doc Marten como um todo é composto por pouco menos de 10 milhões de polígonos. Mesmo que os smartphones que carregamos em nossos bolsos agora sejam dispositivos de computação incrivelmente poderosos, eles teriam muita dificuldade em renderizar tantos polígonos de uma só vez. Assim como um editor de filmes, você precisa escolher as partes importantes do que está tentando apresentar. Você notará que o interior do sapato não está acabado. Esta foi a primeira peça que atingiu o chão da sala de edição, por assim dizer. O interior do sapato não tinha importância significativa para a estética geral e, portanto, não modelá-lo reduziu a complexidade do modelo (além de me poupar algum tempo). Mas ainda nos resta quase 10 milhões de polígonos.

Como a realidade aumentada renderiza o modelo em tempo real, temos que reduzir a complexidade. Isso envolve reduzir a contagem de polígonos para níveis gerenciáveis ​​e é um processo incrivelmente tedioso. Felizmente, a maioria das partes começou a vida como versões de baixo polígono e pude retornar a essas partes e adaptá-las para essa tarefa. Na captura de tela abaixo, você pode ver que, embora a forma seja representativa do sapato em si, falta os detalhes mais finos, como os pontos, as bordas levemente chanfradas e a suavidade geral que todos esses polígonos proporcionaram. No entanto, você também pode ver que a contagem de polígonos foi reduzida de quase 10 milhões para pouco mais de 6.000 e poderia ser reduzida um pouco mais, se necessário, mas 6.000 polígonos está dentro do orçamento e ter geometria para suportar a forma pode ser útil para a próxima etapa.

Trazendo os detalhes de volta

Portanto, agora temos duas versões do sapato: uma versão de resolução extremamente alta e uma versão de baixa resolução que será renderizada de maneira rápida e suave em hardware móvel. Mas agora estamos perdendo os detalhes que eu diria que tornam o sapato único.

Para transferir os detalhes de alta resolução para a versão de baixa resolução, precisamos “cozinhá-los” em vários mapas de textura que fornecem informações à luz virtual em nossa realidade aumentada. Para fazer isso, primeiro precisamos desembrulhar nosso modelo e achatá-lo, criando um mapa UV. O que é um mapa UV? É uma representação 2D do nosso modelo se ele foi desdobrado como um modelo de origami; ele permite que as texturas sejam projetadas em sua superfície posteriormente na linha.

Para manter os detalhes nítidos e limpos, decidi dividir o modelo em duas partes. A sola, fivelas e tiras em uma parte, e depois a parte superior em outra peça. Isso me permitiu usar 2 mapas de textura pequenos em vez de um único grande, o que leva a um tamanho de arquivo menor, para que ele seja carregado mais rapidamente.

Abaixo você pode ver os Mapas UV - as versões achatadas de ambas as partes.

Feito isso, podemos preparar nossos mapas e trabalhar nas texturas, adicionando as informações do material que farão com que o produto se pareça com o produto.

O roxo na captura de tela acima pode parecer estranho, mas essa é a principal maneira de trazer os detalhes de volta ao nosso modelo. A superfície do modelo de alta resolução é projetada no modelo de resolução mais baixa e registrada em valores de vermelho, verde ou azul, dependendo da direção em que a superfície está apontando. Quando aplicado ao modelo e uma fonte de luz o atinge, a cor do pixel que a luz atinge determina a direção em que a luz é refletida, criando uma superfície 3D artificial sem o custo do polígono. Isso é mais óbvio com os pontos.

Uma vez que esses mapas foram criados, agora é apenas um caso de aplicação de materiais e texturas na superfície.

Ficando Físico

Os renderizadores em tempo real modernos usam um sistema chamado PBR ou Physical Based Rendering. Isso significa que o mecanismo de iluminação e renderização tenta mapear com precisão a maneira como a luz se comporta ao atingir a superfície de um modelo com base no material dessa superfície. O software de texturização moderno tornou a criação de materiais realistas muito fácil. O Substance Painter foi fundamental para permitir que as superfícies desses itens da vida real fossem recriadas digitalmente. Usamos principalmente 5 mapas de textura diferentes para aplicar várias propriedades ao modelo:

• Mapa de cores É o que parece, é a cor base do material.
• Metalness Este é um mapa preto e branco que determina qual parte do modelo é metálica ou não metálica.
• Rugosidade Assim como parece, define quão ásperas ou lisas são as superfícies do modelo.
• Oclusão de ambiente Um mapa em escala de cinza que imita aquelas pequenas sombras de contato onde duas superfícies se encontram no canto, adiciona profundidade extra à iluminação.
• Mapa Normal Este é o mapa roxo mostrado anteriormente e é responsável por mostrar o detalhe da superfície - como mostrado abaixo quase não há nenhum detalhe ao desligar o mapa normal na sola e depois na parte superior do sapato.

Uma vez que o processo de texturização esteja completo, temos algo que parece bastante convincente. As etapas finais são exportar o modelo e as texturas e convertê-los para um formato compatível com AR. Nesse caso, é o USDZ, pois é o formato que o Apple ARKit usa.

Se você ainda está comigo, muito bem! O resultado do AR é muito mais fascinante do que o processo de criá-lo, mas espero que este pequeno vislumbre dos bastidores mostre o quanto é necessário no processo de recriar manualmente uma representação virtual de um produto real. Novas tecnologias, como digitalização 3D e fotogrametria, tornarão o processo mais fácil no futuro, mas agora a qualidade não está lá, a menos que você invista uma grande quantia de dinheiro na tecnologia.

Ainda estamos nos primórdios da tecnologia de realidade aumentada - à medida que continua avançando e à medida que os telefones celulares se tornam mais poderosos e capazes, começaremos a ver essa tecnologia cada vez mais nos lugares do dia-a-dia. Enquanto o Ready Player One e outros filmes de ficção científica popularizaram a Realidade Virtual, acredito que a VR permanecerá no reino do entretenimento e da educação, enquanto a AR se tornará tão difundida quanto a Internet - especialmente quando todos obtivermos atualizações cibernéticas. Talvez isso seja um pouco distante, mas até lá pelo menos eu posso colocar alguns sapatos na mesa e não ser repreendido.

Visite Lazy Oaf e confira os sapatos Dr Marten em seu próprio iPhone ou iPad com iOS e Safari 12.