How do I approach transferring material and it's dependencies from one glb doc to another

[tanaydimri]

Hey All,

I have been working on a tool that takes a list of glbs and merges all their materials as variants in the first glb provided in that list. I am stuck at trying to figure out how to copy material and it's resources from one glb to another because I keep encountering "Error: Cannot connect disconnected graphs.". Which is obvious because I don't think copying across documents would be possible since gltf heavily relies on indices for mappings internally and simply copying the material won't work.

One possible way is to just merge all these documents into one and them perform the required operations on them but how do I access the merged doc vs the main doc? I was hoping to get my process validated from experienced devs in the community before moving forward. I am very new to the gltf realm and specially gltf-transform.

Any help is appreciated. Thank you in Advance!

[donmccurdy]

UPDATE, APRIL 2024 —

A more complete solution is proposed in #1375.

---

PREVIOUS ANSWER —

I'd expect it will probably be easiest to approach like this:

1. load each glb to a separate document
2. for each 'variant' document, annotate the materials (by name, extras, etc.) to identify the document
3. merge all documents
4. iterate over materials in the merged document and assign variants as needed

A simple, non-destructive way of tagging the materials would be:

for (const material in document.getRoot().listMaterials()) {
  material.setExtras({variantName: 'some-name'});
}

[tanaydimri]

Hey @donmccurdy,
Thank you so much for your response. For some reason I missed the notification for this. I did end up loading them into separate documents but eventually ended up cloning materials from one document to another if a variant was found. I will definitely try what you mentioned. Although I am not sure what "setExtras" means at this point but I will know soon :)

for (const scene of documentRoot.listScenes())
{
    if (scene === mainScene) 
    {
        continue;
    }

    const variantScenChildren = scene.listChildren();
    const variantName = scene.getName().split("_")[0];

    for (const childIndex in variantScenChildren)
    {
        // If conditions are met, append child to `mainScene`. 
        // Doing so will automatically detach it from the
        // previous scene.
        const currentVariantNode = variantScenChildren[childIndex];
        const allVariantPrims = currentVariantNode.getMesh().listPrimitives();
        for (const variantPrimIndex in allVariantPrims) 
        {
            const mainScenePrim = mainSceneChildren[childIndex].getMesh().listPrimitives()[variantPrimIndex];
            const mainScenePrimMaterial = mainScenePrim.getMaterial();
            const currentVariantPrim = allVariantPrims[variantPrimIndex];
            let variantMaterial;

            const variantMaterialsource = currentVariantPrim.getMaterial();
            // console.log("COMPARING MATERIALS: ");
            const isVariantMaterialSame = variantMaterialsource.equals(mainScenePrimMaterial);

            if (forceMaterialsAsVariants.includes(mainScenePrimMaterial.getName()) || !isVariantMaterialSame) 
            {
                variantMaterial = document.createMaterial();
                variantMaterial.copy(variantMaterialsource);
                variantMaterial.setName(variantName + "@" + variantMaterialsource.getName());
            }
            else 
            {
                variantMaterial = mainScenePrimMaterial;
            }

            const mainVariantMapping = variantExtension.createMapping()
                .addVariant(variantStates[mainSceneVariantName])
                .setMaterial(mainScenePrimMaterial);

            const variantMapping = variantExtension.createMapping()
                .addVariant(variantStates[variantName])
                .setMaterial(variantMaterial);

            currentVariantPrim.dispose();

            // Attach the mappings to a Primitive.
            mainScenePrim.setExtension(
                'KHR_materials_variants',
                variantExtension.createMappingList()
                    .addMapping(variantMapping)
                    .addMapping(mainVariantMapping)
            );
        }

        currentVariantNode.dispose();
    }

    scene.dispose();
}

[donmccurdy]

The setExtras method is nothing magic, just a way to tag extra (JSON-serializable) data onto a glTF object. Since it persists when cloning/reading/writing the document it's an easy way to associate data with the material if needed.

[donmccurdy]

A more complete solution is proposed in:

• feat(functions): Add mergeDocuments, cloneDocument, copyToDocument, moveToDocument #1375