Эксперимент по разработке проекта от нуля до прибыли. 2.2.Распространенные ошибки рендеринга и где они обитают

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

Продолжаем серию статей о разработке нашего экспериментального проекта.

Алиасинг, или "Лесенки" появляются при растеризации 3D изображения в 2D картинку для вывода на экран. Каждый пиксель в картинке может быть только одного цвета, поэтому видеокарта (GPU) выбирает цвет пикселя, проецируя 3d фигуру на сетку. И, если фигура не проходит через центр пикселя на сетке - то он не окрашивается. Отсюда и появляются “лесенки” - это хорошо видно на примере растеризации треугольника.

Бороться с этим призвано сглаживание, в нашем случае - MSAA (Multisample anti-aliasing). С включенным MSAA, видеокарта (GPU) при растеризации определяет цвет пикселя, уже по нескольким точкам, а не только в центре, собирая средней цвет в конечно отображаемом пикселе, пропорциональный количеству покрытых точек.

Таким образом, для 2x MSAA проверяются две точки, чтобы увидеть, находится ли в них треугольник, а для 4x MSAA - 4 точки соответственно.

Поскольку в “мобильном” VR, на который мы ориентируемся используется тайловый GPU, при растеризации изображение разделяется на множество прямоугольных блоков - тайлов (16х16 пикселей), и процесс растеризации выполняется уже для каждого из этих маленьких тайлов параллельно, MSAA сглаживания незначительно влияет на производительность и должно быть включено ВСЕГДА. Однако это, увы, не решение всех проблем.

Упомянутый выше тайловый GPU помимо плюсов в производительности, имеет и свои минусы в формировании изображения. Снова не будем вдаваться в технические подробности, а рассмотрим на конкретных примерах:

В интерьере нашего интерактивного музея будет писательский стол с лампами:

Подставка этих ламп - отполированный металл, то есть на нем образуются блики. Проблема в том, что при игре в VR - изображение НИКОГДА не бывает статическим - подергивания от сокращений мышц шеи, дрожание головы и прочие биологический факторы создают микродвижения камеры, а значит, у блестящего предмета в месте его блика, из-за таких микродвижения и особенностей тайлового рендера, снова появится пресловутая “лесенка”. В дополнение к этому мобильный MSAA не сглаживает отражения вообще, что усугубляет ситуацию еще больше.

решаем этот вопрос следующими способами:

Еще один пример - стол с красивой столешницей из отдельных досок:

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

На материалах с маской нужно примерять Alpha to coverage (включается в настройках материала). В таком случае по контуру добавляется несколько градиентных слоев (четыре при MSAAx4).

Раньше приходилось не использовать Masked материалы вообще, а обходится только прозрачными материалами и добавлять небольшой градиентный контур на текстуру маски самостоятельно. Теперь всё сделано за нас и сделано отлично!

Текстурный алиасинг, как и геометрический, происходит при растрировании в 2D-сетку пикселей. Если пиксели на текстуре не совпадают с 2D-сеткой, на которую мы растеризуем, выходное изображение после растеризации будет интерполировано примерно так:

На гифке хорошо видно, что линии мерцают переднем плане, а на заднем плане просто шумный беспорядок. Если бы текстура была сложнее, чем просто несколько белых линий - было бы еще хуже. Именно так выглядит текстурный алиасинг.

Бороться с этим беспорядком нам помогает Mip Mapping.

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

Именно это делает Mip Mapping - уменьшает разрешение текстуры при удалении её от игрока.

Цветная кодировка на гифке показывает, как изменяется разрешение текстуры при удалении. Каждый уровень mip уменьшает разрешение текстуры в 2 раза. То есть если белая текстура 256х256 пикселей, то красная 128х128, желтая 64х64 и т.д.

Результат уже гораздо лучше! Но всё же идеального совпадения размера текстуры с размером сетки растеризации не достигнуть – всегда будет небольшое различие. И при растеризации определить какой будет цвет конечного пикселя при смешивании нескольких пикселей текстуры помогает фильтрация.

