Артефакты в 2D-играх — на границе текстуры

в 8:02, , рубрики: 2d графика, game development, Анимация и 3D графика, артефакты, Программирование, метки: , ,

Вдохновившись статьей «У прозрачных пикселей тоже есть чувства или артефакты png'шек с прозрачностью», решил рассказать еще о некоторых проблемах, которые могут возникнуть при разработке 2D-игры.

В этой статье я хотел бы рассказать о нетривиальных проблемах, с которыми мне пришлось столкнуться при разработке 2D-игр, связанных с фильтрацией текстур.

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

Немного о фильтрации текстур.

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

Пусть это изображение мы хотим отобразить:
Артефакты в 2D играх — на границе текстуры

Текстурная адресация.

Режимы текстурной адресации указывают как должен вести себя видео процессор если текстурная координата вершины треугольника выходит за пределы изображения. Существует четыре вида адресации: обертывание (wrap), цвет рамки (border color), одиночное наложение (clamp) и отражение (mirror).

При установленном режиме текстурной адресации WRAP, пиксели с одной стороны изображения попадают на другую.
Артефакты в 2D играх — на границе текстуры

Решение:

Используйте WRAP адресацию только если это необходимо. Если вам нужно просто вывести текстуру, используйте режим CLAMP.

Текстуры размеры которых, ширина или высота, не кратны степени двойки.

На некоторых видеокартах текстуры, размеры которых, ширина или высота, не кратны степени двойки, дополняются. И мы получаем такое изображение:
Артефакты в 2D играх — на границе текстуры
Конечно, дополненную часть изображения на экране мы не увидим. О ее существовании можно узнать получив буфер текстуры и обнаружив, что он больше ожидаемого. Но эта часть будет участвовать в фильтрации. В результате этого ее часть мы сможем увидеть на границе изображения.
Артефакты в 2D играх — на границе текстуры

Решение:

Можно заполнить эту область, полностью или частично, пикселями, которые лежат на границе. Вот так:

Артефакты в 2D играх — на границе текстуры

Общее решение:

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

Артефакты в 2D играх — на границе текстуры
Синяя рамка это область которая будет выводиться на экран.

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

Источники:
1. Франк Д. Луна. Введение в программирование трехмерных игр с DX9. Wordware Publishing, 2003. ISBN: 1-55622-922-4

Автор: sanchousf

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js