r is undifined

[Carharttguy]

Hello

I'm trying to create a new material to be applied on a hightmap. But I get this error:

Quote

TypeError: r is undefined[Meer info]  babylon.js:16:7807

    t http://localhost:5381/babylonjs/babylon.js:16:7807
    r http://localhost:5381/babylonjs/babylon.js:16:14755
    LoadZone http://localhost:5381/editorfunctions.js:2:26
    Editor.prototype._ProcessXojoMessages http://localhost:5381/editor.js:49:17

The code of loadzone is:

function LoadZone(scene: BABYLON.Scene, hmURL: string, texURL: string, Width: number, MaxHeight: number, Length: number)
{
    let groundMaterial = new BABYLON.StandardMaterial("groundMaterial", scene);
    groundMaterial.diffuseTexture = new BABYLON.Texture(texURL, scene);

    let ground = BABYLON.MeshBuilder.CreateGroundFromHeightMap("ground", hmURL, {width:Width, height:Length, subdivisions:4, minHeight:0, maxHeight:MaxHeight, updatable:false}, scene);
    ground.material = groundMaterial;
}

 

I wanted to get my code in a playground, but my usecase is too specific: I have a websocket connecting to a server, and once a certain message is received, this function is called.

[jerome]

usual error

You have to wait that your GroundMesh is created (the heightmap file dowload can last a little) before assigning it a material. For this, just use the callback parameter onReady in the parameter list : http://doc.babylonjs.com/classes/2.5/meshbuilder#static-creategroundfromheightmap-name-url-options-scene-rarr-groundmesh-classes-2-5-groundmesh-

[Carharttguy]

Thanks Jerome for your superfast answer.

But now the error changed:

Quote

TypeError: n is undefined[Meer info]  babylon.js:6:28905
    i http://127.0.0.1:5381/babylonjs/babylon.js:6:28905
    r http://127.0.0.1:5381/babylonjs/babylon.js:13:3003
    i http://127.0.0.1:5381/babylonjs/babylon.js:23:1515
    t.CreateGroundFromHeightMap http://127.0.0.1:5381/babylonjs/babylon.js:14:14863
    LoadZone http://127.0.0.1:5381/editorfunctions.js:8:18
    Editor.prototype._ProcessXojoMessages http://127.0.0.1:5381/editor.js:49:17

EDIT: Chrome gave me a slightly better error:

Quote

 

babylon.js:6 Uncaught TypeError: Cannot read property 'addMesh' of undefined at i [as constructor] (babylon.js:6)
at i.r [as constructor] (babylon.js:13)
at new i (babylon.js:23) at Function.t.CreateGroundFromHeightMap (babylon.js:14)
at LoadZone (editorfunctions.ts:10)
at WebSocket.Editor._ProcessXojoMessages (editor.ts:71)

My code is now changed too:

Quote

/// <reference path="babylonjs/babylon.d.ts"/>
import GroundMesh = BABYLON.GroundMesh;
let currentScene: BABYLON.Scene
let textureURL: string;
function LoadZone(scene: BABYLON.Scene, hmURL: string, texURL: string, Width: number, MaxHeight: number, Length: number)
{
    currentScene = scene;
    textureURL = texURL;

    let ground = BABYLON.MeshBuilder.CreateGroundFromHeightMap("ground", hmURL, {width:Width, height:Length, subdivisions:4, minHeight:0, maxHeight:MaxHeight, updatable:false, onReady:HeightMapLoaded}, scene);

}

function HeightMapLoaded(mesh: GroundMesh)
{
    let groundMaterial = new BABYLON.StandardMaterial("groundMaterial", currentScene);
    groundMaterial.diffuseTexture = new BABYLON.Texture(textureURL, currentScene);
    mesh.material = groundMaterial;
}

The error is now on the BABYLON.MeshBuilder.CreateGroundFromHeightMap

 

Is there a debugbuild of babylonjs? I must be overlooking it.

[jerome]

function HeightMapLoaded(mesh)  instead of 

function HeightMapLoaded(mesh: GroundMesh)

