Loading glTF Objects

This topic has 11 replies, 5 voices, and was last updated 6 years, 9 months ago by Yuri Kovelenov.

Viewing 12 posts - 1 through 12 (of 12 total)

Author

Posts
2017-12-16 at 9:46 am #1251

Will Welker
Customer

With the new ‘Replace Scene’ Puzzle block, we can load a new glTF scene.
What is the best way to load objects into an existing scene?
If I have various objects exported from Blender as glTF files, can I load them into a scene on demand?
Will the three.js API for loading glTF files work?

2017-12-16 at 11:17 am #1253
Will Welker
Customer
I got it working. I used the “External Call” example app to test it out.
```
// add your code here, e.g. console.log('Hello, World!');
    

    // Run a Puzzles procedure 
    v3dApp.ExternalInterface.openCover('green');

    // Register a Puzzles-to-Code callback
    v3dApp.ExternalInterface.myJSFunction = function(a) {
        console.log("External function called")

        var loader = new v3d.GLTFLoader();

        // Load a glTF resource
        loader.load( a, function ( gltf ) {
            //Here I had to add v3dApp. before scene, otherwise scene was undefined
            v3dApp.scene.add( gltf.scene );
        
            gltf.animations; // Array<v3d.AnimationClip>
            gltf.scene;      // v3d.Scene
            gltf.scenes;     // Array<v3d.Scene>
            gltf.cameras;    // Array<v3d.Camera>
        } );
    };
```
I got this code from the CODE API.

I had to change scene.add to v3dApp.scene.add.

In Puzzles, I entered my glTF path as an argument in Parameter “a”.

In Blender I moved my object to another layer to exclude everything else. Then in the Scene tab, I clicked the main layer off so nothing there would be exported.
2017-12-16 at 11:25 am #1260

Will Welker
Customer

Uploaded one wrong image. Meant to show this one.

2017-12-16 at 12:43 pm #1262

Yuri Kovelenov
Staff

Cool, great to know that this can be done!

Chief 3D Verger | LinkedIn | Twitter

2017-12-17 at 6:09 am #1268
Will Welker
Customer
The ability to call three.js code from the Puzzles logic is quite profound.
In my project I am able to load an external object, show an animated loading gif that gets hidden when the asset is loaded. Then I can hide and show the newly added object as needed.

Here is the code starting at the “// add your code here” line in the project JS file:
```
// add your code here, e.g. console.log('Hello, World!');
    // here is the function that is called from the puzzles block
    v3dApp.ExternalInterface.loadTunnel1 = function(a) {
        console.log("External function called")

        var loader = new v3d.GLTFLoader();
        
        // Load a glTF resource "a" is passed from the puzzle input parameter
        loader.load( a, function ( gltf ) {

            v3dApp.scene.add( gltf.scene );

            // here is the callback to the Puzzle function when loading is done 
            v3dApp.ExternalInterface.doneLoading1();
        } );
    };
```
2017-12-17 at 9:21 am #1280

Yuri Kovelenov
Staff

impressive!

Chief 3D Verger | LinkedIn | Twitter

2017-12-21 at 4:02 pm #1419

jem
Customer

Thank you Will. Your example is very helpful. I too have a requirement for dynamically loaded and unloaded object within a scene.

For the sake of argument, imagine a configurable piece of machinery in a 3D scene. That machine would be built from hundreds of possible objects. Only a few objects would be visible at any one time. Many objects would be used infrequently.

In this scenario, we could build a scene with all possible objects baked into one GLTF file. We could then use puzzles or code to show or hide objects based on business logic. This would be inefficient. The file would be large than required and it would contain assets that are unlikely to be used. It would be better if we could load objects dynamically. It would also be good if we can unload objects so we can minimize client resource utilization.

I will try to write some loader/unloader functions.
-Jeremy

Jeremy Wernick

2017-12-21 at 8:01 pm #1438

Will Welker
Customer

I haven’t gotten into unloading yet but I expect to be needing that. Another thing I have considered is ‘chain-loading’ in the background so that as each glTF file gets loaded, the loaded call back loads the next item. This would be good in some cases where you have a large mesh that could broken up into sections. The downside is that it could interfere with loading user selected files.
I will be very interested to see your loader/unloader functions.
Hmm, wonder if we could get loader/unloader Puzzle blocks

2018-03-12 at 8:18 am #2761

Aubrey
Customer

This is brilliant! very helpful indeed! Thank you for sharing. Due to the nature of my scene it was getting to large for a lot of ‘normal’ connections and this helps to give a visual of things coming in and only loading objects when needed. I, too, look forward to seeing more on a unloading example and think that having puzzle blocks for this purpose would be very helpful!
Have you posted this in feature requests?

2018-03-13 at 3:13 pm #2792

jem
Customer

Hi Aubrey,
It has been a little while since this thread started and I have been experimenting with this technique since then.

My goal is similar to yours: I need to manage the number of objects loaded into the scene. Ideally, in my scenario, I want the scene to boot with a minimal amount of content. The scene would then load objects on demand. I have a few working prototypes, but it does require some moderately complex coding.

There are at least two fundamental challenges with dynamic object loading in Verge3D that I have run into. The first issue is how to make puzzles aware of objects that are not present in the scene. The second is how to efficiently generate the large quantity of separate *.gltf files needed from a single Blender scene.

For the first issue, how do we write puzzle logic for objects that are not present in the scene? I used proxy objects. Technically, these are empties in Blender. They are exported as objects in the gltf file and the can be operated upon by puzzle logic like ordinary mesh objects. The puzzle logic can manipulate the proxies. Proxies do not burden the system because they only add a trivial amount of data to the scene. I then wrote some custom code that would load the full object from a separate gltf file and swap the proxy for the full object at the appropriate time. This code was based on Will’s example at the beginning of the thread.

The second issue was how to create the many separate gltf files. In my case, all of my source objects were in a single Blender file. I could have broken that Blender file up by hand into many separate Blender files and then exported each as a GLTF file. In fact, this is what I did for my first test, but the process was slow and not scalable. In my second version, I wrote a Python script to do all of the scene splitting and Verge3d exporting for me based on a spreadsheet.

If I get some free time I might develop a sanitized example and share it with the community here. Right now, I am not using this in production. The solution it a bit too fragile and handcrafted for my comfort, but it was educational.
Good luck,
-Jem

Jeremy Wernick

2018-03-23 at 9:34 am #3062

Maus
Participant

Hi
Glad i stumbled across this thread.
I have the same approach starting from a small scene. But the assets should be added as you go. So, sceneplitting would not be an issue, since all assets should be created seperately beforehand.

But chainloading is important. Also saving the buildup of the scene to file, which can be used for the chainloading afterwards.

Is it realistic?

2018-03-23 at 4:50 pm #3065

Yuri Kovelenov
Staff

Maus wrote:

But chainloading is important. Also saving the buildup of the scene to file, which can be used for the chainloading afterwards.

it is definitely possible with Verge3D. We’ll probably add an example to the SDK in the future.

Chief 3D Verger | LinkedIn | Twitter
Author

Posts