3D software developer at Creoox AG

https://github.com/xeokit

Lindsay Kay

AEC Hackathon, Wroclaw, 5 October, 2024

Evolution

3D Visualization

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

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.

Lindsay Kay

Evolution

3D Visualization

AEC

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

More from xeolabs