@xeokit SDK (V3)

High‑performance AECO visualization for the web and Node.js

Welcome to xeokit, a flexible, production‑grade SDK for creating fast, interactive visualizations of AECO (Architecture, Engineering, Construction & Operations) models directly in the browser or in Node.js.

Built with TypeScript, xeokit is designed for extreme performance: it streams, loads, and renders very large models with minimal memory and CPU usage. The SDK cleanly separates data, scene representation, and rendering, making it suitable for everything from lightweight viewers to complex BIM pipelines.

---

Key Features

• Lightning‑fast rendering of massive AECO models via batched draw calls, data textures, and a renderer designed for IFC-scale scenes.
• Browser & Node.js support for viewing, conversion, and preprocessing.
• Scene graph + data graph architecture, decoupled so semantics and geometry can be authored independently.
• Multi‑canvas, multi‑view viewers with floating-panel and tiled layouts.
• Full precision (64‑bit) coordinate system, so georeferenced and city-scale models render without jitter.
• Pluggable renderer backends (WebGL today, WebGPU ready).
• Import, export & convert industry‑standard AECO formats (IFC, glTF, LAS, CityJSON, XKT, XGF, DotBIM, OBJ, MTL, RVM, STEP).
• BIM collaboration via BCF Viewpoints.
• Procedural content (materials, geometry, environments) for scaffolding and tests.
• Open‑source with a permissive AGPL‑3.0 license.

---

Table of Contents

Modules

• Base
• Model
• Spatial
• Viewing
• Formats
• Convert
• Inspect
• Presentations
• Tools
• Simulation
• Interop
• UI
• Demo

Cheatsheets

Examples

• Spinning 3D Box
• IFC Model Viewer
• IFC to DotBIM Conversion via CLI

Project Development

• Installation
• Building the SDK
• Generating Docs

License

Credits

---

Modules

The SDK is organised into topical buckets rather than a flat namespace. Every import path begins with one of the buckets below; the table inside each bucket lists the concrete submodules. The same buckets are exposed at runtime as namespaces on the root xeokit object (e.g. xeokit.model.scene, xeokit.viewing.viewer).

See the Cheatsheets section below for visual overviews.

Base

Foundational primitives every other bucket depends on: result types, math, constants, locale strings, low-level WebGL utilities.

Module	Description
@xeokit/sdk/base/core	SDKResult, SDKErrorType, SDKTask, event emitter.
@xeokit/sdk/base/constants	Shared enums (primitive types, render modes, …).
@xeokit/sdk/base/math	Vectors, matrices, quaternions, AABBs.
@xeokit/sdk/base/utils	createUUID, small helpers.
@xeokit/sdk/base/io	File I/O wrappers for browser and Node.
@xeokit/sdk/base/locale	Localisation service.
@xeokit/sdk/base/webGL	Low-level WebGL utilities (buffers, textures, FBOs).

---

Model

The scene graph (3D geometry, materials, objects) and the data graph (semantic entities, relationships, property sets). Both are renderer-agnostic and run identically in the browser and Node. Streaming and procedural authoring live here too.

Module	Description
@xeokit/sdk/model/scene	Scene graph: SceneModel, SceneObject, SceneMesh, …
@xeokit/sdk/model/data	Semantic graph: DataModel, DataObject, relationships.
@xeokit/sdk/model/procgen	Procedural geometry / materials / environment generators.
@xeokit/sdk/model/streaming	Chunked model streaming + caching.

---

Spatial

CPU-side spatial indices and the picking pipeline that builds on them.

Module	Description
@xeokit/sdk/spatial/collision	KdTree / BVH indices over scene geometry.
@xeokit/sdk/spatial/picking	Ray / canvas-pos picking, snap-to-vertex / snap-to-edge.

---

Viewing

The browser viewer and its pluggable renderer backends, plus camera animations and pointer-driven controllers.

Module	Description
@xeokit/sdk/viewing/viewer	Viewer, View, Camera, lights, effects.
@xeokit/sdk/viewing/webGLRenderer	WebGL rendering backend.
@xeokit/sdk/viewing/viewController	Mouse / touch camera controllers.
@xeokit/sdk/viewing/cameraFlight	Camera flight animations and bookmarks.

---

Formats

Import / export modules for the AECO file formats xeokit supports. Each loader populates a SceneModel (and optionally a DataModel); each exporter consumes them.

