O configurador de secretária elevatória pode ser utilizado durante a fase de prototipagem (incorporar no Figjam ou Miro) ou como conteúdo de marketing digital (incorporar num website). Quando ligado a uma API, o configurador também pode funcionar como uma calculadora de preços e ser integrado perfeitamente no fluxo de trabalho de um carrinho de compras.
Este configurador deve representar o gémeo digital de uma secretária elevatória com três componentes interativos para explicar a funcionalidade do produto. As interações devem mostrar:
A variação final também deve ser pré-visualizada em Realidade Aumentada (AR) para ser vista num local físico real.
A secretária foi modelada no software CAD Plasticity usando NURBS, sendo depois exportada como ficheiro .step e importada para o Vectary Studio. A geometria CAD importada foi ajustada para ter um menor número de polígonos e convertida através de baking em geometria de malha. O tampo da secretária foi mapeado em UV no Substance Painter, onde também foram criadas as suas texturas.
Cada interação nesta cena é controlada e ativada por 3 hotspots.
1. Alternador de materiais
Ativa a visibilidade da Floating UI clicando no hotspot. Esta interação abrirá a FUI, onde podes ver o nome e a amostra de cor desse material específico. Neste caso, a FUI consiste em apenas 3 imagens, pelo que o texto não foi criado na própria FUI, mas sim importado por inteiro como uma única imagem. É uma excelente dica quando queres acelerar o processo e evitar perder tempo com o layout na própria Floating UI. Assim que clicas numa destas imagens, é ativada outra interação: Materials. Aqui podes selecionar qualquer quantidade de objetos e especificar qual o material que deve ficar ativo. Como este configurador tem dois tamanhos de tampo diferentes, precisas de alterar os materiais para ambos.
2. Movimento
O movimento é controlado por hotspots que ativam a ‘Transformation’ para cima ou para baixo ao longo do eixo Z.
Dica: Cria um grupo com todos os objetos que queres que sejam afetados pela transformação. Se queres que os hotspots se movam com objetos específicos, inclui-os também no grupo.
3. Tamanho
O último hotspot controla o tamanho do tampo da secretária, pois ativa o tamanho pequeno ou grande, mas também as alterações de hotspot. Isto acontece porque ambos os hotspots estão na variante, o que cria um ciclo infinito. Clica no hotspot grande para ativar o tampo grande e o hotspot pequeno. Quando clicas no hotspot pequeno, acontece o inverso.
Dica: Cada tampo da secretária tem um lightmap com baking independente, garantindo que as sombras permanecem no local correto durante as alterações de tamanho.
A configuração de iluminação inclui três luzes - duas retangulares e uma direcional - juntamente com um ambiente HDRi. O objetivo era iluminar a área superior para criar um reflexo agradável na superfície da secretária, obtendo também arestas contrastantes a partir de outros ângulos. A luz direcional dispersa a luz uniformemente pela cena, permitindo um controlo total sobre a sua direção através de um ponto de pivô. As luzes retangulares foram utilizadas para áreas mais pequenas na secretária.
Uma dica: Após o baking, desativar a projeção de sombras de cada luz pode melhorar o desempenho.
Em termos de materiais, o objetivo era conseguir uma cena neutra do tipo estúdio, com um fundo infinito, sombras suaves e a madeira como ponto focal principal. As pernas apresentam um material simples não metálico com uma cor branca por cima, enquanto o tampo da secretária utiliza uma única textura desembrulhada. Criámos tipos de materiais adicionais ao duplicar este material base e ajustar o tom, o contraste e as definições de brilho. Esta abordagem reduz significativamente o tamanho do ficheiro e o tempo de carregamento ao partilhar o ficheiro.
Quando estiveres satisfeito com o aspeto e a iluminação da cena, inicia o processo de baking. O baking melhora o realismo da cena ao adicionar pequenas sombras e oclusão de ambiente.
Uma dica: Faz o baking numa resolução mais alta e depois reduz a escala. Por exemplo, faz o baking com resolução de 2K e depois define a resolução final para 1K. Não te esqueças de ativar o denoising. Antes de fazeres o baking, pré-visualiza a cena no modo Lightmap preview e presta atenção aos elementos móveis, como as pernas, para evitar sombras indesejadas.
A variação final também deve ser pré-visualizada em Realidade Aumentada (AR) para ser vista num local físico real. É importante trabalhar com as dimensões corretas, uma vez que o modelo será traduzido para realidade aumentada numa escala de 1:1. As definições de AR permitem-te ativar ou desativar o redimensionamento quando estiveres a pré-visualizar o ficheiro. Atualmente, a única forma de animares a tua cena em AR é através de animações. A primeira animação no modo Animation será aquela que entra em loop e é exibida em AR. Neste exemplo, colocámos em loop o movimento da secretária a subir e a descer.
Este fabricante de mobiliário premium usou a plataforma Vectary para construir um configurador imersivo para o seu website. Foi tudo feito por uma única pessoa - o seu designer de produto - que não tinha experiência anterior a trabalhar com a Vectary.
