{"id":3227,"date":"2021-10-06T18:32:15","date_gmt":"2021-10-06T21:32:15","guid":{"rendered":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/?p=3227"},"modified":"2025-09-02T14:24:58","modified_gmt":"2025-09-02T17:24:58","slug":"renderizacao-grafica-e-pos-processamento-em-jogos","status":"publish","type":"post","link":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/2021\/10\/06\/renderizacao-grafica-e-pos-processamento-em-jogos","title":{"rendered":"Renderiza\u00e7\u00e3o gr\u00e1fica e P\u00f3s-processamento em Jogos"},"content":{"rendered":"\n

Voc\u00ea provavelmente j\u00e1 ouviu falar de renderiza\u00e7\u00e3o, principalmente em se tratando de jogos ou modelagens em 3D, mas j\u00e1 parou para pensar no que realmente se trata a renderiza\u00e7\u00e3o gr\u00e1fica?<\/p>\n

Renderiza\u00e7\u00e3o \u00e9 o processo no qual se obt\u00e9m um resultado final, a partir da unifica\u00e7\u00e3o de um ou mais arquivos, sempre com o objetivo de melhorar a experi\u00eancia do usu\u00e1rio. Ou seja, trata-se da combina\u00e7\u00e3o de um material bruto, digitalizado, como imagens, v\u00eddeos ou \u00e1udios e recursos incorporados ao software como transi\u00e7\u00f5es, legendas, efeitos, entre outros.
O processo de renderiza\u00e7\u00e3o exige muito do hardware, principalmente do processador, por isso muitas vezes temos que aguardar a finaliza\u00e7\u00e3o do \u201cproduto final\u201d antes de poder acess\u00e1-lo ou visualizar seu conte\u00fado. Deste modo, existem dois tipos de renderiza\u00e7\u00e3o, os quais s\u00e3o classificados pela sua velocidade de execu\u00e7\u00e3o do processo. Estes tipos s\u00e3o:<\/p>\n

Renderiza\u00e7\u00e3o off-line ou pr\u00e9-renderiza\u00e7\u00e3o:<\/h3>\n

Trata-se daquela renderiza\u00e7\u00e3o que n\u00e3o prioriza ou n\u00e3o consegue entregar o resultado do projeto em tempo real. Os principais motivos para isso s\u00e3o a alta complexidade ou quantidade dos c\u00e1lculos, que n\u00e3o permitem que o computador exiba o resultado instantaneamente.
Na pr\u00e9-renderiza\u00e7\u00e3o, o CPU (processador), com o aux\u00edlio da mem\u00f3ria e da placa gr\u00e1fica, \u00e9 o principal respons\u00e1vel pelos c\u00e1lculos de render. Alguns exemplos de onde a pr\u00e9-renderiza\u00e7\u00e3o \u00e9 mais utilizada s\u00e3o anima\u00e7\u00f5es 3D, plantas de arquitetura e edi\u00e7\u00f5es de \u00e1udio e v\u00eddeo.
\"\"<\/p>\n

Renderiza\u00e7\u00e3o em tempo real:<\/h3>\n

Como o nome sugere, a renderiza\u00e7\u00e3o em tempo real processa as informa\u00e7\u00f5es em alta velocidade e apresenta ao usu\u00e1rio. Este tipo de renderiza\u00e7\u00e3o \u00e9 muito utilizado no mundo dos jogos, pois tratam-se de ambientes n\u00e3o controlados, ou seja, o jogador \u00e9 que decide o que ir\u00e1 fazer e consequentemente, as imagens devem ser renderizadas (criadas) automaticamente e em tempo real.
Devido a constante evolu\u00e7\u00e3o dos processadores gr\u00e1ficos, as famosas placas de v\u00eddeo (GPU), grande parte dos jogos atuais utilizam as GPUs para o armazenamento e processamento das imagens, deste modo melhorando a velocidade de cria\u00e7\u00e3o e exibi\u00e7\u00e3o das cenas.<\/p>\n

\"\"<\/p>\n

Contudo, os jogos n\u00e3o passam por somente um processo de renderiza\u00e7\u00e3o, existe outro m\u00e9todo chamado de \u201cpost-processing\u201d, ou \u201cp\u00f3s-processamento\u201d em portugu\u00eas, que \u00e9 o segundo t\u00f3pico desta reda\u00e7\u00e3o, ent\u00e3o vamos l\u00e1!<\/p>\n

Primeiramente precisamos entender o que \u00e9 p\u00f3s-processamento e para que \u00e9 utilizado.
Assim como a renderiza\u00e7\u00e3o vista anteriormente, p\u00f3s-processamento tamb\u00e9m \u00e9 um processo no qual filtros e efeitos s\u00e3o aplicados a imagem de um jogo. Contudo, neste processo, a imagem do jogo \u00e9 renderizada, mas antes de a mesma ser enviada para o monitor, ocorre outro processo de renderiza\u00e7\u00e3o sobre a imagem, sendo assim, aplicados diversos efeitos e filtros diretamente sobre ela, esta \u201csegunda\u201d renderiza\u00e7\u00e3o \u00e9 a chamada de p\u00f3s-processamento.
Por tratar-se de uma op\u00e7\u00e3o gr\u00e1fica, o p\u00f3s-processamento \u00e9 utilizado para contribuir com a parte visual do jogo, deste modo, permitindo que o mesmo se aproxime de sua concep\u00e7\u00e3o. Exemplos disso s\u00e3o, tornar o jogo mais realista ou mais cartunizado.<\/p>\n

\"\"<\/p>\n

Gif dispon\u00edvel em: https:\/\/www.youtube.com\/watch?v=IkRMMcPBFsc<\/h5>\n

Agora, para t\u00edtulo de curiosidade, ou at\u00e9 mesmo de ensino, vou mostrar como utilizar este processo de renderiza\u00e7\u00e3o em jogos. Para isso, estarei utilizando a engine Unity, pois ela disponibiliza por padr\u00e3o um sistema chamado \u201cUniversal Render Pipeline\u201d ou URP, adicionado a partir da vers\u00e3o de 2019 da engine e atualmente se encontra na vers\u00e3o 13.0.0.<\/p>\n


Primeiramente, voc\u00ea pode criar um novo projeto com o template do URP ou adicionar em um projeto existente. Se voc\u00ea deseja adicionar em um projeto existente, voc\u00ea pode instala-lo atrav\u00e9s do \u201cPackage Manager system\u201d, basta procura-lo na ferramenta de busca e instalar.

Ap\u00f3s instalar, voc\u00ea dever\u00e1 configur\u00e1-lo.

Na \u201cProject window\u201d clique com o bot\u00e3o direito e siga os passos: Create > Rendering > Universal Render Pipeline > Pipeline Asset.<\/strong>

Ap\u00f3s criado o asset, navegue para Edit > Project Settings… > Graphics<\/strong>. E no campo Scriptable Render Pipeline Settings<\/strong> adicione o asset criado anteriormente. E est\u00e1 pronto, o URP est\u00e1 instalado em seu projeto.<\/p>\n

Provavelmente ap\u00f3s adicionar o URP em um projeto existente, ocorrer\u00e1 erros de textura e ilumina\u00e7\u00e3o, para corrigir isto voc\u00ea dever\u00e1 atualizar os Materials e Shaders.<\/p>\n

Ap\u00f3s finalizada a instala\u00e7\u00e3o e configura\u00e7\u00e3o do URP em seu projeto, voc\u00ea pode come\u00e7ar a utilizar os efeitos dispon\u00edveis na ferramenta para personalizar seu projeto. Inicialmente voc\u00ea precisar\u00e1 criar um objeto vazio em sua cena, para fins de facilitar seu trabalho, coloque o nome deste objeto de \u201cPost processing\u201d.<\/p>\n

Assim que criar o objeto, v\u00e1 em Inspector > Add Component, neste momento pesquise por um script chamado de \u201cVolume\u201d e adicione ao objeto. Este script \u00e9 respons\u00e1vel por adicionar os v\u00e1rios efeitos na cena.<\/p>\n

Neste script haver\u00e1 dois campos principais que devem ser configurados, o primeiro \u00e9 o campo \u201cMode\u201d, no qual deve ser indicado se os efeitos ser\u00e3o aplicados em toda a cena ou somente em um local da mesma. O segundo campo \u00e9 o \u201cProfile\u201d, neste ser\u00e1 colocado um arquivo que armazenar\u00e1 as configura\u00e7\u00f5es dos efeitos que voc\u00ea colocar. Para adicionar um \u201cProfile\u201d voc\u00ea pode clicar no bot\u00e3o New, colocar o nome que desejar e salva-lo em alguma pasta do projeto, isso serve para que o profile possa ser reutilizado em v\u00e1rias cenas diferentes do projeto. Contudo, lembre-se que ao alterar as configura\u00e7\u00f5es de um \u201cProfile\u201d em uma cena, voc\u00ea ir\u00e1 alterar os efeitos em todas as cenas que utilizam o mesmo \u201cProfile\u201d.<\/p>\n

Entre os v\u00e1rios efeitos dispon\u00edveis, destaco estes a seguir:<\/p>\n

Ambient Occlusion<\/h4>\n

Este efeito serve para aperfei\u00e7oar as sombras, os buracos a superf\u00edcies muito pr\u00f3ximas e torn\u00e1-los mais realistas, possuindo dois modos: o Scalable Ambient Obscurance (utilizado para m\u00e1quinas mais \u201cfracas\u201d) e o Multi-Scale Volumetric Occlusion (utilizado para m\u00e1quinas mais potentes e consoles).<\/p>\n

\"\"2019 \/ Fonte: https:\/\/medium.com\/@matheus.gomes_86063<\/h5>\n


Anti-aliasing<\/h4>\n

Este efeito serve para remover as linhas \u201cpicotadas\u201d que aparecem ao redor de alguns objetos dentro do jogo.
Sem Anti-aliasing:<\/p>\n

\"\"2019 \/ Fonte: https:\/\/medium.com\/@matheus.gomes_86063<\/h5>\n


Com Anti-aliasing:<\/h4>\n

\"\"<\/p>\n

2019 \/ Fonte: https:\/\/medium.com\/@matheus.gomes_86063<\/h5>\n


Depth of Field<\/h4>\n

Como o nome sugere, \u201cprofundidade de campo\u201d, este efeito aplica as propriedades de foco e desfoco aos objetos da cena dependendo de sua dist\u00e2ncia da c\u00e2mera do jogo.<\/p>\n

\"\"2019 \/ Fonte: https:\/\/medium.com\/@matheus.gomes_86063<\/h5>\n


Color Grading<\/h4>\n

\u00c9 utilizado para alterar as cores da imagem final de sua cena, podendo ser utilizado para representar cen\u00e1rios mais frios ou quentes.<\/p>\n

\"\"2019 \/ Fonte: https:\/\/medium.com\/@matheus.gomes_86063<\/h5>\n


Bloom<\/h4>\n

Torna os pontos luminosos mais brilhantes e menos focados.<\/p>\n

\"\"2019 \/ Fonte: https:\/\/medium.com\/@matheus.gomes_86063<\/h5>\n


Vignette<\/h4>\n

Este efeito \u00e9 bem conhecido e provavelmente voc\u00ea j\u00e1 o viu em algum lugar, esse efeito \u00e9 o respons\u00e1vel por escurecer as bordas das imagens para criar cenas mais dram\u00e1ticas ou de filmes antigos.<\/p>\n

\"\"2019 \/ Fonte: https:\/\/medium.com\/@matheus.gomes_86063<\/h5>\n


Concluindo, estes s\u00e3o alguns dos efeitos dispon\u00edveis no URP da Unity, al\u00e9m destes existem v\u00e1rios outros com as mais diversas funcionalidades e aplica\u00e7\u00f5es. Cada um deles com suas pr\u00f3prias configura\u00e7\u00f5es que, se achar interessante, pode ir \u201cbrincando\u201d para entender como ajusta-los para atender melhor aos seus objetivos.
Esta foi a edi\u00e7\u00e3o desta semana do PET Reda\u00e7\u00e3o, qualquer d\u00favida ou sugest\u00e3o pode nos contatar por e-mail ou pelo Discord do grupo, que estaremos sempre dispostos a ajuda-lo(a).<\/p>\n

    \n
  • Links \u00fateis<\/strong>:\n
      \n
    • Documentos da Unity sobre Post-processing:
      https:\/\/docs.unity3d.com\/Manual\/PostProcessingOverview.html

      <\/li>\n
    • Tutorial de efeitos de imagem:
      https:\/\/www.youtube.com\/watch?v=a0OQvWAPeuo

      <\/li>\n
    • URP \u2013 Overview & Tutorial no canal da Unity no YouTube:
      https:\/\/www.youtube.com\/watch?v=m6YqTrwjpP0<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n

      Lucas Ziquinatti Piccini Nunes<\/p>\n","protected":false},"excerpt":{"rendered":"

      Voc\u00ea provavelmente j\u00e1 ouviu falar de renderiza\u00e7\u00e3o, principalmente em se tratando de jogos ou modelagens em 3D, mas j\u00e1 parou para pensar no que realmente se trata a renderiza\u00e7\u00e3o gr\u00e1fica? Renderiza\u00e7\u00e3o \u00e9 o processo no qual se obt\u00e9m um resultado final, a partir da unifica\u00e7\u00e3o de um ou mais arquivos, sempre com o objetivo de […]<\/p>\n","protected":false},"author":2948,"featured_media":3234,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[124,112],"tags":[193,149],"class_list":["post-3227","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-destaques","category-redacao","tag-jogos","tag-redacao"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/posts\/3227","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/users\/2948"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/comments?post=3227"}],"version-history":[{"count":0,"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/posts\/3227\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/media\/3234"}],"wp:attachment":[{"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/media?parent=3227"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/categories?post=3227"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/tags?post=3227"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}