Применяющиеся методы фильтрации следующие:

Расстояние, на котором срабатывает переключение на следующий mip уровень, то есть разрешение текстуры уменьшается в 2 раза, можно менять. Это может понадобится, если текстура слишком “мыльная” на близком расстоянии. Или слишком “четкая” на дальнем, что приводит к алиасингу.

Посмотрите еще раз на цветную гифку - сетка, имитирующая пол вообще никогда не отображается в полном разрешении, а переходы на следующий mip уровень слишком заметны.

Смена расстояния срабатывания mip levels называется Mip Bias и по умолчанию он равен 0.

Параметр меньше нуля заставит GPU выбрать текстуру с более высоким разрешением на большем расстоянии, а больше нуля приведет к обратному результату. По моему опыту, смещение в -0,7, хорошо помогает детализированным текстурам сохранять четкость на больших расстояниях, без появления алиасинга, но это только примерная цифра – параметр нужно подбирать индивидуально для каждого случая.

В Unreal engine выглядит это так:

Итак, мы решили все визуальные проблемы в нашем окружении. Все линии чистые и плавные, но по какой-то причине все изображения виртуальных интерфейсов – виджетов выглядят по прежнему ужасно! Ну волнуйтесь, будем исправлять!

Основная проблема в том, что при создании 3d виджетов меню, интерактивных подсказок и всякого такого, в мобильном рендере, что к ним не применяется mipmaping, не применяется сглаживания и даже пост процесс не применяется. Поскольку текстура формируется в реальном времени и перезаписывается каждый кадр - создавать ей mip уровни довольно затратное мероприятие. Выглядит всё это примерно вот так:

Происходит здесь ровно то же самое, что и при растеризации текстур.

Методы борьбы же следующие:

1. Подобрать расстояние, с которого игрок будет смотреть на виджет:

Если каждый пиксель виджета будет совпадать с сеткой растеризации, то изображения будет четким:

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

2. Stereo Layers

Стереослои позволяют отправлять текстуру в VR композитор шлема, а не рендерить её в движке. Что даёт не только преимущество в производительности, но и композитор рендерит текстуру 1:1 - по сравнению с экраном на мобильном устройстве. То есть как раз все пиксели текстуры совпадают с сеткой растеризации! Идеально! Обязательно используйте стереослои.

Минусов же следующие - скудная документация.

При использовании ES3.1 рендера нельзя рассчитать глубину слоя - он будет всегда виден поверх всего остального, что есть на сцене. В Vulcan рендере глубину задать можно, но убирается вся прозрачность. Вообще вся.

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

С моей точки зрения стереослои - самый хороший способ.

3. Multisampling

Можно написать кастомный шейдер использующий деривативы (ddx, ddy), общая идея в том, что нужно создать блок 2x2 субпикселя, повторив в нем каждый пиксель оригинальной текстуры 4 раза создав таким образом кастомный мультисампллинг и упростив выборку для растеризации.

Такой метод точно будет ухудшать производительность - учитываем при реализации. Результат же всё равно уступает стереослоям.

Если нет желания читать все буквы сверху, то вот выжимка:

Полезные ссылки:

Надеюсь такой поверхностный гайд поможет победить технические трудности при разработке. В следующий раз посмотрим, что уже непосредственно сделано, и начнем планировать маркетинг. Stay Tuned и успехов!

Оглавление:

Часть 0 - Поставили задачу разработать приложение с нуля до вывода прибыли.

Часть 1 - Концепт и Диздок. Создаем приложение для знакомства с творчеством Брайона Гайсина (Brion Gysin) и его Dreamachine в VR!

Часть 2.1 - Оптимизация.

Часть 2.2 - Алиасинг и рендеринг

Часть 3 - Единственное произведение, на которое нужно смотреть с закрытыми глазами

Почта для всякого: artem@bulletheadgames.com