EXT_meshopt_compression - How to?

Hi guys!
Has anyone a working example of using this extension in a standalone (not a PG) code? I couldn’t get it working.

What I already did:
Switched to ^5.0.0-alpha.36

import { GLTFLoader, IGLTFLoaderExtension } from '@babylonjs/loaders/glTF/2.0'
import { EXT_meshopt_compression } from '@babylonjs/loaders/glTF/2.0'
    EXT_meshopt_compression.DecoderPath = '/path/to/meshopt_decoder.js'
    GLTFLoader.RegisterExtension(
      'EXT_meshopt_compression',
      (loader) => {
        return new EXT_meshopt_compression(loader)
      }
    )

EDIT: Without errors, but no meshes. The glb files are packed using gltfpack with these two parameters -cc -tc.

Anyone? Thanks!

R.

Adding @bghgary who masters gltf

1 Like

I don’t think you want to do this. It may cause problems. This code should already exist as a side effect of the extension. Can you set up a repro on codepen.io or something similar so we can try to help?

Hi @bghgary!

So I don’t need to register this extension to deal with compressed glbs?
Thanks!

I don’t believe so. If you can look at the bundled result, it should already have this code in it.

You are right, it is working on 5.0.0.
Thank you!

Is there a way to use this extension with 4.2.0?

This extension was added after 4.2. It should be possible if you copy the code (including the wasm modules) and register the loader extension yourself in 4.2.

Thank you!

1 Like

hi @bghgary it will use meshopt_decoder.js from cdn ,and if our whole project be in cdn too we will got some error and also if we don’t get error : first we will get warning in firefox browser, second in chrome some times it will continue loading forever.
in threejs it doesn’t use meshopt _decoder from cdn

Using a bundler like webpack or vite will solve your issue.

1 Like

thank you @roland for youe friendly help,already i use webpack cause i use nuxt2, also i test it by vite on nuxt3 too but the same, after adding ext_meshopt extension it use from cdn meshopt_decoder.js should i do extra configs? or may i load that decoder locally? also in chrome it will load in first time without issue but when i close the tab and load it again it will be show blank page

What kind of compression do you use on your meshes?
I use Draco and I have no issues at all.

And yes, it seems that it’s loaded from CDN.

What are errors afrfe you experiencing when loading the optimized mesh?

i use ext_meshopt and it get meshopt_decoder.js from cdn but its not good for my project cause it will die sometimes because of cors, i dont have any error ,but if i use in pwa that is offline it doesn’t load

I’m getting the decoder from the bundle as you can see here:

I believe, it must always work or fail, there shouldbe no ‘sometimes’.

In a PWA app you can define rules/strategies to cache the resources so you can use your app when it is offline.

ChatGPT generated code:

// Service worker file (service-worker.js)

const CACHE_NAME = 'my-cache-v1';
const CDN_URL = 'https://example.com/cdn'; // Replace with your CDN URL

// Cache static assets during installation
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME).then((cache) => {
      return cache.addAll([
        '/',
        '/index.html',
        '/styles.css',
        '/script.js',
        '/images/logo.png',
        // Add other static assets
      ]);
    })
  );
});

// Intercept network requests
self.addEventListener('fetch', (event) => {
  const requestUrl = new URL(event.request.url);

  // Check if the request is to the CDN
  if (requestUrl.origin === CDN_URL) {
    event.respondWith(
      // Try to get the response from the cache
      caches.match(event.request).then((cachedResponse) => {
        // If the response is in the cache, return it
        if (cachedResponse) {
          return cachedResponse;
        }

        // If not in the cache, fetch it from the network
        return fetch(event.request).then((response) => {
          // Clone the response to store it in the cache
          const responseToCache = response.clone();

          // Open the cache and store the response
          caches.open(CACHE_NAME).then((cache) => {
            cache.put(event.request, responseToCache);
          });

          // Return the network response
          return response;
        });
      })
    );
  } else {
    // For non-CDN requests, follow the same Cache-First strategy
    event.respondWith(
      caches.match(event.request).then((cachedResponse) => {
        if (cachedResponse) {
          return cachedResponse;
        }

        return fetch(event.request).then((response) => {
          const responseToCache = response.clone();
          caches.open(CACHE_NAME).then((cache) => {
            cache.put(event.request, responseToCache);
          });
          return response;
        });
      })
    );
  }
});

for draco you are right but did you test meshopt too? cause it get from cdn ,webpack or vite not matter, i use gltfPack or can use gltf.report too .for draco i tested and it was ok

i use flutter for pwa @roland .but thank you for your response you sre fantastic man

1 Like

You can do this:

  createEngine(canvas: HTMLCanvasElement): Engine {
    const engine = new Engine(canvas, false, undefined, false)
    
    // do this before loading any meshopted glbs
    MeshoptCompression.Configuration = {
      decoder: {
        url: '/js/meshopt_decoder.js',
      },
    }
    //

    return engine

Put meshopt_decoder.js in your public directory. I put in in the public/js directory of my vite webapp.

Now BabylonJS will load the file from the local dir instead of CDN.

Tested and it works :slight_smile:

:vulcan_salute:

thanks @roland i asked chat gpt and it said it too but in nuxt2 i think it will not work but in nuxt3 i will test today,thank you🙏

1 Like

I looked at the source code to figure it out. You can discover many “hidden” stuff this way :sunglasses: