xeokit BCF Viewpoint Importer and Exporter

---

Interoperate with other BIM software through the exchange of BCF viewpoints

---

The xeokit SDK uses the BCF format to exchange bookmarks of Viewer state with other BIM software. BCF (Building Collaboration Format) is an open file format that enables data exchange and collaboration on 3D models and building information. A BCF viewpoint is a snapshot of a specific issue related to a building project, containing information such as the problem description, location, and proposed solutions. It is used to facilitate communication and collaboration among project stakeholders in BIM workflows.

To import a JSON-encoded BCF viewpoint into a View belonging to a Viewer, use the @xeokit/bcf!loadBCFViewpoint function. Similarly, to export the state of a View as a JSON-encoded BCF viewpoint, use the @xeokit/bcf!saveBCFViewpoint function.

Refer to @xeokit/bcf!BCFViewpoint for information on the BCF viewpoint format.

Installation

npm install @xeokit/bcf
Copy

Usage

Saving and Loading a View as BCF

In this example we'll set up a xeokit Viewer in a web browser, load a BIM model into it, and then demonstrate how we can save and load bookmarks of our Viewer state as BCF viewpoints, using the model.

We'll start with these steps:

• create a Scene and a Data,
• initialize a Viewer with the Scene and a WebGLRenderer,
• create a new View, SceneModel and DataModel,
• load a DTX file using the loadDTX function, and
• build the Scene and Data models, rendering the 3D model in the web browser.

import {Scene} from "@xeokit/scene";
import {Data} from "@xeoki/data";
import {Viewer} from "@xeokit/viewer";
import {WebGLRenderer} from "@xeokit/webglrenderer";
import {loadDTX} from "@xeokit/loadDTX";
import {saveBCFViewpoint, loadBCFViewpoint} from "@xeokit/bcf";
import * as ifcTypes from "@xeokit/ifctypes";

const scene = new Scene();
const data = new Data();

const viewer = new Viewer({
     scene,
     renderers: new WebGLRenderer()
});

const view = viewer.createView({
    id: "myView",
    canvasId: "myCanvas"
});

const sceneModel = scene.createModel({
    id: "myModel"
});

const dataModel = data.createModel({
    id: "myModel"
});

fetch("myModel.dtx").then(response => {
    response.arrayBuffer().then(data => {

         loadDTX({ data, sceneModel, dataModel });

         sceneModel.build();
         dataModel.build();
    });
});
Copy

When our DTX has loaded, that call to SceneModel.build will finalize our SceneModel and cause it to immediately appear in the View's canvas.

That call will also trigger SceneModel.onBuilt and DataModel.onBuilt events.

On the DataModel.onBuilt event, we'll customize the View by arranging the @xeokit/viewer!Camera and applying an X-ray effect tp a couple of objects, then we'll use @xeokit/bcf!saveBCFViewpoint to save the state of the View to a BCF viewpoint.

Once the SceneModel and DataModel have been built, we can no longer add anything to them.

dataModel.onBuilt.one(()=>{

    view.camera.eye = [0,0,-33];
    view.camera.look = [0,0,0];
    view.camera.up = [0,0,0];

    view.setObjectsVisible(view.objectIds, false);
    view.setObjectsVisible(["myObject1", "myObject2", "myObject3", ...], true);

    view.setObjectsXRayed(["myObject1", "myObject", ...], true);

    const bcfViewpoint = saveBCFViewpoint({
        view: view
    });

});
Copy

Now that we've saved the @xeokit/bcf!BCFViewpoint, we could now use @xeokit/bcf!loadBCFViewpoint to load the @xeokit/bcf!BCFViewpoint back into the View:

loadBCFViewpoint({
    bcfViewpoint,
    view
});
Copy

Saving and Loading a ViewLayer as BCF

As before, let's create a Viewer with a View and a SceneModel.

This time, we'll add two ViewLayers to our View, and we'll associate our SceneModel with one of those ViewLayers. ViewLayers allow us to partition our ViewObjects into bins, so that we can conveniently focus certain operations (eg. import/export BCF) only on the relevant ViewObjects.

import {Scene} from "@xeokit/scene";
import {Data} from "@xeoki/data";
import {Viewer} from "@xeokit/viewer";
import {WebGLRenderer} from "@xeokit/webglrenderer";
import {loadBCFViewpoint} from "@xeokit/bcf";

const viewer = new Viewer({
    id: "myViewer",
    scene,
    renderers: new WebGLRenderer({
        //...
    })
});

const view = viewer.createView({
    id: "myView",
    canvasId: "myView1"
});

const foregroundViewLayer = view.createLayer({
    id: "foreground"
});

const backgroundViewLayer = view.createLayer({
    id: "background"
});

const sceneModel = scene.createModel({
     id: "myModel",
     layerId: "foreground"
});

//...create some objects, load DTX etc

sceneModel.build();

const myOtherSceneModel = scene.createModel({
     id: "myOtherModel",
     layerId: "background"
});

//...create some objects, load DTX etc

myOtherSceneModel.build();
Copy

Now we can use @xeokit/bcf!saveBCFViewpoint to save the states of only the ViewObjects in the ViewLayer that contains our SceneModel to a @xeokit/bcf!BCFViewpoint, while ignoring the other ViewLayer:

const bcfViewpoint = saveBCFViewpoint({
     view,
     includeViewLayerIds: ["foreground"],
     excludeViewLayerIds: ["background"] // Unnecessary, but we'll show it anyway
});
Copy

Use @xeokit/bcf!loadBCFViewpoint to load the @xeokit/bcf!BCFViewpoint back into the ViewLayer:

loadBCFViewpoint({
    bcfViewpoint,
    view,
    includeViewLayerIds: ["foreground"],
    excludeViewLayerIds: ["background"]
});
Copy