<aside> ℹ️ This guide is for xeokit-sdk v2.0 and later.

</aside>

In this guide, we'll use convert2xkt to convert an IFC file to xeokit's native, fast-loading XKT format. Then, using JavaScript, we'll view the XKT model in the browser using xeokit's Viewer component. As the Viewer loads our model, it will create 3D scene objects, along with a parallel metadata structure. We'll show how to use that metadata to navigate the scene objects and get information about them.

Viewing an XKT model with metadata in xeokit BIMViewer, while inspecting property sets for an IfcWallStandardCase. Run this demo here: https://xeokit.io/demo.html?projectId=Duplex

Viewing an XKT model with metadata in xeokit BIMViewer, while inspecting property sets for an IfcWallStandardCase. Run this demo here: https://xeokit.io/demo.html?projectId=Duplex

<aside> ▶️ Run this demo

</aside>

Introduction

The xeokit SDK's core Viewer is built for viewing large AEC and BIM models. These models are often complex assembles, with metadata that classifies the objects and attaches domain-specific information to them. In this guide, we'll describe how the xeokit Viewer represents scene objects and metadata, and how we can access that metadata from JavaScript. As we go, we'll refer to the UML diagram below, which shows the main components we'll be discussing.

We'll use an IFC model as our example, converted to XKT using convert2xkt, so that we can load it into our Viewer. This tutorial only works with convert2xkt currently.

Although we're using IFC in this guide, the core xeokit Viewer is not bound to IFC, or any other data model. Therefore, with the exception of one or two Viewer plugins, much of what you'll see here also works with other source formats, such as CityJSON.

Class diagram showing metadata and scene representations in the core xeokit Viewer. A metadata graph attaches information to graphical scene entities, which are implemented using either a conventional scene graph (1) or a specialized high-performance scene representation (2). Various viewer plugins build whichever scene representation they need. NavCubePlugin, for example, builds (1) for its interactive cube gizmo, while XKTLoaderPlugin builds (2) for the models it loads.

Class diagram showing metadata and scene representations in the core xeokit Viewer. A metadata graph attaches information to graphical scene entities, which are implemented using either a conventional scene graph (1) or a specialized high-performance scene representation (2). Various viewer plugins build whichever scene representation they need. NavCubePlugin, for example, builds (1) for its interactive cube gizmo, while XKTLoaderPlugin builds (2) for the models it loads.

Scene Representation

The xeokit SDK's Viewer class supports two scene representations:

  1. a conventional scene graph, with a node graph containing transform hierarchies, physically-based materials, textures etc, and
  2. a lean high-performance scene representation for large high-detail models, for which fast loading, low memory footprint and high rendering performance are essential.