Kompresja tekstur GLB: KTX2 i WebP

Konwersja tekstur zmienia obrazy osadzone w GLB. W tym narzędziu wybierz KTX2 lub WebP, aby włączyć ustawienia jakości, skali i maksymalnego rozmiaru. Podczas porównania nie zmieniaj udziału zachowanych trójkątów, aby łatwiej ocenić wpływ samych tekstur.

Wybierz format obsługiwany przez przeglądarkę modeli

Format wyjściowy tekstur	Zastosowanie i wymagania ładowania
Format oryginalny	Zachowuje bieżące kodowanie. Przydatne jako punkt odniesienia.
WebP	Używa EXT_texture_webp. Sprawdź obsługę w aplikacji docelowej.
KTX2 / ETC1S	Kompaktowe kodowanie Basis Universal. Wymaga obsługi KHR_texture_basisu.
KTX2 / UASTC	Zwykle zachowuje więcej szczegółów tekstur kosztem większego pliku. Korzysta z tego samego sposobu ładowania KTX2.

Wymiary i jakość kodowania służą różnym celom

Skala tekstury 50% zmniejsza szerokość i wysokość o połowę, pozostawiając jedną czwartą pikseli przed mipmapami. Maksymalny rozmiar również ogranicza wymiary wyniku. Jakość kodowania steruje kodekiem, a nie wymiarami obrazu, dlatego jakość 8 w WebP nie odpowiada jakości 8 w ETC1S ani UASTC.

Po zmianie rozmiaru sprawdź napisy, krawędzie przezroczystości i drobne detale powierzchni. Mapy normalnych wymagają szczególnej uwagi, bo niewielkie zmiany wartości mogą wpływać na cieniowanie. Testuj teksturę przy oświetleniu i przybliżeniu używanym w aplikacji.

Porównanie jednej tekstury 1024 × 1024

Kodowanie i wymiary	Rozmiar GLB (bajty)
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

Przykład używa naszej falistej siatki CC0 z wygenerowanym PNG zawierającym gradient i szum, zakodowanym przez natywny gltfpack 1.3. Wszystkie wiersze używają kompresji Meshopt, 8192 trójkątów i jakości 8 tam, gdzie wykonywana jest konwersja. Są to rozmiary całych GLB, nie samych tekstur. Tabela mierzy bajty, nie jakość obrazu ani pamięć GPU.

Porównaj teksturę na tej samej powierzchni

Zbliżenia używają tej samej siatki, kamery, oświetlenia i ustawień materiału. Przedstawiają rzeczywiste pliki z tabeli renderowane w Three.js 0.180.0. Wygenerowana tekstura zawiera gradienty i drobny szum; nadaje się do oceny tych szczegółów, ale nie reprezentuje napisów, przezroczystości ani map normalnych.

Zbliżenie oryginalnej tekstury PNG na falistej siatce — Oryginalny 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łowę mniejszych wymiarach — WebP · 512 × 512

Na tych zrzutach wersja ETC1S wygładza część drobnego szumu na różowej powierzchni, a UASTC lepiej zachowuje jej ziarnisty wygląd. WebP o połowę mniejszych wymiarach wyraźniej rozmywa drobne różnice. Zestaw tę obserwację z tabelą rozmiarów: zachowanie tych detali kosztuje inaczej w każdym kodowaniu.

Otwórz obrazy w pełnym rozmiarze i porównaj drobne różnice koloru oraz szczegóły powierzchni. Strona pomniejsza podglądy, co może ukrywać różnice. Zrzuty są punktem odniesienia z jednej przeglądarki i jednego GPU, a nie oceną jakości ani gwarancją identycznego obrazu na każdym urządzeniu.

Przykład: zmniejsz wymiary tekstur o połowę 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, ustaw WebP, otwórz Ustawienia zaawansowane i ustaw Skalę tekstur na 50%. Nie zmieniaj Maksymalnego rozmiaru tekstury, chyba że potrzebujesz także limitu pikseli. Przed użyciem otwórz wynik w docelowej przeglądarce modeli.

Skonfiguruj ładowanie KTX2 i Meshopt w Three.js →

Dokumentacja silnika: gltfpack

Otwórz optymalizator ↗