Convertir PNG en DDS au format DXT5 et visualiser les résultats à la volée en utilisant python

Si vous êtes sûr de comprendre à quoi vous attendre du format DXT5, vérifiez vous-même: dans le spoiler, l'animation est à gauche une image PNG de 4x4 pixels, à droite - convertie en DDS (DXT5)
Si cela ne vous surprend pas, n'hésitez pas à passer à autre chose.

Oui, je sais exactement comment se passe la conversion en DXT5.
image

Si vous cherchiez un outil ou une opportunité à la volée pour voir ce qui arrivera à votre image PNG après la conversion en DXT5 - bienvenue dans l'article.

But


Un aperçu général du format DXT5 et un outil qui vous permet de voir le résultat de la conversion à la volée.

L'article n'est pas conçu pour les pros, il est uniquement à titre indicatif.

Pour qui


  • Qui n'a pas fait face à la création de textures
  • Dessiner des bitmaps: pixelart / 2D
  • Qui se demandait quel genre de bête tel S3TC / DXT
  • Qui ne cherche pas des moyens faciles de créer des jeux
  • Qui essaie de créer des jeux sans frameworks bien connus (Unity, etc.)
  • Utiliser un système UNIX (car l'outil, que nous examinerons plus loin, n'a été testé que sous Ubuntu)

Qu'est-ce que S3TC / DXT


Très brièvement, il s'agit de compression d'image de sorte que: a) il utilise moins (v) de RAM; b) chargé plus rapidement dans (v) RAM.

Ici, je me permets de laisser un lien vers une plaque où il y a un bref résumé des formats et pourquoi / quand les utiliser ici .

Si vous souhaitez en savoir plus sur la façon dont ce format peut être utilisé dans les jeux, voici un article en 4 parties en anglais, ou si vous préférez lire les formules de la compression elle-même, alors voici un article en russe , en anglais .

Problème


Le DXT5 (je l'ai pris comme exemple, car je l'utilise dans le projet actuel) est un format de compression avec perte, nous sacrifions donc la couleur. Tout d'abord, les couleurs ne seront pas au format RVB 8 bits, c'est-à-dire pas RGB888, mais au format RGB565. Il y a encore la moitié du problème avec cela. Mais le principal problème (à mon avis) est qu'à l'intérieur d'un texel, soit 4 x 4 pixels, la sortie aura un maximum de 4 couleurs: 2 de base et 2 supplémentaires.

Imaginez que vous êtes un développeur (ou designer / artiste) qui n'a pas rencontré de développement de jeu auparavant (à titre d'exemple) et a décidé de créer un magnifique sprite multicolore dans le style pixelart / 2D, ou juste une image en arrière-plan (encore une fois, bitmap, pas vectoriel) .

Ramassé une souris / tablette, dessiné. Il semble beau (supposons qu'il soit beau).

image

Pour le convertir en DDS, vous devez utiliser GIMP, Photoshop avec des plugins ou quelque chose de similaire. Mais vous ne verrez le résultat qu'après avoir ouvert le fichier résultant.

Voyons ce qui s'est passé (imaginez que nous ne voyons que le côté droit de l'image, dans le cas de l'ouverture d'un fichier DDS avec un GIMP):

image

La fille était définitivement triste, les fleurs fanées, le diadème est devenu une corde. "Hmm," dites-vous. Maintenant, si j'ai vu ce qui s'est passé plus tôt ... Et ici, l'outil que j'ai mis en place pour mes besoins peut aider (aide conditionnelle) - Pyglet PNG to DDS editor

Pourquoi


Pour l'édition / l'édition du fichier source, sélection des couleurs approximatives, préparation d'une palette approximative.

Cet «éditeur» à la volée convertit une image PNG en DDS et vous pouvez immédiatement voir ce qui se passe lors de la conversion et de l'insertion d'un sprite dans un jeu.

Pourquoi


Parce que je n'ai pas trouvé d'outils qui vous permettent de voir à la volée à quoi ressemblera votre image / texture.

C'est tout?


À ce stade, oui. Beaucoup de choses peuvent être ajoutées à un tel «éditeur», mais tout a son temps.

J'aimerais en savoir plus sur la communauté: comment résolvez-vous de telles situations lorsque vous devez vérifier ce qui va arriver à la texture à la sortie.

PS: l' éditeur fonctionne relativement normalement avec des images jusqu'à 512 * 512. Elle coule de la mémoire, mais pas beaucoup :) (dans le code vous pouvez trouver cette méthode par le commentaire "!!! ACHTUNG !!!").

Source: https://habr.com/ru/post/fr480214/


All Articles