Skip to main content

Viewing an IFC Model with XKTLoaderPlugin

· 3 min read

Introduction

In this mini-tutorial, we'll use xeokit's [convert2xkt](<https://xeokit.github.io/xeokit-convert/docs/>) CLI tool to convert an IFC 4.3 model into xeokit's native XKT geometry format, which we'll then view in the browser using a xeokit Viewer.

The XKT format compresses models into a compact payload from which xeokit can load large numbers of objects over the Web in seconds, at full geometric precision.

For our IFC model, we'll use an architectural model from the Revit Sample Project Files. When that's converted and loaded into our viewer, it will look like the example below.

This model contains 5512 visible objects, with 283238 triangles, and a xeokit Viewer can usually load it over a good Internet connection in ~2 seconds.

Run this example

image-20240523-115400.png

Install convert2xkt

Using git and npm, clone and install our xeokit-convert repository, which contains the convert2xkt tool that we'll use to convert our IFC into XKT.

Be sure to use the latest versions of both xeokit-convert and xeokit-sdk.

git clone https://github.com/xeokit/xeokit-convert.git
cd xeokit-convert
npm install

Convert IFC to XKT

Let's convert our IFC model.

First, we'll get the tool to print out some usage info:

node convert2xkt.js -h

Usage: convert2xkt [options]

Options:

-v, --version output the version number
-s, --source [file] path to source file
-f, --format [string] source file format (optional); supported formats are gltf, ifc, laz, las, pcd, ply, stl and cityjson
-m, --metamodel [file] path to source metamodel JSON file (optional)
-o, --output [file] path to target .xkt file; creates directories on path automatically if not existing
-p, --properties [file] path to target directory for object property files; creates directories on path automatically if not existing
-l, --log enable logging
-h, --help output usage information

Now we'll convert our model, using the -l option to log some statistics to the console.

node convert2xkt.js -s rac_sample_project.ifc -o rac_project.ifc.xkt -l

Reading input file: rme_sample_project.ifc
Input file size: 35309.94 kB
Converting...
Converted objects: 6442
Converted geometries: 3897
Writing XKT file: rme_sample_project.ifc.xkt
XKT version: 9
XKT size: 1632.98 kB
Compression ratio: 21.62
Conversion time: 54.41 s

View the XKT in the Browser

Now we've got our XKT model - it's compressed 21x and took 54 seconds to convert.

Let's view it in the browser using xeokit, which should load this model in ~2 seconds over a decent network connection.

We'll create a Viewer attached to an HTML canvas, install an XKTLoaderPlugin, and use that to load our XKT model. See the full example here.

import {Viewer, XKTLoaderPlugin} from "https://cdn.jsdelivr.net/npm/@xeokit/xeokit-sdk/dist/xeokit-sdk.es.min.js";

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

const xktLoader = new XKTLoaderPlugin(viewer);

const modelNode = xktLoader.load({
id: "myModel",
src: "./rac_sample_project.ifc.xkt"
});

Run this example