A ilusão do espaço: como o novo Homem-Aranha cria salas sem geometria

No recém-lançado jogo do Homem-Aranha da Marvel, muitos edifícios têm interiores do lado de fora das janelas. Eles parecem ótimos, mas parece que foram implementados usando renderização esperta - a geometria dos interiores realmente não existe e é gerada por um shader. Eu não vi nenhuma declaração oficial da Insomniac sobre como eles fizeram isso, mas com base na aparência do efeito, é muito provável que a técnica de mapeamento de interiores que eu criei em 2007 enquanto trabalhava na dissertação fosse implementada. Eu não escrevi sobre isso no blog antes, então agora é o momento certo para explicar o curioso shader que eu criei.

Vamos começar assistindo à jogabilidade do Homem-Aranha da Marvel. O jogo parece incrível. O site da Kotaku gravou um vídeo separado no Windows:


Como você pode ver em cerca de 40 segundos do vídeo, de fato, as salas não fazem parte da geometria: onde a janela deveria estar obviamente, a porta está localizada. Além disso, olhando em uma sala de diferentes ângulos do edifício, vemos um interior diferente. Em alguns casos, há até uma parede na esquina do edifício. Tudo isso nos faz entender que os quartos são imitados. No entanto, do ponto de vista da perspectiva, eles são exibidos corretamente e têm profundidade real. Eu acho que as desvantagens de tais salas não são muito importantes durante o jogo, porque os jogadores geralmente não estudam as salas tão de perto: os interiores são apenas um pano de fundo e não um assunto de estudo cuidadoso. Acredito que essa maneira de criar salas agrega profundidade e vida à cidade sem gastar muitos recursos.


Para economizar recursos, os edifícios nos jogos geralmente não têm interiores, como pode ser visto na captura de tela do GTA V

Antes de tudo, quero explicar que meu post não é uma reclamação: estou muito satisfeito por meu equipamento ter sido usado em um jogo tão em grande escala e de forma alguma acusar Insomniac de roubar. Como eu disse na primeira publicação sobre mapeamento de interiores, seria uma honra para mim se alguém usasse essa técnica. Se o Insomniac realmente tirou vantagem da minha ideia na técnica dela, acho ótimo. Se ela não o usou, parece que ela encontrou algo estranhamente semelhante. Então, eu estaria interessado em como isso foi feito.

Então, como funciona o mapeamento de interiores? A idéia é que o próprio edifício não contenha nenhuma geometria adicional. Os interiores existem apenas no shader. Esse sombreador realiza radiodifusão com paredes, tetos e pisos para calcular o que o jogador deve ver no interior.


Da esquerda para a direita: somente janelas com reflexões, janelas com Mapeamento de interiores, modelo de estrutura de arame - O Mapeamento de interiores não adiciona polígonos.

O raio usado para o raycast é simplesmente um raio da câmera para o pixel. O pixel que renderizamos está localizado na parte externa do edifício, portanto, usamos apenas a parte da viga após o pixel, porque essa é a parte que está realmente dentro do edifício.

O Raycasting pode parecer uma operação complicada e dispendiosa, mas nesse caso em particular é realmente muito simples e rápido. O truque é que você pode adicionar uma restrição simples: com mapeamento de interiores, tetos e pisos ficam a uma distância constante. Sabendo disso, podemos calcular facilmente em qual sala estamos e onde o piso e o teto estão localizados nessa sala. Os tetos e pisos são infinitos planos geométricos. O cálculo da interseção entre um plano infinito e um raio dá apenas alguns passos e gasta poucos recursos.


A sala possui 6 aviões: teto, piso e 4 paredes. No entanto, precisamos considerar apenas três deles, porque sabemos em que direção estamos olhando. Por exemplo, se olharmos para cima, não precisamos verificar o piso abaixo, porque veremos o teto acima. Da mesma forma, em vez de quatro paredes, precisamos considerar apenas duas na direção em que estamos olhando.

Para determinar o que vemos, precisamos calcular a interseção do raio com cada um desses três planos. A interseção com o feixe mais próximo da câmera nos diz qual dos planos que vemos neste pixel. Em seguida, usamos o ponto de interseção como coordenada da textura para encontrar a cor do pixel. Por exemplo, se a viga cruza na posição (x, y, z) com o teto, usamos (x, y) como coordenada da textura e ignoramos z.

Aqui adicionei uma boa otimização: parte dos cálculos de interseção para cada um dos três planos pode ser realizada simultaneamente. Os shaders utilizados trabalhavam com o float4 na mesma velocidade do float; portanto, graças ao empacotamento inteligente das variáveis, foi possível cruzar os três raios com os planos ao mesmo tempo. Isso economizou alguns recursos e ajudou a obter uma alta taxa de quadros com o mapeamento de interiores, mesmo em 2007. Disseram-me que as placas de vídeo modernas com float funcionam mais rápido do que com o float4; isso significa que no hardware atual essa otimização não funciona mais.


O mapeamento interno sem texturas de janela mostra que as salas são renderizadas com a perspectiva e as texturas corretas, embora não seja necessária geometria adicional.

Você pode aprender mais sobre o mapeamento de interiores no meu artigo . Este artigo foi publicado na Computer Graphics International Conference em 2008. Ter esta publicação revisada por pares é a minha primeira (e única) aplicação para o orgulhoso título de cientista. Este artigo também descreve experimentos adicionais para adicionar detalhes, por exemplo, alterar a distância entre paredes para salas de tamanho desigual e selecionar texturas aleatoriamente em um atlas de textura para maior variabilidade da sala. Também descreve em detalhes as duas variações mostradas nas imagens abaixo.


A iluminação das salas pode ser ativada e desativada dinamicamente para simular uma mudança de dia e de noite. Isso é feito usando a textura de ruído da qual estamos lendo, usando o índice da sala como coordenadas de textura.

Como apenas emitimos raios no avião, todos os quartos são quadrados simples com texturas. Todos os móveis da sala ficarão com a textura, o que significa permanecer plano. No Spiderman, isso é perceptível quando você se aproxima da câmera: as mesas nas salas são na verdade texturas planas nas paredes. Como você pode ver na imagem abaixo, podemos complementar nossa técnica com uma ou mais camadas de textura adicionais por sala, mas isso está associado a custos adicionais de desempenho.


Ao realizar o traçado de raios de outro plano paralelo à superfície externa do edifício, você pode adicionar móveis e pessoas à sala. No entanto, eles ainda permanecerão planos.

Após a publicação deste post, um dos programadores Simcity (2013) me disse que a técnica de mapeamento de interiores também foi usada neste jogo. Nela, ela parece muito legal, e os desenvolvedores gravaram um ótimo vídeo sobre isso. Eles refinaram minha idéia original, salvando todas as texturas em uma textura e adicionando salas de diferentes profundidades. A parte do mapeamento interior começa às 13:00:


Se você quiser explorar essa técnica mais profundamente, faça o download da minha demonstração de mapeamento de interiores com o código-fonte. Se você trabalha no Unreal Engine 4, pode encontrar o mapeamento interno como uma função de mecanismo padrão na forma da função InteriorCubeMap.

Depois de tantos anos, é ótimo finalmente ver que minha técnica de mapeamento de interiores é usada na produção de videogames em grande escala! Se você conhece jogos que usam algo semelhante, escreva-me sobre isso.