Kompresja tekstur GLB: KTX2 i WebP

Konwersja tekstur zmienia obrazy osadzone w GLB. W tym narzędziu wybierz KTX2 lub WebP, aby włączyć kontrolę jakości, skali i maksymalnego rozmiaru. Zachowaj zachowanie trójkątów niezmienione podczas tego porównania, aby łatwiej było zobaczyć efekt ustawień tekstury.

Wybierz format, jaki może załadować Twoja przeglądarka

Wyjście tekstury	Wymagania dotyczące użytkowania i ładowania
Oryginalny format	Zachowuje istniejące kodowanie. Przydatne jako punkt odniesienia dla porównania.
WebP	Używa EXT_texture_webp. Sprawdź wsparcie w przeglądarce docelowej.
KTX2 / ETC1S	Kompaktowe kodowanie Basis Universal. Wymaga obsługi KHR_texture_basisu.
KTX2 / UASTC	Zwykle zachowuje więcej szczegółów tekstury przy większym rozmiarze pliku. Używa tej samej ścieżki ładowania KTX2.

Wymiary i jakość kodowania spełniają różne zadania

Skala tekstury 50% zmniejsza o połowę szerokość i wysokość, pozostawiając jedną czwartą pikseli przed mipmapami. Ustawienie maksymalnego rozmiaru ogranicza również wymiary wyjściowe. Jakość kodowania kontroluje kodek, a nie wymiary obrazu, więc jakość 8 w WebP nie jest równoważna jakości 8 w ETC1S lub UASTC.

Po zmianie rozmiaru sprawdź napisy, krawędzie alfa i drobne szczegóły powierzchni. Mapy normalne wymagają szczególnej uwagi, ponieważ niewielkie zmiany wartości mogą zmienić cieniowanie. Przetestuj teksturę przy oświetleniu i poziomie powiększenia używanym w aplikacji.

Porównanie przy użyciu jednej tekstury 1024 × 1024

Kodowanie i wymiary	Rozmiar GLB (w bajtach)
Oryginalny PNG, 1024 × 1024	2,914,152
WebP, 1024 × 1024	445,632
ETC1S, 1024 × 1024	258,488
UASTC, 1024 × 1024	1,373,516
WebP, 512 × 512	118,088

To urządzenie to nasza siatka falująca CC0 z generowanym gradientem i szumem PNG, zakodowana w natywnym gltfpack 1.3. Wszystkie wiersze korzystają z kompresji Meshopt, 8192 trójkątów i jakości 8, jeśli ma zastosowanie konwersja. Są to kompletne rozmiary GLB, a nie izolowane rozmiary tekstur. Tabela mierzy bajty, a nie jakość wizualną lub pamięć GPU.

Porównaj teksturę na tej samej powierzchni

Te bliskie widoki wykorzystują tę samą siatkę, kamerę, oświetlenie i ustawienia materiałów. Renderują rzeczywiste pliki z tabeli w Three.js 0.180.0. Wygenerowana tekstura zawiera gradienty i drobny szum; jest przydatny do sprawdzania tych szczegółów, ale nie reprezentuje liter, przezroczystości ani normalnych map.

Bliski widok oryginalnej tekstury PNG na siatce falującej — Oryginał PNG · 1024 × 1024

Ta sama powierzchnia z kompresją tekstury ETC1S — ETC1S · 1024 × 1024

Ta sama powierzchnia z kompresją tekstury UASTC — UASTC · 1024 × 1024

Ta sama powierzchnia z teksturą WebP o połowie rozmiaru — WebP · 512 × 512

Na tych ujęciach wersja ETC1S wygładza część drobnych szumów na różowej powierzchni, podczas gdy UASTC zachowuje bardziej swój nakrapiany wygląd. Wersja WebP o połowie rozmiaru lepiej zaciera małe różnice. Porównaj tę obserwację z tabelą rozmiarów plików: zachowanie tych szczegółów wiąże się z innym kosztem w przypadku każdego kodowania.

Otwórz obrazy w pełnym rozmiarze i porównaj niewielkie różnice w kolorach i szczegółach powierzchni. Strona internetowa skaluje podglądy, co może ukryć różnice. Te zrzuty ekranu stanowią wizualne odniesienia z jednej przeglądarki i GPU, a nie wynik jakości lub gwarancja identycznego renderowania na każdym urządzeniu.

Przykład: podziel wymiary tekstury na pół i wyeksportuj WebP

gltfpack -i input.glb -o output.glb -cc -tw -tq 8 -tj 1 -ts 0.5 -kn -km -ke

W interfejsie wybierz Mniejszy plik, wybierz WebP, otwórz Ustawienia zaawansowane i ustaw Skalę tekstury na 50%. Pozostaw maksymalny rozmiar tekstury bez zmian, chyba że potrzebujesz także limitu pikseli. Przed użyciem otwórz ponownie wynik w przeglądarce docelowej.

Skonfiguruj ładowanie KTX2 i Meshopt w Three.js →

Odniesienie do silnika: gltfpack

Otwórz optymalizator ↗