xeogl Introduction

Functional overview

xeogl is a WebGL-based 3D engine that's geared towards visualization applications in science, technology, engineering and mathematics (STEM).

xeogl is:

  • open source (MIT),
  • component-based,
  • data driven,
  • imports glTF,
  • has a physically-based renderer
  • easy to use, with defaults for everything, and
  • optimized to render lots of detail.

In production

xeogl is running in production as the 3D engine within BIMSurfer, the open source tool for Web-based visualization and evaluation of Building Information Models (BIM).

BIMSurfer is used within a variety of apps, so it's effectively battle-testing xeogl with large models on a variety of operating systems and hardware.

Scene definition

Scene definition is designed to be convenient, with xeogl providing sensible defaults for virtually everything. If you get stuck, xeogl has detailed API docs and examples, plus a wiki with tutorials.

To get started, first include xeogl.js in your HTML page:

<script src="xeogl.min.js"></script>

Then define your 3D scene as an entity-component graph, as shown below. Note how a scene is basically a bunch of components that are tied together by entities. In this example xeogl is quietly providing lots of default components for us, but we can override those with our own when we need more control.

var geometry = new xeogl.TorusGeometry({
    radius: 1.0,
    tube: 0.3,
    radialSegments: 120,
    tubeSegments: 60

var material = new xeogl.MetallicMaterial({
    baseColorMap: new xeogl.Texture({
        src: "textures/diffuse/uvGrid2.jpg"
    roughnessMap: new xeogl.Texture({
        src: "textures/roughness/goldRoughness.jpg"

var entity = new xeogl.Entity({
    geometry: geometry,
    material: material

Editing scenes

You can modify everything in your scene dynamically. Create and destroy components, link or unlink them to each other, update their properties etc.

Let's add rotation and scale to our torus, then increase its size:

// Rotate and scale our torus entity
entity.transform = new xeogl.Rotate({
    xyz: [0,1,0],
    angle : 0,
    parent: new xeogl.Scale({
        xyz: [2, 2, 2]

// Bump up its thickness and radius
entity.geometry.radius *= 2.0;
entity.geometry.tube *= 2.0; 

Animating scenes

Animate scenes by updating component properties. Almost everything in xeogl fires change events that you can subscribe to, which is convenient for scripting and extension.

// Listen for updates to the rotation angle
entity.transform.on("angle", function(value) {
    console.log("Rotation angle is now: " + value);

// Update the rotation angle, which fires our listener
entity.transform.angle = 90.0;

Let's start our torus spinning:

entity.scene.on("tick", function () {
    entity.transform.angle += 0.5;

Importing models

Got a model you want to quickly view in the browser? Use some of xeogl's higher-level components, which are built on the components we just saw in the previous example. Let's load a glTF model of a gearbox:

var model = new xeogl.GLTFModel({
    src: "models/gltf/gearbox/gearbox_assy.gltf"

model.on("loaded", function() { // Fit to view
    var cameraFlight = new xeogl.CameraFlight());

// Use a BIM-style camera control to navigate
// the model with the mouse and keyboard
var cameraControl = new xeogl.BIMCameraControl();

Viewing effects

Want to view your model in stereo? Just drop in a component to activate the desired effect. Let's view our model with simple split-screen stereo:

var stereoEffect = new xeogl.StereoEffect({
    eyeSep: 1.2,
    focalDist: 20,
    aperture: 45,

How about fishtank VR with quad-buffered stereo, 3D tracking eyewear and stylus interaction? Drop in some components so that we can explore our model on a zSpace display:

// Deactivate the previous effect

// Activate zSpace effect with quad-buffered stereo
var zspaceEffect = new xeogl.ZSpaceEffect();

// Activate the zSpace stylus
var zspaceStylusControl = new xeogl.ZSpaceStylusControl();

Learn More

xeogl Features