Module	Description
@xeokit/sdk/formats/ifc	Import IFC.
@xeokit/sdk/formats/gltf	Import glTF / GLB.
@xeokit/sdk/formats/dotbim	Import / export DotBIM.
@xeokit/sdk/formats/xgf	Import / export XGF.
@xeokit/sdk/formats/xkt	Import XKT.
@xeokit/sdk/formats/las	Import LAS point clouds.
@xeokit/sdk/formats/cityjson	Import CityJSON.
@xeokit/sdk/formats/obj	Import OBJ.
@xeokit/sdk/formats/mtl	Import MTL material definitions.
@xeokit/sdk/formats/rvm	Import / export RVM.
@xeokit/sdk/formats/step	Import STEP (AP214).
@xeokit/sdk/formats/datamodel	Native data-model JSON.
@xeokit/sdk/formats/scenemodel	Native scene-model JSON.
@xeokit/sdk/formats/metamodel	Legacy metamodel JSON.

---

Convert

Format-conversion pipelines and the xeoconvert CLI.

Module	Description
@xeokit/sdk/convert/modelConverter	Programmatic multi-format converter.
@xeokit/sdk/convert/ifc2gltf2xgf	IFC → glTF → XGF pipeline.
@xeokit/sdk/convert/xeoconvert	Command-line wrapper around the above.

---

Inspect

Read-only inspectors that report on the integrity and statistics of scene and data models.

Module	Description
@xeokit/sdk/inspect	SceneModelInspector, DataModelInspector, and helpers.

---

Presentations

Scene processors — modules that consume a SceneModel and emit a new one or mutate its presentation state. Useful for engineering output: technical drawings, sliced caps, heat maps, exploded views, recolour palettes.

Module	Description
@xeokit/sdk/presentations/drawings	Orthographic 2D drawings (wireframes, fills, chrome).
@xeokit/sdk/presentations/sectionCaps	Solid-cap geometry where section planes slice solids.
@xeokit/sdk/presentations/exploder	Per-object translation for assembly-explode views.
@xeokit/sdk/presentations/heatmaps	Scalar-data colour overlays as material textures.
@xeokit/sdk/presentations/materials	Curated procedural-material palette (MaterialsPalette).

---

Tools

Interactive widgets backed by picking.

Module	Description
@xeokit/sdk/tools/measurements	Distance + angle measurement tools.

---

Simulation

Animation / physics runtimes that drive scene transforms over time.

Module	Description
@xeokit/sdk/simulation/physics	Rigid-body physics integration (getScenePhysics).

---

Interop

Cross-tool interchange formats that aren't strictly model formats.

Module	Description
@xeokit/sdk/interop/bcf	Load and save BCF Viewpoints.

---

UI

Plain-DOM UI primitives the demo and host applications can compose.

Module	Description
@xeokit/sdk/ui	Context menus, floating panels, button bars, dialogs.

---

Demo

Higher-level glue used by the demo site and the example gallery — DemoHelper, the toolbar, the panel registry, IFC-material auto-application, etc. Most production hosts won't depend on this bucket directly.

Module	Description
@xeokit/sdk/demo	DemoHelper, demo panels, sample-model registry.

---

Cheatsheets

Visual one-page references for the SDK and its main buckets. Click a thumbnail to open the full-size image, or use the Download link to save a local copy.

SDK at a glance Open · Download	model/scene at a glance Open · Download
model/data at a glance Open · Download	presentations/drawings at a glance Open · Download

---

Examples

Some minimal examples to get you started. Find more examples at xeokit.github.io/sdk/examples.

Spinning 3D Box

In the example below, we create a simple 3D box model and set up a viewer to display it in a canvas element with the ID myCanvas. The camera orbits around the box to create a spinning effect.

In xeokit, everything starts with a Scene that holds all 3D content. We then create a Viewer to visualize the scene, and a WebGLRenderer to handle rendering.

Instead of using exceptions, errors are handled gracefully using result monads. Any method in the SDK that can fail returns an SDKResult that indicates success or failure.

Scene content is fully dynamic and can be modified at runtime. We can create and destroy geometries, meshes, and objects in the Scene and the Viewer will update automatically.

Everything is coupled via events. The Scene emits events when content changes; the Viewer emits events when viewing parameters change, and the WebGLRenderer reacts to all these events to update the display accordingly.

npm install @xeokit/sdk

import { Scene } from "@xeokit/sdk/model/scene";
import { Viewer } from "@xeokit/sdk/viewing/viewer";
import { WebGLRenderer } from "@xeokit/sdk/viewing/webGLRenderer";
import { SDKTask } from "@xeokit/sdk/base/core";
import { TrianglesPrimitive } from "@xeokit/sdk/base/constants";

const scene = new Scene();
const viewer = new Viewer({ scene });
const renderer = new WebGLRenderer({ viewer });

const viewResult = viewer.createView({
  id: "view",
  elementId: "myCanvas"
});

