API Docs for:

GLTFModel

A GLTFModel is a Model that's loaded from a glTF file.

Overview

  • Extends Model, which extends Group, which extends Object.
  • Plugs into the scene graph and contains child Objects that represent its glTF model's scene node elements.
  • Can be configured with a handleNode callback to customize the way child Objects are created from glTF scene nodes.
  • Provides its dynamic World-space axis-aligned bounding box (AABB).
  • May be transformed, shown, hidden, ghosted, highlighted etc. as a unit.
  • May be configured to compress and batch geometries.
  • May be configured to convert materials to LambertMaterial for faster rendering.

Supported glTF 2.0 features

So far, GLTFModel loads only geometry, materials and modeling transform hierarchies, without animations. It does not load cameras or lights because its purpose is to import models into environments that have already been created using the xeogl API.

In addition to glTF's core metal-roughness material workflow, GLTFModel also supports two material extensions:

  • KHR_materials_pbrSpecularGlossiness
  • KHR_materials_common

Examples

Usage

Loading glTF

Load a glTF file by creating a GLTFModel:

var model = new xeogl.GLTFModel({
    id: "gearbox",
    src: "models/gltf/gearbox_conical/scene.gltf",
});

A GLTFModel prefixes its own ID to those of its components. The ID is optional, but in this example we're providing our own custom ID.

The GLTFModel begins loading the glTF file immediately.

To bind a callback to be notified when the file has loaded (which fires immediately if already loaded):

model.on("loaded", function() {
       // GLTFModel has loaded!
   });

You can also bind a callback to fire if loading fails:

model.on("error", function(msg) {
       // Error occurred
   });

To switch to a different glTF file, simply update src:

model.src = "models/gltf/Buggy/glTF/Buggy.gltf"

Finding GLTFModels in Scenes

Our GLTFModel will now be registered by ID on its Scene, so we can now find it like this:

var scene = xeogl.getDefaultScene();
model = scene.models["gearbox"];

That's assuming that we've created the GLTFModel in the default Scene, which we're doing in these examples.

We can also get all the GLTFModels in a Scene, using the Scene's types map:

var gltfModels = scene.types["xeogl.GLTFModel"];

model = gltfModels["myModel"];

Parsing glTF

If we have a glTF JSON with embedded assets in memory, then we can parse it straight into a GLTFModel using the static parse method:

xeogl.GLTFModel.parse(model, json); // Clears the target model first

Loading options

The following options may be specified when loading glTF:

