Сжатие PNG в DDS в формате DXT5 и просмотр результатов на лету при помощи python
- суббота, 14 декабря 2019 г. в 21:31:27
python
https://habr.com/ru/post/480214/
Если вы уверены, что понимаете чего ожидать от формата DXT5, то проверьте себя: в спойлере анимация — слева PNG картинка 4x4 пикселя, справа — преобразованная в DDS(DXT5)
Если вас это не удивит — смело проходите дальше.
Если вы искали инструмент или возможность на лету увидеть, что будет с вашим PNG изображением после преобразования в DXT5 — милости прошу в статью.
Общий обзор формата DXT5 и инструмента, который позволяет увидеть результат конвертации на лету.
Статья не рассчитана на профи, она ознакомительная.
Если очень кратко — это сжатие изображения для того, чтобы: а) оно использовало меньше (v)RAM; б) быстрее загружалось в (v)RAM.
Тут я позволю себе оставить ссылку на табличку, где есть краткая сводка форматов и зачем/когда их использовать вот.
Если вы хотите более подробно почитать о том, как этот формат может использоваться в играх, то вот вам статья в 4-х частях на английском или, если вы предпочитаете почитать по каким формулам происходит само сжатие, то вот статья русском, на английском.
DXT5(я его взял как пример, т.к. его использую в текущем проекте) является форматом сжатия с потерей, поэтому мы жертвуем цветом. Первое — цвета будут не в формате по 8 бит на RGB, т.е. не RGB888, а в формате RGB565. С этим ещё пол беды. Но самая главная проблема(на мой взгляд) — это то, что в рамках одного текселя(texel), который составляет 4 на 4 пикселя, на выходе будет максимум 4 цвета: 2 базовых и 2 дополнительных.
Представим, что вы разработчик (или дизайнер / художник), который до этого не сталкивался с разработкой игр(как пример) и решили создать красивый разноцветный спрайт в стиле pixelart/2D, или просто картинку на фон(опять таки растровую, а не векторную).
Взяли в руки мышь/планшет, нарисовали. Вроде красиво(примем условность, что это красиво).
Чтобы преобразовать его в DDS, нужно воспользоваться GIMPом, фотошопом с плагинами или чем-то подобным. Но результат вы увидите только после того, как откроете получившийся файл.
Давайте же посмотрим, что получилось(представим, что видим только правую часть картинки, в случаете открытия DDS файла GIMPом):
Девушка определённо погрустнела, цветы завяли, диадема стала верёвочкой. «Мда» скажете вы. Вот если бы я видел, что получится раньше… А вот тут может помочь (условно помочь) инструмент, который я собрал для своих нужд — Pyglet PNG to DDS editor
Для редактирования / правки исходного файла, подбор приблизительных цветов, составление приблизительной палитры.
Данный «редактор» на лету преобразует PNG изображение в DDS и сразу видно, что получится при конвертации и вставке спрайта в игру.
Потому, что я не нашел инструментов, которые позволяют на лету увидеть то, как будет выглядеть твоя картинка/текстура.
На данном этапе да. Много чего можно допилить в такой «редактор», но всему своё время.
Больше хотелось бы узнать у сообщества: как вы решаете такие ситуации, когда нужна проверка того, что будет с текстурой на выходе.
P.S.: редактор относительно нормально работает с картинками до 512*512. Течёт по памяти, но не сильно :) (в коде можно найти этот метод по комментарию "!!!ACHTUNG!!!").
- Python
- Графический дизайн
Если вы уверены, что понимаете чего ожидать от формата DXT5, то проверьте себя: в спойлере анимация — слева PNG картинка 4x4 пикселя, справа — преобразованная в DDS(DXT5)
Если вас это не удивит — смело проходите дальше.
Да, я точно знаю как происходит сжатие DXT5.
Если вы искали инструмент или возможность на лету увидеть, что будет с вашим 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, или просто картинку на фон(опять таки растровую, а не векторную).
Взяли в руки мышь/планшет, нарисовали. Вроде красиво(примем условность, что это красиво).
Чтобы преобразовать его в DDS, нужно воспользоваться GIMPом, фотошопом с плагинами или чем-то подобным. Но результат вы увидите только после того, как откроете получившийся файл.
Давайте же посмотрим, что получилось(представим, что видим только правую часть картинки, в случаете открытия DDS файла GIMPом):
Девушка определённо погрустнела, цветы завяли, диадема стала верёвочкой. «Мда» скажете вы. Вот если бы я видел, что получится раньше… А вот тут может помочь (условно помочь) инструмент, который я собрал для своих нужд — Pyglet PNG to DDS editor
Зачем
Для редактирования / правки исходного файла, подбор приблизительных цветов, составление приблизительной палитры.
Данный «редактор» на лету преобразует PNG изображение в DDS и сразу видно, что получится при конвертации и вставке спрайта в игру.
Почему
Потому, что я не нашел инструментов, которые позволяют на лету увидеть то, как будет выглядеть твоя картинка/текстура.
И это всё?
На данном этапе да. Много чего можно допилить в такой «редактор», но всему своё время.
Больше хотелось бы узнать у сообщества: как вы решаете такие ситуации, когда нужна проверка того, что будет с текстурой на выходе.
P.S.: редактор относительно нормально работает с картинками до 512*512. Течёт по памяти, но не сильно :) (в коде можно найти этот метод по комментарию "!!!ACHTUNG!!!").