ArcRotateCamera usage produces a circular structure and can't be saved via the serializer

Bugs
1

https://www.babylonjs-playground.com/#1AGCWP#21

I thought that it was only on my local dev code but I found this issue. Is it expected behavior or a bug ?

I got the sample save code from the documentation and just changed it to use the arcrotate camera. The error I’m getting is this :

` TypeError: Converting circular structure to JSON
    --> starting at object with constructor 't'
    |     property 'rootNodes' -> object with constructor 'Array'
    |     index 0 -> object with constructor 't'
    |     property '_cache' -> object with constructor 'Object'
    --- property 'beta' closes the circle
    at JSON.stringify (<anonymous>)
    at createScene (<anonymous>:25:22)
    at <anonymous>:74:9
    at fastEval (main.js:1)
    at main.js:1 `

On my actual project on my machine the error is similar :

TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'Scene'
    |     property 'rootNodes' -> object with constructor 'Array'
    |     index 0 -> object with constructor 'ArcRotateCamera'
    --- property '_scene' closes the circle
    at JSON.stringify (<anonymous>)
    at doDownload (c:\Users\Thanos\Desktop\E\src\index.js:357:25)
    at HTMLButtonElement.saveButton.onclick (c:\Users\Thanos\Desktop\E\src\index.js:124:4)

How am I supposed to combat this problem ? Is the usage of a custom module that supports stringify of circular structures a must ? It seems that one is not provided by BabylonJS itself, I found some on npm but tried to use them with no luck too. They proceed with the saving of the scene but they hung and crash the browser.

2

Well, the constructor of your camera is wrong :slight_smile: You are missing alpha, beta and radius

1 Like
3

https://www.babylonjs-playground.com/#1AGCWP#23

Updated the playground, yeah you are right I was hasty.

Still I get the error I mentioned in my local project though :frowning:

With the same camera initialization I put in the playground too. Ι will make a new thread.

1 Like
4

@Deltakosh

After quit some time I just disabled many parts of my code and actually found what was causing the circular thing. This playground demonstrates how dumbass I am : https://www.babylonjs-playground.com/#1AGCWP#24

I didn’t pass a name for a material I created. Instead I only passed the scene which I guess took alright the place of the name of the material. The material worked correctly but caused the circular thing.

// What I did
var material = new BABYLON.StandardMaterial( scene);

//Correct way obviously
var material = new BABYLON.StandardMaterial(“mainBox”, scene);

Was it supposed to work though ? I mean typescript(internal, I use js) wouldn’t block that ? It intrigued me. Also I suppose I should have received a warning or something. Am I wrong ?

5

TypeScript would have told you that you are using the wrong type at compile time, but not at runtime. The name is used for filtering and finding materials at a later time. And it is being serialized, so this was the cause of the circular issue. Also, a scene is optional. If you don’t provide it, the last created scene will be used. This is why it worked :blush:

I guess this shows how important a type safe marriage is , at least during development

1 Like
6

I see. I always wondered WHY JS gets a bad rap about this and why type safety is so important.

Interesting so there could be not way of me knowing what exactly went wrong right ? Something that I could do to be safe from this in the future. Something other than “pay more attention to properties,constructors etc” of course.

7

your editor is your friend in that case, but you will have to feed it the right data.
Otherwise, you can write tests! access the name, output it, serialize each object and see that it provides the correct output.
Or use a type-safe language :slight_smile:

1 Like
8

Yeah VScode didn’t show anything. Did I miss anything in the setup ?

I guess you are right typescript is an option I guess but for now I think I’m good with JS.

[EDIT] Maybe my problems was that I was using .js files instead of .ts ? I changed the file type into .ts for some files and I got underlined errors and things I didn’t see before. Still I use plain JS inside but now seems I get the benefits you described. Is this correct ?