xeogl Introduction

Overview

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

Features:

  • data driven,
  • runtime-editable node graph,
  • glTF import,
  • physically-based rendering
  • geometry compression
  • built-in emphasis effects for CAD visualization
  • easy to use, with defaults for everything,
  • open source (MIT).

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 most things 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:

// Update the rotation angle
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,
});

Learn More