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 focuses on letting you:

  • load models from formats such as glTF,
  • view models with WebVR (coming soon), Cardboard, zSpace etc,
  • script model components,
  • apply visual emphasis affects,
  • navigate components with the camera,
  • interact with components using mouse, stylus etc.,
  • efficiently query component boundaries,
  • profile performance and
  • define new component types.

xeogl is:

  • open source (MIT),
  • data driven,
  • easy to learn, with defaults for everything, and
  • optimized to render a lot of detail very quickly.

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 extremely easy, with xeogl providing defaults for pretty much everything, making it really easy to learn. If you get stuck, it's got a really thorough set of 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 using the JavaScript API, 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.

// In this example we'll add components to the default scene,
// which will automatically create a WebGL canvas for us

var geometry = new xeogl.TorusGeometry({
    radius: 1.0,
    tube: 0.3
});

var material = new xeogl.PhongMaterial({
    diffuseMap : new xeogl.Texture({
        src: "textures/uvGrid2.jpg"
    })
});

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

Editing scenes

You can live-edit 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 bump up its thickness and radius:

// 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 can be very nice 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:

// Load a glTF model into the scene
var model = new xeogl.GLTFModel({
    src: "models/gltf/gearbox/gearbox_assy.gltf"
});

// Fit the model in view as soon as it's loaded
model.on("loaded", function() {
    var cameraFlight = new xeogl.CameraFlight());
    cameraFlight.flyTo(model);
});

// 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? Let's drop in some components so that we can explore our model on a zSpace display:

// Deactivate the previous effect
stereoEffect.destroy();

// 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