3D software developer at Creoox AG
Lindsay Kay
AEC Hackathon, Wroclaw, 5 October, 2024
Evolution
3D Visualization
of

in
Tracing the Path of the xeokit SDK
AEC



JavaScript in the 90s / 2000s
xeokit.io
- JavaScript was fairly slow

- Best for things like AJAX
- App logic in JS not considered a best practice

2000s: Learning Graphics Programming
- While learning graphics programming, perverse fun implementing algorithms in JavaScript and watching them struggle
- A fine example, in Oliver's JavaScript Raytracer: https://nerget.com/rayjs/rayjs.html

- However, notice the upgrades to Oliver's RayTracer over the past decade - Workers etc.
xeokit.io

2006: Created SceneJS
- My hobby JS engine: https://github.com/xeolabs/scenejs
- Working as a Java/JavaScript developer
SceneJS drew 3D wire frames using DIVs

var scene = SceneJS.createScene({
nodes:[{
type:"material",
color: { r: 1, g: 1, b: 1 },
nodes:[{
type: "rotate",
id: "myRotate",
y: 1.0, angle: 0,
nodes: [{
type:"geometry/box"
}]
}]
}]
});

2006: SceneJS
var scene = SceneJS.createScene({
nodes:[{
type:"material",
color: { r: .3, g: .3, b: 1 },
nodes:[{
type: "rotate",
id: "myRotate",
y: 1.0,
angle: 0,
nodes: [{
type:"geometry/teapot"
}]
}]
}]
});
scene.getNode("myRotate",
function(myRotate) {
var angle = 0;
scene.on("tick",
function() {
myRotate.setAngle
(angle += .5);
});
});
SceneJS had a declarative scene graph definition inspired by VRML and other Human-readible formats

2006: Mozilla's Canvas 3D Experiments
- 2006: Vladimir Vukićević presents Canvas 3D experiment at Mozilla - a JS API on OpenGL ES
- 2007: I converted SceneJS to use Canvas 3D

- SceneJS is then rendering Gouraud shaded triangle meshes
- Pretty basic, but eye-catching to see in FireFox back then
xeokit.io

2007: "Is that actually running in the browser?"
- Hackers' first experiments on Canvas 3D made an impression
- Desktop graphics programmers surprised
- Graphics software companies start considering their Web 3D strategy (CAD, MedViz, gaming..)
- Graphics gurus explore WebGL and sharing on social media
- Classic algorithms adapted to WebGL appearing
xeokit.io

2009: We need to move our product into the browser
- CTOs: But which WebGL JavaScript library to use?
- In 2009, only a handful of WebGL libraries and developers exist
- Three.js not released until 2010
- A Web graphics programmer shortage
- Quit my Java / JavaScript job to develop SceneJS
- Bought a bunch of graphics textbooks and a decent GPU.

2010: BioDigital Human Migrates to SceneJS
- https://www.biodigital.com/
- A virtual Human body built on OpenSceneGraph / C++
- Our mission: rebuild on SceneJS, run everywhere


2010: BioDigital Human Built on SceneJS
- Promising PoC - Skeleton at 15 FPS in FireFox, loaded from COLLADA
- WebGL still glitchy in some browsers
- Many learnings from using SceneJS in production - consequences of design
- Forked SceneJS for BioDigital Human - public and private forks


2010: BioDigital Requirement #1 - Load Models Quickly
- SceneJS COLLADA loader too slow
- Instead, load JSON scene outlines, materials, quantized geometries etc. from an asset server
- Great resource - Zygote Body,originally created by Won Chun at Google: https://www.zygotebody.com/
xeokit.io

2010: BioDigital Requirement #2 - Navigate Models Fluidly
- How to draw thousands of objects at 30-60FPS?
- Minimize GL state changes, like OpenSceneGraph
- Scene graph -> display list compilation
- VBO geometry batching
- Inspirations from OSGJS: https://github.com/cedricpinson/osgjs

- Minimize JS garbage collection

2010: More BioDigital SceneJS Requirements
- Physically-based materials
- Slicing Planes
- 3D picking
- Attaching 3D labels
- Highlighting, X-Ray
- VFX - Blur, video textures, animations, morphing etc.



2011: MicroSoft Difficulties
- "WebGL Considered Harmful"
- https://msrc.microsoft.com/blog/2011/06/webgl-considered-harmful/
- A report on security vulnerabilities
- A tactic to buy time to catch up?
- Things got better when IE discontinued
- Edge is now the new weak link
xeokit.io

2015: SceneJS in BIMSurfer

- SceneJS used in BIMSurfer V1
- BIMServer converts and stores IFC
- BIMSurfer loads model via binary stream

2015: SceneJS Learnings
- Defaults & training wheels were great to get started, but became redundant
- Wraps WebGL in a declarative and logically-oriented API
- Graphics students enjoyed it - used in some classrooms
- Engine has many layers, much complexity
- Not easy to extend and maintain
- Doesn't scale well to 10000+ objects
- For engineering viewers, needs a layer of classes on top
However:
xeokit.io

2015: Created xeogl
- Built on lessons learned from SceneJS
- Component architecture - "game objects"
var mesh = new xeogl.Mesh({
geometry: new xeogl.TeapotGeometry(),
material: new xeogl.MetallicMaterial({
baseColor: [1.0, 1.0, 1.0]
})
});
- https://xeogl.org/

- MIT License

2017: Built BIMData Viewer V1 on xeogl
- Bigger models, no streaming, loaded up-front
- glTF models with 300,000+ objects - pushing the limits of xeogl


2019: Created xeokit
- Built on lessons learned from SceneJS and xeogl
- Objectives:
- Faster rendering
- Easier to extend (code smell refactoring)
- Use less memory
- Support double-precision geometry
- AGPL3 license
- Commercially sustainable


2024: xeokit SDK
- Partnered with Creoox in 2020
- Development sustained through custom enterprise licenses
- Still one of the only libraries to support double-precision
- Still among the fastest and most precise viewers
xeokit.io

2024: xeokit Differentiators (1)


xeokit
Others (AutoDesk etc)
- View real-world coordinates without rounding error ("jitter")
Real world 3D coordinate system

2024: xeokit Differentiators (2)
XKT: native compressed binary format

- CLI IFC->XKT model conversion tools
- Compress geometry
- Split models = smoother loading
- Quantized, tiled RTC vertex positions & oct-encoded normals
- 48 bits per position, 16 bits per normal

2024: xeokit Differentiators (3)
Cursor snap-to-primitive
- Devised by Toni Marti at Triba AG

- Makes accurate measurements possible / viable

2024: xeokit Differentiators (4)
Integrated semantic data model
- Loads IFC semantics into Viewer

- Classifies objects, useful for building explorer trees

2024: xeokit Differentiators (5)
View federated models

- Load multiple models
- Merge models into same explorer tree
- Merge split models

Thanks!

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 WebGL Meeting 2020, looking at how xeokit deals with some of the technical challenges involved with viewing large 3D BIM models in the browser.
- 89