Error in sample .babylon code

on this page :

https://doc.babylonjs.com/resources/file_format_map_(.babylon)

there is a section stating :

Example

Here is a simple example of .babylon file:

The code that follows though has errors. It had me pulling my hair out trying to get the sceneloader to work in a custom electron app.

So basically :

“soundTrackId”: 1 has no comma at the end
“position”: [0, 0, 0] has no comma at the end

When using the regular Append method it just bombs out with a long jarbbaled message with undefined or undefined of undefined blah blah … etc… which gave me no idea of what was wrong.

When switching to AppendAsync and using a promise it then gave a more helpful error message , saying there was a parsing error of the json. I then pushed the .babylon file though a online linter and it picked up the above errors.

Just thought I should let the site people know so this doesnt become another persons nightmare , especially when still new to babylon js , the last thing you need is the official basic example .babylon code to be malformed :wink:

Anyway peace to all

chat soon

getting more errors , cannot read property ‘vertexArrayObject’ of undefined.

I also had to remove the reference to texture files and sounds that are obviously not included in the sample code. The docs really need to update this to a really basic .babylon example , that does not refer to non existent files obviously , and of coarse fixing the comma errors mentioned above , and I need to get to the bottom of the current error , vertexArrayObject undefined … sigh

Does anyone have a simple .bablon scipt for me?? Just load a cube and a light and a camera … no external dependencies , no errors etc…

please

thanks

ok I thought I would check out if I can get a simple .bablon from the playground , seems you can so that is great.

So I loaded this scene and exported the .bablon code :

https://playground.babylonjs.com/#P94AL4

Yet i still get the same error in my ellectron app :

Cannot read property ‘vertexArrayObject’ of undefined

somebody please point me in the direction of fixing this please

ok I tried to change back to using Sceneloader.Load now again now that i have this simple .bablon , now i get :

BJS - [05:57:57]: Unable to load from C:\Users\ian\Desktop\nn\data\application.babylon: loadAssets of unknown
Lights:
Name: light1, type: Hemispheric
Materials:
Name: default material

this is driving me crazy , i shutting everything down now … hope somebody has some intellect to share with me :wink:

chat soon

here is my script so people can see what im attempting to make work :

const GLContext = require('./GLContext.js');
const BABYLON = require('babylonjs');
const LOADERS = require('babylonjs-loaders');


class BabylonController {
    constructor(projectController) {
        this.glContext = new GLContext(this.babylonCanvas);
        this.projectController = projectController;
        this.babylonCanvas = $("#babylon-canvas");
      
        this.babylonEngine = new BABYLON.Engine(this.glContext.glInstance, true);
        
        console.log("scene = " + this.projectController.directoryControllerData.getFullPath() + "\\application.babylon");
        BABYLON.SceneLoader.Load(this.projectController.directoryControllerData.getFullPath() + "\\", "application.babylon", this.babylonEngine, this.onSceneLoader.bind(this), this.onSceneLoaderProgress.bind(this));
    }
    onSceneLoaderProgress(){
    
    
    }
    onSceneLoader(newScene) {
        this.scene = newScene;
        console.log("SceneLoader callback");
        // Wait for textures and shaders to be ready
        this.scene.executeWhenReady(this.onSceneReady.bind(this));
    }

    onSceneReady(){       
        // Attach camera to canvas inputs
        this.scene.activeCamera.attachControl(this.glContext.glInstance);
        // Once the scene is loaded, just register a render loop to render it
        this.babylonEngine.runRenderLoop(this.onRenderLoop.bind(this));    
    }

    onRenderLoop() {
        this.scene.render();
    }

}

// expose the class
module.exports = BabylonController;

ive tried updating npm to the latest version , I went to node.js site and used their installer to install latest node.js as well.

I now also tried removing the loading aspect of the code and just tried to create the scene with some simple code :

