Olá, estudante! Agora que já conhecemos um pouco sobre os sistemas de cores RGB – em especial, hexadecimal e decimal –, que nos ajudam a compreender a forma como representamos as cores virtualmente, temos condições de avançar para o nosso próximo conteúdo: Elementos Bidimensionais e Tridimensionais.
Nesta sétima e nova lição, buscaremos obter uma compreensão sólida e prática sobre os tais elementos bidimensionais e tridimensionais no que abrangem a computação gráfica. Nesse sentido, lhe guiarei, estudante, para que alcance habilidades relevantes em sua futura carreira no seguimento do desenvolvimento de sistemas e tecnologia. Inicialmente, será importante que façamos a diferenciação entre os elementos de duas dimensões, bidimensionais, e os elementos de três dimensões, tridimensionais, de modo a destacar quais as suas características e suas aplicações na prática profissional. Para você, estudante, é de extrema importância compreender não apenas as propriedades técnicas desses elementos, mas também quando e em que são utilizados, construindo uma visão ampla de processos e funções.
Ao final desta lição, seguindo com seu empenho e dedicação nos estudos, você estará apto a aplicar os conhecimentos de maneira assertiva, capaz de lidar com demandas específicas a essa temática que encontrará no mercado de trabalho. Essa compreensão contribuirá, ainda, para que consiga propor projetos com interfaces cativantes, ambientes virtuais que tragam maior sensação de imersão e modelos mais próximos à realidade. Aspectos esses, que se tornam cada vez mais essenciais em alguns seguimentos, como o de simulações, jogos e animações.
Ao explorarmos os elementos de duas ou três dimensões, nos deparamos com alguns desafios, que, de certa forma, nos intrigam e se estendem além dos apontamentos técnicos. Ao passo que consideramos os elementos de duas dimensões – bidimensionais, como chamaremos –, a problemática se estende frente à mera disposição gráfica. Por exemplo, como trazer equilíbrio à estética visual em interfaces que embora sejam de apenas duas dimensões, em alguns casos, é importante que transmitam a sensação de interatividade e de profundidade. Nesse sentido, uma escolha de cores assertiva, fontes em harmonia com o contexto e a disposição de elementos, tornam-se pontos relevantes para criar uma experiência que envolva os utilizadores e traga a sensação de imersão.
No caso dos elementos de três dimensões – tridimensionais, como chamaremos –, a complexidade é um pouco maior. Os desafios com vieses técnicos, como a modelagem precisa e uma renderização com eficiência, entrelaçam-se junto às questões mais abstratas, como a busca por garantir que a presença de elementos de três dimensões não traga poluição visual ou mesmo sobrecarregue o usuário ou sistema, mas, sim, que busque envolvê-lo na interação proposta ou narrativa que se está criando. Esse equilíbrio entre desempenho e realismo é fundamental.
Portanto, não basta somente realizar uma escolha assertiva entre bidimensionais e tridimensionais, pode-se ir além do âmbito técnico e alcançar aspectos culturais ou mesmo sociais. Em determinados contextos, a preferência por um estilo visual pode influenciar a percepção que nós, enquanto usuários, temos quanto à confiabilidade de um sistema ou ao interesse por utilizar uma aplicação de jogo. Dessa forma, ao conhecer uma base sólida e compreender os desafios desses elementos, a ideia é que você, estudante, não apenas desenvolva habilidades técnicas, mas que seja estimulado a pensar criticamente sobre as implicações das suas escolhas quanto à representação visual e ao design na totalidade.
Imagine uma empresa especializada em realidade virtual (RV) e realidade aumentada (RA) que está buscando revolucionar a maneira como as pessoas interagem e utilizam os ambientes virtuais. Ao compreender os desafios de integrar elementos de duas dimensões e três dimensões de maneira inovadora, a empresa passa a estar diante do desenvolvimento de um projeto audacioso. Nesse contexto, o objetivo da empresa é criar uma experiência de compra virtual (on-line), que seja totalmente imersiva, na qual os futuros clientes possam explorar, simulando virtualmente como ficariam os produtos, trocando cores e cenários e por aí em diante, antes de adquiri-los. Ao entrar na loja virtual, os usuários são recebidos por uma interface bidimensional intuitiva, que apresenta as categorias, bem como as promoções.
Navegando pelas páginas, os consumidores poderão visualizar modelos tridimensionais dos produtos, movimentando-os conforme achar conveniente e manipulando-os virtualmente para examinar detalhes, texturas e dimensões. O equilíbrio entre elementos bidimensionais e tridimensionais cria uma experiência de compra que envolve e também trata dos desafios logísticos, ao passo que permite que os clientes visualizem produtos como se estivessem fisicamente presentes.
Essa é uma das diversas aplicações em que se demonstra como a integração eficiente de elementos, os elementos de duas e três dimensões, podem realizar uma verdadeira transformação quando corretamente aplicados. No varejo, por exemplo, pode contribuir para proporcionar uma experiência imersiva e cada vez mais personalizada para os consumidores.
Para facilitar sua compreensão sobre esses temas, tratarei separadamente de cada um dos elementos, iniciando com os bidimensionais e finalizando com os tridimensionais. Vamos lá?
Iniciamos nosso embasamento com a contribuição de Silva (2020), que reforça que um elemento bidimensional é aquele que possui apenas duas dimensões. O mesmo autor nos apresenta como exemplo um quadrado, por poder ser representado em um plano sem que haja profundidade.
Nesse sentido, quando falamos em imagens bidimensionais, estamos falando das imagens que possuem um aspecto de visão em duas dimensões, sendo a altura (A) e largura (L), elas constituem visualmente a maneira de comunicação amplamente utilizada em diversos contextos, desde a interface de usuário, um material publicitário ou um mesmo um site, em que a qualidade da imagem, o que transmitem e o quanto impactam são pontos fundamentais.
O uso de formatos conhecidos como o JPEG, PNG e GIF – sendo o último bastante utilizado para passar a sensação de breves movimentos em imagens –, possibilitam a representação de fotografias, gráficos e ilustrações de modo geral. E o processo de manipulação dessas imagens bidimensionais inclui um amplo leque, como as técnicas de edição, ajuste de contraste, correção de cores e aplicação de filtros. Ter conhecimento sobre esses processos e compreender sua utilização é ponto relevante para os profissionais que buscam transmitir mais do que imagens, mensagens visuais de maneira impactante.
Na Figura 1, temos um exemplo de imagem com elementos em duas dimensões:
Vamos explorar um pouco mais o fascinante universo das representações bidimensionais. Acompanhe-me nesta jornada!
Você alguma vez já ouviu falar sobre os gráficos bidimensionais? Esses gráficos, apresentados em duas dimensões, desempenham um papel fundamental na representação visual de dados e auxílio na tomada de decisões empresariais. Sejam os gráficos de barras, os de linhas ou mesmo os em formato de pizza (círculos fatiados), são vastamente utilizados para trazer simplicidade na apresentação dos dados, sejam dados do setor, do andamento do projeto ou de um seguimento, por exemplo.
Pensando em uma melhor forma de apresentar os dados, a escolha adequada do tipo de gráfico se faz necessária. Observar qual a escala correta e pensar sobre a interpretação visual daquela apresentação são habilidades importantes. Portanto, para construir o sucesso profissional no desempenho dessas tarefas, é relevante que compreenda mais do que apenas criar o gráfico, é preciso que você tenha conhecimento de como torná-los acessíveis e informativos para o público-alvo ao qual será entregue ou apresentado.
Contextualizar e trazer algo para a realidade vigente é uma capacidade valiosa em relatórios, apresentações e dashboards, e representa também a qualidade do profissional que gerou tal trabalho.
Como os elementos não se restringem a apenas imagens, aproveito para apresentar a você outro exemplo, nesse caso, os textos bidimensionais. A prática de manipular textos em duas dimensões vai além de simplesmente escolher a fonte e o quão grande ou pequeno será o texto. Manipular textos bidimensionais envolve a compreensão de princípios de design gráfico, como espaçamento entre linhas, o quanto de espaço será adicionado ou retirado de um bloco de texto (kerning) e hierarquia visual, por exemplo. A disposição adequadamente de blocos de texto em uma interface ou mesmo em um documento é importante para garantir boa compreensão e legibilidade.
Profissionais que apresentam domínio na arte de organizar elementos textuais em um espaço bidimensional são capazes de dar vida a projetos e criar apresentações visuais cativantes a seu público. Porém, tanto quanto há lugar de destaque àqueles profissionais que conseguem trabalhar adequadamente com os elementos bidimensionais, também há alguns desafios para que esse êxito ocorra.
Os elementos bidimensionais enfrentam desafios, tais como a necessidade de que a imagem mantenha a qualidade ao ser redimensionada, a escolha de paletas de cores adequadas para o contexto em questão, e a busca por garantir que a disposição de elementos visuais facilite a compreensão, sem nos esquecermos das interfaces de usuário, nas quais é vital equilibrar a usabilidade com os aspectos estéticos, considerados fatores como a acessibilidade e a experiência do usuário (UX).
Ter um bom embasamento e compreensão desses elementos bidimensionais não apenas lhe capacitarão, enquanto futuro profissional, a criar projetos e materiais visualmente atraentes, mas também contribuirão para que as informações sejam comunicadas visualmente de maneira eficaz.
Agora que vimos um pouco sobre os elementos de duas dimensões, estamos aptos a avançar. Falaremos então dos elementos de três dimensões, chamados de elementos tridimensionais. Conforme apresenta Silveira (2015), os elementos tridimensionais são aqueles que possuem três dimensões, sendo uma a mais do que os elementos bidimensionais.
Desse modo, podemos avançar nossos estudos. Veremos um pouco sobre alguns pontos, começando pela modelagem em 3D (três dimensões). A modelagem tridimensional é quem possibilita a criação de objetos e ambientes virtuais em três dimensões, altura (A), largura (L) e a profundidade (P), o que proporciona compreensão visual acerca do volume e profundidade. Para os trabalhos de modelagem, é necessário a utilização de ferramentas especializadas, como Blender, Maya e 3ds Max, que dispõem de uma variedade de técnicas para construir modelos em tridimensionais robustos. A tarefa de modelagem pode ser subdividida em duas categorias: a modelagem orgânica, sendo comumente apresentada em formas mais naturais, como criaturas e personagens, e a modelagem geométrica, em que há um cuidado ainda maior nos detalhes simétricos, e é mais utilizada para objetos mais rígidos e arquitetônicos.
Em uma visão ampla, a precisão no trabalho de modelagem é fundamental para garantir a fidelidade ao conceito original, sendo necessários aos profissionais que compreendam a importância da topologia, que se refere à estrutura do modelo em questão. A topologia, quando bem elaborada, facilita o trabalho de animação e a aplicação de texturas. Embora desafiador, a criação de modelos que se comportem de maneira realista quando movidos e iluminados contribui diretamente com o resultado do projeto.
Na Figura 2, temos um exemplo de imagem com elementos em três dimensões:
Pensando em ambientes tridimensionais com elevado grau de realidade, a iluminação é um dos componentes vitais. Logo, possuir boa compreensão de como as diferentes fontes de luz influenciam os objetos é importante para criar destaques, reflexos e sombras relevantes e autênticos. Embasando um maior conhecimento a respeito, temos as técnicas avançadas, como mapeamento de sombras e iluminação global, que se bem utilizadas, contribuem para aumentar a qualidade visual do projeto. Já a texturização é a etapa que envolve a aplicação de texturas nas superfícies dos modelos. Desse modo, são adicionados mais do que detalhes visuais, possibilitando uma sensação palpável dos objetos virtuais.
Resumidamente, essa etapa é a responsável por realizar o processamento dos elementos envolvidos no trabalho, seja áudio, vídeo, texturas e outros, em um único arquivo que poderá ser reproduzido. Essa etapa é responsável por determinar a qualidade visual do resultado do projeto. Um profissional que atua com a computação gráfica deve buscar a excelência e explorar as configurações de renderização, como resolução, taxa de quadros e técnicas de Anti-Aliasing – esta última busca suavizar pontas e contornos. Nessa fase, uma decisão crucial se apresenta: optar entre a renderização em tempo real, perfeita para jogos, e a renderização off-line, que oferece uma qualidade excepcional.
É comum que os profissionais que lidam com elementos tridimensionais enfrentem desafios como a busca pela otimização de desempenho em tempo real, o gerenciamento da complexidade geométrica e uma manipulação eficiente de grandes conjuntos de dados, por exemplo, sem nos esquecermos da necessidade de adaptação às constantes evoluções tecnológicas em técnicas de renderização e também em hardware gráfico.
Compreender com clareza os assuntos que estudamos nesta lição trará a você, futuro profissional, maior facilidade em lidar com rotinas voltadas à parte gráfica, mas que se aplicam a diversas frentes da tecnologia, como as interfaces de usuário, por exemplo. Dessa forma, mais do que compreender os aspectos teóricos dessa temática, é preciso dominar a aplicação desses quesitos em meio à imensidão do mercado de trabalho do campo da tecnologia.
Exercitar os conhecimentos adquiridos no decorrer da lição é prática fundamental para consolidar a aprendizagem, e para tal, pensando na compreensão dos elementos bidimensionais e tridimensionais, exploraremos atividades que lhe capacitem a utilizar uma ferramenta on-line, gratuita e bastante prática.
Que tal criar um esboço ou mesmo o seu primeiro projeto de interface de usuário em Figma? Vem comigo! Figma é uma plataforma de design colaborativo que permite a criação de interfaces de usuário de forma intuitiva. Nela, você poderá experimentar a disposição de elementos, como ícones e botões, ao passo que também explorará recursos de alinhamento e espaçamento.
Inicie essa prática com a criação de uma interface de usuário (UI), utilizando a ferramenta on-line e gratuita indicada, Figma (https://www.figma.com/). Abra a ferramenta, se necessário, realize o cadastro – gratuito – e comece a se ambientar dentro da plataforma on-line. A ideia é que você consiga criar um projeto de interface de usuário de um aplicativo de sua escolha, como um app de delivery. Uma boa dica é que se espelhe em um aplicativo que já tenha usado ou tenha acesso para tirar ideias e compreender a necessidade de elementos, como botões. Esse exercício lhe ajudará a compreender como elementos bidimensionais contribuem para a usabilidade e estética de uma interface!
SILVA, A. L. da. Elementos de geometria plana. São Paulo: Edusp, 2020.
SILVEIRA, L. M. Introdução à teoria da cor. Curitiba: EdUTFPR, 2015.
UNSPLASH. Pilha de bolas de plástico vermelho com buracos sobre elas. 2023. 1 fotografia. Disponível em: https://unsplash.com/pt-br/fotografias/uma-pilha-de-bolas-de-plastico-vermelho-com-buracos-sobre-eles-bhn4m2ZDEFE. Acesso em: 8 fev. 2024.
UNSPLASH. Têxtil marrom e branco com estampa de pássaro. 2020. 1 fotografia. Disponível em: https://unsplash.com/pt-br/fotografias/textil-marrom-e-branco-com-estampa-de-passaro-KfRUve5NtO8. Acesso em: 8 fev. 2024.