Search the Community

Hi folks, Maybe some of you followed this topic for while : Well, now I'm proud to announce the fully documented first release of the Dynamic Terrain Extension : https://github.com/BabylonJS/Extensions/tree/master/DynamicTerrain Its documentation is one the same repo : https://github.com/BabylonJS/Extensions/blob/master/DynamicTerrain/documentation/dynamicTerrainDocumentation.md Have fun Some more demos and features to come

Hi Can I somehow make distance for LODs to count from the target position of ArcRotateCamera? I'm making sort of map application and when I tilt the camera down, visible meshes on the map is under the camera and I want them to be where camera is looking

Hi! I have created a custom mesh like this: new BABYLON.Mesh("custom", this.scene) And after added simplify() method, nothing has been changed. I have created a playground for testing this issue. As you can see, the same settings in simplify() method change the structure of sphere, but do not change my custom mesh: https://playground.babylonjs.com/#JT9SFV#4 Is it a bug, or it is impossible to add simplify() method to custom mesh?

Hunt prehistoric creatures with your friends online. Build your own base, craft tools, and weapons to survive in a large-scale true cross-platform open world game. This game is an application of the engine I’ve built, to prove a statement: It is POSSIBLE to build a 3D version of the Internet, where instead of browsing through websites, we could jump from one 3D space to the next. I “invite” everyone to make this happen. I want you guys to build your own 3D spaces implementing your own ideas what the web should look like in the future. We could just link them all together and make this Interconnected Virtual Space happen - yeah, the Metaverse, for the Snow Crash fans out there Tech Details that I hope provokes further questions: Loading Assets on Demand is even more important in the Browser than on PC or Console. Internet speed is only a fraction of the speed of the hard drive. It is essential to only load whats visible if you want to provide an open world environment for users visiting your world the first time. LOD - Level of Details allows Web Browsers to show something immediately for the users just like an ordinary website. It may look poor and users can see the object improving as they are loaded, still, I think its a good trade-off. Users get a good enough view of their environment instantly and can start interacting with it immediately. Terrain and the Grid System I’ve created the terrain in Blender, then I split it up like a chessboard automatically using Javascript. It is easy/cheap to determine that which cell contains the given coordinate and every single cell in the Grid has a reference to its neighbors. This is the basis of server layers of optimization when it comes to rendering, AI, and collision detection, etc. A recursive search is very easy to do, using those links to neighboring cells. Lighting I've implanted basic Directional and Ambient Lighting to support Day & Night Cycles and Point Lighting for individual light sources like a campfire, torch etc. To my surprise, the difficult part was to get good looking flames, thanks to the lack of Alpha Sorting in WebGL, what I had to implement in Javascript instead. Animation I animate my models in Blender, export them to “.dae". The file format comes with a serious limitation, you can’t define multiple animations and it only maintains a list of keyframes as references. So I maintain a JSON file per “.dae” to define multiple animations by having sets of keyframes. E.g.: “{running: [0, 4], jump: [5,7], ..}”. But I kept it simple and didn’t take it to the realm of animations per body part. Physics In short, I was stupid enough to write my own ..on the other hand, I have a fine level of control over how much I allow it to run. Again, on mobile, it is crucial to have that level of control to navigate 200+ creatures in real-time. I have two different type of Collision Detection. Collision with the Terrain and collision with other model surfaces. Terrain collision is very cheap, this allows me to move so many NPC at once. Collision with other models is heavier though, but that allows me to climb random looking rocks. I optimized it enough to make it feasible to run on mobile devices. I use a low poly version of the models to determine the collision and I only run it for the models near the Player, utilizing the Grid System I mentioned above. AI NPCs can navigate a random terrain, avoid obstacles and “see” and “hear” other NPCs if behind them. At the moment, they move rather robotically, but this allows me to calculate, where they can move next without hitting any obstacles and how long it will take to get there. I only run the AI right before they get to the target location. Basically, 200+ NPCs make only 40-100 AI calls per second. ..I certainly have room for improvement here Multithreading in the browser is difficult but necessary to achieve good Frame Rate. Nothing but the rendering should be on the main thread ideally - Good luck to achieve it though I’ve managed to push most of the heavy logic into a speared thread, but AI is still running on the main one. In a thread you have very limited access to important functionalities of the browser, therefore, there is only so much you can do. Also, specific objects can only be passed by reference between threads, everything else has to be serialized on one end and deserialized on the other. You want to be careful how often you do it. Audio I use the Web Audio API that works as expected. On top of that, I implemented Audio Sprites: I compile all related sounds to a single mp3 file and that comes with a JSON object to define where certain audio snippets can be found. It's a fast, accurate and reliable solution unlike using Audio HTML Tag, but that one has its own use cases as well, e.g.: streaming an mp3 file comes for free, like streaming an internet radio station. Multiplayer - I use WebRTC and not WebSockets - I know, I know, hear me out. The idea was that COOP is a very likely scenario and players may only prefer the company of their friends. I that case, they don’t have to purchase access to a private server, as long as they are happy to let their world go dormant between gaming sessions. Plus, all the logic is implemented for single player mode on the client-side, which logic has to be duplicated on the servers, if I went down the WebSockets rout - just think about where the AI logic should be, server- or client side. I expect this one to be a controversial decision, ..sometimes even I'm not sure whether this was the “right" decision There is a whole lot more to this though. Resources could be distributed between players when it comes to AI to ease the load on the Host - I know it is a potential security issue, but there is a use case for it, like AI for distant NPCs in COOP as long as you have no hacker friends ..this could be crucial on mobile devices. Controller Support The Gamepad API provides you with raw access to every button and joystick. You certainly have to implement your own layer on top of that. Events for pressing/holding down buttons don't come out of the box. Implementation of the dead zone of joysticks is missing and it is inconsistent how you can access different types of controllers through the API, even the same controller but on different devices. In the end, you will have to provide a controller mapping implementation as well in your settings. But its totally doable and works like a charm. Touchscreen Support It's a tricky one. As I mentioned above, on iPhones its completely useless till Apple decides to comply with Web Standards. Even on Android, it is a bit tricky: For the UI you probably want to use HTML. It makes sense because it comes with all the neat features that make our lives easier until you realize that you can’t switch between weapons while running - wait, what? You see, while you are holding down the left side of the screen to maintain speed and try to click on a button, or any HTML element to switch weapons, the click event won’t fire. No click event will be fired while doing multi-touching. As a result, HTML and any fancy framework for that matter are no longer good enough solution own their own. UI When it comes to games we expect a whole lot more from the UI than on a website. Multi-touch support - as discussed above and even controller support is not as straightforward as you might think. You have raw access to the controller, so when a button is selected and the user pushes the joystick diagonally upward, you have no idea what is in that direction, therefore what should be selected next. You have to implement the navigation of your UI with a controller for yourself. And you need controller support because that's the only way to move around in VR and on consoles. Speaking of VR, you want to render your UI twice in VR - once for the right eye and once for the left eye - and only once when not in VR, just something to keep in mind Also, rendering the UI could be heavy. This might be a surprise but if you think about it, on a website you don’t do anything but the UI, so you have a lot mere leeway to work with, whereas in a game you don’t want the UI to impact the Frame Rate, so it has to be very lightweight and probably you want Scheduling to have a final say on what gets refreshed. Taking all this into account, I really don’t see how any framework could be a good option - they were simply designed with different requirements in mind and there is more downside to using any of them than upside. Precomputed Scene Occlusion Culling using a Grid System Most of the optimization is happening real-time or triggered on a regular basis while running the game with one exception: I render every cell in the Grid System from the point of view of every single other Cell. E.g.: Cell A can see cell B and C but not D. I literally diff two images with javascript to determine whether the given cube can be seen or not. Then I record the results in a JSON file, which is used for rendering. This reduces the number of cubes to be rendered significantly, but it takes about 40 hours to run this optimization for the whole terrain. Running the game on Mobile Devices iPhone runs WebGL significantly better than top-end Android devices but practically useless because Apple ignores important web standards. E.g.: Pinch zoom can’t be blocked, therefore when you use your left thumb to move around and right thumb to look around, instead of doing so you end up zooming back and forth the screen. It also doesn't support fullscreen mode - video does, but not the canvas element. Another interesting limitation on iPhone is that you can only have 25 elements in an array in GLSL, which translates to having only 25 bones in an animated model. This doesn't make animation impossible, but you can’t use most animated models that you buy in the stores, you have to do it again with only 25 bones. Profiling “What gets measured, gets managed”. The built-in profiler in Chrome certainly has its use-case, but not good enough for what we want, so probably you will have to build your own at some point with specific features. You want to know how long a certain section of your game runs per frame, e.g.: Rendering, AI, Physics, etc. and probably these sections won’t run sequentially, but they are interrupted by other processes that you don’t want to include into the specific measurement. One thing is for sure, you cant do optimization without identifying the source of the lags. - I've certainly wasted enough time trying Scheduling As long as you are pushing the limits of the devices it is always a battle for a smooth frame rate. Therefore, you have to implement a scheduling system to manage what is allowed to run and for how long. E.g.: whatever is loaded and processed in the background will have an effect on the frame rate even if it is running on a different thread, you want to throttle that. You don’t want to set variables through WebGL API unnecessarily. AI always varies how much calculations it has to do depending on the number of unique encounters of 200+ NPCs in a random environment. Basically, you will have to limit what runs and how long, manage what is a nice to have calculation and a game-breaking one and try to make it seamless for the user. Probably every single topic above deserves a dedicated post, so please feel free to ask anything - there is no stupid question - then I would like to use those questions to write an in-depth post on every single topic that helps fellow devs to overcome similar obstacles - no doubt I will learn a thing or two in the process Live Tech Demo is available on https://plainsofvr.com