Option Type Range Default Value Description
lambertMaterials Boolean false When true, gives each Mesh the same LambertMaterial and a colorize set the to diffuse color extracted from the glTF material. This is typically used for CAD models with huge amounts of objects, and will ignore textures.
quantizeGeometry Boolean true When true, quantizes geometry to reduce memory and GPU bus usage (see Geometry).
combineGeometry Boolean true When true, combines geometry vertex buffers to improve rendering performance (see Geometry).
backfaces Boolean true When true, allows visible backfaces, wherever specified in the glTF. When false, ignores backfaces.
ghosted Boolean false When true, ghosts all the model's Meshes (see Mesh and EmphasisMaterial).
outlined Boolean false When true, outlines all the model's Meshes (see Mesh and OutlineMaterial).
selected Boolean false When true, renders all the model's Meshes (see Mesh and OutlineMaterial).
highlighted Boolean false When true, highlights all the model's Meshes (see Mesh and EmphasisMaterial).
edges Boolean false When true, emphasizes the edges on all the model's Meshes (see Mesh and EdgeMaterial).
edgeThreshold Number [0..180] 20 When ghosting, highlighting, selecting or edging, this is the threshold angle between normals of adjacent triangles, below which their shared wireframe edge is not drawn.
handleNode Function(object, object) null Optional callback to mask which Objects are loaded. Each Object will only be loaded when this callback returns `true.

As mentioned above, GLTFModels are Objects that plug into the scene graph, containing child Objects of their own, that represent their glTF model's scene node elements.

GLTFModels can also be configured with a handleNode callback to determine how their child Object hierarchies are created as they load the node elements.

handleNode callback

As a GLTFModel parses glTF, it creates child Objects from the node elements in the glTF scene.

GLTFModel traverses the node elements in depth-first order. We can configure a GLTFModel with a handleNode callback to call at each node, to indicate how to process the node.

Typically, we would use the callback to selectively create Objects from the glTF scene, while maybe also configuring those Objects depending on what the callback finds on their glTF node elements.

For example, we might want to load a building model and set all its wall objects initially highlighted. For node elements that have some sort of attribute that indicate that they are walls, then the callback can indicate that the GLTFModel should create Objects that are initially highlighted.

The callback accepts two arguments:

  • nodeInfo - the glTF node element.
  • actions - an object on to which the callback may attach optional configs for each Object to create.

When the callback returns nothing or false, then GLTFModel skips the given node and its children.

When the callback returns true, then the GLTFModel may process the node.

For each Object to create, the callback can specify initial properties for it by creating a createObject on its actions argument, containing values for those properties.

In the example below, we're loading a GLTF model of a building. We use the callback create Objects only for node elements who name is not "dontLoadMe". For those Objects, we set them highlighted if their node element's name happens to be "wall".

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

   // Callback to intercept creation of objects while parsing glTF scene nodes

   handleNode: function (nodeInfo, actions) {

       var name = nodeInfo.name;

       // Don't parse glTF scene nodes that have no "name" attribute,
       // but do continue down to parse their children.
       if (!name) {
           return true; // Continue descending this node subtree
       }

       // Don't parse glTF scene nodes named "dontLoadMe",
       // and skip their children as well.
       if (name === "dontLoadMe") {
           return false; // Stop descending this node subtree
       }

       // Create an Object for each glTF scene node.

       // Highlight the Object if the name is "wall"

       actions.createObject = {
           highlighted: name === "wall"
       };

       return true; // Continue descending this glTF node subtree
   }
});

Generating IDs for loaded Objects

You can use the handleNodeNode callback to generate a unique ID for each loaded Object:

var model = new xeogl.GLTFModel({
   id: "gearbox",
   src: "models/gltf/gearbox_conical/scene.gltf",
   handleNode: (function() {
       var objectCount = 0;
       return function (nodeInfo, actions) {
           if (nodeInfo.mesh !== undefined) { // Node has a mesh
               actions.createObject = {
                   id: "gearbox." + objectCount++
               };
           }
           return true;
       };
   })()
});

// Highlight a couple of Objects by ID
model.on("loaded", function () {
   model.objects["gearbox.83"].highlighted = true;
   model.objects["gearbox.81"].highlighted = true;
});

If the node elements have name attributes, then we can also use those names with the handleNodeNode callback to generate a (hopefully) unique ID for each loaded Object:

var adamModel = new xeogl.GLTFModel({
   id: "adam",
   src: "models/gltf/adamHead/adamHead.gltf",
   handleNode: function (nodeInfo, actions) {
       if (nodeInfo.name && nodeInfo.mesh !== undefined) { // Node has a name and a mesh
           actions.createObject = {
               id: "adam." + nodeInfo.name
           };
       }
       return true;
   }
});

// Highlight a couple of Objects by ID
model.on("loaded", function () {
   model.objects["adam.node_mesh_Adam_mask_-4108.0"].highlighted = true; // ID contains name
   model.objects["adam.node_Object001_-4112.5"].highlighted = true;
});

Transforming a GLTFModel

A GLTFModel lets us transform its Objects as a group:

var model = new xeogl.GLTFModel({
    src: "models/carModel.gltf",
    position: [-35, 0, 0],
    rotation: [0, 45, 0],
    scale: [0.5, 0.5, 0.5]
});

model.position = [-20, 0, 0];

Getting the World-space boundary of a GLTFModel

Get the World-space axis-aligned boundary like this:

model.on("boundary", function() {
   var aabb = model.aabb; //  [xmin, ymin,zmin,xmax,ymax, zmax]
   //...
});

We can also subscribe to changes to that boundary, which will happen whenever

  • the GLTFModel's Transform is updated,
  • components are added or removed, or
  • the GLTF model is reloaded from a different source,
  • its Geometries or Objects are updated.
model.on("boundary", function() {
   var aabb = model.aabb; // [xmin, ymin,zmin,xmax,ymax, zmax]
});

Clearing a GLTFModel

model.clear();

Destroying a GLTFModel

model.destroy();

Constructor

GLTFModel

(
  • [scene]
  • [cfg]
)

Parameters:

  • [scene] Scene optional

    Parent Scene - creates this GLTFModel in the default Scene when omitted.

  • [cfg] optional

    Configs

    • [id] String optional

      Optional ID, unique among all components in the parent Scene, generated automatically when omitted.

    • [entityType] String optional

      Optional entity classification when using within a semantic data model. See the Object documentation for usage.

    • [meta] String:Object optional

      Optional map of user-defined metadata to attach to this GLTFModel.

    • [parent] optional

      The parent Object.

    • [visible=true] Boolean optional

      Indicates if this GLTFModel is visible.

    • [culled=false] Boolean optional

      Indicates if this GLTFModel is culled from view.

    • [pickable=true] Boolean optional

      Indicates if this GLTFModel is pickable.

    • [clippable=true] Boolean optional

      Indicates if this GLTFModel is clippable.

    • [outlined=false] Boolean optional

      Whether an outline is rendered around this GLTFModel.

    • [ghosted=false] Boolean optional

      Whether this GLTFModel is rendered ghosted.

    • [highlighted=false] Boolean optional

      Whether this GLTFModel is rendered highlighted.

    • [selected=false] Boolean optional

      Whether this GLTFModel is rendered selected.

    • [edges=false] Boolean optional

      Whether this GLTFModel is rendered with edges emphasized.

    • [colorize=[1.0,1.0,1.0] Float32Array optional

      RGB colorize color, multiplies by the rendered fragment colors.

    • [opacity=1.0] Number optional

      Opacity factor, multiplies by the rendered fragment alpha.

    • [position=[0,0,0] Float32Array optional

      The GLTFModel's local 3D position.

    • [scale=[1,1,1] Float32Array optional

      The GLTFModel's local scale.

    • [rotation=[0,0,0] Float32Array optional

      The GLTFModel's local rotation, as Euler angles given in degrees, for each of the X, Y and Z axis.

    • [matrix=[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1] Float32Array optional

      GLTFThe Model's local modelling transform matrix. Overrides the position, scale and rotation parameters.

    • [src] String optional

      Path to a glTF file. You can set this to a new file path at any time, which will cause the

    • [loaded=true] Boolean optional

      Indicates whether this GLTFModel is loaded or not. If initially set false, then the GLTFModel will load as soon as you set it true while src is set to the location of a glTF file.

    • [lambertMaterials=false] Boolean optional

      When true, gives each Mesh the same LambertMaterial and a colorize value set the to diffuse color extracted from the glTF material. This is typically used for CAD models with huge amounts of objects, and will ignore textures.

    • [quantizeGeometry=true] Boolean optional

      When true, quantizes geometry to reduce memory and GPU bus usage.

    • [combineGeometry=true] Boolean optional

      When true, combines geometry vertex buffers to improve rendering performance.

    • [backfaces=false] Boolean optional

      When true, allows visible backfaces, wherever specified in the glTF. When false, ignores backfaces.

    • [edgeThreshold=20] Number optional

      When ghosting, highlighting, selecting or edging, this is the threshold angle between normals of adjacent triangles, below which their shared wireframe edge is not drawn.

    • [handleNode] Function optional

      Optional callback to mask which Objects are loaded. Each Object will only be loaded when this callback returns `true for its ID.