if (!viewResult.ok) {
  throw new Error(viewResult.error);
}

const view = viewResult.value;

view.camera.eye = [0, 0, 10];
view.camera.look = [0, 0, 0];
view.camera.up = [0, 1, 0];

const modelResult = scene.createModel({ id: "boxModel" });

if (!modelResult.ok) {
  throw new Error(modelResult.error);
}

const model = modelResult.value;

model.createGeometry({
  id: "boxGeometry",
  primitive: TrianglesPrimitive,
  positions: [-1, -1, -1, 1, -1, -1, 1, 1, -1, -1, 1, -1],
  indices: [0, 1, 2, 0, 2, 3]
});

model.createMesh({
  id: "boxMesh",
  geometryId: "boxGeometry",
  color: [1, 0, 0]
});

model.createObject({
  id: "box",
  meshIds: ["boxMesh"]
});

new SDKTask({
  repeat: true,
  task: () => view.camera.orbitYaw(1)
});

---

IFC Model Viewer

Load and display an IFC model in the browser, including semantic structure via the data graph.

import { Scene } from "@xeokit/sdk/model/scene";
import { Data, searchObjects } from "@xeokit/sdk/model/data";
import { Viewer } from "@xeokit/sdk/viewing/viewer";
import { WebGLRenderer } from "@xeokit/sdk/viewing/webGLRenderer";
import { ViewController } from "@xeokit/sdk/viewing/viewController";
import { IFCLoader } from "@xeokit/sdk/formats/ifc";

// Create containers for geometry and optional structural data

const scene = new Scene();
const data = new Data();

// Create a Viewer and WebGL renderer

const viewer = new Viewer({ scene });
new WebGLRenderer({ viewer });

// Create a View bound to an existing canvas element

const view = viewer.createView({
    id: "myView",
    elementId: "myCanvas" // Ensure this element exists
}).value;

// Position the camera

view.camera.eye = [-6.01, 4.85, 9.11];
view.camera.look = [3.93, -2.65, -12.51];
view.camera.up = [0.12, 0.95, -0.27];

// Enable mouse / touch camera interaction

new ViewController(view, {});

// Create target models for the loader

const sceneModel = scene.createModel({ id: "myModel" }).value;
const dataModel = data.createModel({ id: "myModel" }).value;

// Create the IFC loader

const ifcLoader = new IFCLoader();

// Fetch and decode the IFC file

fetch("model.ifc")
    .then((r) => r.arrayBuffer())
    .then((fileData) => {

        // Load geometry (and optional node hierarchy) into the models

        return ifcLoader.load({
            fileData,
            sceneModel,
            dataModel
        });
    })
    .then(() => {

        // Model successfully loaded and visible.

        // Search the data graph for IfcWall objects, starting at the
        // IfcProject root node, including any children via IfcRelAggregates relationships.

      const resultObjectIds = [];

      const result = searchObjects(data, {
        startObjectId: "38aOKO8_DDkBd1FHm_lVXz", // Root IfcProject ID
        includeObjects: ["IfcWall"],
        includeRelated: ["IfcRelAggregates"],
        resultObjectIds
      });

      // Check if the query succeeded.

      if (!result.ok) {
        console.error("Error querying IFC data: " + result.error);
        return;
      }

      // If the query succeeded, go ahead and mark whatever
      // objects we found as selected. Now all the IfcWall objects
      // in the Viewer will appear selected and glowing.

      view.setObjectsSelected(resultObjectIds, true);
    })
    .catch((err) => {
        // Clean up on failure
        sceneModel.destroy();
        dataModel.destroy();
        console.error("Error loading IFC:", err);
    });

---

Converting an IFC file to DotBIM via CLI

Convert an IFC file to DotBIM format using the xeoconvert command-line tool.

node ./node_modules/@xeokit/sdk/dist/xeoconvert.js \
  --pipeline ifc2dotbim \
  --ifc model.ifc \
  --dotbim model.bim \
  --log \
  --stats conversion_stats.json

---

Project Development

Installation

Install pnpm (recommended globally):

npm install -g pnpm

Clone the repository:

git clone https://github.com/xeokit/sdk
cd sdk

Install dependencies:

pnpm install

---

Build SDK

Build the xeokit SDK:

pnpm sdk-dist

Output:

./packages/sdk/dist

This directory contains the compiled JavaScript bundles and dependencies.

---

Build TypeDocs

Generate API documentation:

pnpm website-sdk-docs

Output:

./packages/website/docs

The website package is configured as the root for GitHub Pages hosting.

---

License

Copyright © 2026

Licensed under the AGPL‑3.0.

---

Credits

See Credits.