L'illusion de l'espace: comment le nouveau Spiderman rend les pièces sans géométrie

Dans le jeu Spider-Man de Marvel récemment publié, de nombreux bâtiments ont des intérieurs à l'extérieur des fenêtres. Ils ont fière allure, mais il semble qu'ils aient été mis en œuvre à l'aide d'un rendu astucieux - la géométrie des intérieurs n'existe pas réellement et elle est générée par un shader. Je n'ai vu aucune déclaration officielle d'Insomniac sur la façon dont ils l'ont fait, mais en fonction de l'apparence de l'effet, il est très probable que la technique de cartographie intérieure que j'ai mise au point en 2007 en travaillant sur la thèse ait été mise en œuvre. Je n'en avais pas parlé auparavant sur le blog, c'est donc le bon moment pour expliquer le curieux petit shader que j'ai créé.

Commençons par regarder le gameplay de Spider-Man de Marvel. Le jeu est tout simplement génial. Le site Web de Kotaku a enregistré une vidéo distincte sur Windows:


Comme vous pouvez le voir à environ 40 secondes de la vidéo, en fait, les pièces ne font pas partie de la géométrie: là où la fenêtre devrait évidemment être, la porte est située. De plus, en regardant dans une pièce sous différents angles du bâtiment, on voit un intérieur différent. Dans certains cas, il y a même un mur au coin du bâtiment. Tout cela nous fait comprendre que les pièces sont imitées. Cependant, d'un point de vue perspective, ils s'affichent correctement et ont une réelle profondeur. Je pense que les inconvénients de telles salles ne sont pas très importants pendant le jeu, car les joueurs n'étudient généralement pas les salles de si près: les intérieurs ne sont qu'une toile de fond et ne font pas l'objet d'une étude approfondie. Je crois que cette façon de créer des pièces ajoute de la profondeur et de la vie à la ville sans dépenser trop de ressources.


Pour économiser des ressources, les bâtiments dans les jeux n'ont souvent pas d'intérieurs, comme on peut le voir sur la capture d'écran de GTA V

Tout d'abord, je veux expliquer que mon message n'est pas une plainte: je suis ravi que mon équipement ait été utilisé dans un jeu à si grande échelle et n'accuse en aucun cas Insomniac de vol. Comme je l'ai dit dans la première publication sur la cartographie intérieure, ce serait un honneur pour moi que quelqu'un utilise cette technique. Si Insomniac a vraiment profité de mon idée dans sa technique, je pense que c'est génial. Si elle ne l'a pas utilisé, il semble qu'elle ait trouvé quelque chose d'étrangement similaire. Ensuite, je serais intéressé par la façon dont cela a été fait.

Alors, comment fonctionne la cartographie intérieure? L'idée est que le bâtiment lui-même ne contient aucune géométrie supplémentaire. Les intérieurs n'existent que dans le shader. Ce shader effectue un raycasting avec des murs, des plafonds et des sols pour calculer ce que le joueur devrait voir à l'intérieur.


De gauche à droite: uniquement les fenêtres avec reflets, les fenêtres avec mappage intérieur, modèle filaire - le mappage intérieur n'ajoute aucun polygone.

Le rayon utilisé pour raycast est simplement un rayon de la caméra au pixel. Le pixel que nous rendons est situé à l'extérieur du bâtiment, nous n'utilisons donc que la partie du faisceau après le pixel, car c'est la partie qui se trouve réellement à l'intérieur du bâtiment.

Le raycasting peut sembler une opération compliquée et coûteuse, mais dans ce cas particulier, il est en fait très simple et rapide. L'astuce est que vous pouvez ajouter une restriction simple: avec la cartographie intérieure, les plafonds et les sols sont à une distance constante. Sachant cela, nous pouvons facilement calculer dans quelle pièce nous nous trouvons et où se trouvent le sol et le plafond dans cette pièce. Les plafonds et les sols eux-mêmes sont des plans géométriques sans fin. Le calcul de l'intersection entre un plan infini et un rayon ne prend que quelques étapes et dépense peu de ressources.


