thomasbiang / playcanvas-gltf

glTF support for the PlayCanvas Engine

playcanvas-gltf

This repo extends PlayCanvas to support glTF. It contains:

• A loader script that can convert a glTF or glB file into a PlayCanvas hierarchy.
• A viewer application that supports drag and drop of glTF and glB files.

The loader script returns a pc.Model structure. It can be used with the standalone Engine or in conjunction with the PlayCanvas Editor.

To see an example of using the loader with the Engine, check out the viewer app in this repo.

To use the loader with the Editor, simply add playcanvas-gltf.js and playcanvas-anim.js into your project (ensuring they are first in your loading order) and call the following API:

API

loadGlb

Parses an ArrayBuffer holding a binary-encoded glTF scene.

loadGlb(glb, device, done);

• glb - An ArrayBuffer holding the binary glb file data.
• device - A pc.GraphicsDevice.
• done - A Function called when the glb has loaded (either successfully or with an error). The function has the following signature: function (err, res) {}. The parameters of the done function are as follows:
  • err - A String describing any error encountered on load. If err is null, the load operation completed successfully.
  • res - An Object holding the loaded PlayCanvas objects.
  • res.model - A pc.Model object representing the glTF scene
  • res.textures - An array of pc.Texture objects
  • res.animations - An array of AnimationClip objects

Example

app.assets.loadFromUrl('assets/monkey/monkey.glb', 'binary', function (err, asset) {
    var glb = asset.resource;
    loadGlb(glb, app.graphicsDevice, function (err, res) {
        // Wrap the model as an asset and add to the asset registry
        var asset = new pc.Asset('gltf', 'model', {
            url: ''
        });
        asset.resource = res.model;
        asset.loaded = true;
        app.assets.add(asset);

        // Add the loaded scene to the hierarchy
        var gltf = new pc.Entity('gltf');
        gltf.addComponent('model', {
            asset: asset
        });
        app.root.addChild(gltf);
    });
});

loadGltf

Parses an in-memory Object hierarchy holding a glTF scene.

loadGltf(gltf, device, done, options);

• gltf - An Object representing the root of the glTF scene.
• device - A pc.GraphicsDevice.
• done - A Function called when the glb has loaded (either successfully or with an error). The function has the following signature: function (err, res) {}. The parameters of the done function are as follows:
  • err - A String describing any error encountered on load. If err is null, the load operation completed successfully.
  • res - An Object holding the loaded PlayCanvas objects.
  • res.model - A pc.Model object representing the glTF scene
  • res.textures - An array of pc.Texture objects
  • res.animations - An array of AnimationClip objects
• options - An Object specifying optional parameters for the function.
• options.buffers - An Array of preloaded ArrayBuffer objects holding the glTF file's buffer data.
• options.basePath - A String set to the relative path of the glTF file.
• options.processUri - A Function that provides custom loading behavior for URIs encountered during the loading process.

Example

app.assets.loadFromUrl('assets/monkey/monkey.gltf', 'json', function (err, asset) {
    var json = asset.resource;
    var gltf = JSON.parse(json);
    loadGltf(gltf, app.graphicsDevice, function (err, res) {
        // Wrap the model as an asset and add to the asset registry
        var asset = new pc.Asset('gltf', 'model', {
            url: ''
        });
        asset.resource = res.model;
        asset.loaded = true;
        app.assets.add(asset);

        // Add the loaded scene to the hierarchy
        var gltf = new pc.Entity('gltf');
        gltf.addComponent('model', {
            asset: asset
        });
        app.root.addChild(gltf);
    }, {
        basePath: 'assets/monkey/'
    });
});

glTF Viewer

To load the glTF viewer, run a local web-server and load viewer/index.html. You can then drag a glb or gltf file onto the tab's client area to load it. For non-embedded glTF files (with external buffer and image files), you need to drag the containing folder of the glTF file onto the viewer's client area. Binaries for the viewer can be found here.