Feature: Support federated models

[xeolabs]

Add new behaviours to MetaScene and TreeViewPlugin:

• each instance of a MetaObject in a MetaScene will be be shared by multiple MetaModels
• as we load a MetaModel,, whenever a MetaObject with the element's ID already exists in the MetaScene, the existing MetaObject is "reused" and we increment a use-count on that MetaObject.
• when we destroy a MetaModel, we decrement the use count on each of the MetaObjects it uses, deleting the MetaObject when that count is zero

Expected use case is when we load a BIM building model that is composed of several IFC files, one for each storey.

Each of the IFC files will therefore contain certain elements that are the same, with the same IDs, such as the IfcSite and IfcBuilding.

If we've converted the IFC files to a set of XKT files, then after these changes, we can load all those XKT files in a set, and end up with a single, unified graph of MetaObjects for the IFC element hierarchy.

Next, extend the TreeViewPlugin with the option to build a single tree from the MetaObjects on MetaScene. Then we'll have the unified tree view of all the objects in the model, without them being split into a tree for each model, which defeats federated model viewing.

I'm thinking we'll add that as a new "federated" boolean mode property for TreeViewPlugin, and keep its current unfederated mode (tree for each model) as default.

  //------------------------------------------------------------------------------------------------------------------
    // Import the modules we need for this example
    //------------------------------------------------------------------------------------------------------------------

    import {
        Viewer,
        VBOSceneModel,
        TreeViewPlugin
    } from "./../dist/xeokit-sdk.es.js";

    //------------------------------------------------------------------------------------------------------------------
    // Create a Viewer and arrange the camera
    //------------------------------------------------------------------------------------------------------------------

    const viewer = new Viewer({
        canvasId: "myCanvas",
        transparent: true
    });

    viewer.scene.camera.eye = [-21.80, 4.01, 6.56];
    viewer.scene.camera.look = [0, -5.75, 0];
    viewer.scene.camera.up = [0.37, 0.91, -0.11];

    viewer.cameraFlight.fitFOV = 35;

    viewer.scene.highlightMaterial.edgeColor = [0, 0, 0];

    //------------------------------------------------------------------------------------------------------------------
    // First geometry model, containing table legs
    //------------------------------------------------------------------------------------------------------------------

    const sceneModel1 = new VBOSceneModel(viewer.scene, {
        id: "furniture1",
        isModel: true, // <--------------------- Represents a model, registers VBOSceneModel by ID on viewer.scene.models
        position: [0, 0, 0],
        scale: [1, 1, 1],
        rotation: [0, 0, 0],
        edges: true
    });

    sceneModel1.createGeometry({
        id: "myBoxGeometry",
        primitive: "triangles",
        positions: [
            1, 1, 1, -1, 1, 1, -1, -1, 1, 1, -1, 1, // v0-v1-v2-v3 front
            1, 1, 1, 1, -1, 1, 1, -1, -1, 1, 1, -1, // v0-v3-v4-v1 right
            1, 1, 1, 1, 1, -1, -1, 1, -1, -1, 1, 1, // v0-v1-v6-v1 top
            -1, 1, 1, -1, 1, -1, -1, -1, -1, -1, -1, 1, // v1-v6-v7-v2 left
            -1, -1, -1, 1, -1, -1, 1, -1, 1, -1, -1, 1,// v7-v4-v3-v2 bottom
            1, -1, -1, -1, -1, -1, -1, 1, -1, 1, 1, -1 // v4-v7-v6-v1 back
        ],
        normals: [
            0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1,// v0-v1-v2-v3 front
            1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0,// v0-v3-v4-v5 right
            0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0,// v0-v5-v6-v1 top
            -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0,// v1-v6-v7-v2 left
            0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0,// v7-v4-v3-v2 bottom
            0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1// v4-v7-v6-v5 back
        ],
        indices: [
            0, 1, 2, 0, 2, 3,            // front
            4, 5, 6, 4, 6, 7,            // right
            8, 9, 10, 8, 10, 11,         // top
            12, 13, 14, 12, 14, 15,      // left
            16, 17, 18, 16, 18, 19,      // bottom
            20, 21, 22, 20, 22, 23
        ]
    });

    sceneModel1.createMesh({
        id: "redLegMesh",
        geometryId: "myBoxGeometry",
        position: [-4, -6, -4],
        scale: [1, 3, 1],
        rotation: [0, 0, 0],
        color: [1, 0.3, 0.3]
    });

    sceneModel1.createEntity({
        id: "redLeg",
        meshIds: ["redLegMesh"],
        isObject: true // <----------------- Represents an object, registers Entity by ID on viewer.scene.objects
    });

    sceneModel1.createMesh({
        id: "greenLegMesh",
        geometryId: "myBoxGeometry",
        position: [4, -6, -4],
        scale: [1, 3, 1],
        rotation: [0, 0, 0],
        color: [0.3, 1.0, 0.3]
    });

    sceneModel1.createEntity({
        id: "greenLeg",
        meshIds: ["greenLegMesh"],
        isObject: true // <----------------- Represents an object, registers Entity by ID on viewer.scene.objects
    });

    sceneModel1.createMesh({
        id: "blueLegMesh",
        geometryId: "myBoxGeometry",
        position: [4, -6, 4],
        scale: [1, 3, 1],
        rotation: [0, 0, 0],
        color: [0.3, 0.3, 1.0]
    });

    sceneModel1.createEntity({
        id: "blueLeg",
        meshIds: ["blueLegMesh"],
        isObject: true // <----------------- Represents an object, registers Entity by ID on viewer.scene.objects
    });

    sceneModel1.createMesh({
        id: "yellowLegMesh",
        geometryId: "myBoxGeometry",
        position: [-4, -6, 4],
        scale: [1, 3, 1],
        rotation: [0, 0, 0],
        color: [1.0, 1.0, 0.0]
    });

    sceneModel1.createEntity({ // Create object
        id: "yellowLeg",
        meshIds: ["yellowLegMesh"],
        isObject: true // <----------------- Represents an object, registers Entity by ID on viewer.scene.objects
    });

    sceneModel1.finalize();

    //------------------------------------------------------------------------------------------------------------------
    // Second geometry model, containing table top
    //------------------------------------------------------------------------------------------------------------------

    const sceneModel2 = new VBOSceneModel(viewer.scene, {
        id: "furniture2",
        isModel: true, // <--------------------- Represents a model, registers VBOSceneModel by ID on viewer.scene.models
        position: [0, 0, 0],
        scale: [1, 1, 1],
        rotation: [0, 0, 0],
        edges: true
    });

    sceneModel2.createGeometry({
        id: "myBoxGeometry",
        primitive: "triangles",
        positions: [
            1, 1, 1, -1, 1, 1, -1, -1, 1, 1, -1, 1, // v0-v1-v2-v3 front
            1, 1, 1, 1, -1, 1, 1, -1, -1, 1, 1, -1, // v0-v3-v4-v1 right
            1, 1, 1, 1, 1, -1, -1, 1, -1, -1, 1, 1, // v0-v1-v6-v1 top
            -1, 1, 1, -1, 1, -1, -1, -1, -1, -1, -1, 1, // v1-v6-v7-v2 left
            -1, -1, -1, 1, -1, -1, 1, -1, 1, -1, -1, 1,// v7-v4-v3-v2 bottom
            1, -1, -1, -1, -1, -1, -1, 1, -1, 1, 1, -1 // v4-v7-v6-v1 back
        ],
        normals: [
            0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1,// v0-v1-v2-v3 front
            1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0,// v0-v3-v4-v5 right
            0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0,// v0-v5-v6-v1 top
            -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0,// v1-v6-v7-v2 left
            0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0,// v7-v4-v3-v2 bottom
            0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1// v4-v7-v6-v5 back
        ],
        indices: [
            0, 1, 2, 0, 2, 3,            // front
            4, 5, 6, 4, 6, 7,            // right
            8, 9, 10, 8, 10, 11,         // top
            12, 13, 14, 12, 14, 15,      // left
            16, 17, 18, 16, 18, 19,      // bottom
            20, 21, 22, 20, 22, 23
        ]
    });

    sceneModel2.createMesh({
        id: "tableTopMesh",
        geometryId: "myBoxGeometry",
        position: [0, -3, 0],
        scale: [6, 0.5, 6],
        rotation: [0, 0, 0],
        color: [1.0, 0.3, 1.0]
    });

    sceneModel2.createEntity({ // Create object
        id: "tableTop",
        meshIds: ["tableTopMesh"],
        isObject: true // <----------------- Represents an object, registers Entity by ID on viewer.scene.objects
    });

    sceneModel2.finalize();


    //------------------------------------------------------------------------------------------------------------------
    // First metadata model, containing elements for table and legs
    //------------------------------------------------------------------------------------------------------------------

    viewer.metaScene                            // This is the MetaScene for the Viewer
        .createMetaModel("furniture1", {         // Creates a MetaModel in the MetaScene
            "metaObjects": [                    // Creates MetaObjects in the MetaModel
                {
                    "id": "table",              // Does not match any Entity
                    "name": "Table",
                    "type": "furniture",        // Arbitrary type
                    "properties": {             // Arbitrary properties
                        "cost": "200"
                    }
                },
                {
                    "id": "redLeg",
                    "name": "Red table Leg",    // Same ID as red leg Entity
                    "type": "leg",
                    "parent": "table",          // References first MetaObject as parent
                    "properties": {
                        "material": "wood"
                    }
                },
                {
                    "id": "greenLeg",           // Same ID as green leg Entity
                    "name": "Green table leg",
                    "type": "leg",
                    "parent": "table",
                    "properties": {
                        "material": "wood"
                    }
                },
                {
                    "id": "blueLeg",            // Same ID as blue leg Entity
                    "name": "Blue table leg",
                    "type": "leg",
                    "parent": "table",
                    "properties": {
                        "material": "wood"
                    }
                },
                {
                    "id": "yellowLeg",         // Same ID as yellow leg Entity
                    "name": "Yellow table leg",
                    "type": "leg",
                    "parent": "table",
                    "properties": {
                        "material": "wood"
                    }
                }
            ]
        });

    //------------------------------------------------------------------------------------------------------------------
    // First metadata model, containing elements for table and top
    //------------------------------------------------------------------------------------------------------------------

    viewer.metaScene                            // This is the MetaScene for the Viewer
        .createMetaModel("furniture2", {         // Creates a MetaModel in the MetaScene
            "metaObjects": [                    // Creates MetaObjects in the MetaModel
                {
                    "id": "table",              // Does not match any Entity
                    "name": "Table",
                    "type": "furniture",        // Arbitrary type
                    "properties": {             // Arbitrary properties
                        "cost": "200"
                    }
                },
                {
                    "id": "tableTop",         // Same ID as purple table top Entity
                    "name": "Purple table top",
                    "type": "surface",
                    "parent": "table",
                    "properties": {
                        "material": "formica",
                        "width": "60",
                        "depth": "60",
                        "thickness": "5"
                    }
                }
            ]
        });