View huge 3D models on the Web

The xeokit SDK is able to load and render models that contain very large numbers of objects, making it suitable for real-world applications in BIM and CAD.

It achieves this through custom plugins for xeogl.

xeogl.BigModel is a custom xeogl component that represents large models using a lightweight scene representation that stores their geometry purely on the GPU in compressed (quantized) form, while rendering them using a combination of instancing and geometry batching. The result is less memory pressure within the browser and faster rendering performance.

xeogl.BigGLTFModel extends xeogl.BigModel to load glTF models.

BigGLTFModelsPlugin integrates the above two component types into a xeokit Viewer.

The JavaScript below shows a minimal example of how to load a huge glTF model into a Viewer using the BigGLTFModelsPlugin:

import {Viewer} from "../../../src/viewer/Viewer.js";
import {GLTFBigModelsPlugin} from "../../../src/viewer/plugins/GLTFBigModelsPlugin/GLTFBigModelsPlugin.js";

// Create a Viewer
const viewer = new Viewer({
    canvasId: "myCanvas"
});

// Create a plugin to load massive glTF models
const plugin = new GLTFBigModelsPlugin(viewer);
  
// Load a model
const model = plugin.load({
    id: "myMassiveModel",
    src: "models/myMassiveModel.gltf"
});

// Fit the camera to the model
model.on("loaded", () => {
    viewer.cameraFlight.flyTo(model);
});