Gamedev Владимир Семыкин
19 153

Имитация интерьера: почему здания в Spider-Man выглядят жилыми

Нью-Йорк, наконец, состоит не из картонных коробок.

В закладки
Аудио

В Marvel's Spider-Man во многих окнах можно увидеть полноценный интерьер. Это сделано с помощью одного трюка — всё воссоздаётся с помощью особого шейдера.

Сооснователь студии Ronimo Games (Awesomenauts) Йост ван Донген на сайте Gamasutra опубликовал текст, в котором разобрал принцип создания реалистичных интерьеров в Marvel's Spider-Man. Сам автор занимался этим вопросом в рамках работы над своим дипломным исследованием в 2007 году. Мы выбрали из материала главное.

Работа этого эффекта наглядно продемонстрирована в видео Kotaku.

На 0:40 этого ролика видно, что комнаты фактически игнорируют геометрию здания: дверь находится там, где должно быть окно. Если же заглянуть в ту же комнату, но из другого окна, то можно заметить, что там представлен уже совсем другой интерьер. Всё это говорит о том, что комнаты являются фальшивыми, но, тем не менее, они совершенно корректны с точки зрения перспективы и имеют реальную глубину.

Нельзя сказать, что это большой недостаток, так как пользователи в меньшей степени обращают внимание на такие подробности. Подобные интерьеры — просто фон, который способствует приданию глубины городу без особого удара по производительности.

Для сохранения производительности комнаты в играх зачастую не имеют интерьеров. Например, это можно увидеть в GTA V

Итак, весь этот эффект основан на технике interior mapping. Принцип её работы заключается в том, что само здание не содержит никакой дополнительной геометрии. Интерьеры существуют только в шейдере. Он выполняет рейкастинг со стенами, потолком и полом, чтобы обозначить, что игрок должен видеть в интерьере.

Слева направо: окна только с отражениями; окна с техникой interior mapping; каркасная модель, по которой видно, что interior mapping не добавляет полигонов

Используемый для рейкастинга луч — это просто луч от камеры к пикселю. Визуализируемый пиксель находится на внешней части здания, поэтому используется только часть луча за пикселем. Это связано с тем, что именно эта часть находится внутри здания.

Рейкастинг может показаться сложным и затратным, но на самом деле это очень полезно в данном случае. Хитрость заключается в одном ограничении: при планировании интерьера потолки и стены находятся на постоянном расстоянии. Зная это, можно легко вычислить местоположение игрока, потолка и стен комнаты.

Сами потолки и стены представляют собой бесконечные геометрические плоскости. Вычисление пересечения между бесконечной плоскостью и лучом занимает всего несколько шагов и приводит к снижению нагрузки на систему.

Идея, лежащая в основе interior mapping, заключается в том, что при рендеринге пикселя окна, луч направляется из этой точки в здание. Луч пересекает потолок, чтобы вычислить, какой пиксель будет виден

Всего в комнате шесть плоскостей: потолок, пол и четыре стены. Однако достаточно только трёх, поскольку известно направление взгляда пользователя. Например, если смотреть на потолок, не нужно проверять пол. Точно так же, из четырёх стен нужно рассмотреть только две, которые находятся в направлении, в котором смотрит игрок.

Чтобы точно выяснить, что видит пользователь, нужно рассчитать пересечение луча с каждой из этих трёх плоскостей. Пересечение, которое находится ближе всего к камере, даёт понять, какая плоскость отображается в этом пикселе.

Затем точка пересечения используется в качестве координаты текстуры, чтобы подобрать цвет пикселя. Например, если луч достигает потолка в позиции (x, y, z), то (x, y) используются в качестве координаты текстуры, игнорируя z.

При этом, расчёты пересечений для каждой из трёх плоскостей, благодаря умной упаковке переменных, могут выполняться одновременно.

Interior mapping без текстур окон показывает, что комнаты рендерятся с правильной перспективой и текстурами даже без дополнительных полигонов

