Updating a material texture on a gltfpacked model

[callumprentice]

My workflow is:

• Get GLB model from content team
• Load into my three.js (r167) app, traverse the model and when I find the right material name, replace the material.map with a texture i loaded earlier
• Works as expected for unoptimized meshes
• If I use gltfpack to reduce the size of the mesh (options are -cc -tc -kn -km -tl 512) then when I apply the new material map, the object changes color but the texture is no visible.
• I tried comparing the object.material for both native and optimized versions and apart from expected diffs in UUIDs, they look the same AFAICT

I have the relevant JS extensions loaded for meshopt nd KTX2 textures - other optimized meshes in the scene that I am not trying to replace the materials on look correct.

Is this something that should work?

Apologies for not supplying a JS Fiddle to illustrate what I am seeing - I tried but was unable to figure out how to load the various extensions in that environment.

[zeux]

By default, gltfpack uses KHR_texture_transform extension to store texture coordinate transform that is necessary for correct texture mapping; three.js uses texture properties offset and repeat to represent that. These are lost if you replace a material texture with a new texture.

You can preserve them while doing the replacement, eg.

map.repeat.copy(modelMaterial.map.repeat);
map.offset.copy(modelMaterial.map.offset);
map.needsUpdate = true;
modelMaterial.map = map;

You can also use -vtf command line flag to avoid the use of texture transforms during compression, but that comes at a small size/memory cost so the recommended approach is the former.

[callumprentice]

Thank you for the insight.

I tried repacking the original model using an additional -vtf parameter but that didn't appear to make a difference.

Then I tried to update my code - something like this:

function applyTextureToMaterial(model, texture, materialName) {
    model.traverse(function (object) {
        if (object.isMesh) {
            if (object.material.name === materialName) {

                texture.repeat.copy(object.material.map.repeat);
                texture.offset.copy(object.material.map.offset);
                texture.needsUpdate = true;

                object.material.map = texture;
                object.material.map.flipY = false;
                object.material.map.colorSpace = THREE.SRGBColorSpace;
                object.material.needsUpdate = true;
            }
        }
    });
}

but the original material map (object.material.map) is null so it's not possible to determineobject.material.map.repeat.

Separately, I find this odd since it appears to be valid when examined in the JS console and has reasonable values - maybe it's because of my lack of JavaScript experience.

Anything else to try or should I put together a standalone example?

[zeux]

the original material map (object.material.map) is null

Is the original material untextured? If so, you would need both -vtf and -kv to prevent the texture coordinates from getting stripped from the output file. -kv was added in master a few weeks ago and will not be part of 0.21 build but it will be part of any recent build eg https://github.com/zeux/meshoptimizer/actions/runs/10086424018. Without a texture object, gltfpack doesn't have anywhere to store repeat/offset values, so it assumes texturing is not necessary and removes the texture coordinate.

[callumprentice]

That worked perfectly.

Thank you very much.