Draco decoder & KTX local offline path being ignored in gltf-progressive.js in Needle Unity 4.2.2

Draco decoder is ignoring the local offline path in gltf-progressive.js in Needle Unity 4.2.2

Seen at these lines in dist\assets\gltf-progressive.3146234b.js

ee="https://www.gstatic.com/draco/versioned/decoders/1.5.7/",oe="https://www.gstatic.com/basis-universal/versioned/2021-04-15-ba1c3e4/";const je=ee,et=oe,tt=new URL(ee+"draco_decoder.js")

It breaks offline builds where I have set these lines in index.html:

<needle-engine dracoDecoderPath="include/draco/" ktx2DecoderPath="include/ktx2/"

It appears there’s an issue with the Draco decoder path being overridden by a hardcoded URL in gltf-progressive.js. To address this, ensure you are correctly setting the dracoDecoderPath in your project’s initialization settings.

In the configuration found in engine_loaders.ts, there’s a function setDracoDecoderPath which ensures the path you provide is utilized during runtime. Here’s a basic example of how you might use it:

import { setDracoDecoderPath } from './engine_loaders';

setDracoDecoderPath("include/draco/");

This function makes sure your local path is set.

In your index.html, ensure you have configured the <needle-engine> tag properly as follows:

<needle-engine dracoDecoderPath="include/draco/" ktx2DecoderPath="include/ktx2/"></needle-engine>

If the settings are correctly set and you still encounter issues, it might be an internal override. Make sure to check the documentation or the latest updates for any changes in the method of setting decoder locations.

If you’re still facing issues even after these adjustments, please ensure that your local paths are correctly structured and that all necessary decoder files are available at include/draco/. Additionally, considering how the paths are managed in the build, ensure that all paths remain consistent relative to the distribution.

If the problem persists, further investigation into the build process and configuration might be needed. Also, always review the latest patches or documentation for any potential updates on decoder handling (see the documentation).

24 replies left
thread_fAVlUiukyLo4NaGgq4oYkqeu
Reply to this message to continue the conversation

I also get errors offline about these being referenced from online:

https://www.gstatic.com/basis-universal/versioned/2021-04-15-ba1c3e4/basis_transcoder.wasm
https://www.gstatic.com/basis-universal/versioned/2021-04-15-ba1c3e4/basis_transcoder.js

I’m sorry, I couldn’t find a response but notified the team :nerd_face:

I managed to fix it by hardcoding this in the gltf-progressive.js but it’s not a permanent fix between builds

let ee = "../include/draco/",
  oe = "../include/ktx2/";
const je = ee,
  et = oe;

// Get the current script's URL to serve as a base
const scriptUrl = new URL(import.meta.url); // or window.location.href if not in a module
// Correct way to create the URL with a base url.
const tt = new URL(ee + "draco_decoder.js", scriptUrl);

fetch(tt, { method: "GET", headers: { Range: "bytes=0-1" } })
  .catch((o) => {
    ee === je && (ee = "./include/draco/"),
      oe === et && (oe = "./include/ktx2/");
  })
  .finally(() => {
    Re();
  });

Hi Rob_F,

Hardcoding paths directly into gltf-progressive.js is indeed not a sustainable solution as you’ve noticed, as it can lead to issues during builds and updates.

To address the problem more effectively, consider implementing a dynamic configuration approach instead. You can create a configuration file to manage path variables, which can then be referenced during the loading process.

Here’s a simplified example of how you could structure this:

  1. Create a configuration file (e.g., config.js):
export const CONFIG = {
  dracoDecoderPath: "../include/draco/",
  ktx2DecoderPath: "../include/ktx2/",
};
  1. Import the configuration in your gltf-progressive.js:
import { CONFIG } from './config';

let ee = CONFIG.dracoDecoderPath,
    oe = CONFIG.ktx2DecoderPath;

const tt = new URL(ee + "draco_decoder.js", window.location.href);

fetch(tt, { method: "GET", headers: { Range: "bytes=0-1" } })
  .catch((o) => {
    ee === CONFIG.dracoDecoderPath && (ee = "./include/draco/"),
    oe === CONFIG.ktx2DecoderPath && (oe = "./include/ktx2/");
  })
  .finally(() => {
    Re();
  });
  1. Update your build process or deployment settings to copy the config.js file into the appropriate directory if necessary.