Также с помощью interior mapping можно, например, менять освещение в разных комнатах для имитации смены дня и ночи. Для этого применяется текстура шума, из которой высчитывается индекс комнаты в качестве координат текстуры.

Имитация разного освещения

Поскольку происходит лишь распространение лучей в плоскости, все комнаты являются простыми прямоугольниками с текстурами. Вся мебель в помещении находится на текстуре, а значит, что она остаётся плоской. В Marvel's Spider-Man это заметно при приближения: столы в комнатах — фактически плоские текстуры на стенах.

Как видно на показанном ниже изображении, можно дополнить эту технику с помощью одного или нескольких дополнительных слоёв текстуры. Но это даёт дополнительную нагрузку на производительность.

Выполняя трассировку лучей ещё одной плоскости, параллельной внешней части здания, можно добавить в помещения мебель и людей. Тем не менее они всё равно останутся плоскими

В Simcity (2013) техника interior mapping также использовалась. Разработчики усовершенствовали изначальную идею и соединили несколько текстур в одну для создания глубины комнат. В видео ниже (начиная с 1:00) объясняется принцип работы техники.

Автор оригинального текста приложил ссылку на свою демонстрацию interior mapping. Также в Unreal Engine 4 можно найти эту технику в виде функции InteriorCubeMap.

#spiderman #опыт #графика

