how to export gltf with draco compression with webp texture compression

[Suprhimp]

Hi, I'm using gltf-transform/core module for export Three js scene to glb with compression draco.

It's good to use but I found that, even I open webp textured glb in three js, when I export glb with draco, It change webp texture to just png texture.

Is there any example of that situation?

Any way right now Im using this way to change scene to gltf with draco compression by this code below.

gltfExporter.parse(
        scene,
        async function (gltf) {
          const io = new WebIO()
            .registerExtensions(KHRONOS_EXTENSIONS)
            .registerDependencies({
              'draco3d.encoder': await DracoEncoderModule(),
            });

          const document = await io.readJSON({
            json: gltf,
            resources: {},
          } as JSONDocument);

          document
            .createExtension(KHRDracoMeshCompression)
            .setRequired(true)
            .setEncoderOptions({
              method: KHRDracoMeshCompression.EncoderMethod.EDGEBREAKER,
              encodeSpeed: 5,
              decodeSpeed: 5,
            });

          const arrayBuffer = await io.writeBinary(document);

          uploadGLTFToS3(arrayBuffer).then((url) => {
            if (url) {
              dispatch(setFileLoadingProgress(100)); // loading - load url complete
              dispatch(setArFileUrl(url));
            }
          });
        },
        (e) => {
          console.error(e);
        },
        options,
      );
    }

[donmccurdy]

Hi @Suprhimp! I don't know if THREE.GLTFExporter is able to export WebP textures. It may indeed convert them to PNG, and I think you'd need to ask on the three.js repository or forums for ideas on that. /cc @elalish is this something Model Viewer deals with?

glTF Transform can certainly apply Draco compression without changing your textures, but I think you'd need to keep GLTFExporter out of that process. glTF Transform can also convert textures to WebP, but that texture conversion only works in a Node.js environment today, not in a web browser. See #801.

[elalish]

Actually, I think THREE.GLTFExporter does support WebP, you just have to set map.userData.mimeType = 'image/webp';

[Suprhimp]

@elalish my Material's map.userData.mimeType is already 'image/webp' but, when I export to gltf, it does not keep webp.

[elalish]

Hmm, that sounds like a bug. Have you dropped a break point to follow where that gets lost in the export?

[Suprhimp]

@elalish Well I can't get the break point but I checked with three js editor. when I export scene (with just json)
I found that Image already change to base 64 png format but marked with image/webp

cupSet_web.glb.zip

json
scene (4).json.zip

this is my gltf file and scene json

I think gltf decoder or something just change webp to png...