createScene () {
        // Create a basic BJS Scene object
        var scene = new BABYLON.Scene(this.babylonEngine);
        // Create a FreeCamera, and set its position to {x: 0, y: 5, z: -10}
        var camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(0, 5, -10), scene);
        // Target the camera to scene origin
        camera.setTarget(BABYLON.Vector3.Zero());
        // Attach the camera to the canvas
       // camera.attachControl(this.glContext.glInstance, false);
        // Create a basic light, aiming 0, 1, 0 - meaning, to the sky
        var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0, 1, 0), scene);
        // Create a built-in "sphere" shape; its constructor takes 6 params: name, segment, diameter, scene, updatable, sideOrientation
        var sphere = BABYLON.Mesh.CreateSphere('sphere1', 16, 2, scene, false, BABYLON.Mesh.FRONTSIDE);
        // Move the sphere upward 1/2 of its height
        sphere.position.y = 1;
        // Create a built-in "ground" shape; its constructor takes 6 params : name, width, height, subdivision, scene, updatable
        var ground = BABYLON.Mesh.CreateGround('ground1', 6, 6, 2, scene, false);
        // Return the created scene
        return scene;
    }

im back to the "cannot read property ‘vertexArrayObject’ of undefined error :

Uncaught TypeError: Cannot read property 'vertexArrayObject' of undefined
    at new D (C:\Users\ian\Documents\GitHub\babylonjs_project_editor\electron_app\node_modules\babylonjs\babylon.js:1)
    at _.setVerticesData (C:\Users\ian\Documents\GitHub\babylonjs_project_editor\electron_app\node_modules\babylonjs\babylon.js:1)
    at q._applyTo (C:\Users\ian\Documents\GitHub\babylonjs_project_editor\electron_app\node_modules\babylonjs\babylon.js:1)
    at q.applyToMesh (C:\Users\ian\Documents\GitHub\babylonjs_project_editor\electron_app\node_modules\babylonjs\babylon.js:1)
    at Function.x.CreateSphere (C:\Users\ian\Documents\GitHub\babylonjs_project_editor\electron_app\node_modules\babylonjs\babylon.js:1)
    at Function._.CreateSphere (C:\Users\ian\Documents\GitHub\babylonjs_project_editor\electron_app\node_modules\babylonjs\babylon.js:1)
    at BabylonController.createScene (C:\Users\ian\Documents\GitHub\babylonjs_project_editor\electron_app\js\BabylonController.js:41)
    at new BabylonController (C:\Users\ian\Documents\GitHub\babylonjs_project_editor\electron_app\js\BabylonController.js:19)
    at ProjectController.buildProject (C:\Users\ian\Documents\GitHub\babylonjs_project_editor\electron_app\js\ProjectController.js:123)
    at ProjectController.onCloneProject (C:\Users\ian\Documents\GitHub\babylonjs_project_editor\electron_app\js\ProjectController.js:134)

i really trying to help myself here and not being lazy but I obviously need help as nothing i try is working

someone with knowledge of what i need to do to get this working please help

Hey!
First thanks a lot for the typos on the doc, I fixed it.

Then to your question, it seems that the code you linked works:
https://www.babylonjs-playground.com/#YU9M9J

So this may be related to your electron environment? Can you try without webgl2? The code seems ok to me so it is obviously linked to something else.

To turn off webgl2: EngineOptions - Babylon.js Documentation

You can also try to set engine.disableVertexArrayObjects = true

By checking more your callstack it seems that engine.getCaps() returns indefined
Can you confirm?

Hey there

Thanks for the response. I tried to use the option to disable webgl2 and it didnt help , I also tried to set disableVertexArrayObjects , which didnt help either. The problem is the object it tries to read this property from is undefined.

I will check the getCaps() function and get back to you soon.

Thanks again

Yes I can confirm :

var caps = this.babylonEngine.getCaps();

does returned as undefined.

hth

so this is kind of impossible ;D
the getCaps will return engine._caps which is created by the constructor Oo

mm … maybe it is because im using this old school “require” pipeline?

I see all the examples use typescript/es6 syntax , eg :

import * from ..