Methods

angleVec3

(
  • v
  • w
)
Number

Gets the angle between two vectors

Parameters:

Returns:

Number:

clear

()

Destroys all Components in this Model.

create

(
  • [cfg]
)

Convenience method for creating a Component within this Component's Scene.

The method is given a component configuration, like so:

var material = myComponent.create({
     type: "xeogl.PhongMaterial",
     diffuse: [1,0,0],
     specular: [1,1,0]
}, "myMaterial");

Parameters:

  • [cfg] optional

    Configuration for the component instance.

Returns:

:

destroy

()

Destroys this component.

Fires a destroyed event on this Component.

Automatically disassociates this component from other components, causing them to fall back on any defaults that this component overrode on them.

TODO: describe effect with respect to #create

error

(
  • message
)

Logs an error for this component to the JavaScript console.

The console message will have this format: [ERROR] [<component type> =<component id>: <message>

Also fires the message as an error event on the parent Scene.

Parameters:

  • message String

    The message to log

fire

(
  • event
  • value
  • [forget=false]
)

Fires an event on this component.

Notifies existing subscribers to the event, optionally retains the event to give to any subsequent notifications on the event as they are made.

Parameters:

  • event String

    The event type name

  • value Object

    The event parameters

  • [forget=false] Boolean optional

    When true, does not retain for subsequent subscribers

hasSubs

(
  • event
)
Boolean

Returns true if there are any subscribers to the given event on this component.

Parameters:

  • event String

    The event

Returns:

Boolean:

True if there are any subscribers to the given event on this component.

isType

(
  • type
)
Boolean

Tests if this component is of the given type, or is a subclass of the given type.

The type may be given as either a string or a component constructor.

This method works by walking up the inheritance type chain, which this component provides in property Component/superTypes:property, returning true as soon as one of the type strings in the chain matches the given type, of false if none match.

Examples:

var myRotate = new xeogl.Rotate({ ... });

myRotate.isType(xeogl.Component); // Returns true for all xeogl components
myRotate.isType("xeogl.Component"); // Returns true for all xeogl components
myRotate.isType(xeogl.Rotate); // Returns true
myRotate.isType(xeogl.Transform); // Returns true
myRotate.isType("xeogl.Transform"); // Returns true
myRotate.isType(xeogl.Mesh); // Returns false, because xeogl.Rotate does not (even indirectly) extend xeogl.Mesh

Parameters:

  • type String | Function

    Component type to compare with, eg "xeogl.PhongMaterial", or a xeogl component constructor.

Returns:

Boolean:

True if this component is of given type or is subclass of the given type.

load

(
  • model
  • src
  • options
  • [ok]
  • [error]
)
static

Loads glTF from a URL into a Model.

Parameters:

  • model Model

    Model to load into.

  • src String

    Path to glTF file.

  • options Object

    Loading options.

  • [ok] Function optional

    Completion callback.

  • [error] Function optional

    Error callback.

log

(
  • message
)

Logs a console debugging message for this component.

The console message will have this format: [LOG] [<component type> <component id>: <message>

Also fires the message as a log event on the parent Scene.

Parameters:

  • message String

    The message to log

lookAtMat4v

(
  • pos
  • target
  • up
  • dest
)
Mat4

Returns a 4x4 'lookat' viewing transform matrix.

Parameters:

  • pos Object

    vec3 position of the viewer

  • target Object

    vec3 point the viewer is looking at

  • up Object

    vec3 pointing "up"

  • dest Object

    mat4 Optional, mat4 matrix will be written into

Returns:

Mat4:

dest if specified, a new mat4 otherwise

off

(
  • subId
)

Cancels an event subscription that was previously made with Component#on() or Component#once().

Parameters:

  • subId String

    Publication subId

on

(
  • event
  • callback
  • [scope=this]
)
String

Subscribes to an event on this component.

The callback is be called with this component as scope.

Parameters:

  • event String

    The event

  • callback Function

    Called fired on the event

  • [scope=this] Object optional

    Scope for the callback

Returns:

String:

Handle to the subscription, which may be used to unsubscribe with {@link #off}.

once

(
  • event
  • callback
  • [scope=this]
)

Subscribes to the next occurrence of the given event, then un-subscribes as soon as the event is subIdd.

This is equivalent to calling Component#on(), and then calling Component#off() inside the callback function.

Parameters:

  • event String

    Data event to listen to

  • callback Function(data)

    Called when fresh data is available at the event

  • [scope=this] Object optional

    Scope for the callback

parse

(
  • model
  • gltf
  • [options]
)
static

Parses glTF JSON into a Model.

Parameters:

  • model Model

    Model to parse into.

  • gltf Object

    The glTF JSON.

  • [options] Object optional

    Parsing options

    • [basePath] String optional

      Base path path to find external resources on, if any.

    • [loadBuffer] String optional

      Callback to load buffer files.

removeChild

(
  • object
)

Removes the given child.

Parameters:

  • object Object

    Child to remove.

removeChildren

()

Removes all children.

rotate

(
  • angle
)

Rotates about the given local axis by the given increment.

Parameters:

  • angle Number

    Angle increment in degrees.

rotateX

(
  • angle
)

Rotates about the local X-axis by the given increment.

Parameters:

  • angle Number

    Angle increment in degrees.

rotateY

(
  • angle
)

Rotates about the local Y-axis by the given increment.

Parameters:

  • angle Number

    Angle increment in degrees.

rotateZ

(
  • angle
)

Rotates about the local Z-axis by the given increment.

Parameters:

  • angle Number

    Angle increment in degrees.

scaleMat4c

(
  • x
  • y
  • z
  • m
)

Efficiently post-concatenates a scaling to the given matrix.

Parameters:

translate

(
  • axis
  • distance
)

Translates along local space vector by the given increment.

Parameters:

  • axis Float32Array

    Normalized local space 3D vector along which to translate.

  • distance Number

    Distance to translate along the vector.

translateX

(
  • distance
)

Translates along the local X-axis by the given increment.

Parameters:

  • distance Number

    Distance to translate along the X-axis.

warn

(
  • message
)

Logs a warning for this component to the JavaScript console.

The console message will have this format: [WARN] [<component type> =<component id>: <message>

Also fires the message as a warn event on the parent Scene.

Parameters:

  • message String

    The message to log

Properties

aabb

Float32Array final

World-space 3D axis-aligned bounding box (AABB).

Represented by a six-element Float32Array containing the min/max extents of the axis-aligned volume, ie. [xmin, ymin,zmin,xmax,ymax, zmax].

aabbVisible

Boolean

Indicates if the 3D World-space axis-aligned bounding box (AABB) is visible.

Default: false

castShadow

Boolean

Indicates if casting shadows.

Default: true

center

Float32Array final

World-space 3D center.

childIDs

Array final

IDs of child Objects.

childMap

final

Map of all the root Objects in this GLTFModel, mapped to their IDs.

children

Array final

Array of all the root Objects in this GLTFModel.

clippable

Boolean

Indicates if clippable.

Clipping is done by the Scene's Clips component.

Default: true

collidable

Boolean

Indicates if included in boundary calculations.

Default: true

colorize

Float32Array

RGB colorize color, multiplies by the rendered fragment color.

Default: [1.0, 1.0, 1.0]

components

String:Component

All contained Components, mapped to their IDs.

culled

Boolean

Indicates if culled from view.

Only rendered when visible is true and culled is false.

Default: false

DEGTORAD

Number

The number of radiians in a degree (0.0174532925).

destroyed

Boolean

True as soon as this Component has been destroyed

edges

Boolean

Indicates if edges are emphasized.

Default: false

entities

String:Object final

Objects in this Model that have entity types, mapped to their IDs.

Each Object is registered in this map when its entityType is set to value.

entityIds

Array of String final

Convenience array of IDs in entities.

entityType

String final

Optional entity classification when using within a semantic data model.

See the Object documentation on "Applying a semantic data model" for usage.

Default: null

entityTypeIds

Array of String final

Convenience array of entity type IDs in entityTypes.

entityTypes

String:{String:xeogl.Component} final

For each entity type, a map of IDs to Objects of that entity type.

Each Object is registered in this map when its entityType is assigned a value.

ghosted

Boolean

Indicates if ghosted.

Each ghosted Object is registered in its Scene's ghostedEntities map while its entityType is set to a value.

Default: false

guid

String final

Globally unique identifier.

This is unique not only within the Scene, but throughout the entire universe.

Only defined when given to the constructor.

guidObjects

String:Object final

Objects in this Model that have GUIDs, mapped to their GUIDs.

Each Object is registered in this map when its guid is assigned a value.

highlighted

Boolean

Indicates if highlighted.

Each highlighted Object is registered in its Scene's highlightedEntities map while its entityType is set to a value.

Default: false

id

String final

Unique ID for this Component within its parent Scene.

loaded

Boolean

Indicates whether this GLTFModel is loaded or not.

Default: true

matrix

Float32Array

Local matrix.

Default: [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]

meshes

String:xeogl.Mesh final

All contained Meshes, mapped to their IDs.

metadata

Object

Arbitrary, user-defined metadata on this component.

model

Model final

The Model which contains this Component, if any.

Will be null if this Component is not in a Model.

numChildren

Number final

Number of child Objects.

numComponents

Number

Number of contained Components.

objects

String:Object final

All contained Objects, mapped to their IDs.

opacity

Number

Opacity factor, multiplies by the rendered fragment alpha.

This is a factor in range [0..1].

Default: 1.0

outlined

Boolean

Indicates if outlined.

Default: false

parent

Group

The parent.

The parent Group may also be set by passing the Object to the Group/Model's Group/addChild:method method.

pickable

Boolean

Whether or not to allow picking.

Picking is done via calls to Scene#pick().

Default: true

position

Float32Array

Local translation.

Default: [0,0,0]

quaternion

Float32Array

Local rotation quaternion.

Default: [0,0,0, 1]

RADTODEG

Number

The number of degrees in a radian.

receiveShadow

Boolean

Indicates if receiving shadows.

Default: true

rotation

Float32Array

Local rotation, as Euler angles given in degrees, for each of the X, Y and Z axis.

Default: [0,0,0]

scale

Float32Array

Local scale.

Default: [1,1,1]

scene

Scene final

The parent Scene that contains this Component.

selected

Boolean

Indicates if selected.

Each selected Object is registered in its Scene's selectedEntities map while its entityType is set to a value.

Default: false

src

String

Path to a glTF file.

You can set this to a new file path at any time (except while loading), which will cause the GLTFModel to load components from the new file (after first destroying any components loaded from a previous file path).

Fires a loaded event when the glTF has loaded.

type

String final

JavaScript class name for this Component.

For example: "xeogl.AmbientLight", "xeogl.MetallicMaterial" etc.

types

String:{String:xeogl.Component}

A map of maps; for each contained Component type, a map to IDs to Component instances, eg.

"xeogl.Geometry": {
       "alpha": <xeogl.Geometry>,
       "beta": <xeogl.Geometry>
     },
"xeogl.Rotate": {
       "charlie": <xeogl.Rotate>,
       "delta": <xeogl.Rotate>,
       "echo": <xeogl.Rotate>,
     },
//...

visible

Boolean

Indicates if visible.

Only rendered when visible is true and culled is false.

Each visible Object is registered in its Scene's visibleEntities map while its entityType is set to a value.

Default: true

worldMatrix

Float32Array

The World matrix.

worldNormalMatrix

Float32Array

This World normal matrix.

Default: [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]

Events

destroyed

Fired when this Component is destroyed.

error

Fired whenever this GLTFModel fails to load the glTF file specified by src.

Event Payload:

  • msg String

    Description of the error

loaded

Fired whenever this GLTFModel has finished loading components from the glTF file specified by src.