By utilizing a configuration file, you can easily manage your resource paths without modifying the core functionality of gltf-progressive.js, keeping your solution modular and maintainable during future updates.

If this approach doesn’t resolve your issue, you may also need to check your build tools and pipeline to ensure they package your custom configurations correctly.

Feel free to ask if you need further assistance or clarification!

22 replies left
thread_fAVlUiukyLo4NaGgq4oYkqeu
Reply to this message to continue the conversation

Hello @robyer1 can you try if wrapping the code with if(navigator.onLine) { ... } fixes the issue for you too?

I think the error is only logged locally in your dev console, right?

The error is only logged in local console, it prevents the build from loading properly offline. I have some example builds.

I can wrap the code but I’m sure the file gets regenerated on export and this is affecting all my builds on new versions so it might need a fix on the engine side.

Here is a minimal repro if you try this while offline and cache cleared you will see the same errors

Can you show what you changed here? Not sure I understand. Draco decoder & KTX local offline path being ignored in gltf-progressive.js in Needle Unity 4.2.2 - #5 by Rob_F

I’ve tried to set custom paths locally and they’re used for draco and KTX loaders in my test here (also when being offline). The networking can not break this, it’s just a ping to the google server to check if it’s available, otherwise it will fallback to the default IF you didn’t manually set the URL via e.g. the attribute)

Do you see the error in the build I sent? I have screen recorded here running it offline to show the errors

That code change from my previous comment was an alteration to assets/gltf-progressive.8769afdd.js in the build which was suggested by Chrome dev console AI and it works because it forces the Draco and KTX2 checks to only check the path to the local copies in the include folder

Any manual change I make to assets/gltf-progressive.8769afdd.js to fix this issue offline gets overwritten when I rebuild a production export from Unity. I’m not sure why the paths being set here isn’t working for the offline builds now <needle-engine dracoDecoderPath="include/draco/" ktx2DecoderPath="include/ktx2/"></needle-engine>

From my testing, when offline, the .catch here doesn’t fire because I get the error ERR_NAME_NOT_RESOLVED from the GET requests?

No this throws when the fetch request fails (I’m testing here as well with disabled network).

Can you clarify what code you added exactly? In my testing setting the path in does reflect in the KTX and draco loaders (e.g. if I set it to path that doesnt exist it will break and log this path). It is possible that /include/draco/ isn’t working and you need to use ./include/draco/ (same for KTX) ?

The dist build doesn’t help me unfortunately.

I am only using the lines set here in the build <needle-engine dracoDecoderPath="include/draco/" ktx2DecoderPath="include/ktx2/"></needle-engine> which fail to load the local Draco/KTX2 when offline in that dist, I also tried adding ./include to both paths which doesn’t change anything.

That used to work to make the builds use Draco and KTX2 from the /include/ folder when offline but now it seems the file assets/gltf-progressive.8769afdd.js (or similar generated) seems to want to only load them from online and when offline it fails to load or even access the locally set paths I set for Draco/KTX2 in the index.html.

Does the dist I linked here work fine offline for you then? Draco decoder & KTX local offline path being ignored in gltf-progressive.js in Needle Unity 4.2.2 - #10 by Rob_F

Can you share a project (e.g. your web project not just the build output) with steps that reproduce it? That would help a lot

Shared a minimal repro project with repro steps just now via bug reporter for Needle in Unity.

All you need to do is export a production dist and run it offline with VS Code Live Server or similar to see the errors about Draco/KTX2 not being found online as it seems to be ignoring the Index.html set paths for Draco/KTX2 pointing to the Include folder.

Thank you

When online you should see this

When it is offline and failing to grab Draco/KTX you will see this and errors:

And can you explain what is breaking? It’s expected that these web requests don’t work, but they’re not breaking your build or scene as far as I can see.

If draco wasn’t loading then not even the sphere would load which already uses draco:

Is it that depth of field/postprocessing isn’t loading?

Setting the paths to the Draco decoder and KTX2 files locally via index.html <needle-engine dracoDecoderPath="include/draco/" ktx2DecoderPath="include/ktx2/"></needle-engine> means the decoders work offline so textures and models can load when offline, in some projects it prevents models from loading properly when offline. The Draco and KTX2 loaders used to work fully offline in older Needle engine using those values set in index.html above so I am hoping this is just a regression?

Possibly, I didn’t notice that in the errors so I may have overlooked it? The floor plane texture doesn’t load for the shadow texture on the floor though