Playcanvas-observer.js throws Maximum call stack size exceeded

[Ertugrul_Cetin]

I’m trying to render my terrain on the editor (from heightmap) and somehow play-canvas/observer library throws an error and I can not manipulate the editor.

Any ideas to solve this?

Here is the error;

[Leonidas]

Hi @Ertugrul_Cetin,

Not sure about that, I’ve seen similar errors when trying to console log a JS object (e.g. a PlayCanvas entity) in the console. The editor log debugger doesn’t like that, so instead use breakpoints.

In your case if you can share more details on your exact script we may be able to help. The editor Application instance have some systems disabled that may require custom booting (e.g. assets aren’t preloaded by default, may require manual loading).

[Ertugrul_Cetin]

Here is the gist: height map to editor · GitHub
Please run each line one by one in the console for the function run.

[Leonidas]

Ah I see, I think the problem is you are using the editor API to create entity observables. That is entities through the editor API that can interact with the PlayCanvas database.

In your case since you aren’t going to serialize and save that component and mesh instances to the database, most likely you need to use a regular Entity:

var entity = new pc.Entity();
pc.app.root.addChild(entity);

entity.addComponent('render', {
   meshInstances: renderModel.meshInstances
});

[Ertugrul_Cetin]

That’s an improvement thanks! But now I got another error (also tried to create with material - thought it could solve this problem);

[Leonidas]

Hmm, not sure about that, most likely that’s not related with running in the editor. Most likely a resource isn’t available (hence cannot read properties of null). Try to debug step by step to isolate this.

A good strategy to make sure this isn’t an editor API related bug is to adapt your code to be able to run both in editor and in launch.

[mvaligursky]

in the code you create material using new pc.Material, but instance of Material needs to have a shader assigned.
Or perhaps you need to use use BasicMaterial or StandardMaterial, which generates shader based on material properties.

[Ertugrul_Cetin]

Thanks! I’ve replaced all pc.Material with StandardMaterial (there was a leftover inside createTerrainFromHeightMap fn) and this seems to do the trick! I don’t get any error messages now.

The only problem I see is that entity is not shown/rendered in the Editor

Updated addComponent code;

var renderModel = createTerrainFromHeightMap(img, 10);

var entity = new pc.Entity("heightmap");
pc.app.root.addChild(entity);

entity.addComponent('render', {
    type: 'asset',
    material: new pc.StandardMaterial(),
    meshInstances: renderModel.meshInstances,
    layers: [pc.app.scene.layers.getLayerByName("World").id]
});

Also tried to add component the attribute meshInstances only - did not work out, still can’t see the model in the editor.

I think I need to sync pc.app and editor somehow? (editor does not see/have the new entity)

[mvaligursky]

Try to replace most of your code by something like this to see if that makes a difference:

                const entity = new pc.Entity("ball");
                app.root.addChild(entity);

                const mesh = pc.createSphere(app.graphicsDevice);

                const material = new pc.StandardMaterial();
                material.update();

                entity.addComponent('render', {
                    type: 'asset',
                    layers: layer,
                    meshInstances: [new pc.MeshInstance(mesh, material)]
                });

[Ertugrul_Cetin]

Your code snippet works and I can see the sphere in the editor! But my mesh does not show up yet.
Here is my gist (updated as you suggested): height map to editor · GitHub

Feeling like we’re very close

[Ertugrul_Cetin]

It works now! I’m so silly forgot to provide width,height, minheight and maxheight props

Thank you for helping me! You’re very responsive @mvaligursky @Leonidas