BIM models with metadata

With Onirix you can import your BIM models generated from engineering departments, which also have relevant metadata and information. This helps to unify in one place all the information of these models, their materials, measurements, colours, etc.; without having to manipulate different types of files, physical manuals, etc.

Thanks to this import, which can be done easily and in a matter of minutes, you can visualise your models with the information associated with each part in a simple way, both in a web environment on a PC and in augmented reality.

Through the Onirix Embed SDK you will be able to interact with the metadata of your models. You will be able to get the metadata of the exact point where the user touches or you will be able to ask the model for its data. Let's take a closer look

Get model metadata

When a user touches an element of the experience, three events are generated that we can capture through the EmbedSDK: ELEMENT_CLICK, ON_TOUCH_START and ON_TOUCH_END

All three events return a params object. If the element point where I touch the user has metadata, we can access it through params.metadata.

embedSDK.subscribe(OnirixEmbedSDK.Events.ELEMENT_CLICK, (params) => {
    console.log(`Element ${params.oid} metadata`, params.metadata);
});

embedSDK.subscribe(OnirixEmbedSDK.Events.ON_TOUCH_START, (params) => {
    console.log(`Element ${params.oid} metadata`, params.metadata);
});

embedSDK.subscribe(OnirixEmbedSDK.Events.ON_TOUCH_END, (params) => {
    console.log(`Element ${params.oid} metadata`, params.metadata);
});

You can see a complete example in Github

Highlight the piece touched

It is important for users to have visual feedback on which part of the model they have touched and whose metadata they are viewing. This is achieved by activating the highlighting of the touched part using the highlightBIMPieces method of the EmbedSDK.

import OnirixEmbedSDK from "https://unpkg.com/@onirix/embed-sdk@1.14.0/dist/ox-embed-sdk.esm.js";
const embedSDK = new OnirixEmbedSDK();
await embedSDK.connect();

embedSDK.highlightBIMPieces(true);

If at some point in your experience you need to deactivate it, just call the same method with false.

embedSDK.highlightBIMPieces(false);

Customize the look and feel

The highlightBIMPieces method also accepts a second parameter that allows to particularize the way in which the piece is highlighted. These are the available options:

• type: "box" (default value) or "sphere". A box containing the part being played or a sphere whose center coincides with the center of the part being touched
• color: is the color of the box / sphere (hexadecimal value).
• opacity: opacity of the box / sphere.
• border: (only for box type)
  • enable: determines whether they should be displayed or not.
  • color: border color (hexadecimal value).
  • width: border size.
• radius: sphere radius.

// Box without border
embedSDK.highlightBIMPieces(true, {type: "box", border: {enable: false}});

// Sphere 
embedSDK.highlightBIMPieces(true, {type: "sphere", color: "#FABADA", opacity: 0.7, radius: 0.5 });

You can see a example in Github

Ask for model metadata

It is also possible to access a specific part of the metadata of an element. The getMetadata function allows us to obtain data based on a query parameter that will serve as a search pattern within the asset data of the element.

There are several options for the query field value:

• A number that corresponds to the node's line ID.
• A string that corresponds to the node's globalId or name. If the string is *, it matches anything.
• A RegExp that matches the node's name.
• The node's path, which is an array of numbers, strings, or RegExps. The first element of the path should match the root node of the element, the second with one of its children, and so on. Each value in the path follows the rules described above to match elements. For example, ["abc123", "*", /Hello/, 3].

const metatada = await embedSDK.getMetadata(ELEMENT_OID, query);
console.log(`Element ${ELEMENT_OID} queried metadata`, metadata);

See the Embed SDK documentation for more information about the getMetadata method.

You can see a complete example in Github