Hi! I'm doing a custom exporter from a source to get nice and structured glTF models as binary-glTF for my use case in BabylonJS. I modified it so that it comes equipped with the tags for MSFT_lod in place. I found I got it working to an extent with 3.1.1 version and I finally figured out that it's just simulating the loading of higher detail levels. So I checked out the latest as well. Trouble I'm seeing now after modifying the lod scheme in the loader for MSFT_lod, so that it would in fact use the addLODLevel function, is that the meshes that are part of the logical tree don't seem to hide away and I'm wondering why. I did also figure out a potential getaway card with the idea, that since I have put the submeshes to contain anything that belongs to a leaf of a node into the same subbranch of the tree, I can pretty much flip the mechanism around and just reconstruct the tree form branches and would-be-boundingboxes to form a makeshift LODding scheme. It's not what I wanted per say, as I would love to control the scheme in the exporter side. Now I am still thinking if even that will work if I cannot even make the branches disappear with addLODLevel(distance, null) calls. Help, please? Cheers!

Hello guys... Got another tough one form me, hopefully someone can help. I am making a component for the BabylonJS toolkit to support LODGroup... to automatically build LOD support for meshes. In unity, when setting up a LODGroup... the levels are specified in percent: The documentations says "The percentages in the LOD bars represent the fraction of the view frustum depth where that LOD level becomes active. But in Babylon we apparently use actual distance values to setup LOD... My question is how can I convert these percentage values to distance to mesh.addLODLevel ??? Yo @Deltakosh and @Sebavan or @Wingnut ... SOMEBODY Please chime in here

