Динамические тени в играх что это
Тема: Динамические тени, или трата FPS впустую
Опции темы
Поиск по теме
Решил создать тему, как дополнение к предыдущей (wf.mail.ru/forums/showthread.php?t=318560)
Может быть кто замечал, что на карте «Ангар 2.0» можно играть вполне комфортно, отключив тени? Не сразу видишь разницу. Что включены тени, что отключены.
Суть в том, что там есть уже заранее нанесённые участки, которые по сути имитируют тени.
К чему тема. У нас достаточно большое количество игроков со слабыми машинками. Лично я являюсь таковым.
Я всегда выставляю низкую графику, но без теней глаза вырывает на «Пригороде» или на «Бункере».
У нас в игре тени динамические, т.е. каждый объект постоянно «прогружает» текстуру своей тени.
Почему, зная, что у игроков слабое железо, разработчиком не применяется такая штука, как «Baked shadows»?
Либо второй вариант.
Тени с качеством в 256 (В первой строке темы есть ссылка на предыдущую, где можно видеть, что на средних настройках разрешение теней 512, а на низких они вообще отключены.)
В чём суть варианта.
1. Убрать выключение теней на низких настройках.
2. Сделать низкие тени с качеством в 256.
3. Внести в настройки графики отдельную галочку «отключить тени».
В чём проблема этой задачи для разработчиков?
Обман игроков, или как устроены отражения в играх.
ПРЕДИСЛОВИЕ
Довольно часто разработчики игр пытаются сделать отражения в своих играх как можно более правдоподобными, но знаете ли вы, что с отражениями в реальной жизни они не имеют ничего общего. Практически всегда это обман. Создать эффект отблеска зеркал, переотражения на воде, преломление света от осколков стекла помогают многочисленные ухищрения и упрощения создателей игр. Сегодня нескольких таких методах мы и поговорим.
МЕТОДЫ
1. Рендер сцены с нескольких ракурсов. (planar reflections)
Это пожалуй самый распространённый метод создания зеркальных поверхностей в играх. Сцена (видимая игроком часть локации) рендерится (рендер — отрисовка кадра, либо сцены) с нескольких точек, далее уже накладывается на слой, которому нужно создать эффект отражения. Этот процесс добавляет много «гемороя», так как рендер сцены «съедает» очень много ресурсов компьютера, соответственно разработчикам игр требуется дополнительное время на оптимизацию. Довольно часто о таком методе вспоминают только под конец создания проекта, поскольку приоритет стоит у более важных аспектах игры (Например проработка персонажей, создание ландшафта и проработка мира). Пример на скриншотах внизу.
2.Полностью созданная зеркальная комната.
Это был очень популярный способ до начала 2000-х годов. Использовался метод в 99% случаев только для создания зеркал. Он ещё более ресурсозатратен, чем первый способ, зато очень простой в создании. Для начала создаются две абсолютно одинаковых комнаты, выставляется всё те же объекты, те же источники света, вообщем обе комнаты просто дублируются. Самое главное то, что вместо зеркала было просто отверстие в другую комнату, а другая комната просто отражалась по горизонтали. Естественно и сам персонаж в комнате-зеркале spawnился(создавался) и отрисовывался заново. По причинам всё большего нарастания количества объектов в локациях данный метод на сегодняшний день мало кем используется. Пример на скриншотах внизу.
3. Screen-space reflections (упрощённая трассировка лучей).
SSR (Screen-space reflections) появилась задолго технологии RTX от Nvidia, но в целом использует похожий принцип. Однако, в отличие от технологии Nvidia, такой метод задействует трассировку только для тех объектов, которые находятся в поле зрения игрока, остальные же объекты не просчитиваются для экономии ресурсов ПК. Это логично, так как технология впервые появилась в 2011 году, и представила её компания Crytek в своей Crysis 2, а после и в Crysis 3, в то время мощность видеокарты просто не позволяла разработчикам рендерить лишнее. Сейчас же такая технология присутствует во всех современных «движках» («движок» — ПО для создания игры) таких как Unreal Engine 4, Unity, CryEngine и других. Пример на скриншотах внизу.
4. Qube maps (кубическая карта).
Способ очень популярный, хотя не без своих изъянов, таких например как отсутствие игрока в отражении, поскольку кубическая карта «prerender» объект («prerender» объект — объект, отрисованый до присутствия персонажа в локации) а также большая степень размытия, из за чего qube maps нельзя использовать для зеркал. Кубическая карта состоит из шести граней куба, у которого на каждую грань «накладывается» своя текстура. Каждую текстуру можно увидеть только по отдельности, смотря в одно из шести направлений. Определяется такая текстура в зависимости от того, куда смотрит центральная точка на экране игрока. Метод используется как в настоящее время, так и в недалёком прошлом, так как не требует большого количества ресурсов ПК. Саму технологию представила Nvidia в 1999 году вместе со своей видеокартой GeForce 256. Примеры на скриншотах.
5. RTX (Ray Tracing). Трассировка лучей от Nvidia.
Многие считают, что RTX просчитывает тени, источники света и отражения также, как и в реальной жизни, но это не так. Ray Tracing это тоже лишь имитация, но основанная на природных и физических явлениях. Вообще в целом RTX — это целый набор различных технологий, таких например как: создание динамических теней; реалистичных отражений; реалистичных источников света, а также степень их преломления от объектов (перечислена лишь малая часть, на деле их гораздо больше). Благодаря тому, что в видеокартах серии RTX имеются RT ядра и достигается высокая производительность и приемлемый FPS, так как нагрузка на просчёт отражений ложится на них, а не на видеоядро. На самом деле, такой метод может работать и на видеокартах линейки GTX (пример: GTX 1080, 1070), но производительность будет очень низкой. Немного о том, как работает сама технология: это метод комбинированной отрисовки кадра, где отлеживается траектория лучей света во всех точках пространства. Он даёт возможность определить степень освещённости, степень отражения и преломления объектов. Даже сейчас, в 2020 году использовать «на полную» RTX не получается, так как мощности нынешних видеокарт всё ещё не хватает, но будем надеяться на лучшее. Примеры RTX на скриншотах внизу.
6. iRAY. Трассировка лучей на GTX видеокартах.
iRAY на самом деле редко используется непосредственно в играх, зато очень часто использовалась (пока на замену не пришёл RTX) в создании 3D моделей для этих самых игр. О том как работает «Nvidia iRAY» достаточно мало информации, но принцип схож с трассировкой лучей на видеокартах 2000 серии, хотя и с большим количеством упрощений и послаблений (так как до недавнего времени работала только на GTX видеокартах, поддержку RTX добавили в прошлом году). Примеры на скриншотах ниже (с помощью него созданы источники света, отражения на полу на первом скриншоте и в окнах на втором скриншоте).
7.Global illumination и shadow map (глобальное освещение и карты теней).
8. Дополнительная камера.
Этот способ довольно редко используется в играх, так как требует очень много ресурсов и в целом он очень похож на способ #1, однако он очень прост в реализации, поэтому его используют в основном неопытные разработчики. Суть в том, что помимо камеры игрока (через неё вы видите всё, что происходит на экране) создаётся ещё одна с таким ракурсом, чтобы кадр для последующего отражения получился естественным. Далее на полученный кадр накладываются эффекты (самый частый из них это размытие) и для экономии ресурсов понижается разрешение (но даже с пониженным разрешением ресурсов требуется слишком много). Кроме высокого потребления ресурсов ПК, ещё одним недостатком является статичность кадра, то есть где бы ваш персонаж не встал, отражение не перестроится (хотя через «множество костылей» это можно реализовать, но это очень глупо, поскольку есть способы лучше, тот же SSR). Примеры на скриншотах внизу.
КОНЦОВКА
Сегодня вы узнали для себя чуть больше об отражениях в играх, надеюсь вы не жалеете о потраченном времени на прочтение, я же в свою очередь за уделённое мне время вас благодарю. (Можете также посмотреть новый блог о самых популярных игровых условностях у меня в профиле, мне будет приятно если именно вы его прочитаете)
ССЫЛКИ НА ВСЕ ИСТОЧНИКИ
Динамические свет и тени в моей 2d игре
Часть первая: Динамическое освещение
На его создание меня вдохновил пост на реддите, где aionskull использовал карты нормалей в Unity для динамического освещения своих спрайтов. А пользователь с ником gpillow запостил в комментах что он сделал что-то похожее в Love2D. Вот тут 8-мб гифка с результатами. За неё спасибо jusksmit’у.
Итак, что такое динамическое освещение? Это техника в 3D графике, где источник света освещает объекты на сцене. Динамическое потому, что обновляется в реальном времени при движении источника. Довольно стандартная штука в 3D мире и легко применимая к 2D, если, конечно, вы можете использовать преимущества шейдеров.
Сделать динамическое освещение можно зная, что угол падения света на плоскость определяет её освещенность, а определить освещенность можно узнав вектор нормали, который показывает куда «смотрит» плоскость.
На картинке выше это стрелка, торчащая из центра панели. Вы можете увидеть, что, когда лучи света идут под большим углом (к нормали), панель освещена гораздо хуже. Так вот, в конце концов, алгоритм довольно прост — чем больше угол, тем меньше света получает панель. Самый простой путь вычислить освещенность — вычислить скалярное произведение между вектором от источника света и вектором нормали.
Ок, всё очень здорово, но как получить вектора нормали в 2d игре? Здесь, вообще-то, нет никаких объемных объектов… Однако, здесь нам могут помочь дополнительные текстуры (те самые карты нормалей), в которых будет записана необходимая информация. Я создал 2 таких карты для двух домов в видео повыше и использовал их чтобы посчитать освещение, вот пример:
RGB значения не могут быть отрицательными, так что мы подвинем все значения на 0.5: [x:0.5, y:1, z:0.5]. Ну и ещё RGB обычно представляется в числе от 0 до 255, так что мы домножим на 255 и получим [x:128, y:255, z:128], или, другими словами, вектор «на юг» будет вот этим светло-зеленым на карте нормалей.
Теперь, когда у нас есть нормали, мы можем позволить графической карте сделать её магию.
Я использую ImpactJS, у него неплохая совместимость с WebGL2D. (Он платный, я рекомендую pixi.js или любая другая графическая библиотека с webgl рендерером. Если знаете ещё аналоги — пишите в комменты! прим. перев.) Используя WebGL2D мы можем легко добавить пиксельный шейдер для освещения:
Пара заметок: У нас получается попиксельное освещение, которое немного отличается от вершинного освещения (обычного в 3d). Выбора особого нет, так как вершины в 2d бессмысленны (их всего 4 штуки для отображения плоскости на сцене). Но, вообще-то, это не проблема, попиксельное освещение гораздо более точное. Также следует отметить, что шейдер рендерит только освещение, без основного спрайта. Придется признать, я немного жульничаю, ведь на самом деле я не освещаю свой спрайт, а, скорее, затеняю его и в lightColor я передаю темно-серый цвет. Настоящее освещение пикселей, а именно повышение яркости, выглядит хуже, пиксели кажутся «вытертыми». У этой проблемы есть решения, но сейчас это непринципиально.
Часть вторая: рисование теней.
Отбрасывание теней в 3D — хорошо изученная проблема с известными решениями, типа рейтрейсинга или shadow-mapping’а. Однако, я затруднился найти какое-нибудь приемлимое готовое решение для 2d, пришлось делать самому, думаю получилось нормально, хотя и у него есть пара недостатков.
Вкратце, будем рисовать линию от пикселя на сцене к солнцу и проверять, есть ли какое-нибудь препятствие. Если есть — то пиксель в тени, если нет — на солнце, так что, впринципе, ничего сложного.
Шейдер принимает xyAngle и zAngle, которые отвечают за то, где находится солнце. Так как оно очень далеко, то лучи света будут параллельны, и, соответственно, эти два угла будут одинаковы для всех пикселей. Также, шейдер будет принимать карту высот мира. Она будет показывать высоту всех объектов, зданий, деревьев и т.д. Если пиксель принадлежит зданию, то значение пикселя будет примерно 10, и означать, что высота здания в данной точке — 10 пикселей.
Итак, шейдер начнет в пикселе, который надо осветить и, используя вектор xyAngle, будет продвигаться по направлению к солнцу мелкими шажками. На каждом из них мы будем проверять, если в данном пикселе карты высот что-нибудь.
Как только мы найдем препятствие, мы определим его высоту, и насколько высоким оно должно быть в данной точке чтобы преградить солнце (используя zAngle).
Если значение в карте высот будет больше, то всё, пиксель в тени. Если нет — мы продолжим искать. Но рано или поздно мы сдадимся и объявим, что пиксель освещен солнцем. В примере я захардкодил 100 шагов, пока что работает отлично.
Вот код шейдера в упрощенной/псевдо форме:
В uTexStep записана длина шага для проверки пикселей. Обычно достаточно 1/heightMap.width или 1/heightMap.height, ибо в OpenGL координаты текстур имеют значения от 0 до 1, так что 1/разрешение как раз даст нам размер одного пикселя.
Заключение
Какие настройки графики всегда лучше отключать
Эти настройки производительности имеют совсем небольшое визуальное воздействие.
Все мы любим выставлять настройки графики на максимум. Но не все они имеют положительный эффект. Даже с элитным аппаратным обеспечением, есть некоторые графические параметры, которые дают небольшое визуальное различие, но имеют значительное влияние на частоту кадров. А если вы ещё и играете на старом ПК, то это именно те настройки, которые вам нужно отключать, чтобы повысить частоту кадров и в тоже время не сделать графику ужасной.
Графические опции и их соответствующее воздействие также могут значительно варьироваться от игры к игре, поэтому для наилучшей производительности нужно пересмотреть специфические руководства по оптимизации. Другими словами, эти параметры «выжимают максимум» в соотношении «железо – производительность».
На удивление эффект тени усиливает производительность графики, однако немножко затемнённые края не достаточно сильно влияют на ваше общее качество изображения. Не выключайте их, но если вы боретесь за частоту кадров – их определенно лучше поставить на низкий или средний уровень.
Размытие в движении
Размытие в движении иногда используется для хорошего эффекта, например, в гоночных играх, но по большей части этот параметр отбирает вашу производительность в обмен на то, что большинство геймеров обычно не любят. Размытость в движении особенно нужно избегать в играх с быстром темпом, например, в шутерах от первого лица.
Глубина резкости
Глубина резкости в играх, как правило, относится к эффекту размытия вещей на заднем плане. Точно так же как и размытие в движении, этот параметр отвлекает наши глаза и создает качество, как у фильмах – это не всегда отлично смотрится. К тому же эта настройка может повлиять на производительность, особенно, если она неправильно использована. Её нужно настраивать, отталкиваясь от личных предпочтений и от того, в какую игру вы играете.
Динамическое отражение
Эта настройка во многом зависит от игры, в которую вы играете, а также от того, что для вас важно с точки зрения качества изображения. Динамические отражения являются параметрами, влияющими на отображения игроков и других движущихся объектов в лужах и на блестящих поверхностях. Это чрезвычайно усиливает производительность графики. Тем не менее, динамические отражения не всегда замечаются, а отключив их, вы увеличите ваши кадры в секунду от 30 до 50%.
Избыточная выборка сглаживания (суперсемплинг, SSAA)
С включённым суперсемплингом, игра делает кадры с более высоким разрешением, нежели разрешение самого экрана, а затем сжимает их обратно до размера дисплея. Это может улучшить вид игр, но если ваш ПК не является особым монстром (как наш любимый Large Pixel Collider), SSAA разрушит вашу производительность. В большинстве случаев, она не стоит того, чтобы её применяли, особенно, когда существует столько альтернатив суперсемплингу
Как я делал динамичные тени в изометрической пиксель-арт игре
И что-то даже получилось
Я люблю пиксель-арт. А ещё я люблю изометрические игры. Поэтому, когда я решил делать игру тайкун CoffeeBiz, то выбор стилистического решения был прост и понятен. Но хотелось добавить что-то необычное, чтобы как-то выделиться в потоке пиксель-инди. И я решил попробовать получить картинку, как будто это вручную нарисованный изометрический пиксель-арт, но с динамичным 3d освещением и тенями. В идеале поставленная на паузу игра должна была создавать впечатление полностью вручную отрисованного изображения.
Почему бы просто не отключить фильтры, сглаживание и делать всё как обычно, только с изометрической камерой?
Плитки на спрайте пола все одинаковые, т.к. это 2D спрайт фона. Кирпичи же на текстурированном меше каждый своего размера и формы. Но это ещё не так страшно. Страшно, что изменение меша, его положения, положения камеры, разрешения экрана, да что угодно всё ломали.
И я понял, что на чистом 3d нужной мне картинки не сделать. Что бы превратить тексель в пиксель камеры, которая повернута на 45 и 30 градусов, GPU нужно сделать ряд вычислений, которые сплошь состоят из операций с плавающей точкой.
Другой вариант был делать всё на вокселях. Но воксели в Юнити? Это было бы что-то очень медленное и с очень трудоёмким процессом изготовления и редактирования игровых объектов.
И после многих-многих-многих экспериментов я пришел к такому решению
Итоговая картинка CoffeeBiz складывается из 4х слоёв – интерфейс, 2D отрисованная вручную картинка, 3D слой с освещением, 3D с динамичными объектами. Подумываю ещё добавить слой с картой нормалей, но это в будущем.
Процесс добавления объекта/здания в игру состоит из следующих шагов:
Отрисовка спрайта объекта. Рисую я в фотошопе. Не самый удобный инструмент для пиксельной графики, но лучшего редактора для работы со слоями, масками и смарт-объектами я не нашел. Для ускорения работы некоторые типовые элементы, вроде диагональных линий, углов, типовых мини объектов сохранены в виде кистей. Фильтрация спрайтов – point, без компрессии, так что в игре никакого блура и мыла.
Под готовый 2D спрайт создается похожий меш, который потом попиксельно подгоняется под спрайт. Для простых объектов иногда достаточно пары примитивных мешей встроенных в Юнити. Для чего-то более сложного я использую ProBuilder, т.к. он работает прямо в сцене и можно сразу видеть результат наложения, что очень удобно.
Отключенные каскады для теней. Я экспериментировал с кастомными шейдерами, но в итоге остановился на встроенном, как в целом удовлетворяющем задаче.
Одна камера рендерит фон и спрайты, другая – меши без текстур для теней статичных объектов, третья – текстурированные меши анимированных объектов. Вторая и третья рендерят в render texture, которые потом накладываются поверх основного слоя с фоном и спрайтами
В целом в таком режиме на создание одного объекта вроде кофейного киоска уходит около 2х часов.
В итоге получается то, что мне было нужно. Ещё немного гифок результата:
Это прозвучит довольно самонадеянно, но мне кажется, что получилось что-то довольно уникальное. По крайней мере я не смог найти других примеров игр с такой графикой – динамичные тени в пиксель-арт изометрии. Если вы сталкивались и сможете назвать примеры было бы круто, т.к. сложно делать что-то без возможности посмотреть на чужой опыт.
Ну и ссылка на стим, там ещё скриншоты, девлог и прочие детали.