Progressive texture loading (load lower res (1k) textures before loading the final ones (4k))

[fulopkovacs]

This would decrease the initial loading time (which is still bothering me a bit 😅).

Here's a demonstration of the feature from the Needle Engine on Twitter:

Kapture.2022-12-06.at.15.14.43.mp4

I got fairly familiar with how textures are loaded in the 3D model viewer of polyhaven.com, while I was working on #64, so I think I'll be able to make a PR for this feature when I have a bit of spare time (unless you don't like this feature). The only real downside of this feature is that it'll increase the CDN bandwidth, is that a problem with you?

[gregzaal]

This is a great idea 👍
Bandwidth is not an issue, this won't make any significant hit.

[fulopkovacs]

Awesome. I don't really have a lot of free time in the next two months, so it'll take a while (1+ months).

[hybridherbst]

Hi, Felix from Needle here :)
We're also happy to help and align this to our use of extensions if you want! Basically progressive textures are a NEEDLE_* gltf extension right now that defines which textures should pull in higher res versions at what point in time.

We have gltf-transform based tooling to generate progressive textures automatically that we can share, too.

[fulopkovacs]

Wow, awesome to see you here, Felix! ☺️ Your solution sounds very interesting, I had something a lot more primitive in mind.

To be honest, I'm not super familiar with GLTF extensions, but I'm very curious where this could take us. What you described reminded me of MSFT_lod, and I saw that you have a repo with a script for using MSFT_lod with gltf-transform. Is this the tooling you were talking about?

I'd love to hear more about your approach, and I also have some questions/concerns:

1. From what I understand your gltf-transform-based tooling is responsible for putting the extension-related data into the gltf files. I'm not sure how the models are being uploaded to polyhaven.com, but I'd like to avoid gltf-transform if it's a done manually by non-developers. The good news is that we already modify the gltf file that comes from the API before it is loaded, and we also know the URLs of the hight/low res textures at that time. I think we put all the data related to the new extension in the gltf file here. Do you agree?
2. How does the gltf loader know when to load the different textures?

Your help would be appreciated (it is needed: this model needs 40+ seconds to load all the textures on my machine).

Also, props to you and the Needle team for sharing your knowledge instead of keeping it a secret! 🙌

(I'm gonna tag you, @hybridherbst, to make sure get a notification 😁.)

[marwie]

Hello @fulopkovacs

I just found this discussion by chance so in case you're still looking into this here is some information:

1. yes we use gltf transform to read/write the extension data. We have an extension on textures and meshes that contains an array of lod level (each entry is an object with a guid and a uri to the external file). Happy to provide more details if needed. The linked repository isn't what we're using.

2. We register a gltf loader plugin that provides an api for loading different lod level. This has been moved to a separate npm package and can be integrated in any threejs based engine (even modelviewer). The package is named @needle-tools/gltf-progressive.