Hello everyone, Is is possible to implement some occlusion or LOD-like mechanism for sprites in Babylon? I have a scene with a very large terrain and some forest areas represented by thousands of tree sprites. There are so many sprites that they actually affect performance. Could someone point me in the right direction? Is there a way to adapt LOD for sprites? Or could I put the camera into some kind of transparent mesh and in some way occlude the sprites behind the mesh walls?

https://www.babylonjs-playground.com/#EC6R4F#20 So it "works" but it crashes once it propagates out a little. I need an idea of how to establish which zones to build. Maybe like a max ring size instead of what I am doing now and have it only render out say 4 steps from the current zone the player is on? Just hoping for some alternative ideas. http://www.babylonjs-playground.com/#EC6R4F#19 ^^ for a non crashing version without neighborhood checks. #EDIT# Also any math buffs wanna help me with how to do an equation to calculate the distance from the the outer closest edge point or center, which ever is closest. Not just the Center, or at least point me in the right direction?

Has anyone done this yet in babylon JS I see a couple of examples but none of the projects I can reference have worked out the camera height in the process or the blending between LOD layers. I am going to start trying to make a working example from the paper http://www.vertexasylum.com/downloads/cdlod/cdlod_latest.pdf but would like to see how others have handled it. I have looked at github.com/darrylryan/BabylonTerrain and github.com/felixpalmer/lod-terrain but both of these are limited to 2d measurements and because I am going to be doing this on a planetary level with Spherical displacement I need to go a step farther. Also I am wondering how I should handle the frustum calculations because in theory nothing on the backside of the planet will need to be rendered but how do I establish the "zone" is hidden on the other side of the planet?

