Client-Side Draco Compression Fails on GLB Files Containing WebP Textures

[canberka]

Describe the bug
First of all, hello everyone, thank you very much for developing glTF-Transform. It is a very useful and innovative structure.

I want to make a customizable gaming chair and send it to the server with draco compression. I want to do all the compression as client-side like in https://gltf.report/. The aim of the project is to create an admin panel that can produce the chairs on the main site(https://design.hawkchair.com).

Is it possible to do without Node.js?

I have reviewed the previous opened topics and bugs and advanced to a point and my problem starts here. If there is no webp in the model, the problem is not seen, but if there is a webp texture, I encounter an error called "Draco compress failed: TypeError: Cannot read properties of undefined (reading 'DT_FLOAT32')".
and I am stuck. I ask for your help on this issue.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'https://design.hawkchair.com/create.html'
2. Click on 'Compress with Draco'
   3 See error

 <script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/libs/draco/draco_encoder.js" defer></script>
 <script type="module">

     import { WebIO } from 'https://esm.run/@gltf-transform/core';
     import { KHRONOS_EXTENSIONS, KHRDracoMeshCompression, EXTMeshoptCompression, EXTMeshGPUInstancing, EXTTextureWebP } from 'https://esm.run/@gltf-transform/extensions';

     const modelViewer = document.getElementById('HawkChair');

      async function handleModelViewer(modelViewer, compressor) {
        const src = modelViewer.getAttribute('src');

        if (!src) {
          alert('No model is loaded in the model-viewer.');
          return;
        }

        try {
          const response = await fetch(src);
          if (!response.ok) {
            throw new Error('Failed to fetch the model.');
          }

          const arrayBuffer = await response.arrayBuffer();

          const compressedBuffer = await compressor(arrayBuffer);
          await downloadBlob(compressedBuffer, 'compressed.glb');
        } catch (error) {
          console.error('Compression failed:', error);
        }
      }


     async function downloadBlob(arrayBuffer, filename) {
        const blob = new Blob([arrayBuffer], { type: 'application/octet-stream' });
        const link = document.createElement('a');
        link.href = URL.createObjectURL(blob);
        link.download = filename;
        link.click();
        URL.revokeObjectURL(link.href);
      }



      async function draco_compress(arrayBuffer) {
        const io = new WebIO()
          .registerExtensions([...KHRONOS_EXTENSIONS, EXTTextureWebP]) 
          .registerDependencies({
            'draco3d.encoder': DracoEncoderModule(),
          });

          try {
            const doc = await io.read(modelViewer );

          
            doc.createExtension(EXTTextureWebP).setRequired(true);

         
            doc.createExtension(KHRDracoMeshCompression)
              .setRequired(true)
              .setEncoderOptions({
                method: KHRDracoMeshCompression.EncoderMethod.EDGEBREAKER,
              
              });

            return io.writeBinary(doc);
          } catch (error) {
            console.error('Draco compress failed:', error);
            throw error;
          }
      }

      document.getElementById('compress-draco').addEventListener('click', () => {
        handleModelViewer(modelViewer, draco_compress);
      });
     
    </script>

[donmccurdy]

@canberka the WebP extension shouldn't make a difference for Draco, here's an example on JSFiddle:

https://jsfiddle.net/donmccurdy/ho7b8ywf/

Note that rather than adding extensions manually it's better to use functions. Adding the WebP extension alone does nothing, you also have to compress the textures. For example, this will add the extensions to the Document for you, and make any other changes required:

import { draco, textureCompress } from '@gltf-transform/functions';

await document.transform(
  draco(),
  textureCompress({ targetFormat: 'webp', resize: [1024, 1024] })
);

Also, I would recommend installing glTF Transform with npm/yarn/pnpm. You'll run into other issues trying to use it from a CDN.

[canberka]

Thank you @donmccurdy I wish you continued success and healthy days

[canberka]

I will ask for another detail for this project.

I use model-viewer to show my model.

The situation is that I upload an image to the model compressed with blender.

Compressed model is 4mb
Uncompressed model is 40mb.

Now, I want to send the model to the server after uploading an image to the model on the client-side. But the export function of model-viewer removes the model from draco. This naturally causes slowdown when sending the model to the server.

Do you think the solution to this is to re-draco it and send it to the server?
Will @elalish from the model-viewer team deal with the solution to this?

[elalish]

That's not on our roadmap, but PRs are welcome. I would be concerned about the impact on binary size of including a Draco compressor in MV - it would probably have to be lazy loaded.

[canberka]

That's not on our roadmap, but PRs are welcome. I would be concerned about the impact on binary size of including a Draco compressor in MV - it would probably have to be lazy loaded.

I'm asking out of curiosity. Isn't it more convenient to download the compressed model? Or isn't it better to leave it to the user's discretion, like gltf.report?

[elalish]

It's certainly more convenient for a user, but it's not trivial as a maintainer. It implies a whole new dependency, along with a bunch of arbitrary settings that we either need to choose or expose to users. Compression is not a core part of MV - in fact export is only provided because it's built into Three.js already, so it was very easy to expose.

[donmccurdy]

@canberka ModelViewer needs to first download the model, then decompress, parse, and build an equivalent three.js scene for rendering. When you export ModelViewer then recreates a glTF file from that three.js scene "from scratch", which may turn out different than the original glTF file. For example, texture and geometry compression need to be recalculated, the old compressed data can't be reused, and this can add some modest lossy compression artifacts. The glTF exporter in three.js (and ModelViewer) is intended to give 'correct' output but doesn't implement any sort of post-export optimization, and doesn't include any compression libraries.

If you have the original compressed glTF file at hand already, it would probably be best to upload that, rather than the version round-tripped through ModelViewer. Or you could export from ModelViewer, compress with glTF Transform in-browser, and then upload to the server.

[canberka]

I definitely got the situation. I have the draco model but I make changes to its textures via MV on the web browser. That's why the original compressed file changes. My whole purpose is to save the changed file to my own server. I tried to find a short and easy way to do this.
The way is as you said;
"Or you could export from ModelViewer, compress with glTF Transform in-browser, and then upload to the server."

Thank you both for your feedback @elalish @donmccurdy