xeogl Introduction

Overview

xeogl is a data-driven 3D visualization engine on WebGL.

Features:

Featured app

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 a component graph, as shown below. See 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

You can edit everything in your scene at runtime. Create and destroy components, link or unlink them, 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

Animate scenes by updating properties on components. Virtually everything in xeogl fires change events that you can subscribe to.

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

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());
    cameraFlight.flyTo(model);
});

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

Effects

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