Once LOD has been automatically created with the MESH.simplify function, is it possible to change the cutoff distances? I'd like to be able to adjust these distances dynamically based on the frame rate, as an optimization strategy. Thanks!

I need to load a large scene, the model comes from UAV scanning generated, I hope to be able to smooth loading on most devices, including mobile phones. In my solution, I need to release objects outside the view (objects and materials are released), but I found that the BJS's own Frustum Clipping did not release the object outside the view, but I will use LOD, I will load multiple precision models, if not released, LOD will be meaningless, how can I do, I need to rewrite BJS code? I tried to use incremental load, it did not release the memory of the object, but I found in Debug Layer when moving the viewport the total vertices in the change, I do not know what reason? But the total meshes not change；http://www.babylonjs.com/Demos/Espilit/

Hello. Is it possible by default to render sprite instead mesh at some LOD level?

Hi again! I have a little concept I can't wrap my head around. What I want to do is create Heightmap terrain (already done), then apply it to ribbon and dispose it(done as well). No the problem is I would like to divide up this ribbon into smaller pieces so that I could load them up on the fly like LOD terrain. This obviously would make the terrain generation a lot easier. I then plan taking the getHeightAtCoordinates and getNormalAtCoordinates and add it to a custom Ribbon function so I can do collision detection. So forget about the collision detection thing for now but how would you go about dividing up a riibbon like this: but with more subdivisions. var terrain = BABYLON.Mesh.CreateGroundFromHeightMap("terrain",createHeightMap(256),1000,1000,100,0,256,scene,true); terrain.onReady = function() { var paths = []; var step = (Math.PI - 1) / steps; var vertices = terrain.getVerticesData(BABYLON.VertexBuffer.PositionKind); var path = []; for(var i = 1; i < vertices.length; i++) { var x = vertices[i*3+0]; var y = vertices[i*3+1]; var z = vertices[i*3+2]; path.push(new BABYLON.Vector3(x, y, z)); } paths.push(path); var ribbonTest = BABYLON.Mesh.CreateRibbon("testRibbon",paths,false,false,20,scene); ribbonTest.position.y = 100; terrain.dispose(); } createHeightMap(256) being a function I made that generates simplex heightmap image data for a image 256 * 256. (turns out it actually doesn't work right)Maybe I don't want this, maybe I want to use vertexData? PG: http://www.babylonjs-playground.com/#296YBY#2

I saw a previous post from a few years ago asking this and the answer was a no, but.... has texturing/material LOD been added yet? I have a mesh I need to re-texture based on distance (the actual mesh is fine but the texture is expensive). I have 3 sets of textures I need to cycle. These textures are tile based. I have a 512, 1k, and 2k tile set each in there own folder. That is the other piece of the puzzle, texture subfolders. I sent @Deltakosh a message on twitter asking about that part. Look, I need you to tell me this works.. if it doesn't.. lie to me and tell me it does anyway because it should work... what kind of cruel world do we live in where we cannot do this i ask...

Hi, I recently implemented LODs for an InstancedMesh. The problem is, this InstancedMesh has an EdgesRenderer (which works great) but when the quality is reduced (LOD), the edges aren't rendered anymore. The problem doesn't exist for a regular Mesh, even with LODs: http://www.babylonjs-playground.com/#QE7KM#14 Here's what happens when you add instances: http://www.babylonjs-playground.com/#14ESWC#13 You can see that edges are rendered only for the masterMesh and when one of the instances gets degraded, the edges are rendered for the sourceMesh. I tried to find an obvious solution to this but to no avail. It's not that big of a deal for me but I thought I'd ask anyway. Perhaps somebody knows a solution? Or maybe you're aware of this problem and are going to resolve it in a future update? Thanks in advance.

Hi guys! I'm new with Babylon and I'd really appreciate some advise. I am trying to create a tiled ground with LOD meshes. For some reason the tiles on the edges of the viewport get filtered out and not rendered, despite being close enough. Any idea whats causing it and how to prevent it?

I was trying to figure out why I was getting a javascript error when I added auto lod to my scene, no matter what mesh I used, even simple sphere like in demo for the simplification auto lod system, the error was: Uncaught TypeError: Cannot read property 'position' of undefinedbabylon.2.2.max.js:29038 Geometry.getVertexBufferbabylon.2.2.max.js:29017 Geometry.getVerticesDatababylon.2.2.max.js:9812 CollisionCoordinatorWorker.SerializeGeometrybabylon.2.2.max.js:9635 CollisionCoordinatorWorker.onGeometryUpdatedbabylon.2.2.max.js:9765 CollisionCoordinatorWorker.onGeometryAddedbabylon.2.2.max.js:13320 Scene.pushGeometrybabylon.2.2.max.js:29145 Geometry.applyToMeshbabylon.2.2.max.js:28934 Geometrybabylon.2.2.max.js:15124 Mesh.setIndicesbabylon.2.2.max.js:32330 QuadraticErrorSimplification.reconstructMeshbabylon.2.2.max.js:32185 (anonymous function) So I went through process of elimination and finally found it had to do with physics and then I found it wasn't the physics engine I was using but the command: scene.workerCollisions = true; As long as that one line is commented out auto lod works fine! This isn't a big upset yet, but I will like to take advantage of the workerCollisions at some point, but for now can just leave it off. To replicate this, simply enable basic collisions in any demo and add workerCollisions and then try the auto lod.

Hi gang, After dad72 sent me a few meshes he has been trying to simplify, I noticed there was some kind of a problem with the simplification process. The meshes I have tested always worked, but external meshes were not simplified correctly - holes appeared where they shouldn't have had appear. Investigating that took a little while, and the result was that the meshes' indices are not optimized. meaning - Some vertices were duplicated during the export process, and were used as a reference of an index. this leads to no problem viewing the mesh, but presents a problem to the simplification process, since it relies heavily on the number of triangles using each vertex. Tl;dr Some of the exporters don't try to avoid redundant vertex data which is fine for viewing but not for simplification. If you encounter such a problem using the simplification function, you first need to optimize the indices. you do that by (surprisingly) using the optimizeIndices function now implemented in BABYLON.Mesh. It takes some time to optimize the indices (especially if it is a large mesh) so use it only when you really need it. Other than that I have accelerated the decimation process (removed a few unneeded lines of code and corrected some others). An example can be found here - http://www.babylonjs-playground.com/#2JBSNA#2 (be a bit patient, you will eventually see an alert dialog when it finishes). The skull simplifies quite nicely I will document everything in the next day or two. Any questions - please let me know.

