Why I got the error "length" of undefined when I use the LOD in my tiled map?

Questions
1

Hello everyone

I use the following code on my tiled map in order to use LOD on my map:

            var use_renderingGroupID = true;
            var ground = BABYLON.Mesh.CreateGroundFromHeightMap("ground", heightURL, width * factor, width * factor, 2, 0, 64, scene, true);

            ground.position = new BABYLON.Vector3(
                (tileX * factor - xTileBase + factor / 2) * width,
                -factor * 0.1,
                -(tileY * factor - yTileBase + factor / 2) * width
            );
            ground.material = material;

            if (use_renderingGroupID) { ground.renderingGroupId = 1; }
            ground.simplify(
                [
                    { quality: 0.9, distance: 10000 },
                    { quality: 0.6, distance: 20000 },
                    { quality: 0.3, distance: 30000 }
                ],
                true, 
                BABYLON.SimplificationType.QUADRATIC
            );


            ground.addLODLevel(50000, null);

and I got the error which said that : Uncaught TypeError: Cannot read property ‘length’ of undefined

here is my PG: https://playground.babylonjs.com/#X2ULQN#50
is it possible to help me to solve it?

2

You must use the onReady function in CreateGroundFromHeightMap
Ground is not yet loaded when simplify is called

  var ground = BABYLON.Mesh.CreateGroundFromHeightMap("ground", heightURL, width * factor, width * factor, 2, 0, 64, scene, true, () => {
 
                ground.position = new BABYLON.Vector3(
                    (tileX * factor - xTileBase + factor / 2) * width,
                    -factor * 0.1,
                    -(tileY * factor - yTileBase + factor / 2) * width
                );
                ground.material = material;

                if (use_renderingGroupID) { ground.renderingGroupId = 1; }
                ground.simplify(
                    [
                        { quality: 0.9, distance: 10000 },
                        { quality: 0.6, distance: 20000 },
                        { quality: 0.3, distance: 30000 }
                    ],
                    true, // parallel processing
                    BABYLON.SimplificationType.QUADRATIC
                );

                // add null LOD even farther in distance (disappears)
                ground.addLODLevel(50000, null);

                this.grounds.set(id, ground);

                // console.log(this.grounds)
                this.grounds.forEach((g, k) => {
                    if (!calledGrounds.has(k)) {
                        g.dispose();
                        this.grounds.delete(k);
                    }
                });
            });
1 Like
3

Thank you so much for answering to my question, should I use it in the following form:

            ground.onReady = function () {
                
            ground.simplify(
                [
                    { quality: 0.9, distance: 10000 },
                    { quality: 0.6, distance: 20000 },
                    { quality: 0.3, distance: 30000 }
                ],
                true, // parallel processing
                BABYLON.SimplificationType.QUADRATIC
            );

            // add null LOD even farther in distance (disappears)
            ground.addLODLevel(50000, null);

            }

the speed of rendering is so slow now.

4

Yes you can also do it like that.
Note that the CreateGroundFromHeightMap function has an onReady callback function

The slowness comes from loading your land which takes a few seconds (depending on your internet connection)

1 Like
5

Thank you so much :pray: