Search the Community

Hi, I'm new to this forum so hi to everyone! :) Currently, I'm trying to build an isometric tilemap that also displays a certain height. Here is a demo: https://www.pixiplayground.com/#/edit/69C1wfNIowvu5wNNccv8w I have the following problems and maybe somebody could guide me in the right direction. 1. Shadows: When I remove the lineStyle, different heights and the depth of the scene are not really recognizable. I think this could be solved with proper lighting and shadows. Any suggestions on how to implement this? 2. Sprites & Performance: I'm currently calculating all vertices manually and then I draw a PIXI.Graphics-Polygon according to the vertices. Is there a more efficient way to do this. I'm not very experienced with PIXI.Mesh, SimpleMesh or SimplePlane. I wanted to use the PIXI.SimplePlane first but the documentation seems to be wrong... In addition to the mesh generation do you have any tips on how to properly cover the mesh with sprites, soften the edges and smoothly transition between different sprites. 3. Player movements & buildings: In the future I'd like to be able to add players and buildings. This is not so important right now but as the objects will heavily interact with the map, I'm happy if you have some guidance on this topic as well. Thank you very much! All the best Tom

Hey, In my project I need to create a sphere with a height map, but I only found the function "CreateGroundFromHeightMap" in the babylonjs docs. It seems like there is not a function for spheres. Can anybody help me with that? Basicly I need the function "CreateSphereFromHeightMap".

What are some options for creating terrain from heightmaps via NullEngine? I'm trying to create a serverside terrain for collision checks in a multiplayer game. The main issue is that Mesh.CreateGroundFromHeightMap involves loading an image and going through pixel data via canvas, none of which exists in node. Some ideas: Expose canvas + image api on the server: https://github.com/Automattic/node-canvas can provide Image and Canvas to NullEngine, though I've written a server side image processor recently that uses this tech and while it does work it isn't entirely straight forward because quite a few extra things need installed before it all works. I'm not sure how many babylon nullengine features use canvas/image, if its just this one then I doubt this route is worth it. Just loading the image in node: a small patch function that detects if we're in node and loads an image and gets its pixels using regular node fs. I'm not 100% sure how to do this but it sounds possible. This would kinda fork the logic inside of Mesh.CreateGroundFromHeightMap unless it was exposed in a new way. Go straight to the heightmap data and skip the images: https://doc.babylonjs.com/api/classes/babylon.vertexdata#creategroundfromheightmap - this does assume pixel data (UInt8 array of RGB? RGBA?) but has no dependency on canvas as far as I can tell. I don't understand the colorFilter (0.3, 0.59, 0.11) though, so someone would have to explain it to me. In my case I actually generated my heightmaps in node to begin with, and then saved them as images purely as a visual tool to see how the maps would look. I happen to be using these debug images and loading them into babylon because it works automagically! I could certain just skip all this and save them in some other format, like a 1D array of UInt8s (though in this scenario it would be ideal to skip RGBA and just have raw height data). I could probably add this to babylon by following the existing example if this is a feature people want. Once again I'm a total 3D noob, so if there is a much more trivial solution please let me know :D. I'm also willing to contribute, but I just don't want to make the wrong contribution.

Any way to create an animated terrain using CreateGroundFromHeightMap with a VideoTexture instead of a static image?

I'm sure there's probably a really simply explanation for this, and I've certainly put in the requisite time researching and experimenting... but I'm having a hard time getting collisions/physics to work properly with heightmaps. Here's the playground: https://www.babylonjs-playground.com/#UV2S4R#1. Basically, the balls fall until a collision, then they slow down, which is working as expected. However, when you uncomment line #25 (`ground.rotation.y = .1;`), it's almost like the mesh rotates, but the physicsImpostor does not. It seems like I recall reading somewhere that you have to use a Quaternion to rotate meshes with impostors, but I can't find that reference for the life of me. Any guidance would be much appreciated!

