xeogl introduction

xeogl is an open source JavaScript library from xeolabs 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 standard file formats such as glTF and OBJ. Navigate them with the camera and script them with Javascript, to create compelling 3D presentations.

Features

  • 3D engine:
    • Uses WebGL for rendering
    • Component-based 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
    • Scene object hierarchies
    • Entity classes (eg. IFC)
    • Transform hierarchies
    • Bounding volumes
    • Fast 3D picking, raycasting
    • Screen capture
  • Imported formats:
    • glTF, STL, OBJ+MTL and 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 a bunch of meshes, as shown below. Each mesh 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 mesh = new xeogl.Mesh({
    geometry: geometry,
    material: material,
    position: [0, 0, 10]
});

Here's what we just created:

Editing scenes

You can dynamically edit most things in your scene at runtime.

Lets scale and rotate our torus, then increase its size:

// Rotate and scale our torus mesh
mesh.rotation= [0, 90, 0];
mesh.scale = [1.2, 1.2, 1.2];

// Increase the size
mesh.scale = [1.5,  1.5, 1.5]; 

Animating scenes

Animate your scenes by updating the properties of their components:

// Update the rotation angle
mesh.rotation = [0, 90, 0];

Let's start our torus spinning:

mesh.scene.on("tick", function () {
    mesh.rotateY(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 meshes to create custom visualizations:

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

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

    var meshIds = [
        "office#79.0", "office#31.0", "office#105.0",
        "office#8.0", "office#65.0", "office#65.0" //....
    ];

    for (var i = 0; i < meshIds.length; i++) {
        var id = meshIds[i];
        var mesh = model.meshes[id];

        mesh.highlight = true;
    }

    var cameraFlight = new xeogl.CameraFlightAnimation();
    cameraFlight.flyTo(model);
});

// 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 v2, the open source tool for Web-based visualization and evaluation of Building Information Models (BIM):

Learn more