CIN COLORiT AR
Pinte as suas paredes com AR
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.
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.
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.
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!
