xeogl introduction

xeogl is an open source JavaScript library from @xeographics for 3D model visualization on WebGL.

It gives you the tools to create interactive 3D worlds in your browser. Build your objects programmatically, or load them from glTF. Navigate them with the camera and script them with Javascript, to create cool presentations.


  • 3D engine:
    • Uses WebGL for rendering
    • Declarative, dynamically-editable 3D scene representation
    • No external dependencies; library and tool agnostic
    • Optimized for high-detail visualization
    • Open source (MIT).
  • Designed for CAD, BIM and Archviz:
    • Load multiple models
    • Isolate/move/emphasize objects
    • Camera navigation controls
    • Camera animations (flyto, follow, path etc)
    • Emphasis effects (wireframe, ghost, highlight, outline)
    • Annotations
    • Cross-section views
    • Transform hierarchies
    • Bounding volumes
    • Fast 3D picking, raycasting
    • Screenshots
  • Imported formats:
    • glTF, STL, OBJ+MTL, 3DS, SceneJS
  • Materials
    • PBR (metal/rough and specular/gloss)
    • Blinn/Phong and Lambert
  • Lighting
    • Image-based lighting
    • Dynamic lights (directional, point and spot)
    • Realtime shadows

Creating a 3D scene

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

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

Then define your 3D scene as an entity-component graph, as shown below.

Your scene is basically a bunch of components that are tied together by entities. Each entity represents a WebGL draw call.

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

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

Here's what we just created:

Editing scenes

You can dynamically 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 transforms 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]

// Increase the size
entity.transform.parent.[1.5,  1.5, 1.5]; 

Animating scenes

Animate your scenes by updating the properties of their 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;

Loading models

Load 3D models into your scene from glTF:

var model = new xeogl.GLTFModel({
    id: "office",
    src: "models/gltf/office/scene.gltf"

Then animate and navigate their entities to create custom visualizations:

model.on("loaded", function() {

    // When model loaded, highlight its furniture
    // furniture entities and fit to view

    var entityIds = [
        "office#79.0", "office#31.0", "office#105.0",
        "office#8.0", "office#65.0", "office#65.0" //....

    for (var i = 0; i < entityIds.length; i++) {
        var id = entityIds[i];
        var entity = model.entities[id];

        entity.highlight = true;

    var cameraFlight = new xeogl.CameraFlightAnimation();

// Control camera with mouse and touch
var cameraControl = new xeogl.CameraControl();

Here's what we just created:

Model by sketchfab.com/scann3d

xeogl in the wild

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

Learn more