Loader Website
Logo

CIN COLORiT AR

Pinte as suas paredes com AR

CIN COLORiT AR
Pinte as suas paredes com AR
Serviços:
UX Design
UI Design
Mobile App Development
Ano:
2022
Tech Stack:
React Native
Benchmarking

Como em muitas outras áreas que não o software, não há necessidade de desenvolver uma solução de raíz, se esta já foi criada anteriormente. No início, esperávamos que isso acontecesse neste projeto e, por isso, começámos por procurar um componente de AR em bibliotecas de react, a pensar que encontraríamos a base perfeita para começar.

Porém… esse não foi o caso. O problema com que nos deparámos foi que a maioria dos elementos foram descontinuados ou que já não se encontravam atualizados. Também encontrámos uma versão realizada e partilhada pela comunidade de desenvolvimento de software disponível, porém também não funcionava como desejávamos... por isso, excluímos esta opção.

O que funciona melhor

Como esta primeira hipótese tinha algumas limitações, precisávamos de embarcar numa direção diferente. Optamos por desenvolver de raíz.

Depois de algum brainstorming, avançámos com uma nova abordagem: aceder às resoluções da câmara do smartphone e tirar fotografias contínuas do ecrã. A partir daí, cada captura de ecrã seria trabalhada de forma nativa por uma função criada por nós.

Como é que o algoritmo funciona, passo a passo:

  • Verificamos que ao selecionarmos a superfície que queríamos pintar, ela pintaria melhor (mais precisamente) se a desfocássemos primeiro. Por essa razão, decidimos fazer uma desfocagem nas imagens, o que fez com que os diferentes tons da mesma cor se misturassem numa só (evitando gerar tanto ruído ao gerar a máscara);
  • Reconhecendo as diferentes cores presentes na imagem, fizemos uma máscara que identificava os objetos presentes através das suas cores e contornava-os, de modo a não permitir que a cor os cobrisse, quando fosse para colorir as superfícies;
  • Depois de fazer estas duas versões da imagem (desfocagem e máscara) criámos uma terceira versão. Esta é para a zona pintada da imagem.

Esta terceira versão é a parte que mostramos ao utilizador. 

Quando o user já estiver satisfeito com o resultado, clica em "salvar". Depois disso, a imagem passa por mais algumas validações de cor e sombra, juntamos esta versão com as anteriores e... ta-da! No final, guardamo-la na galeria do telemóvel do utilizador.

Image
Pequenos ajustes

Basicamente, esse é todo o processo. Claro, temos pequenos ajustes aqui e ali, por exemplo, a área pintada. Por vezes, esta é pintada mais do que o necessário, outras vezes menos... Aqui tivemos um processo de tentativa e erro, até ficarmos realmente satisfeitos com o resultado final.

Performance

Uma das nossas maiores preocupações era o desempenho, pois queríamos que a imagem fosse constantemente atualizada. Porém, rapidamente compreendemos que a velocidade era inimiga da perfeição. Assim, decidimos, juntamente com o cliente, que a melhor solução era tornar a atualização da imagem mais lenta e fazer uma atualização do código. Tendo a possibilidade de tornar tudo mais lento, fomos agora capazes de aumentar o borrão (como leva algum tempo a fazer no telemóvel)... 

Agora, sim. Aqui está o nosso final feliz para esta história. E agora podes testá-lo tu mesmo: esta feature de AR já está disponível na app!

Image
A nova funcionalidade de realidade aumentada (AR) na nossa app é demonstradora da constante vontade de evolução da CIN. O nosso compromisso é desenvolver produtos de excelência, mas também disponibilizar serviços e ferramentas digitais modernas e atuais para que os nossos clientes possam testar os produtos e as cores antes de os comprarem.
Author image
Liliana Soares
Deputy Marketing Manager
Pronto para trabalharmos juntos?
Image
Footer logo
Utilizamos cookies próprios para lhe oferecer uma melhor experiência. Para saber que cookies usamos e como os desativar, leia a política de cookies. Ao ignorar ou fechar esta mensagem, e exceto se tiver desativado as cookies, está a concordar com o seu uso neste dispositivo.