{ "author_name": "Владимир Семыкин", "author_type": "editor", "tags": ["spiderman","\u043e\u043f\u044b\u0442","\u0433\u0440\u0430\u0444\u0438\u043a\u0430"], "comments": 70, "likes": 142, "favorites": 130, "is_advertisement": false, "subsite_label": "gamedev", "id": 35143, "is_wide": false, "is_ugc": false, "date": "Mon, 31 Dec 2018 11:03:42 +0300" }
{ "promo": {"title":"Guns of Boom","order_id":0,"state":80,"description":"\u041e\u043d\u043b\u0430\u0439\u043d PvP-\u0448\u0443\u0442\u0435\u0440. \u0412\u0441\u0442\u0443\u043f\u0430\u0439 \u0432 \u0431\u043e\u0439!","email":"soldatenko@game-insight.com","button_text_id":7,"link":null,"app_store_link":"https:\/\/gunsofboom.onelink.me\/4289444349\/33db4f80","google_play_link":"https:\/\/gunsofboom.onelink.me\/4289444349\/33db4f80","color_id":0,"rejection_reason_text":null,"image":"{\"type\":\"image\",\"data\":{\"uuid\":\"d739e618-b339-faeb-7ab0-727ca32bf550\",\"width\":88,\"height\":88,\"size\":24774,\"type\":\"png\",\"color\":\"f1bb4f\",\"external_service\":[]}}","total":35500,"with_payment":false,"dates":"[{\"year\":\"2019\",\"month\":\"01\",\"day\":\"20\",\"available\":\"true\",\"price\":\"3500\",\"discount\":\"1500\",\"format\":\"backend\"},{\"year\":\"2019\",\"month\":\"01\",\"day\":\"21\",\"available\":\"true\",\"price\":\"5000\",\"discount\":\"0\",\"format\":\"backend\"},{\"year\":\"2019\",\"month\":\"01\",\"day\":\"22\",\"available\":\"true\",\"price\":\"5000\",\"discount\":\"0\",\"format\":\"backend\"},{\"year\":\"2019\",\"month\":\"01\",\"day\":\"23\",\"available\":\"true\",\"price\":\"5000\",\"discount\":\"0\",\"format\":\"backend\"},{\"year\":\"2019\",\"month\":\"01\",\"day\":\"24\",\"available\":\"true\",\"price\":\"5000\",\"discount\":\"0\",\"format\":\"backend\"},{\"year\":\"2019\",\"month\":\"01\",\"day\":\"25\",\"available\":\"true\",\"price\":\"5000\",\"discount\":\"0\",\"format\":\"backend\"},{\"year\":\"2019\",\"month\":\"01\",\"day\":\"26\",\"available\":\"true\",\"price\":\"3500\",\"discount\":\"1500\",\"format\":\"backend\"},{\"year\":\"2019\",\"month\":\"01\",\"day\":\"27\",\"available\":\"true\",\"price\":\"3500\",\"discount\":\"1500\",\"format\":\"backend\"}]","hits_count":84110,"scrolls_count":0,"clicks_count":110,"hits_limit":0,"scrolls_limit":0,"clicks_limit":0}, "link": "https://dtf.ru/redirect?hash=711a827f815242367f19babc34b72c1fdd1651f55cf4a641a5de6aeaea90816c&component=booster&id=40&type=daily&target=entry&url=", "buttonText": "Скачать", "location": "entry", "id": "40" }
{ "id": 35143, "author_id": 94357, "diff_limit": 1000, "urls": {"diff":"\/comments\/35143\/get","add":"\/comments\/35143\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/35143"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 64954, "possessions": [] }

70 комментариев 70 комм.

Популярные

По порядку

Написать комментарий...
31

Это всё прекрасно конечно, но пролетая перед зданиями с зеркальными окнами почему-то отражение города добавить не забыли, а паучка не видно, странно. Паук-вампир? Заявка на продолжение?

Ответить
21

На самом деле да, имхо самый большой удар по иммерсивности тут наносят не двери выходящие на улицу с 10 этажа, а отсутствие адекватного отражения когда ползешь/бежишь по стене. Каждый раз замечал и расстраивался.

Причем под каким то углом оно есть, а под другими нет.

Ответить
3

Обычный SSR, отражения как в том же Hitman 2 убили бы всю производительность.

Ответить
14

Торопишься! Это тема следующей статьи: Почему Spider-Man шедевр на примере неотражающегося паука.

Ответить
2

Псч не тянет

Ответить
2

Ресурсы не бесконечные все же.

Ответить
1

Screenspace Reflections

Ответить
0

Скорее Reflection Probes, если не ошибаюсь - они пререндеренные

Ответить
0

А, ну тогда да. Хотя вряд ли бы такое с паучком сработало - угол отражения острый, а значит в отражении должна была бы быть невидимая сторона. Только разве размылить его или отражать его только когда камера сбоку, но подошло бы такое? Хотя мб я чего не понимаю.

Ответить
1

В этом то и дело, что при большинстве ракурсов паучка в окне нету

Ответить
0

Объясните на пальцах как это работает, если не сложно. Я в упор не понимаю почему если я смотрю ровно на спину паука когда он ползет, я не должен увидеть его отражения.

Ответить
0

Упрощенное объяснение:
Есть 2 типа отражений:
1) Статические отражения - это когда заранее делается шот и просто выставляется кубмапа. Это позволяет отражать статичные объекты (дома,пропсы).
2) Динамические отражения - в таком случае приходится каждый кадр обрабатывать и снимать с него координаты вертексов и отрабатывать.
Второй вариант,на сколько мне известно,довольно дорогой в плане производительности и реализации,его очень редко используют.

Ответить
0

С этим я знаком. Просто я думал, что отсутствие нормального отражения при беге по стене это физический факт и так и должно быть. Если это так, то науку этого как раз таки я не понимаю.

Ответить
0

Есть даже скрины из игры, где рука паука в окне отражается и обрывается, дальше угла шейдеру не хватает

Ответить
0

SSR он в реальном времени, на лужах бывает, а в пауке на зданиях пререндер, причем один на район

Ответить
0

SSR отражает только то, что находится в поле зрения камеры. При SSR паука отражать от просто не сможет: передняя часть, которая должна отражаться, не видна камере.

Тут помогли бы только рефлекшен пробы, но во-первых, их надо пихать на отражающую поверхность (стекло), и желательно, чтобы иммерсивность не портилась, на каждое стекло. Это крайне ресурсозатратно.

