Copy of xeokit: A Web Programming Toolkit for BIM & Engineering Graphics

Software developer at xeolabs .com

Lindsay Kay

OSArch Community Meetup, July 3, 2021

xeokit

Open Source

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

for

Graphics

BIM

AEC

Web Programming Toolkit

Viewing BIM in the browser is tricky!

xeokit .i o

Loading models quickly over the Web

Control of tools and data

Fitting them in browser memory

Drawing them interactively

Accurately viewing double-precision geometry on single-precision HW

Some challenges:

Introducing xeokit

Background Info

Tech Overview

Loading Big Models Fast

xeokit Background Info

xeokit .i o

AGPL3 dual-licensed JavaScript SDK for developing browser-based 3D AEC model viewers

Based on lessons learned from xeogl, SceneJS and various client projects since 2009

Created in Feb 2019 by xeolabs

Mission: code AEC viewers easily, load big models quickly, navigate them smoothly, host own code and data

Creoox AG becomes xeokit's business partner in 2020: creoox.com

Introducing xeokit

xeokit Tech Overview

xeokit .i o

Views complex models at full-precision

Loads models quickly from native XKT format

Code, tools and models in your hands

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

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

const xktLoader = 
      new XKTLoaderPlugin(viewer);

const model = xktLoader.load({
    src: "HolterTower.xkt"
});

Custom WebGL 3D graphics engine with AEC-friendly programming API

JavaScript viewer with plugins library

Converters for IFC, CityJSON, 3DXML, LAZ glTF, DAE, STL, PCL ...

Introducing xeokit

Loading Big Models Fast

xeokit .i o

XKT - xeokit's native, compact binary model format

Quantized, tiled RTC vertex coordinates - double precision for 48 bits per vertex!

Embedded metadata (eg. IFC structure)

Convert your models to XKT using open source tools

Compresses bulky source formats (eg. IFC) for quick transport and efficient loading

Introducing xeokit

Using xeokit

Converting a Model to XKT

Viewing an XKT Model with xeokit

Converting a Model to XKT

xeokit .i o

More info: https://bit.ly/2ThmyCf

Use open source tools in a chain:

IfcConvert

COLLADA2GLTF

xeokit-metadata

gltf2xkt

Using xeokit

A fast, closed-source IFC converter is also available from Creoox: creoox.com

Converting a Model to XKT (2)

xeokit .i o

More info: https://bit.ly/2ThmyCf


./IfcConvert -y --use-element-guids Duplex.ifc Duplex.dae 

./COLLADA2GLTF-bin --materialsCommon -v -i Duplex.dae -o Duplex.gltf

./xeokit-metadata Duplex.ifc Duplex.json

./gltf2xkt -s Duplex.gltf  -m Duplex.json -o Duplex.xkt

Using the open source CLI tools in Linux:

Using xeokit

Viewing an XKT model with xeokit

xeokit .i o

import {Viewer, XKTLoaderPlugin} 
	from "xeokit-sdk.es.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({
    src: "Schependomlaan.xkt"
});