Dynamic Objects
While Novorender is mostly about streaming and rendering large, static 3D scenes, sometimes you may want to add smaller, dynamic 3D objects into the view. Dynamic objects are meant for small and lightweight objects, such as 3D widgets or avatars. Currently we support glTF 2.0 (.gltf/.glb). You can download these from any url, but we do provide a few gltf models on our server: https://api.novorender.com/assets/gltf/
Please note that we don't currently support any glTF extensions. Nor do we support animations or skinning, among other things. We recommend verifying your files using https://github.khronos.org/glTF-Validator/ or similar before use.
Creation​
To download and parse a gltf file, call the api.loadAsset() function with a valid url, where api is an instance of our webgl-api.
const asset = await api.loadAsset(new URL("https://api.novorender.com/assets/gltf/logo.glb"));
Avoid using large gltf files on mobile devices as these have quite severe memory and triangle restrictions!
Now you can create instances of this asset in your scenes. You may reuse the same asset in multiple scenes.
const instance = scene.createDynamicObject(asset);
By default, new objects will have position [0,0,0] and no rotation [0,0,0,1].
The size of the gltf files should match the size of your scene. The camera will not auto-fit to dynamic objects, so make sure the units are in meters and that the coordinates are in the same space as your scene, which could be geo-referenced.
To change object orientation, assign new position and/or rotation.
instance.position = [x, y, z]; // 3D vector
instance.rotation = [0, 0, 0, 1]; // identity quaternion
While you can use raw arrays like above for trivial cases, it's likely that you will want to use a linear algebra library, like gl-matrix.
instance.position = vec3.fromValues(px, py, pz); // 3D vector
instance.rotation = quat.fromEuler(quat.create(), rx, ry, rz); // Quaternion from euler angles
New objects are invisible by default. To actually render your object, change the visible flag.
instance.visible = true;
Demo​
Disposing​
To delete/remove an instance, call dispose().
instance.dispose();
Once you've disposed all the instances of an asset, you may dispose the asset itself to free up all the associated memory.
asset.dispose();
When disposing an asset, the render pipeline may still have a reference to the model for the next frame. If so, you would get an error. You may want to render a frame or two first, to flush out any such lingering references.