Ответить
0

Не замечал

Ответить
0

Ну вообще там и с отражениями города все плохо, обычно вообще левая cubemap.

Ответить
0

Проезжая мимо станции, с меня слетела шляпа

Ответить
0

Вообще паук отражался, слабо, но отражался

Ответить
0

В Гран Туризмо 5 такое было.)))

Ответить
0

И остаётся по сей день в GT Sport.

Ответить
8

Нельзя сказать, что это большой недостаток, так как пользователи в меньшей степени обращают внимание на такие подробности.

Я бы так не сказал. Да, заметят это не все, но вот если заметят, то это огромный удар по погружению. Когда тебя пытаются убедить, что вот, кто-то живет в домах, а потом показывают дверь, ведущую на улицу на 10 этаже - ну такое себе.

Ответить
21

Спустя 5 минут опять забудешь.

Ответить
7

А вот и нет, такие штуки откладываются на подсознании и это через пару часов это начинает выбивать тебя из погружения. В Юбисовтовских играх часто замечаю подобное, когда в очередной раз прихожу в плохо уникализированную локацию.

Ответить
30

А вот и нет, такие штуки откладываются на подсознании и это через пару часов это начинает выбивать тебя из погружения

Ты начинаешь сомневаться, а реален ли тот мир в котором ты живешь? Может все это ложь? Лишь декорации для какого-то большого театра, в котором все мы лишь 3д модели с заранее прописанными скриптами? Может мы просто болванчики, существующие для того, чтобы создавать атмосферу для игрока более высокого уровня абстракции?
После всех этих вопросов, ты глубоко вдыхаешь и выходишь в дверь, на улицу.
На десятом этаже.

Ответить
4

Нет, всё куда прозаичнее - людям биологически свойственно замечать повторения и цикличность.

Ответить
0

По мере накопления разнообразного игрового опыта, после очередного запущенного Ассасина, ты вздыхаешь, выключаешь Ассасина, включаешь условного Prince of Persia.

Ответить
0

Говорю за себя. Тоже пару раз это "выбивало", но отвлекаешься на полеты с миссиями и уже как-то плевать.
Игра все же не про медленное перемещение по стенам зданий.

Ответить
8

Не скажите.
В Бубернотче ECTb и HETY пару лет назад мемасами коммьюнити стали после одного такого заметившего.

Ответить
6

ведущую на улицу на 10 этаже - ну такое себе.

Жители города, в котором обитают шесть суперзлодеев и с десяток супергероев, просто очень экстравагантны!

Ответить
2

Когда тебя пытаются убедить, что вот, кто-то живет в домах, а потом показывают дверь, ведущую на улицу на 10 этаже - ну такое себе.

Кстати, в игре 2001 года Шенму 2 помещения в башнях Коулуна генерировались процедурно. Причём со всей мебелью, окнами, дверями и прочими предметами. Можно было открыть множество дверей и зайти в помещения, посмотреть что там внутри (Ю. Судзуки назвал эту технологию Magic Room). Для 2001 года это было крышесносно! Тем более что все объекты в помещении были трёхремными, а не как в Пауке - текстура поверх внутренних плоскостей коробки.

У DF разобран этот момент, начиная с 4:55 как раз показывают, как работает генерация комнат.

Ответить
2

Был бы экз sony, обсасывали бы в десятках статей

Ответить
1

И шла бы игра в 5фпс, ага. Зато стулья в небосребах из полигонов.

Ответить
1

И шла бы игра в 5фпс, ага

В 30 фпс, как и Паучок. Иногда были падения до 20 фпс в сложных сценах.

Ответить
1

Лучше плоские коробки как в жта?

Ответить
2

Плоские коробки не пытаются тебя на*бать.

Ответить
2

Да тебя вся игровая индустрия наёбывает

Ответить
3

Но не плоские коробки!

Ответить
0