Howdy folks, I have ported a wonderful simplification algorithm written in c to babylonJS. It is based on http://www.cs.cmu.edu/afs/cs.cmu.edu/user/garland/www/Papers/quadric2.pdf and http://voxels.blogspot.de/2014/05/quadric-mesh-simplification-with-source.html . What can you do with it? It can be used to automatically create LOD objects for meshes (if the user has time for that) directly in the browser. It is surprisingly fast - it is reducing ca. 130000 triangles to 65000 in less than 5 seconds on my good ol' laptop. Example can be seen here - http://babylonjsexperiments.raananweber.com/?rate=0.5 , the fractal object (generated using meshlab) contains ca. 131000 triangles. Wait a few seconds for it to load and decimate. The object on the right is the original, on the left is the reduced. The rate can be change in the URL. At 0.3 it is still relativly hard to find the difference. At 0.1 it is very clear. But this is exactly what's needed for LOD. At the moment I am not analyzing the UVs (meshlab doesn't generate them as well), this would be the next step. Making it Async is also on the todo list :-) Edit - Preview site changed, check my following post about the new async implementation.

Hi, I create a small script of LOD and I want to share it. I don't know if it's the best ways to make, so if you want to improve it please do not hesitate. var BABYLON = BABYLON || {}; (function () { // DistanceLOD1 = medium // DistanceLOD2 = low // DistanceMax = hide BABYLON.DistanceLOD1 = 10; BABYLON.DistanceLOD2 = 30; BABYLON.DistanceMax = 50; // LOD_0 = hight // LOD_1 = medium // LOD_2 = low BABYLON.LOD = function(Camera, LOD_0, LOD_1, LOD_2) { this.camera = Camera; this._verifInProgress = false; this._distance = 0; this.LOD0 = LOD_0; this.LOD1 = LOD_1; this.LOD2 = LOD_2; this.positionLOD0 = this.LOD0.position; if (this.LOD1 != undefined) this.LOD1.setEnabled(false); if (this.LOD2 != undefined) this.LOD2.setEnabled(false); }; BABYLON.LOD.prototype._distanceTransition = function() { if (this.LOD1 != undefined || this.LOD2 != undefined) { this._distance = this.camera.position.subtract(this.positionLOD0).length(); var enableLOD0 = this._distance < BABYLON.DistanceLOD1; this.LOD0.setEnabled(enableLOD0); var enableLOD1 = !enableLOD0 && this._distance < BABYLON.DistanceLOD2; if (this.LOD1 != undefined) { this.LOD1.setEnabled(enableLOD1); } if (this.LOD2 != undefined) { this.LOD2.setEnabled(!enableLOD0 && !enableLOD1 && this._distance <= BABYLON.DistanceMax); } } }; BABYLON.LOD.prototype.Update = function() { if (this._verifInProgress) return; this._verifInProgress = true; this._distanceTransition(); this._verifInProgress = false; }; })(); Use: //Sphere Hight var sphere0 = BABYLON.Mesh.CreateSphere("Sphere_Higth", 50.0, 1.0, scene); var materialSphere0 = new BABYLON.StandardMaterial("color1", scene); materialSphere0.diffuseColor = new BABYLON.Color3(1.0, 0.2, 0.7); sphere0.material = materialSphere0; //Sphere Medium var sphere1 = BABYLON.Mesh.CreateSphere("Sphere_Medium", 7.0, 1.0, scene); var materialSphere1 = new BABYLON.StandardMaterial("color2", scene); materialSphere1.diffuseColor = new BABYLON.Color3(1.0, 0, 0); sphere1.material = materialSphere1; //Sphere Low var sphere2 = BABYLON.Mesh.CreateSphere("Sphere_Low", 2.0, 1.0, scene); var materialSphere2 = new BABYLON.StandardMaterial("color3", scene); materialSphere2.diffuseColor = new BABYLON.Color3(0, 0, 0); sphere2.material = materialSphere2; // Initialise LOD var lodObjet = new BABYLON.LOD(camera, sphere0, sphere1, sphere2); engine.runRenderLoop(function () { scene.render(); lodObjet.Update(); // Update Transition LOD });I have yet to test the script, but this should work. Demo: http://www.castorengine.com/babylon/LOD/