3D software developer at Creoox AG

Lindsay Kay

AEC Hackathon, Wroclaw, 5 October, 2024

Evolution

3D Visualization

of

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

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

  • 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:
  1. Faster rendering
  2. Easier to extend (code smell refactoring)
  3. Use less memory
  4. Support double-precision geometry
  5. AGPL3 license 
  6. 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!

Made with Slides.com