Так может в этом доме просто пожарную лестницу передвинули или еще чего. С дверьми обычно не возятся в таком случае. Хотя зависит от того как часто оно встречается.

Ответить
0

Да, а на место лестницы поставили ПРОЗРАЧНОЕ окно... но внутри решили не портить свежий ремонт и оставили дверь.

Ответить
5

Почему наконец то. Это было ещё в дивижене.

Ответить
1

и в вачдогс, юби вообще любители использовать передовые технологии в графике

Ответить
5

Рендер помещений с паралаксом был ещё в 2010 году в Гран Туризмо 5. И там не просто текстуры на коробке, но даже всякие там фикусы стояли в офисах.)))

Ответить
1

А движене тоже не просто текстуры на коробке. Там "жители" иногда открывали окна и подбадривали тебя или прост смотрели на улицу. Или кричали что бы ты проваливал куда подальше.

Ответить
0

В Юнити это еще было.

Ответить
2

Он про Нью-Йорк
Нью-Йорк, наконец, состоит не из картонных коробок

Ответить
5

Этой фиче лет 5-10

Ответить
3

больше кекаю с угловых комнат, когда в одном окне одна комната а с другой стороны другая)

Ответить
2

Отражения паучка могли бы и запилить хотя бы на зеркальных плоскостях скринспейсом.
На самом деле этот город со стеклянными небоскрёбами довольно трудная задачка для разрабов, т.к. существующие текущие техники довольно ограничены и только рей треем это можно пофиксить. Это как пилить джунгли в крайзисе без просвечивания листвы

Ответить
1

Со скринспейсом ты не увидишь отражения того, чего не рендерит твоя камера. Собственно скринспейс в пауке и используется, отсюда ты его отражения можешь увидеть разве что только когда камера находится между пауком и отражающей поверхностью, а не за ним, т.е. не при ползании по стенам точно. Например в каком-то таком положении скринспейс какой-то результат да выдаст, не реалистичный, но хоть что-то: https://i.imgur.com/qPQ8Pdq.jpg - не из игры скрин, если что.

Ответить
0

Такое ощущение, что на DTF уже был разбор этой фичи. Или мне кажется?

Ответить
4

Я все же ошибся. Читал эту же статью тут: https://m.habr.com/post/424827/

Ответить
0

Ещё вроде этот же автор выкладывал по Forza Horizon 4 описание этой же техники. Но они, благодаря меньшим масштабам, интерьеры сделали гораздо лучше

Ответить
4

Был, был. Может, не целая статья была ему посвящена, но я на DTF уже об этом читал.

Ответить
2

Наоборот все говорят, что это минус этой игры - «мертвый город»

Ответить
1

Хз, лично для меня это выглядит как рофл. Но если бы я был дауном, то написал бы что выглядят как жилые.

Ответить
–4

"Имитация луж: почему лужи в Spider-Man выглядят как настоящие"

Ответить
1

Не, ну мне, например, программисту мечтающему стать геймдизайнером - интересно.

Ответить
0

Я не говорил, что статья неинтересная

Ответить
0

Потому что в их отражении в основном видно только небо.

Ответить
0

К слову. Отражения в лужах в батле с рейтрейсингом - говно. В реальной жизни их меньше.

Ответить
0

Вчера прошел 3 дополнение - оказалось очень даже хорошим)

Ответить
0

Такое же было в жта 5

Ответить
0

Не было. В Watch Dogs 2 было.

Ответить
0

Дня... Спустя четыри месяца кто-то перевёл и опубликовал иностранную статью с vga))) живём )

Ответить
0

Автоматизация никогда не заменит уникально проработанное программистом и или художником окружение.

Ответить
0

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "clmf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fjog" } } }, { "id": 10, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "clmf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-250597-0", "render_to": "inpage_VI-250597-0-1134314964", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=clmf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudo", "p2": "ftjf" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fzvc" } } } ]
Невероятно! Skyrim портировали на...
Подписаться на push-уведомления