I just tested doing this before the line to create the engine :

  for (var prop in BABYLON) {
            console.log(prop + " = " + BABYLON[prop]);
        }

it returns a huge result of logs , to much to paste here , regardless this means the BABYLON object is in scope and can be enumerated…

ok so next i tried doing it on the engine object :

for (var prop in this.babylonEngine) {
    console.log(prop + " = " + this.babylonEngine[prop]);
}

now this gave a weird result … it logged several things and then the loop actually bombed out while it was still running :

C:\Users\ian\Documents\GitHub\babylonjs_project_editor\electron_app\node_modules\babylonjs\babylon.js:1 Uncaught TypeError: Cannot read property ‘createTexture’ of undefined
at M._createTexture (C:\Users\ian\Documents\GitHub\babylonjs_project_editor\electron_app\node_modules\babylonjs\babylon.js:1)
at new o (C:\Users\ian\Documents\GitHub\babylonjs_project_editor\electron_app\node_modules\babylonjs\babylon.js:1)
at M.createRawTexture (C:\Users\ian\Documents\GitHub\babylonjs_project_editor\electron_app\node_modules\babylonjs\babylon.js:1)
at M.get [as emptyTexture] (C:\Users\ian\Documents\GitHub\babylonjs_project_editor\electron_app\node_modules\babylonjs\babylon.js:1)
at new BabylonController (C:\Users\ian\Documents\GitHub\babylonjs_project_editor\electron_app\js\BabylonController.js:17)
at ProjectController.buildProject (C:\Users\ian\Documents\GitHub\babylonjs_project_editor\electron_app\js\ProjectController.js:123)
at ProjectController.onCloneProject (C:\Users\ian\Documents\GitHub\babylonjs_project_editor\electron_app\js\ProjectController.js:134)
at doneOne (C:\Users\ian\Documents\GitHub\babylonjs_project_editor\electron_app\node_modules\fs-extra\lib\copy\ncp.js:228)
at C:\Users\ian\Documents\GitHub\babylonjs_project_editor\electron_app\node_modules\fs-extra\lib\copy\ncp.js:91
at C:\Users\ian\Documents\GitHub\babylonjs_project_editor\electron_app\node_modules\fs-extra\lib\copy\ncp.js:211

which means “this.babylonEngine” became undefined while it was looping…?

twighlightzone stuff

Yes apparently there is something that got lost during the require
Let me ask @sebavan if he has an idea?

thanks yeah the lost reference is internal , not in the for loop , I just checked that ,

 for (var prop in this.babylonEngine) {
            console.log("  this.babylonEngine = " + this.babylonEngine);
            console.log(prop + " = " + this.babylonEngine[prop]);
        }

it never lost its value externally before the error , and it always bombs out at he same place I posted above.

Thanks for looking into it. If it is a pain to fix and I need to change the way i use npm let me know. I have experience with coding but im new to npm so if there is a preferred method to use it in relation to babylon let me know.

cheers

Could you post a small repro on github or elsewhere ? I would love to go to the bottom of this one ?

ok i will try sort that out , im no a avid github user so i hope I do it correctly :wink:

We have a scheduled power out coming in a few minutes for 2 hours so I will do it after that.

chat soon

no rush, you could even just attached a zip of the folder in the tread if it is easier (do not include the node_modules folder).

sorry i did the github thing before I came and saw you last message, I hope this will this work for you :

I use gitbash , cd to repository and then “npm start”

you will be presented with a page like this hopefully :

just click new project , after that you can click open existing and point to the same directory you selected when creating .

It is obviously still a WIP so the only menu system that will display is just for the file system of my project directory setup template. The error will display in the console at this point. The javascript file to look at is js/BabylonController.js this instance is created in js/ProjectController.js

if you still want me to upload a stripped down zip here in the thread let me know and I can do that.

Thanks for your time.

chat soon

I can not access this address unfortunately, did you put the repo public ? looks like it might be private.

ok sorry i must have not clicked to make it public when uploading using the github desktop app , i went to the website now and made it public from there

chat soon