Jump to content

multiple gltfs in same scene


ua4192
 Share

Recommended Posts

Dear all.

I am a new in babylon.js and my problem is that when I try to load multiple meshes in the same scene the memory starts to increase in my browser until it gets hang.

I am trying to load about 90 models in GLTF format converted from DAE. The total space of these meshes is about 200MB.

The idea is get the GLTF files information from DB and load these files in the browser on demand.

For model load I am using the function "BABYLON.SceneLoader.ImportMesh". My first problem is that for each model I import I have to wait until it will be rendered  until continuing to the next one. I would want:

1.- I want Load all models without rendering them until all them will have loaded and optimization will have finished

2.- I want to represent the imported mesh for each GLTF in a single mesh and visible in the mesh tree. Currently I am not able to see these meshes in the mesh-tree

3.- I would want to optimize the scene befor rendering it:

         - Use  AUTO-LOD (I have different GLT files for each model with different quality

         - Use merge mesh funtionality

         - Use simplify mesh

         - Use octree

 

Here the function I am using for importing the GLTF models. I you want I can give you the full code :

function load_gltf2(scene, parent, dir, filename, mat) {
                BABYLON.SceneLoader.ImportMesh([], dir, filename, scene, function (newMeshes) {
                    var dude = newMeshes[0];
                    dude.parent = parent;
                    dude.position = new BABYLON.Vector3(mat[9]/1000,mat[10]/1000,mat[11]/1000);
                    axis1 = new BABYLON.Vector3(mat[0]/1000,mat[1]/1000,mat[2]/1000);
                    axis2 = new BABYLON.Vector3(mat[3]/1000,mat[4]/1000,mat[5]/1000);
                    axis3 = new BABYLON.Vector3(mat[6]/1000,mat[7]/1000,mat[8]/1000);
                    var rot = BABYLON.Vector3.RotationFromAxis(axis1, axis2, axis3);
                    dude.rotation = rot;
                    dude.scaling= new BABYLON.Vector3(0.001,0.001,0.001);
                });                
            };

Many many thanks in advanced.

Link to comment
Share on other sites

Hi again.

 

I have tried also with the assetmanager, but it seems to have problems with GLTF files.

My other problem is that I want to use instances, many times the same part (GLTF) is used many times and I don't want to import the same mesh multiple times.

 

My problem is that as the Importmesh is run async, then I cannot instanciate the meshes (GLTFS), because the importmesh has not yet finished and the instanciating fails.

 

I have tried with BABYLON.GLTFFileLoader.IncrementalLoading = false, but not enough.

 

My idea is to use the function var main_mesh_instances = scene.getMeshesByID(mesh_id);

 

If value > 0 --> then instanciate

else importmesh.

 

But it doesn't workl

Link to comment
Share on other sites

Hi.

 

I thought that I was already using this feature, let me show my pieze of code for loading the assets:

 

I get the assets from file assets_csv and when all them will be imported then I start to instanciate them using the file query_csv:

 

The idea is first load all different meshes for gltf files and when all them will have been loaded then start to instanciate.

$(document).ready(function() {
            $.ajax({
                type: "GET",
                url: assets_csv,
                dataType: "text",
                success: function(data1) {processData1(data1);}
             });
        });
        function processData1(allText) {
            var linecontent1 = allText.split(/\n/);
            // For each line in csv file or query SQL:
            for (var line1=0; line1<linecontent1.length-1; line1++) {
                var data1 = linecontent1[line1].split(';');
                var part_number1 = data1[0];
                var part_version1 = data1[1];
                var part_id1 = part_number1 + "_" + part_version1;
                var gltf_filename = part_id1 + ".gltf";
                BABYLON.Tools.Log("Loading asset for partnumber " + part_number1 + "_" + part_version1);
                load_asset(part_number1, scene, gltf_folder, gltf_filename, linecontent1.length-2);
            }
        }               

    function load_asset(mesh_id, scene, dir, filename, last_line) {
        BABYLON.SceneLoader.ImportMesh(null, dir, filename, scene, function (newMeshes) {
            var main_mesh3 = gltf.meshes[2];
            //BABYLON.Tools.Log("Loaded GLTF " + filename + " (" + mesh_counter + "/" + last_line + ")");
            BABYLON.Tools.Log("Afrter Append MESH NAME:" + main_mesh3.name + "; MESH ID:" + main_mesh3.name );
            // check if we have finished to load all assets:
            if ( asset_counter == last_line ){
                BABYLON.Tools.Log("FINAL ASSET");
                //var main_mesh3 = scene.getMeshByName(mesh_id);
                BABYLON.Tools.Log("FINAL ASSET:" + main_mesh3.name);
                scene.render();
                // call to load instances function
                $(document).ready(function() {
                    /*
                    # order    |    FIELDNAME            |    DESCRIPTION                                                    |    DB TYPE
                    ---------------------------------------------------------------------------------------------------------
                    # 0            |    PARTNUMBER_ARRAY     |    Acumulated from DS until previous_level                 |    VARCHAR(20) ARRAY[]
                    # 1         |    DESCRIPTION            |    Descriptiption of Element                                |    VARCHAR(200)
                    # 2         |    PARTTYPE            |    File Type                                                |    VARCHAR(15)
                    # 3         |    ISSUE                |    ISSUE en PRIMES                                            |    VARCHAR(3)
                    # 4         |    VERSION_ARRAY        |    VERSION en PRIMES                                        |    VARCHAR(10)
                    # 5         |    MATURITY            |    MATURITY in PRIMES                                        |    VARCHAR(30)
                    # 6         |    MATRIX_ARRAY        |    Conversion Matrix, not transformed                          |    DOUBLE[12]
                    # 7             |    LASTCHANGE            |    Date of last change                                        |    DATE
                    # 8            |     LEVEL                |    Level                                                    |    INT
                    # 9            |    UUID_ARRAY            |    Autocalculated ID                                        |    VARCHAR(32)
                    */
                    $.ajax({
                        type: "GET",
                        url: query_result,
                        dataType: "text",
                        success: function(data2) {processData2(data2);}
                     });
                     function processData2(allText) {
                        var linecontent2 = allText.split(/\n/);
                        // For each line in csv file or query SQL:
                        for (var line2=0; line2<linecontent2.length; line2++) {
                            scene.render();
                            // Extract line from query and form an array:
                            var data2 = linecontent2[line2].split(';');
                            BABYLON.Tools.Log("Processing line: " + line2 + "/" + linecontent2.length);
                            //Check  if line is well formed: 10 columns
                            //BABYLON.Tools.Log("line_content: " + linecontent[line]);
                            if (data2.length == 12) {
                                //BABYLON.Tools.Log("--- LINE WELL FORMED");
                                // Extract columns in variables:
                                var partnumber_array = data2[0].split(':');
                                var description  = data2[1];
                                var part_type  = data2[2];
                                var issue  = data2[3];
                                var version_array = data2[4].split(':');
                                var maturity = data2[5];
                                var matrix_array = data2[6].split(',');
                                var lastchange = data2[7];
                                var level = data2[8];
                                var uuid_array = data2[9].split(':');
                            
                                // Get current uuid_path already done in variable uuid_array
                                // Get get_common_level with function get_common_level(previous_uuid_path,current_uuid_path)
                                var common_level = get_common_level(previous_uuid_path,uuid_array);
                                //BABYLON.Tools.Log("------ COMMON LEVEL bettwen " + previous_uuid_path + " and " + uuid_array + " ------ > " + common_level);
                                // Generate tree product structure from common parent:
                                for (var q=common_level; q < uuid_array.length; q++) {
                                    // if we are at the end of the array, then import gltf mesh
                                    var part_number2 = partnumber_array[q];
                                    var version2 = version_array[q];
                                    var part_number2 = part_number2 + "_" + version2;
                                    var trans_mat = matrix_array[q].split(':');
                                    if ( q == uuid_array.length - 1 ){
                                        //BABYLON.Tools.Log("------ > PRELOADING GLTF (" + mesh_count + "/" + linecontent.length + ")" );
                                        var gltf_filename = part_number2 + ".gltf";
                                        create_instance(part_number2, part_number2 , scene, scene.getMeshByID(uuid_array[q-1]), gltf_folder, gltf_filename, trans_mat, linecontent2.length-1);
                                    // else if common_level=0, then  declare parent as main_mesh_scene
                                    } else {
                                        var mymesh = new BABYLON.Mesh.CreateBox(part_number2, 0, scene);
                                        mymesh.id = uuid_array[q];
                                        if ( common_level == 0 ){
                                            mymesh.parent = main_mesh_scene;
                                        } else {
                                            var mymesh_parent = scene.getMeshByID(uuid_array[q-1]);
                                            //BABYLON.Tools.Log("------ > mymesh.parent = " + mymesh_parent.id);
                                            mymesh.parent = mymesh_parent;
                                        }
                                        mymesh.position = new BABYLON.Vector3(trans_mat[9],trans_mat[10],trans_mat[11]);
                                        axis1 = new BABYLON.Vector3(trans_mat[0],trans_mat[1],trans_mat[2]);
                                        axis2 = new BABYLON.Vector3(trans_mat[3],trans_mat[4],trans_mat[5]);
                                        axis3 = new BABYLON.Vector3(trans_mat[6],trans_mat[7],trans_mat[8]);
                                        var rot = BABYLON.Vector3.RotationFromAxis(axis1, axis2, axis3);
                                        mymesh.rotation = rot;
                                        mymesh.isVisible = false;
                                        array_scene_meshes[mesh_count] = mymesh;
                                    } // del if ( q == uuid_array.length -1 ){
                                } // del for (var q=common_level; q < uuid_array.length; q++) {
                                previous_uuid_path = uuid_array;
                            } // del if (data.length == 10) {
                        } // del for (var line=0; line<linecontent.length; line++) {
                        var camera = new BABYLON.ArcRotateCamera("camera", Math.PI/2, Math.PI/2, 10, new BABYLON.Vector3(-37,-0.2,-0.1), scene);
                        camera.attachControl(canvas, true);    
                    } // del function processData(allText) {
                }
            }
            asset_counter += 1;
        })
        BABYLON.Tools.Log("REALLY LOADED?");
    }

 

Link to comment
Share on other sites

Hi.

My problem is very simple, I try to in a first phase load the different GLTF models with the importmesh function provided by Babylonjs. For doing this, I provide the different GLTF models that will be used in the scene provided by a CSV file, at the end the results will be provided by a SQL query launched from the server side.

My problem is that as importmesh works in async mode, when I try to look for any mesh loaded with importmesh, the search returns a null result.

I am using the scene.getMeshByName(mesh_name) and  scene.getMeshByID(mesh_id); 

About making a play ground, it is really complex for me. For work I am not able to access (proxy policies).

I hope this will be enough to explain my problem. basically I want to avoid to load the same GLTF 1000 times, I want to load it 1 time and instantiate it the next 999 times. I have tried to search any example using multiple GLTFS but I was not able to.

:)

Many thanks in advanced for your help.

 

Link to comment
Share on other sites

Hi.

I have another question.

The GLTF models I am trying to instantiate have sub-meshes inside. This is the structure:

container_name:

   - submesh_1

   - submesh_1

    ...

   - submesh_n

My problem is that when I instantiate the container, the sub-meshes inside are not instantiated. DO I have to instantiate all submeshes by separate?

 

Many many thanks in advanced

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...