Lindsay Kay
OSArch Community Meetup, July 3, 2021
xeokit
Open Source
an
for
Graphics
&
BIM
AEC
Web Programming Toolkit
Viewing BIM in the browser is tricky!
- 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
- 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
- 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
- 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
- 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)
- 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.xktUsing the open source CLI tools in Linux:
Using xeokit
Viewing an XKT model with xeokit
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"
});
IFC = 49.3 MB, XKT = 1.6M, loaded in 0.7 secs, 60 FPS
Using xeokit
A Look Inside xeokit
Minimizing Memory Footprint
Drawing Many Objects Interactively
Rounding Jitter on WebGL
Eliminating Rounding Jitter
Navigating Precisely
Minimizing Memory Footprint
- Store geometry on GPU, not in browser
- Quantized RTC vertex positions, oct-encoded (optional) normals
- 48 bits per double-precision position, 16 bits per normal
A large plumbing model at BIMData.io
Inside xeokit
Drawing Many Objects Interactively
1. ANGLE_instanced_arrays
Two rendering techniques on WebGL:
2. Batched Geometry Arrays:
- Combine single-use geometries into a single set of VBOs
- Add an array of per-vertex flags, to hold object states
- Vertex shader "discards" vertex when visible flag false
- Update all vertex flags for an object to set its visibility
Inside xeokit
A Technical Hurdle - Rounding Jitter on WebGL
- GPUs are usually only single-precision, however
- Many BIM models use double-precision coordinates
-
Need to emulate double-precision rendering to eliminate rounding jitter
Model centered at (1842022, 10, -5173301), provided by BIMData.io
Inside xeokit
Solution - How we Eliminate Rounding Jitter
- Coords are 32-bit offsets from their 64-bit tile centers, rendered using modified view matrix
- Tiled, relative-to-center (RTC) coordinates
Read about RTC coordinates in virtualglobebook.com
- Memory bonus: full-precision without the cost of storing double-precision values
Inside xeokit
How we Navigate Precisely
- Distance-proportional rate of forward/backward movement
-
Ray-cast every n frames to find distance to nearest object, scale dolly and zoom rates accordingly
- Move fast in open spaces, move slow in tighter spaces
Inside xeokit
Who's using xeokit?
- View multiple models
- Share issues via BCF
- Slice, highlight, X-ray
- Plan views
Who's using xeokit?
- Great OSS community supporters - sponsors of many public xeokit features
- xeolabs clients since 2019
Who's using xeokit?
- Sponsors of several valuable open source xeokit features
Text
D-Studio
- Can't show apps yet - still under development!
- xeolabs client since 2019
-
Centralized BIM Data
-
Requirements Management
-
BIM Model Viewer
-
Rule-Based Quality Checks
-
Clash Detection
-
KPI Dashboard
-
Coordination & Reports
Who's using xeokit?
Text
-
Contributed IFC metadata tool and React integration boilerplate
- xeolabs client since 2017
- Originally used xeogl
- Moved to xeokit in 2019
Who's using xeokit?
- Supports xeokit with feature planning, bug fixes, and datasets for demos and testing
- Upload IFC models
- View in 3D
- Slice, highlight, X-ray
- Plan views
- Share BCF
- Model checker
- etc
Who's using xeokit?
- Using xeokit as the 3D front end for their Singular Qualifier IFC model checker tool
Who's using xeokit?
Who's using xeokit?
xeokit in Research: UMass Boston
-
3D Visualization of a Building
-
A semi-automatic pipeline to transform 2D floorplans to 3D models
-
Honors Senior Thesis Project
Who's using xeokit?
What's in the works for xeokit 2.0
- convert2xkt - Single-step multi-format XKT converter
- xeokit-bim-viewer-demo - BIM viewer boilerplate with batch model import, element property sets, BCF etc.
- Point clouds, CityJSON, object attributes, localization and more
- Performance test suite - measure conversion times, XKT sizes and load/render performance in all browsers
- WebGPU!
Big thanks to our supporters:
D-Studio
Sponsor of many public xeokit features, including xeokit-bim-viewer
Sponsor of various public xeokit features
Help with feature design, QA and data sets for demos
Contributed MIT-licensed IFC metadata extractor tool and a React boilerplate
Collaborated on the XKT model format
xeokit's exclusive business partner
Thanks!
lindsay.kay@xeolabs.com
Copy of xeokit: A Web Programming Toolkit for BIM & Engineering Graphics
By xeolabs
Copy of xeokit: A Web Programming Toolkit for BIM & Engineering Graphics
A presentation for OSArch Meetup July 2021.