La salle a 6 plans: plafond, sol et 4 murs. Cependant, nous devons considérer seulement trois d'entre eux, parce que nous savons dans quelle direction nous regardons. Par exemple, si nous levons les yeux, nous n'avons pas besoin de vérifier l'étage inférieur, car nous verrons le plafond au-dessus. De même, au lieu de 4 murs, nous devons considérer seulement deux dans la direction dans laquelle nous regardons.

Pour déterminer ce que nous voyons, nous devons calculer l'intersection du rayon avec chacun de ces trois plans. L'intersection avec le faisceau le plus proche de la caméra nous indique lequel des plans que nous voyons dans ce pixel. Ensuite, nous utilisons le point d'intersection comme coordonnée de la texture pour trouver la couleur du pixel. Par exemple, si le faisceau coupe à la position (x, y, z) avec le plafond, alors nous utilisons (x, y) comme coordonnée de texture et ignorons z.

Ici, j'ai ajouté une bonne optimisation: une partie des calculs d'intersection pour chacun des trois plans peut être effectuée simultanément. Les shaders utilisés fonctionnaient avec float4 à la même vitesse qu'avec float, donc grâce à un emballage intelligent des variables, il était possible de couper les trois rayons avec des avions en même temps. Cela m'a permis d'économiser des ressources et a permis d'atteindre une fréquence d'images élevée avec la cartographie intérieure, même en 2007. On m'a dit que les cartes vidéo modernes avec float fonctionnent plus rapidement qu'avec float4; cela signifie que sur le matériel actuel, cette optimisation ne fonctionne plus.


La cartographie intérieure sans textures de fenêtre montre que les pièces sont rendues avec la perspective et les textures correctes, bien qu'une géométrie supplémentaire ne soit pas requise.

Vous pouvez en savoir plus sur la cartographie intérieure dans mon article . Cet article a été publié lors de la conférence Computer Graphics International en 2008. La publication de cette publication évaluée par des pairs est ma première (et unique) candidature au titre de fier chercheur. Cet article décrit également des expériences supplémentaires pour ajouter des détails, par exemple, changer la distance entre les murs pour des pièces de taille inégale et sélectionner au hasard des textures à partir d'un atlas de texture pour une plus grande variabilité de la pièce. Il décrit également en détail les deux variantes illustrées dans les images ci-dessous.


L'éclairage dans les pièces peut être allumé et éteint dynamiquement pour simuler un changement de jour et de nuit. Cela se fait en utilisant la texture de bruit à partir de laquelle nous lisons, en utilisant l'indice de la pièce comme coordonnées de texture.

Puisque nous n'émettons que des rayons dans l'avion, toutes les pièces sont de simples carrés avec des textures. Tous les meubles de la pièce seront sur la texture, ce qui signifie rester plat. Dans Spiderman, cela se remarque lorsque vous vous approchez de la caméra: les tables dans les chambres sont en fait des textures plates sur les murs. Comme vous pouvez le voir dans l'image ci-dessous, nous pouvons compléter notre technique avec une ou plusieurs couches de texture supplémentaires par pièce, mais cela est associé à des coûts de performance supplémentaires.


En effectuant le lancer de rayons d'un autre plan parallèle à la surface extérieure du bâtiment, vous pouvez ajouter des meubles et des personnes à la pièce. Cependant, ils resteront stables.

Après la publication de cet article, l'un des programmeurs Simcity (2013) m'a dit que la technique de cartographie intérieure était également utilisée dans ce jeu. Elle y est très cool et les développeurs ont enregistré une excellente vidéo à ce sujet. Ils ont affiné mon idée originale en enregistrant toutes les textures dans une seule texture et en ajoutant des pièces de différentes profondeurs. La partie de la cartographie intérieure commence à 1h00:


Si vous souhaitez explorer cette technique plus en profondeur, vous pouvez télécharger ma démo de cartographie intérieure avec le code source. Si vous travaillez dans Unreal Engine 4, vous pouvez trouver la cartographie intérieure en tant que fonction de moteur standard sous la forme de la fonction InteriorCubeMap.

Après tant d'années, c'est formidable de voir enfin que ma technique de cartographie intérieure est utilisée dans la production de jeux vidéo à grande échelle! Si vous connaissez des jeux qui utilisent quelque chose de similaire, écrivez-moi à ce sujet.