probably ...

[Carharttguy]

Hi Jerome

 

That wasn't the problem. When I just put one line in LoadZone, straight from the docs, I also get the same error:

Quote

var ground = BABYLON.MeshBuilder.CreateGroundFromHeightMap("gdhm", "assets/heightmaps/default.png", { width: 6, subdivisions: 4 }, scene);

So there must be something wrong with my setup, however, the createscene works as expected.

Anybody can view the source here: http://conservatorium-brugge.be/babylon/

But you won't see the error because there probably won't be a websocket server running on your localhost which sends the right commands.

Is it maybe impossible to load a heightmap after the createScene function?

[Pryme8]

4 hours ago, Carharttguy said:

Is it maybe impossible to load a heightmap after the createScene function?

No it is not.

http://playground.babylonjs.com/#INY9N0#1

[Carharttguy]

Hmh, I tried about everything I possibly can, the error only shows up after I call it from an incoming websocketmessage.

@Deltakosh, could it be possible that the websocketevents break babylonjs in any way?

I created the simplest possible script I could to show of the 'bug'. There is nothing wrong with the websocketcode, it is called an the alert("groundcreation") is called.

Script:

/// <reference path="babylonjs/babylon.d.ts"/>
var Editor = (function () {
    function Editor(canvasElement) {
        // Create canvas and engine
        this._canvas = document.getElementById(canvasElement);
        this._engine = new BABYLON.Engine(this._canvas, true);
        this._socketConnection = new WebSocket("ws://127.0.0.1:5382");
    }
    Editor.prototype.createScene = function () {
        // create a basic BJS Scene object
        this._scene = new BABYLON.Scene(this._engine);
        // create a FreeCamera, and set its position to (x:0, y:5, z:-10)
        this._camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(0, 5, -10), this._scene);
        // target the camera to scene origin
        this._camera.setTarget(BABYLON.Vector3.Zero());
        // attach the camera to the canvas
        this._camera.attachControl(this._canvas, false);
        // create a basic light, aiming 0,1,0 - meaning, to the sky
        this._light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0, 1, 0), this._scene);
        // create a built-in "sphere" shape; with 16 segments and diameter of 2
        var sphere = BABYLON.MeshBuilder.CreateSphere('sphere1', { segments: 16, diameter: 2 }, this._scene);
        // move the sphere upward 1/2 of its height
        sphere.position.y = 1;
    };
    Editor.prototype.animate = function () {
        var _this = this;
        // run the render loop
        this._engine.runRenderLoop(function () {
            _this._scene.render();
            var fpsLabel = document.getElementById("fpslabel");
            fpsLabel.innerHTML = _this._engine.getFps().toFixed() + " fps";
        });
        // the canvas/window resize event handler
        window.addEventListener('resize', function () {
            _this._engine.resize();
        });
        this._socketConnection.addEventListener('open', function () {
            this.send("EditorIsReady");
        });
        this._socketConnection.addEventListener('message', this._ProcessXojoMessages);
    };
    Editor.prototype._ProcessXojoMessages = function (me) {
        var params = me.data.split("|");
        switch (params[0]) {
            case "LoadZone":
                alert("groundcreation");
                var ground = BABYLON.Mesh.CreateGroundFromHeightMap("ground", "assets/heightmaps/default.png", 256, 256, 245 * 256, 0, 30, this._scene);
                break;
        }
    };
    return Editor;
}());
window.addEventListener('DOMContentLoaded', function () {
    // Create the game using the 'renderCanvas'
    var game = new Editor('renderCanvas');
    // Create the scene
    game.createScene();
    // start animation
    game.animate();
});

 

[Pryme8]

No it would not, sounds like a scope issue.  I am at a wedding getting drunk right now so yeah... sorry I can't be more help at this moment but if no one else jumps on this I'll help by tommrow.  

 

But r undefined I can guarantee is a variable in the constructor is not being referenced correctly. Most likely the scene.

[GameMonetize]

Please try with babylon.max.js to get a better error message. Try also without websocket just in case