fix: enable export of scenes with KTX2 compressed textures

packages/model-viewer/src/features/scene-graph.ts

@@ -16,6 +16,7 @@
 import {property} from 'lit/decorators.js';
 import {CanvasTexture, Object3D, RepeatWrapping, SRGBColorSpace, Texture, VideoTexture} from 'three';
 import {GLTFExporter, GLTFExporterOptions} from 'three/examples/jsm/exporters/GLTFExporter.js';
+import {decompress} from 'three/examples/jsm/utils/WebGLTextureUtils.js';
 
 import ModelViewerElementBase, {$needsRender, $onModelLoad, $progressTracker, $renderer, $scene} from '../model-viewer-base.js';
 import {GLTF} from '../three-components/gltf-instance/gltf-defaulted.js';
@@ -289,6 +290,17 @@ export const SceneGraphMixin = <T extends Constructor<ModelViewerElementBase>>(
                 .register(
                     (writer: any) =>
                         new GLTFExporterMaterialsVariantsExtension(writer));
+
+        const threeRenderer = this[$renderer].threeRenderer;
+        exporter.setTextureUtils({
+          decompress: (texture: Texture, maxTextureSize?: number) => {
+            const result =
+                decompress(texture, maxTextureSize ?? Infinity, threeRenderer);
+            result.flipY = texture.flipY;
+            return result;
+          }
+        });
+
         let exportTarget: Object3D;
         if (scene.models.length > 1) {
           exportTarget = new Object3D();

packages/model-viewer/src/test/features/scene-graph/texture-spec.ts

@@ -75,6 +75,26 @@ suite('scene-graph/texture', () => {
           .to.be.equal('image/png');
     });
 
+    test('exports and re-imports a model with KTX2 compressed texture',
+         async () => {
+           const ktx2Texture =
+               await element.createTexture(KTX2_TEXTURE_PATH);
+           element.model!.materials[0]
+               .pbrMetallicRoughness.baseColorTexture!.setTexture(
+                   ktx2Texture);
+
+           const exported = await element.exportScene({binary: true});
+           expect(exported).to.be.not.undefined;
+           expect(exported.size).to.be.greaterThan(500);
+
+           const url = URL.createObjectURL(exported);
+           element.src = url;
+           await waitForEvent(element, 'load');
+
+           expect(element.model).to.not.be.null;
+           expect(element.model!.materials.length).to.be.greaterThan(0);
+         });
+
     test('Verify legacy correlatedObjects are updated.', async () => {
       const newUUID: string|undefined = texture?.source[$threeTexture]?.uuid;