xeokit: A Web Programming Toolkit for BIM & Engineering Graphics

3D software developer at xeolabs .com

Lindsay Kay

WebGL Meetup, 18 November, 2020

xeokit

Web Programming Toolkit

https://slides.com/xeolabs/xeokit-sdk

for

Graphics

BIM

Engineering

1. What is BIM?

xeokit .i o

Building Information Modeling

Use models to collaborate on planning, design, construction and maintenance

Digitized construction management

Centered around a meta model, provided by the Industry Foundation Classes (IFC)

2. WebGL BIM Challenges

xeokit .i o

Load large models quickly

Navigate precisely, in both open and tight spaces

Fit large models in browser memory

Draw many objects, interactively

Accurately render full-precision geometry

3. What is xeokit?

xeokit .i o

A JavaScript SDK for developing model viewers for BIM and engineering

Uses WebGL (1)

Loads and views big models, at full-precision

Loads IFC, glTF, OBJ, STL, 3DXML, XKT & metadata to classify objects

Convert models with open source tools & host them on your own server

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

viewer.camera.eye = [0,0,10];
viewer.camera.look = [0,0,0];
viewer.camera.up = [-0, 1, 0];

const xktLoader = 
      new XKTLoaderPlugin(viewer);

const model = xktLoader.load({
    src: "myModel.xkt",
    metaModelSrc: "myModel.json"
});

5. Loading Big Models Quickly

xeokit .i o

xeokit has a native, binary geometry format called "XKT"

Quantized, tiled RTC vertex positions & oct-encoded normals

48 bits per position, 16 bits per normal

Pre-computed wireframe indices

Convert IFC to XKT using open source CLI tools

6. Converting IFC Models for xeokit

xeokit .i o

Open source CLI conversion tools
github.com/xeokit/xeokit-sdk/wiki/Creating-Files-for-Offline-BIM

Metadata

Geometry

7. Loading IFC Models into xeokit

xeokit .i o

import {Viewer} from "../src/viewer/Viewer.js";
import {XKTLoaderPlugin} from 
"../src/plugins/XKTLoaderPlugin/XKTLoaderPlugin.js";

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

viewer.camera.eye = [1842022, 10, -5173301];
viewer.camera.look = [1842022, 10, -5173401];
viewer.camera.up = [-0.0, 1.0, 0.0];

const xktLoader = new XKTLoaderPlugin(viewer);

const model = xktLoader.load({
    metaModelSrc: "metadata.json",
    src: "geometry.xkt"
});