amethlex

Hi All, I'm developing an React.js APP which consists of multiple pages. One of pages contains canvas, scene and of course, engine while other pages don't. Naturally, I need to dispose scene and stop engine when I am going to leave this page while init the scene and runRenderLoop when I re-eneter this page. The related code is as follows. class Scene { constructor() { this.canvas = null; this.engine = null; this.scene = null; this.obstacles = null; } init(canvas) { this.canvas = canvas; this.engine = new BABYLON.Engine(canvas, true); this.scene = new BABYLON.Scene(this.engine); this.scene.clearColor = new BABYLON.Color3.Black(); this.obstacles = new Obstacles(this.scene); } run() { window.addEventListener("resize", () => { this.engine.resize(); }); this.engine.runRenderLoop(() => { STORE.updateFPS(String(this.engine.getFps().toFixed())); this.scene.render(); }); } stop() { STORE.toggleSceneActive(false); window.removeEventListener("resize", () => { this.engine.resize(); }); this.engine.stopRenderLoop(); this.scene.dispose(); this.engine.dispose(); } } export default class Canvas extends React.Component { render() { return ( <canvas className="main-canvas" ref={(canvas) => { if (canvas === null) { // React will call the `ref` callback when the // component is being umounted. SCENE.stop(); return; } SCENE.init(canvas); SCENE.run(); }}> </canvas> ); } } The problem is that when I go back to this page and try to dispose the mesh of obstacle to redraw, which is BABYLON.MeshBuilder.ExtrudePolygon(). It reports error: Does anyone have any idea? What's wrong with my operations? TypeError: engine is null ./node_modules/babylonjs/dist/preview release/babylon.max.js/AbstractMesh.prototype.dispose src/visualization/browser/node_modules/babylonjs/dist/preview release/babylon.max.js:13927 13924 | this._occlusionQuery = null; 13925 | } 13926 | // Engine > 13927 | engine.wipeCaches(); 13928 | // Remove from scene 13929 | this.getScene().removeMesh(this); 13930 | if (!doNotRecurse) { ./node_modules/babylonjs/dist/preview release/babylon.max.js/Mesh.prototype.dispose src/visualization/browser/node_modules/babylonjs/dist/preview release/babylon.max.js:22773 22770 | highlightLayer.removeExcludedMesh(this); 22771 | } 22772 | } > 22773 | _super.prototype.dispose.call(this, doNotRecurse); 22774 | }; 22775 | /** 22776 | * Modifies the mesh geometry according to a displacement map. updateState src/visualization/browser/src/scene/obstacle.js:73 72 | if (this.mesh) { > 73 | this.mesh.dispose(); 74 | } 75 |

https://playground.babylonjs.com/#A9XC0F I have attached the pg.

Hi All, I am heavily using ExtrudePolygon theses days. Since I am always disposes all the ExtrudePolygon and redraw them again and again., the fps is quite low. Since I always have the fixed number of ExtrudePolygon to draw, can I just updates the shape of each ExtrudePolygon without creating new ones? If this is possible, how can I do this? Thanks.

Thank you, Pryme8. So, basically, your idea is to get the average of data of two images. It's a good idea.

Well, how can I blend two images?

Hi All, I am using Babylonjs to create map these days. Basically, I have two layers, one layer is tiledmap, which is a png image, another is semantic map, which is a svg file. The size of two map is almost same. So I just create two grounds whose materials are created by the png image and the svg file and put them at the same position. If I make them locate at different heights, one ground will hide another. If I make them locate at the same heights, they cannot merge perfectly, at some angle you can see svg materials clearly, and png materials at some other. My problem is how to merge these two grounds perfectly?

Hi Deltakosh, Thank you so much. I turned to use multiple grounds instead of tiledground.

Hi RaananW, Thank you for your clarification.

Hi Deltakosh, I am current using tiledground to display a map. And I would like to only display the surrounding map of a moving object, say, a car. So I would like to redraw the submeshes of this tiledground frequently. I do it in this way: while (...){ this.tiledGround.subMeshes = []; // push new submeshes. for (...) { this.tiredGround.subMeshes.push(new BABYLON.SubMesh(...)) } } But I find the previous submeshes are still there! So my question is that how to dispose previous submeshes? Thank you!

Thank you so much Deltakosh! I will try it.

Hi Wingnut, Thank you so much. So if I do need to update the tiledground, I need to dispose the old tiledground and set a new tiledground, right? Just like: this.tiledGround = new BABYLON.Mesh.CreateTiledGround(...) ... // Update the tiledground in the loop. while(...) { this.tiledGround.dispose(). this.tiledGround = new BABYLON.Mesh.CreateTiledGround(...) ... } However, from http://doc.babylonjs.com/classes/3.1/tiledground#precision-w-number-h-number-, in the constructor of tiledground, I do find a optional parameter - canBeRegenerated what is the meaning of this parameter? Or which fields can be updated if this parameter set to true and how to update? Thank you.

Hi Deltakosh, Do you mean I do it like // Creating this.tiledGround = new BABYLON.Mesh.CreateTiledGround(id, xmin, zmin, xmax, zmax, subdivisons, precision, true); ... ... // Updating this.tiledGround.xmin = new_xmin; this.tiledGround.zmin = new_zmin; this.tiledGround.xmax = new_xmax; this.tiledGround.zmax = new_zmax; this.tiledGround.subdivisions = new_subdivisions; this.tiledGround = new BABYLON.Mesh.CreateTiledGround();

Hi All, I am new to Babylon.js and are trying tiledground. My problem is how to dispose some submeshes of tiledGround? I have tried like myTiledGround.subMeshes[3].dispose() but it does not work. I even tried to dispose all submeshes like for (let i = 0; i < myTiledGround.subMeshes.length; ++i) { myTiledGround.subMeshes.dispose() } And also failed. Only when I dispose the tiledGround with myTiledGround.dispose(). In the end, I choose to maintain multiple grounds and create / dispose manually.

Hi Deltakosh, I have met the identical problem as breakds. I have checked the document(http://doc.babylonjs.com/how_to/set_shapes#tiled-ground) and the the source code of CreateTiledGround and cannot find input parameter as current mesh. Can I just update the parameters of tiledGround directly to reuse tiledGround? e.g this.tiledGround = new BABYLON.Mesh.CreateTiledGround(...) ... // Updates the parameter. this.tiledGround.xmin = 5 Thank you.