python

Сжатие PNG в DDS в формате DXT5 и просмотр результатов на лету при помощи python

  • суббота, 14 декабря 2019 г. в 21:31:27
https://habr.com/ru/post/480214/
  • Python
  • Графический дизайн


Если вы уверены, что понимаете чего ожидать от формата DXT5, то проверьте себя: в спойлере анимация — слева PNG картинка 4x4 пикселя, справа — преобразованная в DDS(DXT5)
Если вас это не удивит — смело проходите дальше.

Да, я точно знаю как происходит сжатие DXT5.
image

Если вы искали инструмент или возможность на лету увидеть, что будет с вашим PNG изображением после преобразования в DXT5 — милости прошу в статью.

Цель


Общий обзор формата DXT5 и инструмента, который позволяет увидеть результат конвертации на лету.

Статья не рассчитана на профи, она ознакомительная.

Для кого


  • Кто не сталкивался с созданием текстур
  • Рисуете растровые картинки: pixelart/2D
  • Кому стало интересно, что за зверь такой S3TC/DXT
  • Кто не ищет лёгких путей в создании игр
  • Кто пытается создавать игры без известных фреймворков(Unity и т.д.)
  • Используете UNIX систему(т.к. инструмент, который рассмотрим дальше, тестировался только под Ubuntu)

Что такое S3TC / DXT


Если очень кратко — это сжатие изображения для того, чтобы: а) оно использовало меньше (v)RAM; б) быстрее загружалось в (v)RAM.

Тут я позволю себе оставить ссылку на табличку, где есть краткая сводка форматов и зачем/когда их использовать вот.

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

Проблематика


DXT5(я его взял как пример, т.к. его использую в текущем проекте) является форматом сжатия с потерей, поэтому мы жертвуем цветом. Первое — цвета будут не в формате по 8 бит на RGB, т.е. не RGB888, а в формате RGB565. С этим ещё пол беды. Но самая главная проблема(на мой взгляд) — это то, что в рамках одного текселя(texel), который составляет 4 на 4 пикселя, на выходе будет максимум 4 цвета: 2 базовых и 2 дополнительных.

Представим, что вы разработчик (или дизайнер / художник), который до этого не сталкивался с разработкой игр(как пример) и решили создать красивый разноцветный спрайт в стиле pixelart/2D, или просто картинку на фон(опять таки растровую, а не векторную).

Взяли в руки мышь/планшет, нарисовали. Вроде красиво(примем условность, что это красиво).

image

Чтобы преобразовать его в DDS, нужно воспользоваться GIMPом, фотошопом с плагинами или чем-то подобным. Но результат вы увидите только после того, как откроете получившийся файл.

Давайте же посмотрим, что получилось(представим, что видим только правую часть картинки, в случаете открытия DDS файла GIMPом):

image

Девушка определённо погрустнела, цветы завяли, диадема стала верёвочкой. «Мда» скажете вы. Вот если бы я видел, что получится раньше… А вот тут может помочь (условно помочь) инструмент, который я собрал для своих нужд — Pyglet PNG to DDS editor

Зачем


Для редактирования / правки исходного файла, подбор приблизительных цветов, составление приблизительной палитры.

Данный «редактор» на лету преобразует PNG изображение в DDS и сразу видно, что получится при конвертации и вставке спрайта в игру.

Почему


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

И это всё?


На данном этапе да. Много чего можно допилить в такой «редактор», но всему своё время.

Больше хотелось бы узнать у сообщества: как вы решаете такие ситуации, когда нужна проверка того, что будет с текстурой на выходе.

P.S.: редактор относительно нормально работает с картинками до 512*512. Течёт по памяти, но не сильно :) (в коде можно найти этот метод по комментарию "!!!ACHTUNG!!!").