Hi guys, coming soon to the babylon.js near you - height maps using cannon.js! The image attached shows a prototype of the heightmap integration. There are a few problems to be solved, but 2.3 will have an impostor for heightmap (for now for cannon.js only).

Hi, I've been investigating how to create a large/streamed world in BabylonJs, but unfortunately I couldn't find anything helpful... given my (lack of) knowledge. I read this topic and (poorly) tried to implement a super simple proof of concept of what @joshcamas suggested, but I'm not quite sure of whether what I've done is correct. Most of the links I followed there were either dead, or the examples were using voxel or other stuff which was by far too complex for what I want, so that's why I decided to try to code something by myself, and this is the result: http://www.babylonjs-playground.com/#11SCXD#5 I'm thinking of setting a big size for each chunk and maybe having a lot of connected heightmap images, then load the corresponding one when the player approaches to it. By the way, haven't found any tool to generate a terrain/realistic map with textures that I can export into heightmap chunks (with its corresponding textures). Is there any software for that, or what shall I be using otherwise? Any feedback / advise would be very appreciated. Ultimately, I'd like to have the map on the server that is streamed to the clients that connect to it, and I'm not sure if what I've done could work or if I should be doing something else. Thanks!

Hi, I have a new question about how can I get a elevation of terrain. Now I am using this function:CreateGroundFromHeightMap() and I use a png as parameter. However, I dont get the accuracy that I would like having. I have 1 height by each 2meters so I consider that I should use this data to calculate the height of terrain instead of the intensity of color. Do you know how could I do it? Thanks JMJR

Hey Dave... I really need your help in finishing up my build in babylonjs terrain system. I think i may need some mods to the CreateGroundFromHeightmap or maybe help in creating a new CreateGroundFromUnityHeightmap where we go in and compensate for the height map coming from unity and 'post' process those height values to make it look good in babylon. Please take a look at the the video link explaining the problem (Also is attached a TestTerrain.png height map at 100 width/length and 50 height for to try to get to make look good with a creategroundfromheightmap call): Dear Dave - Please Help Try This Playground and see if can't get not so choppy around the edges: http://www.babylonjs-playground.com/#RDPE6#1

I need some help with color math. I am trying to create height maps in code... i can read raw terrain data and get the float raw height value for each pixel (x,y) as a value from 0 to 1 0 being black and 1 being white. I need to convert that 0 to 1 float to a black and white pixel based on the level of 0 to 1. Here is an example code block.. I need to basically create a Color.FromFloat type function as listed below: Texture2D duplicateHeightMap = new Texture2D(terrain.terrainData.heightmapWidth, terrain.terrainData.heightmapHeight, TextureFormat.ARGB32, false); float[,] rawHeights = terrain.terrainData.GetHeights(0, 0, terrain.terrainData.heightmapWidth, terrain.terrainData.heightmapHeight); /// run through the array row by row for (int y=0; y < duplicateHeightMap.height; y++) { for (int x=0; x < duplicateHeightMap.width; x++) { // height map color (0 to 1) float rawHeight = rawHeights[x, y]; // NOTE: HERE IS WHERE I NEED HELP (MAYBE GRAYSCALE ???) Color color = Color.FromFloat(rawHeight); duplicateHeightMap.SetPixel(x, y, color); } } // Apply all SetPixel calls duplicateHeightMap.Apply();

When using CreateGroundFromHeightmap... When i use the camera to move around on ground IS VERY SLOW and VERY CHOPPY... AND LOWERS FPS down to 15fps. This is my code for creating Ground: // Parse scene native mesh and heightmap terrains var terrains:BABYLON.Mesh[] = this._scene.getMeshesByTags("[TERRAIN]"); if (terrains != null) { terrains.forEach((terrain)=>{ console.log(terrain.metadata); if (terrain.metadata != null && terrain.metadata.properties != null) { if (terrain.metadata.properties.heightmapBase64) { var tempBase64:string = terrain.metadata.properties.heightmapBase64; var terrainWidth:number = terrain.metadata.properties.width; var terrainLength:number = terrain.metadata.properties.length; var terrainHeight:number = terrain.metadata.properties.height; var minimumHeightLevel:number = terrain.metadata.properties.minimumHeightLevel; var maximumHeightLevel:number = terrain.metadata.properties.maximumHeightLevel; var groundTessellation:number = terrain.metadata.properties.groundTessellation; var surfaceMaterialId:string = terrain.metadata.properties.surfaceMaterialId; var surfaceMaterialInst:BABYLON.Material = null; if (surfaceMaterialId != null && surfaceMaterialId !== "") { var material:BABYLON.Material = this._scene.getMaterialByID(surfaceMaterialId); surfaceMaterialInst = material; } BABYLON.MeshBuilder.CreateGroundFromHeightMap((terrain.name + "_Mesh"), tempBase64, { width: terrainWidth, height: terrainLength, subdivisions: groundTessellation, minHeight: minimumHeightLevel, maxHeight: maximumHeightLevel, updatable: true, onReady: (mesh:BABYLON.Mesh) => { mesh.parent = terrain; mesh.scaling = terrain.scaling.clone(); mesh.position.x -= terrain.position.x; mesh.position.z -= terrain.position.z; mesh.checkCollisions = true; if (surfaceMaterialInst != null) { mesh.material = surfaceMaterialInst; } } }, this._scene); } else { // TODO: Native Mesh - Note should try do all c# editor side } } }); } Any help would be awesome... as always

So I would like to have my terrain cast shadows on it's self, like the mountains shadow the rest of the terrain, etc. But when I try to do this by adding the groundPlane to the shadowGenerator, the entire mesh turns black. Is there a way to do this, or is this not something that can be done yet? I really hope to be able to pull this off!

Hi All I am experimenting with heightmaps and have encountered a strange glitch (but more likely a noob mistake!). Basically when I use certain image files (supported file formats) for the heightmap and/or texture I discover that the heightmap does not work. See below: Test 1: Here I am referencing two files from WikiMedia for the heightmap and texture (SUCCESS) http://playground.babylonjs.com/#KYAC1#0 (see lines: 19 and 21) Test 2: Here I am referencing a different texture file but the same heightmap as above (FAILURE) http://playground.babylonjs.com/#KYAC1#2 I thought the problem might be a permissions / security issue - therefore I did two additional experiments; (a) copied all JS and image files locally and reran the test (failed), and (b) copies the image files on to my own web server and tried to reference them from that location (failed). Therefore, its possibly an issue with the file format or image format? So I am left wondering why the texture file in the above example wont work - if anyone can shed some light on this matter I would appreciate - Thanks...

Hi, I was wondering if someone could explain to me how to go about editing height map terrain.I know the Basics: save vertices+normals to array, edit their positions in a for loop and apply changes to height map. I checked out the code for WorldMonger but it looks quite complicated in places(especially at any of the 'normal' code, but really the whole thing). I would like to be able to get to a point where I can code something like this and know why it works how it works. I died a bit of research into getVerticesData and was able to do basic editing of terrain(say for example in for loop, divide position value by 3 etc, and reapply to height map). So I was wondering if someone could point me to some tutorials on the subject or give some further explanation of how this works? Thanks in advance.

I notice that there has been some discussion recently about heightmaps and the BJS tutorial suggests getting heightmaps by using " software such as “Terragen”, or ”Picogen”. Well this is an intro to a very easy to use way to get greyscale heightmaps. terrain.party Once you get to the page you are somewhere in Finland, but click on the magnifying glass (top left) and type in the name of a city/town/village. It takes you to the local area. Now adjust the zoom (top left +/-, or scroll wheel). With mouse in the blue grid you can drag the grid. With mouse outside the blue grid click drag to move the geography (like google maps). On the right of the screen are +/- buttons to change the size of the blue grid (8-60km). Now download - gives you a greyscale heightmap of the area you selected in the blue grid. I have tried typing in small village names and get good results - though essentially names the are "english". Try Beddgelert - a real tiny village in Wales of myth and legend - or for Wingy "Bessemer" And just to show you an example : RSD The red cube is a tiny place - but they made a film about events that happened there - any guesses??. If you open your console it prints out the number of meshes in the scene (should be 17). One is the red cube, the other 16 are the 4x4 subdivision of the terrain.- and er .... no seams. This particular terrain is 8x8 km - so the tiles are 2x2km. And if you want to create your own terrains look at L3DT. The free addition alllows you to save heightmaps 2049x2049 pixels. The "Pro" edition (indie and commercial - above or below $250K) allows 131,072 × 131,072 pixels - which is a big terrain Maybe of use to some people. cheers, gryff

Hi guys I've "nearly" completed a project and come to a stage where I have a height map and a flying steampunk ship ("yep I'm a steampunk fanatic") anyways, I have a stretched sphere surrounding the ship and I wish to use that as the collision point to the heightmap. I have used rays and it work really well but I would like more of a realistic collision i.e. When the ship hits a mountain head on, instead of going up and over the mountain I would like it to collide and to move left or right http://www.babylonjs-playground.com/#1L0CBO#2 I remember on a previous submission @RaananW made an impressive playground for a car to travel over a heightmap. which I tried to understand, however for a newbie its a little complex http://www.babylonjs-playground.com/#UGMIH#3 any help or advice would be greatly appreciated

http://www.babylonjs-playground.com/#1LEGTP#1 Commented code : each rolling ball has a tiny line on its top, normal to terrain.

Hi, How can I retrive heightmap vertices? I tried with the following: var Positions = ground.getVerticesData(BABYLON.VertexBuffer.PositionKind); It returns null. Is there a speical way to get all the vertices from my height map?

Hey guys, I am trying to place some boxes randomly on a heightmap. Easy, eh? Well, therefor I want to determine the current altitude at some random coordinates by casting a ray to see where it intersects with the ground mesh as suggested here: http://www.html5gamedevs.com/topic/2248-retrieve-heightmap-altitude/ That's what I got so far: http://www.babylonjs-playground.com/#HLQ0L#0 But it always returns a hit: false ... I feel like I am missing something here or just doing it wrong but I can't seem to figure out what. Any idea?

Hi guys! I have a mesh (ground) that is created with this function: ground = BABYLON.Mesh.CreateGroundFromHeightMap("ground", captureFilePath, 200, 200, 250, 0, 10, scene, false); At some point, I know that the file (captureFilePath) has changed (same file, but data has changed), and so, I want to update the mesh. I tried to do like this: ground.dispose(); ground = BABYLON.Mesh.CreateGroundFromHeightMap("ground", captureFilePath, 200, 200, 250, 0, 10, scene, false); But nothing changed. I feel like my first image is cached somewhere, because if I change the file (not only the data, but also the name), eveything goes well. My project is an offline project and the file is located on my local drive. Any idea? Thanks! Fred

Hello, I use the function CreateGroundFromHeightMap in order to generate a bumpy ground. How can I retrieve the y value giving a x and z position ? Thanks for your feedback !

Hi guys, Its posible to get the height of a heightmap given the X and Z coordinates? Here i show an image explaining what i want: Thanks in advance, Carlos R.

I see that a flat terrain generated using CreateGround stops my object from falling through but terrain generated using CreateGroundFromHeightMap objects simply fall through using both basic phsyics and cannon.js which leads me to wonder if heightmap terrain even supports physics yet or not.

Hi all, I am new here so excuse me if this is the wrong section of the forum to ask this question. I have created 2 planes from 2 different heightmaps (which have almost similar edges) when i place the 2 planes next to each other, there are some gaps in between them (some places are higher than the other on the line between the 2 planes) is there any way to join those 2 heightmaps? i know it is possible by merging the 2 heightmap images and create one plane of that, but the reason i don't want to do it is that generation of each plane is dynamic (unlimited world) see attached image as an example Thanks in advance

Hello, I have a question, I'd like te represent a winding road and either side, there will be empty space ... Would it be possible to do this with a heightmap, and if so, how to make the empty space ???